From 89378d2acdf90b9c10d12d636da4f201ca96e830 Mon Sep 17 00:00:00 2001
From: Guido Jansen <x@gui.do>
Date: Thu, 27 Aug 2026 14:41:24 +0200
Subject: [PATCH] Homepage feed: show relative post age (e.g. '3d ago'),
 computed client-side; absolute date stays as no-JS fallback + hover title

---
 src/components/PostCard.astro |  2 +-
 src/layouts/Base.astro        | 26 ++++++++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/PostCard.astro b/src/components/PostCard.astro
index 753faad..f137e06 100644
--- a/src/components/PostCard.astro
+++ b/src/components/PostCard.astro
@@ -96,7 +96,7 @@ const quoteUrl = quote ? muPost(quote.handle, quote.uri) : undefined;
   }
 
   <div class="post-foot">
-    <a class="post-date" href={postUrl} rel="noopener">{date}</a>
+    <a class="post-date" href={postUrl} rel="noopener" data-ts={post.createdAt} title={date}>{date}</a>
 
     <a class="post-act" href={postUrl} rel="noopener" data-count={post.replyCount} aria-label="Reply">
       <svg class="act-ico" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 064f17c..cf52183 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -184,6 +184,32 @@ const orgLd = {
       }
     </script>
 
+    <script is:inline>
+      // Relative post age (e.g. "2h ago"), computed client-side so it's accurate at view
+      // time, not frozen at build time. The absolute date stays as the no-JS fallback + title.
+      {
+        const rel = (ts) => {
+          const s = Math.round((Date.now() - ts) / 1000);
+          if (s < 45) return 'just now';
+          const m = Math.round(s / 60);
+          if (m < 60) return m + 'm ago';
+          const h = Math.round(m / 60);
+          if (h < 24) return h + 'h ago';
+          const d = Math.round(h / 24);
+          if (d < 7) return d + 'd ago';
+          const w = Math.round(d / 7);
+          if (w < 5) return w + 'w ago';
+          const mo = Math.round(d / 30);
+          if (mo < 12) return mo + 'mo ago';
+          return Math.round(d / 365) + 'y ago';
+        };
+        for (const el of document.querySelectorAll('.post-date[data-ts]')) {
+          const ts = Date.parse(el.dataset.ts);
+          if (Number.isFinite(ts)) el.textContent = rel(ts);
+        }
+      }
+    </script>
+
     <script is:inline>
       // Open external links in a new tab.
       for (const a of document.querySelectorAll('a[href^="http"]')) {
-- 
knotmirror 0.0.1