92 lines
2.6 KiB
TypeScript
92 lines
2.6 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import { notFound } from "next/navigation";
|
|
import { Container, Pill } from "@/src/components/site";
|
|
import { NOTES } from "@/src/content/notes";
|
|
import { SITE_NAME, SITE_URL } from "@/src/content/site";
|
|
import { findNoteBySlug } from "@/src/domain/notes";
|
|
|
|
type PageProps = { readonly params: Promise<{ readonly slug: string }> };
|
|
|
|
export const dynamicParams = false;
|
|
|
|
export function generateStaticParams() {
|
|
return NOTES.map((note) => ({ slug: note.slug }));
|
|
}
|
|
|
|
export async function generateMetadata({
|
|
params,
|
|
}: PageProps): Promise<Metadata> {
|
|
const found = findNoteBySlug(NOTES, (await params).slug);
|
|
if (!found.ok) return {};
|
|
const { title, summary, slug, publishedOn } = found.value;
|
|
const path = `/notes/${slug}`;
|
|
return {
|
|
title,
|
|
description: summary,
|
|
alternates: { canonical: path },
|
|
openGraph: {
|
|
type: "article",
|
|
title,
|
|
description: summary,
|
|
url: path,
|
|
publishedTime: publishedOn,
|
|
},
|
|
};
|
|
}
|
|
|
|
export default async function Page({ params }: PageProps) {
|
|
const found = findNoteBySlug(NOTES, (await params).slug);
|
|
if (!found.ok) notFound();
|
|
const { Body, title, summary, slug, publishedOn, readingMinutes, tags } =
|
|
found.value;
|
|
|
|
const jsonLd = {
|
|
"@context": "https://schema.org",
|
|
"@type": "Article",
|
|
headline: title,
|
|
description: summary,
|
|
datePublished: publishedOn,
|
|
url: `${SITE_URL}/notes/${slug}`,
|
|
author: { "@type": "Person", name: SITE_NAME, url: SITE_URL },
|
|
keywords: tags.join(", "),
|
|
};
|
|
|
|
return (
|
|
<Container className="py-16 md:py-24">
|
|
<article className="mx-auto max-w-[70ch]">
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{
|
|
__html: JSON.stringify(jsonLd).replace(/</g, "\\u003c"),
|
|
}}
|
|
/>
|
|
<Link
|
|
href="/notes"
|
|
className="font-mono text-xs uppercase tracking-widest text-accent"
|
|
>
|
|
← Notes
|
|
</Link>
|
|
<header className="mt-6">
|
|
<h1 className="!mb-4 !text-3xl !leading-tight text-fg md:!text-5xl">
|
|
{title}
|
|
</h1>
|
|
<p className="!mb-4 font-mono text-xs text-muted">
|
|
<time dateTime={publishedOn}>{publishedOn}</time>
|
|
{" · "}
|
|
{readingMinutes} min read
|
|
</p>
|
|
<span className="flex flex-wrap gap-2">
|
|
{tags.map((tag) => (
|
|
<Pill key={tag}>{tag}</Pill>
|
|
))}
|
|
</span>
|
|
</header>
|
|
<div className="mt-10">
|
|
<Body />
|
|
</div>
|
|
</article>
|
|
</Container>
|
|
);
|
|
}
|