From 3ba85e5191f816136e8bdb0e0b1356eb55e4df48 Mon Sep 17 00:00:00 2001
From: Chris Arter <chris@arter.dev>
Date: Fri, 8 May 2026 12:33:55 -0400
Subject: [PATCH] feat(frontend): port /tags index and detail

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/app/(frontend)/tags/[slug]/page.tsx | 22 +++++++++++++++++++++
 src/app/(frontend)/tags/page.tsx        | 26 +++++++++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 src/app/(frontend)/tags/[slug]/page.tsx
 create mode 100644 src/app/(frontend)/tags/page.tsx

diff --git a/src/app/(frontend)/tags/[slug]/page.tsx b/src/app/(frontend)/tags/[slug]/page.tsx
new file mode 100644
index 0000000..0cd8ebb
--- /dev/null
+++ b/src/app/(frontend)/tags/[slug]/page.tsx
@@ -0,0 +1,22 @@
+import { notFound } from 'next/navigation'
+import { listPosts, listAllTags } from '@/lib/posts'
+import { PostList } from '@/components/PostList'
+
+export const revalidate = 60
+
+export async function generateStaticParams() {
+  const tags = await listAllTags()
+  return tags.map(({ tag }) => ({ slug: tag.slug }))
+}
+
+export default async function TagPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params
+  const r = await listPosts({ tag: slug, limit: 0 })
+  if (r.docs.length === 0) notFound()
+  return (
+    <div className="max-w-shell mx-auto px-5 py-10 md:px-10">
+      <h1 className="text-ink font-serif text-[40px] mb-8">#{slug}</h1>
+      <PostList posts={r.docs} numbers={r.docs.map((_, i) => r.totalDocs - i)} />
+    </div>
+  )
+}
diff --git a/src/app/(frontend)/tags/page.tsx b/src/app/(frontend)/tags/page.tsx
new file mode 100644
index 0000000..caf6b74
--- /dev/null
+++ b/src/app/(frontend)/tags/page.tsx
@@ -0,0 +1,26 @@
+import Link from 'next/link'
+import { listAllTags } from '@/lib/posts'
+
+export const revalidate = 60
+
+export default async function TagsPage() {
+  const tags = await listAllTags()
+  tags.sort((a, b) => b.count - a.count)
+  return (
+    <div className="max-w-shell mx-auto px-5 py-10 md:px-10">
+      <h1 className="text-ink font-serif text-[40px] mb-8">Tags</h1>
+      <ul className="border-hair divide-hair grid grid-cols-2 divide-x divide-y border m-0 list-none p-0 md:grid-cols-4">
+        {tags.map(({ tag, count }) => (
+          <li key={tag.id}>
+            <Link href={`/tags/${tag.slug}/`} className="block px-6 py-5 hover:bg-paper-2">
+              <span className="block font-serif text-[22px]">{tag.name}</span>
+              <span className="text-ink-3 font-mono text-[10.5px] uppercase">
+                {count} post{count === 1 ? '' : 's'}
+              </span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
-- 
2.51.2