From b807b7c57701ecf4b0eb41ebc2d19c3f1260007e Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Mon, 21 Jul 2025 22:25:56 +0100
Subject: [PATCH] feat: online side widget

---
 src/components/Clock.svelte    |  2 +-
 src/components/Computer.svelte | 21 +++------------------
 src/components/Online.svelte   | 31 +++++++++++++++++++++++++++++++
 src/components/Socials.astro   |  2 +-
 src/layouts/Layout.astro       |  2 ++
 src/states.svelte.ts           |  9 +++++++++
 src/style.css                  |  6 +++++-
 src/types.d.ts                 | 15 +++++++++++++++
 8 files changed, 67 insertions(+), 21 deletions(-)
 create mode 100644 src/components/Online.svelte
 create mode 100644 src/states.svelte.ts
 create mode 100644 src/types.d.ts

diff --git a/src/components/Clock.svelte b/src/components/Clock.svelte
index 6d4fc42..0a31562 100644
--- a/src/components/Clock.svelte
+++ b/src/components/Clock.svelte
@@ -17,7 +17,7 @@
 	});
 </script>
 
-<section class="font-mono !py-2.5 min-w-40 h-min">
+<section class="side">
 	<legend>clock</legend>
 
 	<span class="block font-bold text-lg">{clock}</span>
diff --git a/src/components/Computer.svelte b/src/components/Computer.svelte
index b5f4a7c..a00cbbe 100644
--- a/src/components/Computer.svelte
+++ b/src/components/Computer.svelte
@@ -2,22 +2,7 @@
 	import { Area, Axis, Chart, Highlight, LinearGradient, Svg, Tooltip } from "layerchart";
 	import { scaleTime } from "d3-scale";
 	import { onMount } from "svelte";
-
-	interface ApiResponse {
-		online: boolean;
-		uptimeStart: number;
-		totals: {
-			keys: number;
-			clicks: number;
-		};
-		graph: {
-			timestamp: string;
-			cpu: number;
-			ram: number;
-			keys: number;
-			clicks: number;
-		}[];
-	}
+	import { computerData } from "../states.svelte";
 
 	type GraphData = {
 		timestamp: Date;
@@ -44,8 +29,8 @@
 		let uptimeStart: Date;
 
 		const get = async () => {
-			const request = await fetch("https://api.trafficlunar.net/computer");
-			const data = (await request.json()) as ApiResponse;
+			const data = computerData.data; // no point in this; looks better
+			if (!data) return;
 
 			online = data.online;
 			uptimeStart = new Date(data.uptimeStart * 1000); // convert to milliseconds
diff --git a/src/components/Online.svelte b/src/components/Online.svelte
new file mode 100644
index 0000000..27ea35f
--- /dev/null
+++ b/src/components/Online.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { computerData } from "../states.svelte";
+
+	onMount(() => {
+		const get = async () => {
+			const request = await fetch("https://api.trafficlunar.net/computer");
+			const data = (await request.json()) as ApiResponse;
+			computerData.data = data;
+		};
+
+		get();
+		const interval = setInterval(get, 30000);
+		return () => clearInterval(interval);
+	});
+</script>
+
+<section class="side">
+	<legend>status</legend>
+
+	<div class="flex justify-center items-center absolute -top-2 right-2 -z-10">
+		<div class="size-4 rounded-full {computerData.data?.online ? 'bg-green' : 'bg-red'}"></div>
+		<div
+			class="size-4 rounded-full absolute animate-duration-2s animate-delay-2s {computerData.data?.online ? 'bg-green animate-ping' : 'bg-red'}"
+		></div>
+	</div>
+
+	<span>I'M</span>
+	<span class={`font-black ${computerData.data?.online ? "text-green" : "text-red"}`}>{computerData.data?.online ? "ONLINE" : "OFFLINE"}.</span>
+	<p class="text-surface2 text-xs mt-1">feel free to reach out!</p>
+</section>
diff --git a/src/components/Socials.astro b/src/components/Socials.astro
index 4bec0c7..9b097e9 100644
--- a/src/components/Socials.astro
+++ b/src/components/Socials.astro
@@ -9,7 +9,7 @@ import LastFMIcon from "../assets/icons/socials/lastfm.svg";
 import MailIcon from "../assets/icons/socials/mail.svg";
 ---
 
-<section class="!p-2 min-w-40">
+<section class="side !p-2">
 	<legend>socials</legend>
 	<ul class="grid grid-cols-4 [&_a]:flex [&_a]:justify-center [&_a]:size-full [&_a]:py-1">
 		<li class="z-50">
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 3dcc563..3de6994 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -6,6 +6,7 @@ import "../style.css";
 
 import Socials from "../components/Socials.astro";
 import Clock from "../components/Clock.svelte";
+import Online from "../components/Online.svelte";
 import Footer from "../components/Footer.astro";
 
 import KawaiiLogo from "../assets/kawaii.svg";
@@ -49,6 +50,7 @@ import Lunar from "../assets/lunar.svg";
 				<div class="flex flex-col justify-center w-fit max-[60rem]:flex-row max-[60rem]:mt-0 max-[60rem]:gap-2">
 					<Socials />
 					<Clock client:only />
+					<Online client:only />
 				</div>
 			</div>
 
diff --git a/src/states.svelte.ts b/src/states.svelte.ts
new file mode 100644
index 0000000..6105d1f
--- /dev/null
+++ b/src/states.svelte.ts
@@ -0,0 +1,9 @@
+type ComputerData = {
+	data: ApiResponse | undefined;
+};
+
+// prevents sending 2 requests to the same route in my API
+// check Online.svelte for where data is fetched
+export let computerData = $state<ComputerData>({
+	data: undefined,
+});
diff --git a/src/style.css b/src/style.css
index 03ca4b4..95aed14 100644
--- a/src/style.css
+++ b/src/style.css
@@ -76,7 +76,11 @@ body {
 }
 
 section {
-	@apply bg-base-darker p-4 rounded-lg relative border border-surface0 shadow-md;
+	@apply bg-base-darker p-4 rounded-lg relative border border-surface0 shadow-md h-min;
+}
+
+section.side {
+	@apply w-40 font-mono py-2.5;
 }
 
 section:has(legend) {
diff --git a/src/types.d.ts b/src/types.d.ts
new file mode 100644
index 0000000..bb21572
--- /dev/null
+++ b/src/types.d.ts
@@ -0,0 +1,15 @@
+interface ApiResponse {
+	online: boolean;
+	uptimeStart: number;
+	totals: {
+		keys: number;
+		clicks: number;
+	};
+	graph: {
+		timestamp: string;
+		cpu: number;
+		ram: number;
+		keys: number;
+		clicks: number;
+	}[];
+}