80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
import { notFound } from 'next/navigation'
|
|
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 const dynamicParams = false
|
|
export const dynamic = 'force-static'
|
|
export const revalidate = 0
|
|
|
|
export async function generateStaticParams() {
|
|
const posts = await getPosts()
|
|
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()
|
|
|
|
const { default: PostContent } = await import(
|
|
/* turbopackOptional: true */
|
|
`@/content/posts/${slug}.mdx`
|
|
)
|
|
|
|
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="Cover image"
|
|
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">
|
|
<PostContent />
|
|
</div>
|
|
</article>
|
|
<aside className="hidden lg:block">
|
|
<TableOfContents />
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|