feat: add active clock / discord status

Signed-off-by: Thaddeus Kuah <[email protected]>
thaddeuskkr · Feb 23, 2025 · 272df60 · 272df60
1 parent 2ac43c4
commit 272df60
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -6,6 +6,8 @@ import Navigation from "../components/Navigation.astro";
 import Layout from "../layouts/BaseLayout.astro";
 import "../styles/global.css";
 const path = Astro.url.pathname.replace(/\//g, "");
+const response = await fetch("https://lanyard.tkkr.dev/v1/users/275830234262142978");
+const discordPresence = await response.json();
 ---
 
 <Layout title=`thaddeus kuah • ${path}`>
@@ -20,7 +22,17 @@ const path = Astro.url.pathname.replace(/\//g, "");
             />
             <div class="text-center md:text-left">
                 <h1 class="mb-1 text-3xl font-bold">Thaddeus Kuah</h1>
-                <p class="mb-3 text-zinc-300">Full-time student at Nanyang Polytechnic.</p>
+                <p class="mb-2 text-zinc-300">Full-time student at Nanyang Polytechnic.</p>
+                <div class="mb-4 text-zinc-400">
+                    <p class="font-semibold">
+                        Time in Singapore:<span id="time" class="code ml-1.5 font-normal">Loading...</span>
+                    </p>
+                    <p>
+                        I'm currently <span class="font-semibold"
+                            >{discordPresence.success ? discordPresence.data.discord_status : "offline"}</span
+                        > on Discord.
+                    </p>
+                </div>
                 <div class="flex flex-row flex-wrap justify-center gap-2 md:justify-start">
                     <a
                         class="flex items-center justify-center gap-1 rounded-md border-2 border-purple-100 px-2 py-0.5 transition-colors hover:border-purple-400"
@@ -113,3 +125,19 @@ const path = Astro.url.pathname.replace(/\//g, "");
         </div>
     </div>
 </Layout>
+
+<script>
+    function updateTime() {
+        const timeEl = document.getElementById("time");
+        if (timeEl)
+            timeEl.textContent = new Date()
+                .toLocaleTimeString("en-SG", {
+                    hour: "2-digit",
+                    minute: "2-digit",
+                    second: "2-digit",
+                })
+                .toUpperCase();
+    }
+    updateTime();
+    setInterval(updateTime, 1000);
+</script>
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -5,6 +5,7 @@ html {
     font-family: "Geist", sans-serif;
 }
 
-code {
+code,
+.code {
     font-family: "Geist Mono", monospace;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,6 +5,7 @@ html { @@
         font-family: "Geist", sans-serif;
     }
-    code {
+    code,
+    .code {
         font-family: "Geist Mono", monospace;
     }