feat(website): add debug dialog

Ctrl+Alt+Shift+D
ScuffleCloud · Nov 6, 2023 · 99b08bb · 99b08bb
1 parent f1b8c44
commit 99b08bb
Show file tree

Hide file tree

Showing 3 changed files with 175 additions and 24 deletions.
diff --git a/platform/website/src/components/dev-banner.svelte b/platform/website/src/components/dev-banner.svelte
@@ -0,0 +1,165 @@
+<script lang="ts">
+	import Fa from "svelte-fa";
+	import {
+		faBug,
+		faCalendar,
+		faCircleInfo,
+		faCode,
+		faCodeBranch,
+		faCodeCommit,
+		faCube,
+		faGears,
+		faLink,
+	} from "@fortawesome/free-solid-svg-icons";
+	import Dialog from "./dialog.svelte";
+	import {
+		PUBLIC_CF_TURNSTILE_KEY,
+		PUBLIC_GQL_ENDPOINT,
+		PUBLIC_GQL_WS_ENDPOINT,
+		PUBLIC_GQL_VERSION,
+	} from "$env/static/public";
+	import { websocketOpen } from "$/store/websocket";
+	import { dev } from "$app/environment";
+
+	let showDebugDialog = false;
+
+	function onKeyDown(event: KeyboardEvent) {
+		if (event.ctrlKey && event.altKey && event.shiftKey && event.key === "D") {
+			showDebugDialog = !showDebugDialog;
+			event.preventDefault();
+		}
+	}
+</script>
+
+<svelte:window on:keydown={onKeyDown} />
+
+{#if dev}
+	<span class="dev-banner">
+		<span>
+			<Fa icon={faCode} />
+			In Development
+		</span>
+		<span>
+			<Fa icon={faCircleInfo} />
+			Attention! This is a development server! Go to <a href="https://scuffle.tv">scuffle.tv</a>
+		</span>
+		<button class="button" on:click={() => (showDebugDialog = true)}>
+			<Fa icon={faBug} />
+			Show Debug Info
+		</button>
+	</span>
+{/if}
+
+{#if showDebugDialog}
+	<Dialog on:close={() => (showDebugDialog = false)}>
+		<div class="debug-container">
+			<div class="title">
+				<h1>Debug Info</h1>
+				<code>Ctrl+Alt+Shift+D</code>
+			</div>
+			<span>
+				<Fa icon={faCodeCommit} fw />
+				Commit Hash:
+				<code>{import.meta.env.VITE_GIT_COMMIT}</code>
+			</span>
+			<span>
+				<Fa icon={faCalendar} fw />
+				Commit Date:
+				<code>{import.meta.env.VITE_GIT_COMMIT_DATE}</code>
+			</span>
+			<span>
+				<Fa icon={faCodeBranch} fw />
+				Branch:
+				<code>{import.meta.env.VITE_GIT_BRANCH}</code>
+			</span>
+			<span>
+				<Fa icon={faGears} fw />
+				Build Date:
+				<code>{import.meta.env.VITE_BUILD_DATE}</code>
+			</span>
+			<span>
+				<Fa icon={faLink} fw />
+				{#if websocketOpen}
+					Websocket Connected
+				{:else}
+					Websocket Disconnected
+				{/if}
+			</span>
+			<div>
+				<span>
+					<Fa icon={faCube} fw />
+					Vite
+				</span>
+				<ul>
+					{#each Object.entries(import.meta.env) as [key, value]}
+						<li><code>{key}</code>: <code>{value}</code></li>
+					{/each}
+				</ul>
+			</div>
+			<div>
+				<span>
+					<Fa icon={faCube} fw />
+					Environment Variables
+				</span>
+				<ul>
+					{#each Object.entries( { PUBLIC_CF_TURNSTILE_KEY, PUBLIC_GQL_ENDPOINT, PUBLIC_GQL_WS_ENDPOINT, PUBLIC_GQL_VERSION }, ) as [key, value]}
+						<li><code>{key}</code>: <code>{value}</code></li>
+					{/each}
+				</ul>
+			</div>
+		</div>
+	</Dialog>
+{/if}
+
+<style lang="scss">
+	@import "../assets/styles/variables.scss";
+
+	.dev-banner {
+		color: $textColor;
+		background-color: $primaryColor;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.25rem 0.5rem;
+
+		a {
+			color: $textColor;
+		}
+	}
+
+	.button {
+		color: $textColor;
+		border: 1px solid $textColor;
+	}
+
+	.debug-container {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		// font-weight: 400;
+	}
+
+	code {
+		font-size: 0.9rem;
+	}
+
+	.title {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: 0.5rem;
+
+		code {
+			background-color: black;
+			border-radius: 0.25rem;
+			padding: 0.25rem 0.5rem;
+		}
+	}
+
+	ul {
+		padding-left: 1rem;
+		margin: 0;
+		font-weight: 400;
+	}
+</style>
diff --git a/platform/website/src/routes/+layout.svelte b/platform/website/src/routes/+layout.svelte
@@ -10,8 +10,7 @@
 	import type { LayoutData } from "./$types";
 	import { building, dev } from "$app/environment";
 	import Spinner from "$/components/spinner.svelte";
-	import Fa from "svelte-fa";
-	import { faCircleInfo } from "@fortawesome/free-solid-svg-icons";
+	import DevBanner from "$/components/dev-banner.svelte";
 
 	export let data: LayoutData;
 
@@ -35,14 +34,7 @@
 <header>
 	<a href="#main" class="skip-to-main">Skip to main content</a>
 	<div class="top-nav">
-		{#if dev}
-			<span class="dev-banner">
-				<Fa icon={faCircleInfo} />
-				<span>
-					Attention! This is a development server! Go to <a href="https://scuffle.tv">scuffle.tv</a>
-				</span>
-			</span>
-		{/if}
+		<DevBanner />
 		<TopNav />
 	</div>
 	{#if !building}
@@ -88,20 +80,6 @@
 		}
 	}
 
-	.dev-banner {
-		color: $textColor;
-		background-color: $primaryColor;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0.25rem;
-
-		a {
-			color: $textColor;
-		}
-	}
-
 	.top-nav {
 		grid-area: top-nav;
 	}

diff --git a/platform/website/vite.config.ts b/platform/website/vite.config.ts
@@ -1,6 +1,14 @@
 import { defineConfig, searchForWorkspaceRoot } from "vite";
 import { sveltekit } from "@sveltejs/kit/vite";
 import { resolve } from "path";
+import { execSync } from "child_process";
+
+process.env.VITE_GIT_COMMIT = execSync("git rev-parse --short HEAD").toString().trim();
+process.env.VITE_GIT_COMMIT_DATE = new Date(
+	execSync("git log -1 --format=%cI").toString().trim(),
+).toISOString();
+process.env.VITE_GIT_BRANCH = execSync("git branch --show-current").toString().trim();
+process.env.VITE_BUILD_DATE = new Date().toISOString();
 
 export default defineConfig({
 	plugins: [sveltekit()],