90 lines
2.3 KiB
TypeScript
90 lines
2.3 KiB
TypeScript
import { MDXContent } from "@content-collections/mdx/react";
|
|
import type { Metadata } from "next";
|
|
import { notFound } from "next/navigation";
|
|
import { allPosts } from "content-collections";
|
|
import type { Post } from "content-collections";
|
|
import Image from "next/image";
|
|
import AuthorChip from "@/components/author-chip";
|
|
|
|
export interface PageParams {
|
|
slug?: string[];
|
|
}
|
|
|
|
const getPost = (slug: string[]): Post | null => {
|
|
const pageSlug = slug.join("/");
|
|
for (const post of allPosts) {
|
|
if (post._meta.path == pageSlug) {
|
|
return post;
|
|
}
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
export default async function Page({ params }: { params: PageParams }) {
|
|
const page = getPost(params.slug!);
|
|
|
|
if (!page) notFound();
|
|
|
|
return (
|
|
<>
|
|
<div className="bg-gray-100 min-h-screen">
|
|
<article className="">
|
|
<header className="bg-white shadow">
|
|
<div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
|
<h1 className="text-3xl font-bold text-gray-900">{page.title}</h1>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="text-muted-foreground pb-8 mt-4 text-sm max-w-[80ch] mx-auto">
|
|
<AuthorChip {...page.author!} />
|
|
{page.summary}
|
|
</div>
|
|
|
|
{page.image !== undefined && (
|
|
<Image
|
|
alt={page.imageDesc!}
|
|
src={page.imageURL!}
|
|
width={1280}
|
|
height={720}
|
|
className="mx-auto max-w-2xl"
|
|
/>
|
|
)}
|
|
|
|
<div className="mx-auto max-w-[80ch] py-6 sm:px-6 lg:px-8">
|
|
<div className="prose prose-a:text-blue-600 hover:prose-a:text-blue-500 prose-p:my-2">
|
|
<MDXContent code={page.mdx} components={{}} />
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export async function generateStaticParams() {
|
|
return allPosts.map((page) => ({
|
|
slug: page._meta.path.split("/"),
|
|
}));
|
|
}
|
|
|
|
export function generateMetadata({ params }: { params: PageParams }) {
|
|
const page = getPost(params.slug!);
|
|
|
|
if (!page) notFound();
|
|
|
|
return {
|
|
title: page.title,
|
|
description: page.summary,
|
|
authors: [
|
|
{
|
|
name: page.author?.displayName,
|
|
},
|
|
],
|
|
openGraph: {
|
|
//@ts-ignore
|
|
images: page.image !== null ? [page.imageURL] : [],
|
|
},
|
|
} satisfies Metadata;
|
|
}
|