[e] experimentally add debug information on website

.forgejo/workflows/build.yml

@@ -28,6 +28,13 @@ jobs:
       - name: ⬇️ Checkout Repository
         uses: actions/checkout@v4
 
+      - name: Update debug.json with Git info
+        run: |
+          git rev-parse HEAD > commit_hash
+          git describe --tags --abbrev=0 > tag
+          sed -i "s|\"commit\": \"\"|\"commit\": \"$(cat commit_hash)\"|" static/assets/debug.json
+          sed -i "s|\"tag\": \"\"|\"tag\": \"$(cat tag)\"|" static/assets/debug.json
+
       - name: 🐋 Build Container
         run: |
           # extract tag name without the prefix

src/lib/components/Home.svelte

@@ -1,8 +1,11 @@
 <script lang='ts'>
     import IconChevronDown from 'svelte-material-icons/ChevronDown.svelte';
     import { smoothScrollTo, handleKeydown, helloWorld } from '$lib/index';
+    import { onMount } from 'svelte';
 
-    helloWorld("ascii", "hi there, curious one. have fun exploring! :D")
+    onMount(() => {
+        helloWorld("ascii", "hi there, curious one. have fun exploring! :D")
+    });
 </script>
 
 <div id="home" class="section">
@@ -21,7 +24,7 @@
                     style="mask-type: alpha"
                     maskUnits="userSpaceOnUse"
                     x="27"
-                    y="0"
+                    y="0"t
                     width="90"
                     height="145"
                 >

src/lib/components/Socials.svelte

@@ -15,8 +15,12 @@
 	import IconMastodon from 'svelte-material-icons/Mastodon.svelte';
 	import IconSteam from 'svelte-material-icons/Steam.svelte';
 
+	// Variables
 	let showMore = false;
 	let emoji = '';
+	let commitHash = '';
+	let gitTag = '';
+	let showDebugInfo = false;
 
 	export function changeEmoji() {
 		emoji = emojis[Math.floor(Math.random() * emojis.length)];
@@ -33,9 +37,25 @@
 		}
 	}
 
-	onMount(() => {
+	onMount(async () => {
+		const urlParams = new URLSearchParams(window.location.search);
+		showDebugInfo = urlParams.has('debug') && urlParams.get('debug') === 'true';
+
+		if (showDebugInfo) {
+			try {
+				const response = await fetch('/assets/debug.json');
+				const jsonData = await response.json();
+
+				commitHash = jsonData.commit;
+				gitTag = jsonData.tag;
+			} catch (error) {
+				console.error('Error loading data:', error);
+				// Display an error message or loading state
+			}
+		}
+
         changeEmoji();
-    });
+	});
 </script>
 
 <div id="socials" class="section">
@@ -266,6 +286,16 @@
 			<span class="dynamic-icon" on:click={() => openWebsite('/old')}
 				>{@html emoji}</span
 			> by Sangelo.
+			{#if showDebugInfo}
+				<div class="debug-ct">
+					<div class="debug-info">
+						<p>Commit Hash: </p><pre>{commitHash}</pre>
+					</div>
+					<div class="debug-info">
+						<p>Git Tag: </p><pre>{gitTag}</pre>
+					</div>
+				</div>
+			{/if}
 		</p>
 	</footer>
 </div>

src/styles/socials.scss

@@ -178,6 +178,28 @@
 			font-weight: 800;
 			margin-bottom: -0.7em;
 		}
+
+		.debug-ct {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+			gap: 0;
+			margin: 1em 0 1em 0;
+		}
+
+		.debug-info {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			margin: 0;
+			padding: 0;
+			gap: 0.5em;
+
+			p, pre {
+				margin: 0;
+			}
+		}
 	}
 
 	@import './mobile/socials.scss';

static/assets/debug.json

@@ -0,0 +1,4 @@
+{
+    "commit": "",
+    "tag": ""
+}