74 lines
1.8 KiB
TypeScript
74 lines
1.8 KiB
TypeScript
import { Navigation } from "@/components/navigation";
|
|
import { getBlogPosts, getBlogPost } from "@/lib/content";
|
|
import ReactMarkdown from "react-markdown";
|
|
import remarkGfm from "remark-gfm";
|
|
import type { Metadata } from "next";
|
|
import { notFound } from "next/navigation";
|
|
|
|
interface BlogPostPageProps {
|
|
params: Promise<{ slug: string }>;
|
|
}
|
|
|
|
export async function generateStaticParams() {
|
|
const posts = getBlogPosts();
|
|
return posts.map((post) => ({
|
|
slug: post.slug,
|
|
}));
|
|
}
|
|
|
|
export async function generateMetadata({
|
|
params,
|
|
}: BlogPostPageProps): Promise<Metadata> {
|
|
const { slug } = await params;
|
|
const post = getBlogPost(slug);
|
|
|
|
if (!post) {
|
|
return {
|
|
title: "Post Not Found",
|
|
};
|
|
}
|
|
|
|
return {
|
|
title: `${post.title}`,
|
|
description: post.excerpt,
|
|
};
|
|
}
|
|
|
|
export default async function BlogPostPage({ params }: BlogPostPageProps) {
|
|
const { slug } = await params;
|
|
const post = getBlogPost(slug);
|
|
|
|
if (!post) {
|
|
notFound();
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen">
|
|
<Navigation />
|
|
<main className="container mx-auto px-6 py-16 max-w-3xl">
|
|
<article>
|
|
<header className="mb-10">
|
|
<time className="text-sm text-muted-foreground">
|
|
{new Date(post.date).toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})}
|
|
</time>
|
|
<h1 className="text-4xl font-bold text-foreground mt-3 mb-4">
|
|
{post.title}
|
|
</h1>
|
|
<p className="text-lg text-muted-foreground">{post.excerpt}</p>
|
|
</header>
|
|
|
|
<div className="prose prose-invert prose-lg max-w-none">
|
|
<ReactMarkdown remarkPlugins={[remarkGfm]}>
|
|
{post.content}
|
|
</ReactMarkdown>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|