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

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

apps/web/app/(site)/notes/[slug]/page.tsx

@@ -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>
+  );
+}

apps/web/app/(site)/notes/page.tsx

@@ -1,8 +1,14 @@
 import type { Metadata } from "next";
-import { Container } from "@/src/components/site/Container";
-import { SectionHeader } from "@/src/components/site/SectionHeader";
+import Link from "next/link";
+import { Container, Pill, SectionHeader } from "@/src/components/site";
+import { NOTES } from "@/src/content/notes";
 
-export const metadata: Metadata = { title: "Notes" };
+export const metadata: Metadata = {
+  title: "Notes",
+  description:
+    "Evergreen engineering write-ups with diagrams: verification, architecture and testing.",
+  alternates: { canonical: "/notes" },
+};
 
 export default function Page() {
   return (
@@ -11,8 +17,35 @@ export default function Page() {
         as="h1"
         kicker="/notes"
         title="Notes"
-        lead="This page is coming soon."
+        lead="Evergreen engineering write-ups with diagrams. No client work, no hype."
       />
+      <ul className="mt-12 max-w-3xl divide-y divide-border border-y border-border">
+        {NOTES.map((note) => (
+          <li key={note.slug}>
+            <Link
+              href={`/notes/${note.slug}`}
+              className="group block py-8 hover:text-fg"
+            >
+              <p className="font-mono text-xs text-muted">
+                <time dateTime={note.publishedOn}>{note.publishedOn}</time>
+                {" · "}
+                {note.readingMinutes} min read
+              </p>
+              <h2 className="!mb-2 !mt-2 !text-xl !leading-snug text-fg group-hover:text-accent md:!text-2xl">
+                {note.title}
+              </h2>
+              <p className="!mb-4 text-base leading-relaxed text-muted">
+                {note.summary}
+              </p>
+              <span className="flex flex-wrap gap-2">
+                {note.tags.map((tag) => (
+                  <Pill key={tag}>{tag}</Pill>
+                ))}
+              </span>
+            </Link>
+          </li>
+        ))}
+      </ul>
     </Container>
   );
 }