feat: add /notes with two engineering write-ups and diagrams

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-03 19:21:00 +02:00
parent cc0d9bd9c2
commit 4eb663f42a
11 changed files with 992 additions and 4 deletions
@@ -0,0 +1,91 @@
+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"
+        >
+          &larr; 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>
+  );
+}