T45a Site · Stack: Vite 8, React 19 and TanStack Router under pnpm; routes, theme, fonts, the manifest

frontend/src/pages/Story.tsx

@@ -0,0 +1,46 @@
+import { Link, useParams } from "@tanstack/react-router";
+import { useEffect } from "react";
+import { Live } from "../Live";
+import { Capture, Windows, isCaptured } from "../Native";
+import { all, chapters } from "../data";
+import { NotFound } from "./NotFound";
+
+export function Story() {
+  const { page, story } = useParams({ strict: false });
+  const chapter = chapters.find((c) => c.slug === page);
+  const found = chapter?.stories.find((s) => s.slug === story);
+  useEffect(() => {
+    if (chapter && found) document.title = `${found.title} · ${chapter.title} · Ely`;
+  }, [chapter, found]);
+  if (!chapter || !found) return <NotFound what={`No story at ${page}/${story}.`} />;
+  const at = all.findIndex((e) => e.story === found);
+  const [prev, next] = [all[at - 1], all[at + 1]];
+  return (
+    <article className="story">
+      <Link to="/components/" className="crumb">
+        {chapter.title}
+      </Link>
+      <h1>{found.title}</h1>
+      {isCaptured(chapter.slug, found.slug) ? (
+        <Capture page={chapter.slug} story={found.slug} title={found.title} />
+      ) : (
+        <>
+          <Live key={`${chapter.slug}/${found.slug}`} page={chapter.slug} story={found.slug} title={found.title} />
+          <Windows page={chapter.slug} story={found.slug} title={found.title} />
+        </>
+      )}
+      <nav className="pager" aria-label="More stories">
+        {prev && (
+          <Link to="/components/$page/$story/" params={{ page: prev.chapter.slug, story: prev.story.slug }}>
+            {prev.story.title}
+          </Link>
+        )}
+        {next && (
+          <Link className="next" to="/components/$page/$story/" params={{ page: next.chapter.slug, story: next.story.slug }}>
+            {next.story.title}
+          </Link>
+        )}
+      </nav>
+    </article>
+  );
+}