app/routes/systems.tsx

Functions

Imports

It imports app/components/breadcrumb.tsx, app/components/enhance.tsx, app/components/page-shell.tsx, app/lib/json-ld.mjs, app/lib/seo.ts, app/lib/systems.mjs. No module of this repo imports it.

Source

1import { systemMapHtml } from "capsomer/behaviour/system-map";
2
3import { Breadcrumb } from "~/components/breadcrumb";
4import { Enhance } from "~/components/enhance";
5import { PageShell } from "~/components/page-shell";
6import { jsonLd as serializeJsonLd } from "~/lib/json-ld.mjs";
7import { SITE_ORIGIN, breadcrumbJsonLd, pageMeta, publicHtmlHeaders } from "~/lib/seo";
8import {
9  SYSTEMS_PATH,
10  SYSTEM_PARAM,
11  chosenSystem,
12  explorerUrl,
13  loadSystemModel,
14  mapData,
15  repoOf,
16} from "~/lib/systems.mjs";
17
18import { INSIDE_LAYERS, INSIDES_URL } from "virtual:system-insides";
19
20import rawModel from "../../data/system-model.json";
21import type { Route } from "./+types/systems";
22
23// Route-scoped: the map is Capsomer's, and only this page draws it.
24import "capsomer/tokens.css";
25import "capsomer/button.css";
26import "capsomer/system-map.css";
27import "~/styles/systems.css";
28
29/**
30 * The family of systems at /systems, drawn as a capsid by Capsomer's system map (slice 4 of
31 * capsid/research/design-system-explorer.md). One page: choosing a system draws its lines and
32 * shows its facts below the map, in place, and keeps it in the address as /systems?system=<id>,
33 * which the server renders chosen too. The data is the committed copy of Capsid's public model
34 * (data/system-model.json), checked when the module loads, so a bad file fails the build and never
35 * reaches a reader. The whole map, the list of the same data and every system's facts are in the
36 * HTML; the script (app/enhance/system-map.ts) makes one tap zoom into a system's circle, and
37 * shows one system's facts at a time.
38 */
39export function headers() {
40  return publicHtmlHeaders();
41}
42
43const MODEL = loadSystemModel(rawModel);
44const TITLE = "Systems";
45// Capsomer's map with circles, so one tap on any system zooms into its circle. The circles are drawn at build time
46// (scripts/lib/system-insides-plugin.mjs, as virtual:system-insides). The page at rest carries none, for its first
47// paint on a slow phone, and the map's script fetches them all from INSIDES_URL once the page has loaded; a chosen
48// system's is inlined and drawn zoomed into, so a shared ?system= link opens there before any script and with none.
49// The detail line sits above the drawing here (app/styles/systems.css), so it and the views are sent shown: a box
50// that appeared there once the script ran would push the drawing down. Where no script runs, systems.css hides them.
51const mapHtml = (chosen?: string) =>
52  systemMapHtml(mapData(MODEL), {
53    id: "family",
54    label: "The family of systems",
55    ringNames: { shared: "Shared code" },
56    headingLevel: 2,
57    circles: { src: INSIDES_URL, layers: chosen && INSIDE_LAYERS[chosen] ? { [chosen]: INSIDE_LAYERS[chosen] } : {}, chosen },
58  }).replace(/(data-cap-part="(?:views|detail)"[^>]*?) hidden>/g, "$1>");
59const MAP = mapHtml();
60
61export function loader({ request }: Route.LoaderArgs) {
62  return { chosen: chosenSystem(MODEL, new URL(request.url).searchParams.get(SYSTEM_PARAM)) };
63}
64
65export function meta({ loaderData }: Route.MetaArgs) {
66  const chosen = loaderData?.chosen ? MODEL.systems.find((s) => s.id === loaderData.chosen) : undefined;
67  // One page, so one canonical address whichever system is chosen.
68  if (!chosen) {
69    return pageMeta({
70      title: `${TITLE}: the family as a capsid`,
71      description: `The ${MODEL.systems.length} systems Dustin Edwards runs, on one map.`,
72      path: SYSTEMS_PATH,
73    });
74  }
75  return pageMeta({
76    title: `${chosen.name}, in the family of systems`,
77    description: chosen.description ?? (chosen.domain ? `${chosen.name}, at ${chosen.domain}.` : chosen.name),
78    path: SYSTEMS_PATH,
79  });
80}
81
82export default function SystemsRoute({ loaderData }: Route.ComponentProps) {
83  const chosen = loaderData.chosen;
84  const trail: Array<[string, string]> = [[TITLE, SYSTEMS_PATH]];
85  return (
86    <PageShell trail={<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd(SITE_ORIGIN, trail)) }} />}>
87      <Breadcrumb trail={trail} />
88      <h1 className="page-title">{TITLE}</h1>
89      {/* The map is a string from Capsomer, every text in it escaped there. A chosen system is drawn zoomed in. */}
90      <div className="systems-map" dangerouslySetInnerHTML={{ __html: chosen ? mapHtml(chosen) : MAP }} />
91      {/* Every system's facts, all shown with no script; with script, only the chosen one's (systems.css). */}
92      <div className="systems-all" data-systems-facts="">
93        {MODEL.systems.map((s) => (
94          <SystemFacts key={s.id} id={s.id} chosen={s.id === chosen} />
95        ))}
96      </div>
97      <p className="systems-source">
98        Public model, {MODEL.as_of}. <a href={`${SYSTEMS_PATH}.md`}>Markdown</a>
99      </p>
100      <Enhance module="system-map" />
101    </PageShell>
102  );
103}
104
105// Under the drawing, once: the system's name, its sentence, and the links the drawing cannot carry. Its parts and
106// lines are the drawing; as words they are in /systems.md. A private system says so where its repo link would be.
107function SystemFacts({ id, chosen }: { id: string; chosen: boolean }) {
108  const s = MODEL.systems.find((x) => x.id === id)!;
109  const repo = repoOf(s);
110  const links = [
111    s.domain ? { href: `https://${s.domain}`, text: s.domain } : null,
112    repo ? { href: repo, text: repo.replace(/^https:\/\//, "") } : null,
113    { href: explorerUrl(s.id), text: "explorer" },
114  ].filter((l) => l !== null);
115  const parts = [...links.map((l) => <a href={l.href}>{l.text}</a>), ...(s.private ? ["private repo"] : [])];
116  return (
117    <section className="systems-facts" id={`system-${s.id}`} data-system={s.id} data-chosen={chosen ? "" : undefined} aria-labelledby={`system-${s.id}-name`}>
118      <h2 id={`system-${s.id}-name`}>{s.name}</h2>
119      {s.description ? <p className="systems-lead">{s.description}</p> : null}
120      <p className="systems-links">
121        {parts.map((part, i) => (
122          <span key={i}>
123            {i ? " · " : null}
124            {part}
125          </span>
126        ))}
127      </p>
128    </section>
129  );
130}