From a897894791fd1e372fb0a076497670c9bb7f44e5 Mon Sep 17 00:00:00 2001
From: OpenCode Worker <worker@example.com>
Date: Wed, 3 Jun 2026 10:58:15 -0500
Subject: [PATCH] feat: link post tags to static tag pages

---
 app/posts/[slug]/page.tsx    | 11 ++++++-----
 components/blog/PostCard.tsx | 34 +++++++++++++++++++++++-----------
 2 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
index aff417a..281b9f1 100644
--- a/app/posts/[slug]/page.tsx
+++ b/app/posts/[slug]/page.tsx
@@ -1,5 +1,6 @@
 import { notFound } from 'next/navigation'
-import { getPosts, getPost } from '@/lib/posts'
+import Link from 'next/link'
+import { getPosts, getPost, tagToSlug } from '@/lib/posts'
 import { TableOfContents } from '@/components/blog/TableOfContents'
 import { ScrollToTop } from '@/components/ui/ScrollToTop'
 import { ReadingProgress } from '@/components/ui/ReadingProgress'
@@ -38,7 +39,7 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
         <div className="grid grid-cols-1 lg:grid-cols-[1fr_200px] gap-8">
           <article>
             <header className="mb-12">
-              <time className="font-mono text-sm text-ink-soft">{new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
+              <time className="font-mono text-sm text-ink-soft" dateTime={post.date}>{new Date(post.date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
               <h1 className="heading-xl text-ink mt-3 mb-2">
                 {post.title}
               </h1>
@@ -49,7 +50,7 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
               {post.coverImage && (
                 <img
                   src={post.coverImage}
-                  alt="Cover image"
+                  alt={`Cover image for ${post.title}`}
                   className="w-full h-64 object-cover rounded-xl my-6"
                   loading="lazy"
                 />
@@ -57,9 +58,9 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
               {post.tags.length > 0 && (
                 <div className="flex flex-wrap gap-2 mt-4">
                   {post.tags.map((tag) => (
-                    <span key={tag} className="rounded-full bg-surface px-3 py-1 text-xs font-medium text-ink-soft border border-border">
+                    <Link key={tag} href={`/tags/${tagToSlug(tag)}/`} className="rounded-full bg-surface px-3 py-1 text-xs font-medium text-ink-soft border border-border transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
                       {tag}
-                    </span>
+                    </Link>
                   ))}
                 </div>
               )}
diff --git a/components/blog/PostCard.tsx b/components/blog/PostCard.tsx
index 4c15971..21eab35 100644
--- a/components/blog/PostCard.tsx
+++ b/components/blog/PostCard.tsx
@@ -4,6 +4,18 @@ import Link from 'next/link';
 import { m } from 'motion/react';
 import type { PostMeta } from '@/lib/posts';
 
+const tagToClientSlug = (tag: string): string =>
+  tag
+    .normalize('NFKD')
+    .toLowerCase()
+    .replace(/[\u0300-\u036f]/g, '')
+    .replace(/\+/g, ' plus ')
+    .replace(/#/g, ' sharp ')
+    .replace(/[\\/]+/g, ' ')
+    .replace(/[^\p{L}\p{N}]+/gu, '-')
+    .replace(/-{2,}/g, '-')
+    .replace(/^-|-$/g, '');
+
 export function PostCard({ slug, title, date, excerpt, tags = [], author, readingTime, index = 0, coverImage }: PostMeta & { index?: number }) {
   return (
     <m.article
@@ -18,14 +30,14 @@ export function PostCard({ slug, title, date, excerpt, tags = [], author, readin
           <div className="mb-4 overflow-hidden rounded-lg">
             <img
               src={coverImage}
-              alt="Cover image"
+              alt={`Cover image for ${title}`}
               className="w-full h-40 object-cover"
               loading="lazy"
             />
           </div>
         )}
         <div className="flex items-center gap-3 text-xs text-ink-soft mb-3">
-          <time className="font-mono">{new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
+          <time className="font-mono" dateTime={date}>{new Date(date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</time>
           {author && <span className="text-ink-soft/70">·</span>}
           {author && <span>{author}</span>}
           {readingTime && <span className="text-ink-soft/70">·</span>}
@@ -34,19 +46,19 @@ export function PostCard({ slug, title, date, excerpt, tags = [], author, readin
         <h3 className="heading-md text-ink mt-0 mb-3 group-hover:text-accent transition-colors">
           {title}
         </h3>
-        {tags && tags.length > 0 && (
-          <div className="flex flex-wrap gap-1.5 mt-3">
-            {tags.slice(0, 3).map((tag) => (
-              <span key={tag} className="rounded-full bg-surface/50 border border-border px-2.5 py-0.5 text-xs text-ink-soft">
-                {tag}
-              </span>
-            ))}
-          </div>
-        )}
         {excerpt && (
           <p className="text-ink-soft leading-relaxed mt-3 text-sm">{excerpt}</p>
         )}
       </Link>
+      {tags && tags.length > 0 && (
+        <div className="flex flex-wrap gap-1.5 mt-3">
+          {tags.slice(0, 3).map((tag) => (
+            <Link key={tag} href={`/tags/${tagToClientSlug(tag)}/`} className="rounded-full bg-surface/50 border border-border px-2.5 py-0.5 text-xs text-ink-soft transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
+              {tag}
+            </Link>
+          ))}
+        </div>
+      )}
     </m.article>
   );
 }