public-blog/app/posts/[slug]/page.tsx

import { notFound } from 'next/navigation'
import { MDXRemote } from 'next-mdx-remote/rsc'
import { getMDXComponents } from '@/mdx-components'
import remarkMath from 'remark-math'
import remarkGfm from 'remark-gfm'
import smartypants from 'remark-smartypants'
import rehypePrettyCode from 'rehype-pretty-code'
import { transformerCopyButton } from '@rehype-pretty/transformers'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypeKatex from 'rehype-katex'
import rehypeSlug from 'rehype-slug'
import rehypeExternalLinks from 'rehype-external-links'
import type { Element } from 'hast'
import type { LineElement } from 'rehype-pretty-code'
import { getPosts, getPost } from '@/lib/posts'
import { TableOfContents } from '@/components/blog/TableOfContents'
import { ScrollToTop } from '@/components/ui/ScrollToTop'
import { ReadingProgress } from '@/components/ui/ReadingProgress'

export async function generateStaticParams() {
  const posts = await getPosts()
  if (posts.length === 0) {
    return [{ slug: '__placeholder__' }]
  }
  return posts.map((post) => ({ slug: post.slug }))
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  const slug = (await params).slug
  const post = await getPost(slug)
  if (!post) return { title: 'Not Found' }
  return { title: `${post.title} | blog` }
}

export default async function PostPage({ params }: { params: Promise<{ slug: string }> }) {
  const slug = (await params).slug
  const post = await getPost(slug)

  if (!post) notFound()

  return (
    <>
      <ScrollToTop />
      <ReadingProgress />
      <div className="max-w-4xl mx-auto px-6 py-16">
        <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>
              <h1 className="heading-xl text-ink mt-3 mb-2">
                {post.title}
              </h1>
              <div className="flex items-center gap-4 font-mono text-xs text-ink-soft">
                {post.author && <span>by {post.author}</span>}
                <span>{post.readingTime} min read</span>
              </div>
              {post.coverImage && (
                <img
                  src={post.coverImage}
                  alt={post.title}
                  className="w-full h-64 object-cover rounded-xl my-6"
                  loading="lazy"
                />
              )}
              {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">
                      {tag}
                    </span>
                  ))}
                </div>
              )}
            </header>
            <div className="prose prose-lg max-w-none">
              <MDXRemote
                source={post.source}
                components={getMDXComponents({})}
                options={{
                  mdxOptions: {
                    remarkPlugins: [smartypants, remarkMath, remarkGfm],
                    rehypePlugins: [
                      rehypeSlug,
                      [rehypeExternalLinks, {
                        target: '_blank',
                        rel: ['nofollow', 'noopener', 'noreferrer'],
                      }],
                      rehypeAutolinkHeadings,
                      [rehypePrettyCode, {
                        theme: {
                          light: 'github-light',
                          dark: 'github-dark-dimmed',
                        },
                        keepBackground: false,
                        lineNumbers: true,
                        grid: true,
                        onVisitLine(node: LineElement) {
                          if (node.children.length === 0) {
                            node.children = [{ type: 'text', value: ' ' }];
                          }
                        },
                        onVisitTitle(element: Element) {
                          const existingClassNames = Array.isArray(element.properties.className)
                            ? element.properties.className
                            : [];
                          element.properties.className = [
                            ...existingClassNames,
                            'vscode-title',
                          ];
                          element.children = [
                            {
                              type: 'element',
                              tagName: 'span',
                              properties: { className: ['vscode-dots'] },
                              children: [
                                { type: 'element', tagName: 'span', properties: { className: ['dot-red'] }, children: [] },
                                { type: 'element', tagName: 'span', properties: { className: ['dot-yellow'] }, children: [] },
                                { type: 'element', tagName: 'span', properties: { className: ['dot-green'] }, children: [] },
                              ],
                            },
                            element.children[0],
                          ];
                        },
                        transformers: [
                          transformerCopyButton({
                            visibility: 'hover',
                            feedbackDuration: 2_500,
                          }),
                        ],
                      }],
                      rehypeKatex,
                    ],
                  },
                }}
              />
            </div>
          </article>
          <aside className="hidden lg:block">
            <TableOfContents />
          </aside>
        </div>
      </div>
    </>
  )
}