82 lines
3.1 KiB
TypeScript
82 lines
3.1 KiB
TypeScript
import { notFound } from 'next/navigation'
|
|
import Link from 'next/link'
|
|
import { getPosts, getPost, tagToSlug } from '@/lib/posts'
|
|
import { TableOfContents } from '@/components/posts/TableOfContents'
|
|
import { ScrollToTop } from '@/components/ui/ScrollToTop'
|
|
import { ReadingProgress } from '@/components/ui/ReadingProgress'
|
|
|
|
export const dynamicParams = false
|
|
export const dynamic = 'force-static'
|
|
|
|
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 }
|
|
}
|
|
|
|
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 className="min-w-0">
|
|
<header className="mb-12">
|
|
<time className="font-mono text-sm text-ink-soft" dateTime={post.date}>{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={`Featured image for article: ${post.title}`}
|
|
className="my-8 aspect-[16/9] w-full rounded-2xl border border-border bg-surface object-cover shadow-card"
|
|
loading="eager"
|
|
decoding="async"
|
|
fetchPriority="high"
|
|
/>
|
|
)}
|
|
{post.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 mt-4">
|
|
{post.tags.map((tag) => (
|
|
<Link key={tag} href={`/tags/${tagToSlug(tag)}/`} className="rounded-full bg-surface px-3 py-1 text-xs font-medium text-ink-soft border border-border transition-colors hover:border-accent/50 hover:text-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent">
|
|
{tag}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</header>
|
|
<div className="prose prose-lg max-w-none min-w-0">
|
|
<PostContent />
|
|
</div>
|
|
</article>
|
|
<aside className="hidden lg:block">
|
|
<TableOfContents />
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|