move general TimeSince

src/components/TimeAlive.astro

@@ -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>

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>

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>
+    <div class="text-md">
-    AGE: <TimeAlive client:react />
+        <p>AGE: <TimeSince date={new Date("2004-11-04")} client:react /></p>
+    </div>
 </Layout>