104 lines
3.5 KiB
TypeScript
104 lines
3.5 KiB
TypeScript
import Link from "next/link";
|
|
import { getPostData, getAllPostIds } from "@/lib/posts";
|
|
import type { PostData } from "@/lib/posts";
|
|
import Window from "@/components/window";
|
|
import TableOfContents from "@/components/table-of-contents";
|
|
import { MDXRemote } from "next-mdx-remote/rsc";
|
|
import rehypePrettyCode from "rehype-pretty-code";
|
|
import rehypeSlug from "rehype-slug";
|
|
|
|
interface PageProps {
|
|
params: Promise<{ slug: string }>;
|
|
}
|
|
|
|
export async function generateStaticParams() {
|
|
const paths = getAllPostIds();
|
|
return paths.map((path) => ({ slug: path.params.slug }));
|
|
}
|
|
|
|
export async function generateMetadata({ params }: PageProps) {
|
|
const { slug } = await params;
|
|
const postData = await getPostData(slug);
|
|
return {
|
|
title: `${postData.title} | Gabriel's Kaszewski Blog`,
|
|
};
|
|
}
|
|
|
|
export default async function Post({ params }: PageProps) {
|
|
const { slug } = await params;
|
|
const postData: PostData = await getPostData(slug);
|
|
|
|
return (
|
|
<div className="mx-auto max-w-6xl">
|
|
<div className="lg:flex lg:gap-4 lg:items-start">
|
|
<Window title={postData.title} showProgress className="lg:flex-1 min-w-0">
|
|
<article>
|
|
<div className="mb-4 text-gray-500 flex flex-col gap-1">
|
|
<span>
|
|
{new Date(postData.date).toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
})}
|
|
</span>
|
|
<span className="text-sm text-gray-400">{postData.readingTime}</span>
|
|
</div>
|
|
|
|
{postData.wip && (
|
|
<div className="mb-6 flex items-center gap-3 rounded-lg border border-amber-300 bg-amber-50/70 px-4 py-3 text-sm text-amber-800">
|
|
<span className="text-lg">🚧</span>
|
|
<span>This post is a work in progress — content may change.</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Mobile TOC — inline above article, hidden on lg+ */}
|
|
{postData.headings.length > 0 && (
|
|
<div className="lg:hidden mb-6 bg-white/20 backdrop-blur border border-white/30 rounded-lg p-4">
|
|
<TableOfContents headings={postData.headings} />
|
|
</div>
|
|
)}
|
|
|
|
<div className="prose lg:prose-lg max-w-none">
|
|
<MDXRemote
|
|
source={postData.content}
|
|
options={{
|
|
mdxOptions: {
|
|
rehypePlugins: [
|
|
rehypeSlug,
|
|
[
|
|
rehypePrettyCode,
|
|
{
|
|
theme: "github-dark-dimmed",
|
|
keepBackground: false,
|
|
},
|
|
],
|
|
],
|
|
},
|
|
}}
|
|
/>
|
|
</div>
|
|
</article>
|
|
</Window>
|
|
|
|
{/* Desktop TOC — separate Aero Window, sticky on the right */}
|
|
{postData.headings.length > 0 && (
|
|
<div className="hidden lg:block w-56 flex-shrink-0 sticky top-8">
|
|
<Window title="Contents">
|
|
<TableOfContents headings={postData.headings} />
|
|
</Window>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-8 text-center">
|
|
<Link
|
|
href="/"
|
|
className="inline-block rounded-full bg-white/80 px-6 py-2 font-semibold text-blue-700 shadow-md transition-all hover:bg-white"
|
|
>
|
|
← Back to home
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|