blog.hangerthem.com/components/content/MarkdownPage.tsx

import { pageMetadata } from '@/app/metadata'
import { TableOfContents } from '@/components/post/TableOfContents'
import { getPageBySlug } from '@/lib/posts'
import type { Metadata } from 'next'

/** Metadata for a standalone page served at `/<slug>` from content/pages/<slug>.md. */
export async function markdownPageMetadata(slug: string): Promise<Metadata> {
  const { meta } = await getPageBySlug(slug)
  return pageMetadata({ title: meta.title, description: meta.description, path: `/${slug}` })
}

/** Renders a standalone page from content/pages/<slug>.md. */
export async function MarkdownPage({ slug }: { slug: string }) {
  const { meta, content, tableOfContents } = await getPageBySlug(slug)

  return (
    <main className="flex w-full">
      <article className="max-w-3xl 2xl:max-w-4xl mx-auto px-4 py-8 mb-8 lg:py-16 min-w-0">
        <h1 className="text-4xl font-bold mb-4">{meta.title}</h1>
        <p className="text-fg text-lg mb-4">{meta.description}</p>
        <div className="prose">{content}</div>
      </article>

      <TableOfContents items={tableOfContents} />
    </main>
  )
}