fix: restore individual tag route

app/tags/[tag]/page.tsx

@@ -0,0 +1,32 @@
+import { slug } from 'github-slugger'
+import { getAllTags, allCoreContent } from 'pliny/utils/contentlayer'
+import siteMetadata from '@/data/siteMetadata'
+import ListLayout from '@/layouts/ListLayout'
+import { allBlogs } from 'contentlayer/generated'
+import { genPageMetadata } from 'app/seo'
+import { Metadata } from 'next'
+
+export async function generateMetadata({ params }: { params: { tag: string } }): Promise<Metadata> {
+  const tag = params.tag
+  return genPageMetadata({ title: tag, description: `${siteMetadata.title} ${tag} tagged content` })
+}
+
+export const generateStaticParams = async () => {
+  const tags = await getAllTags(allBlogs)
+  const paths = Object.keys(tags).map((tag) => ({
+    tag: tag,
+  }))
+  return paths
+}
+
+export default function TagPage({ params }: { params: { tag: string } }) {
+  const { tag } = params
+  // Capitalize first letter and convert space to dash
+  const title = tag[0].toUpperCase() + tag.split(' ').join('-').slice(1)
+  const filteredPosts = allCoreContent(
+    allBlogs.filter(
+      (post) => post.draft !== true && post.tags && post.tags.map((t) => slug(t)).includes(tag)
+    )
+  )
+  return <ListLayout posts={filteredPosts} title={title} />
+}

app/tags/page.tsx

@@ -1,8 +1,7 @@
 import { getAllTags } from 'pliny/utils/contentlayer'
 import Link from '@/components/Link'
-// import { PageSEO } from '@/components/SEO'
 import Tag from '@/components/Tag'
-import { kebabCase } from 'pliny/utils/kebabCase'
+import { slug } from 'github-slugger'
 import { allBlogs } from 'contentlayer/generated'
 import { genPageMetadata } from 'app/seo'
 
@@ -13,7 +12,6 @@ export default async function Page() {
   const sortedTags = Object.keys(tags).sort((a, b) => tags[b] - tags[a])
   return (
     <>
-      {/* <PageSEO title={`Tags - ${siteMetadata.author}`} description="Things I blog about" /> */}
       <div className="flex flex-col items-start justify-start divide-y divide-gray-200 dark:divide-gray-700 md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6 md:divide-y-0">
         <div className="space-x-2 pb-8 pt-6 md:space-y-5">
           <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:border-r-2 md:px-6 md:text-6xl md:leading-14">
@@ -27,7 +25,7 @@ export default async function Page() {
               <div key={t} className="mb-2 mr-5 mt-2">
                 <Tag text={t} />
                 <Link
-                  href={`/tags/${kebabCase(t)}`}
+                  href={`/tags/${slug(t)}`}
                   className="-ml-2 text-sm font-semibold uppercase text-gray-600 dark:text-gray-300"
                   aria-label={`View posts tagged ${t}`}
                 >

components/Tag.tsx

@@ -1,6 +1,5 @@
 import Link from 'next/link'
-import { kebabCase } from 'pliny/utils/kebabCase'
-
+import { slug } from 'github-slugger'
 interface Props {
   text: string
 }
@@ -8,7 +7,7 @@ interface Props {
 const Tag = ({ text }: Props) => {
   return (
     <Link
-      href={`/tags/${kebabCase(text)}`}
+      href={`/tags/${slug(text)}`}
       className="mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
     >
       {text.split(' ').join('-')}