74 lines
2.5 KiB
TypeScript
74 lines
2.5 KiB
TypeScript
import { notFound } from 'next/navigation'
|
|
import { MDXRemote } from 'next-mdx-remote/rsc'
|
|
import { useMDXComponents } from '@/mdx-components'
|
|
import remarkMath from 'remark-math'
|
|
import remarkGfm from 'remark-gfm'
|
|
import rehypePrettyCode from 'rehype-pretty-code'
|
|
import rehypeKatex from 'rehype-katex'
|
|
import { getPosts, getPost, getReadingTime } 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">{post.date}</time>
|
|
<h1 className="font-sans text-4xl font-extrabold tracking-tight lg:text-5xl mt-3 mb-2 text-ink">
|
|
{post.title}
|
|
</h1>
|
|
<p className="font-mono text-xs text-ink-soft">
|
|
{getReadingTime(post.title)} min read
|
|
</p>
|
|
</header>
|
|
<div className="prose prose-lg max-w-none">
|
|
<MDXRemote
|
|
source={post.source}
|
|
components={useMDXComponents({})}
|
|
options={{
|
|
mdxOptions: {
|
|
remarkPlugins: [remarkMath, remarkGfm],
|
|
rehypePlugins: [
|
|
[rehypePrettyCode, { theme: 'github-dark' }],
|
|
rehypeKatex,
|
|
],
|
|
},
|
|
}}
|
|
/>
|
|
</div>
|
|
</article>
|
|
<aside className="hidden lg:block">
|
|
<TableOfContents />
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|