From b5d73d80b86039965fbe9d47c432cdc05358f1d0 Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Tue, 9 Sep 2025 11:48:41 +0100
Subject: [PATCH] move general TimeSince

---
 src/components/TimeAlive.astro | 30 ------------------------------
 src/components/TimeSince.astro | 32 ++++++++++++++++++++++++++++++++
 src/pages/about.astro          |  7 ++++---
 3 files changed, 36 insertions(+), 33 deletions(-)
 delete mode 100644 src/components/TimeAlive.astro
 create mode 100644 src/components/TimeSince.astro

diff --git a/src/components/TimeAlive.astro b/src/components/TimeAlive.astro
deleted file mode 100644
index b07712f4..00000000
--- a/src/components/TimeAlive.astro
+++ /dev/null
@@ -1,30 +0,0 @@
-<span id="time-alive"></span>
-
-<script>
-    const birthDate = new Date("2004-11-04");
-    const birthDateMS = Math.floor(birthDate.getTime());
-    const currentTimeMS = Math.floor(new Date().getTime());
-
-    let interval = 1; // ms
-    let msElapsed = 0;
-
-    function updateTimeAlive() {
-        let years = Math.floor(
-            (currentTimeMS - birthDateMS + msElapsed) /
-                (60 * 60 * 24 * 365 * 1000)
-        );
-        let milliseconds = currentTimeMS - birthDateMS + msElapsed;
-
-        const element = document.getElementById("time-alive");
-        if (element) {
-            element.innerText = `${years}y or ${milliseconds}ms`;
-        }
-    }
-
-    updateTimeAlive();
-
-    setInterval(() => {
-        msElapsed += interval;
-        updateTimeAlive();
-    }, interval);
-</script>
diff --git a/src/components/TimeSince.astro b/src/components/TimeSince.astro
new file mode 100644
index 00000000..2ca5dfb0
--- /dev/null
+++ b/src/components/TimeSince.astro
@@ -0,0 +1,32 @@
+---
+const { date } = Astro.props;
+const uniqueId = `time-since-${Math.random().toString(36).substring(2, 9)}`;
+---
+
+<span id={uniqueId} data-date={date.getTime()}></span>
+
+<script define:vars={{ uniqueId, dateMS: date.getTime() }}>
+    const currentTimeMS = Math.floor(new Date().getTime());
+
+    let interval = 1; // ms
+    let msElapsed = 0;
+
+    function updateTimeAlive() {
+        let years = Math.floor(
+            (currentTimeMS - dateMS + msElapsed) / (60 * 60 * 24 * 365 * 1000)
+        );
+        let milliseconds = currentTimeMS - dateMS + msElapsed;
+
+        const element = document.getElementById(uniqueId);
+        if (element) {
+            element.innerText = `${years}y or ${milliseconds}ms`;
+        }
+    }
+
+    updateTimeAlive();
+
+    setInterval(() => {
+        msElapsed += interval;
+        updateTimeAlive();
+    }, interval);
+</script>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index e368a409..9bfaa3af 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,9 +1,10 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import TimeAlive from "../components/TimeAlive.astro";
+import TimeSince from "../components/TimeSince.astro";
 ---
 
 <Layout currentPage="about">
-    <h1 class="text-md">about page</h1>
-    AGE: <TimeAlive client:react />
+    <div class="text-md">
+        <p>AGE: <TimeSince date={new Date("2004-11-04")} client:react /></p>
+    </div>
 </Layout>