site/home.ts

Functions

Imports

It imports site/markdown.ts. Imported by site/vite.config.ts.

Source

1// The public page at the root of https://capsomer.dustinedwards.info, written into site/home.html
2// at build time (site/vite.config.ts), so it is whole HTML that reads without a script; site/home-main.ts
3// adds the header's behavior, the family preview, the component filter, the copy button and the live
4// test count, and site/redirect.ts sends old admin links on. Its look is Supergraphics (Barbara Stauffacher Solomon, The Sea Ranch, 1966):
5// flat letter tiles too big for the page, cut by its edge, painted in Capsomer's own families.
6// The dashboard of tests, pairs and changes is the admin at /admin/ (site/main.tsx).
7import { readFileSync, readdirSync, existsSync } from "node:fs";
8import { resolve } from "node:path";
9import { frontmatter, renderMarkdown } from "./markdown.ts";
10
11type Family = "purple" | "fox" | "teal" | "amber" | "navy" | "forest";
12const FAMILIES: Family[] = ["purple", "fox", "teal", "amber", "navy", "forest"];
13const NAMES: Record<Family, string> = { purple: "Purple", fox: "Fox", teal: "Teal", amber: "Amber", navy: "Navy", forest: "Forest" };
14
15interface Component {
16  name: string;
17  title: string;
18  summary: string;
19}
20interface Data {
21  version: string;
22  components: Component[];
23  families: Record<string, { seed: string; note: string }>;
24  pairs: { total: number; failing: number } | null;
25  // Each family's accent text on its surface, light then dark: the pair the Albers squares name.
26  accentText: Record<string, [number, number]>;
27  tests: { passed: number; failed: number } | null;
28  type: Array<[string, string, string]>;
29  defaults: Array<{ lead: string; reason: string }>;
30}
31
32const esc = (s: string) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
33// Backticks in a summary become code, as on the admin's pages.
34const prose = (s: string) => esc(s).replace(/`([^`]+)`/g, "<code>$1</code>");
35const fam = (f: Family) => (f === "purple" ? "" : ` data-family="${f}"`);
36const json = (path: string) => (existsSync(path) ? JSON.parse(readFileSync(path, "utf8")) : null);
37
38/** Everything the page says, read from the repo and the site's data files (capsomer site-data). */
39export function readData(root: string): Data {
40  const dir = resolve(root, "components");
41  const components = readdirSync(dir, { withFileTypes: true })
42    .filter((d) => d.isDirectory() && existsSync(resolve(dir, d.name, `${d.name}.md`)))
43    .map((d) => {
44      const { data } = frontmatter(readFileSync(resolve(dir, d.name, `${d.name}.md`), "utf8"));
45      const str = (k: string) => (typeof data[k] === "string" ? (data[k] as string) : "");
46      // The summary's first sentence: the page lists every component, so each says one thing.
47      return { name: d.name, title: str("title") || d.name, summary: str("summary").replace(/^(.+?[.!?])\s.*$/s, "$1") };
48    })
49    .sort((a, b) => a.title.localeCompare(b.title));
50  const fams = json(resolve(root, "site/data/families.json"));
51  const results = json(resolve(root, "site/data/results.json"));
52  const tokens = json(resolve(root, "tokens/tokens.json"));
53  const type = Object.entries((tokens?.type ?? {}) as Record<string, { $value: unknown; $description?: string }>)
54    .filter(([name]) => name.startsWith("fs-") && name !== "fs-input-coarse")
55    .map(([name, t]) => [name, String(t.$value), t.$description ?? ""] as [string, string, string]);
56  // Each default's bold lead and the rest of its line, which carries the reason.
57  const defaults = [...readFileSync(resolve(root, "DEFAULTS.md"), "utf8").matchAll(/^- \*\*(.+?)\*\*(.*)$/gm)].map((m) => {
58    const lead = (m[1] ?? "").replace(/[.;]$/, "");
59    const rest = (m[2] ?? "").trim();
60    // A line whose lead runs on into its sentence ("..., in a dialog** with focus on Cancel") reads whole.
61    return { lead, reason: /^[A-Z`]/.test(rest) ? rest : `${m[1]} ${rest.replace(/^[,;]\s*/, "")}` };
62  });
63  return {
64    version: JSON.parse(readFileSync(resolve(root, "package.json"), "utf8")).version,
65    components,
66    families: fams?.families ?? {},
67    accentText: Object.fromEntries(
68      FAMILIES.map((f) => {
69        const ratio = (scheme: string) =>
70          (fams?.pairs ?? []).find((p: { family: string; scheme: string; fg: string; bg: string }) => p.family === f && p.scheme === scheme && p.fg === "accent-text" && p.bg === "surface")?.ratio ?? 0;
71        return [f, [ratio("light"), ratio("dark")]];
72      }),
73    ),
74    pairs: fams ? { total: fams.pairs.length, failing: fams.pairs.filter((p: { pass: boolean }) => !p.pass).length } : null,
75    tests: results?.available ? { passed: results.totals.passed, failed: results.totals.failed } : null,
76    type,
77    defaults,
78  };
79}
80
81/** A word in letter tiles over a stripe, hidden from assistive technology: the heading says it. */
82function band(word: string, families: Family[], size: "cover" | "section") {
83  const one = families.length === 1;
84  const tiles = [...word].map((c, i) => `<span${one ? "" : fam(families[i % families.length] as Family)}>${esc(c)}</span>`).join("");
85  const stripe = (one ? ["ink", "solid", "pale"] : families).map((f) => `<i${one ? ` data-role="${f}"` : fam(f as Family)}></i>`).join("");
86  return `<div class="home-band" data-size="${size}"${one ? fam(families[0] as Family) : " data-mix"} aria-hidden="true"><p class="home-band-word">${tiles}</p><p class="home-band-stripe">${stripe}</p></div>`;
87}
88
89export function renderHome(d: Data): string {
90  const install = `"capsomer": "github:DrDustinEdwards/capsomer#v${d.version}"
91
92import "capsomer/tokens.css";       // the layer order and every token
93import "capsomer/base.css";
94import "capsomer/families.css";     // fox, teal, amber, navy and forest, on data-family
95import "capsomer/button.css";       // each component's CSS, as used`;
96  const figures: Array<[Family, string, string, string]> = [
97    ["purple", "Components", String(d.components.length), `in release ${d.version}`],
98    ["fox", "Color families", String(FAMILIES.length), "each one 12 steps, in light and dark"],
99  ];
100  if (d.pairs) figures.push(["teal", "Contrast pairs", String(d.pairs.total), d.pairs.failing ? `${d.pairs.failing} failing` : "every one passes WCAG 2.2"]);
101  // The test count: the build's own when it has one; otherwise the last run on main, read by
102  // site/home-main.ts from the results branch, so the deployed page never claims a number it lacks.
103  const tests = d.tests ? `<li data-family="forest"><b>${d.tests.passed + d.tests.failed}</b><span class="home-figure-label">Tests</span><span>${d.tests.failed ? `${d.tests.failed} failing` : "all passed on the last run"}</span></li>` : `<li data-family="forest" data-live="tests" hidden><b></b><span class="home-figure-label">Tests</span><span></span></li>`;
104  const links: Array<[string, string]> = [["#color", "Color"], ["#type", "Type"], ["#components", "Components"], ["#defaults", "Defaults"], ["#use", "Install"]];
105  return `<header class="cap-site-header" data-cap="site-header" data-links="right" data-markup="">
106  <a class="cap-site-header-skip" href="#main">Skip to content</a>
107  <a class="cap-site-header-logo home-logo" href="/" aria-label="Capsomer"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10 1 17.8 5.5v9L10 19l-7.8-4.5v-9z"/></svg><span aria-hidden="true">Capsomer</span></a>
108  <nav class="cap-site-header-sections" aria-label="Sections"><ul>
109    ${links.map(([h, t]) => `<li><a class="cap-site-header-link" href="${h}">${t}</a></li>`).join("")}
110  </ul></nav>
111  <div class="cap-site-header-tools">
112    <button type="button" class="cap-theme-button cap-site-header-icon cap-site-header-theme" data-cap="theme-switch" data-variant="button" aria-label="Switch to dark theme">
113      <svg class="cap-theme-icon" data-show="light" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z" /></svg>
114      <svg class="cap-theme-icon" data-show="dark" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" /></svg>
115      <span class="cap-theme-tip cap-popover" data-variant="tooltip" data-side="bottom" data-offset="6" popover="manual" role="tooltip" aria-hidden="true"><span class="cap-theme-tip-text">Switch to dark theme</span><kbd>T</kbd></span>
116    </button>
117    <button type="button" class="cap-site-header-icon cap-site-header-menu" aria-label="Menu" aria-haspopup="dialog" aria-expanded="false" aria-controls="home-sheet"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16" /></svg></button>
118  </div>
119  <dialog class="cap-dialog cap-site-header-sheet" data-cap="dialog" data-placement="bottom" data-size="md" id="home-sheet" aria-labelledby="home-sheet-title">
120    <div class="cap-dialog-header"><h2 id="home-sheet-title" class="cap-dialog-title cap-site-header-sheet-title" tabindex="-1">Capsomer</h2></div>
121    <div class="cap-dialog-body">
122      <nav aria-labelledby="home-sheet-title"><ul class="cap-site-header-sheet-list">
123        ${links.map(([h, t]) => `<li><a href="${h}"><span class="cap-site-header-sheet-name">${t}</span></a></li>`).join("")}
124      </ul></nav>
125    </div>
126    <button type="button" class="cap-btn cap-dialog-close" data-variant="quiet" data-icon-only="" data-cap-part="close" aria-label="Close"><svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" /></svg></button>
127  </dialog>
128</header>
129<main id="main" tabindex="-1">
130<section class="home-cover" aria-labelledby="top-h">
131  ${band("Capsomer", FAMILIES, "cover")}
132  <div class="home-wrap home-intro">
133    <h1 id="top-h">One design system for every site and app</h1>
134    <p class="home-lead">Capsomer is the palette, type and components shared by every one of Dustin Edwards's sites and apps, with the tests that keep each of them accessible in both themes. Plain CSS, MIT licensed.</p>
135  </div>
136  <ul class="home-wrap home-figures">
137    ${figures.map(([f, label, n, note]) => `<li${fam(f)}><b>${esc(n)}</b><span class="home-figure-label">${esc(label)}</span><span>${esc(note)}</span></li>`).join("\n    ")}
138    ${tests}
139  </ul>
140</section>
141
142<section id="color" aria-labelledby="color-h">
143  ${band("Color", FAMILIES, "section")}
144  <div class="home-wrap">
145    <h2 id="color-h">Six families from six seeds</h2>
146    <p class="home-sub">Each family is one 12-step scale with the same job for each step: step 9 is the seed, step 11 is text, step 10 fills the main button. A site picks its family with one attribute, <code>data-family</code>. These scales follow your device's theme.</p>
147    <figure class="home-lohse" aria-labelledby="lohse-c">
148      <div class="home-lohse-grid" role="img" aria-label="The six families as six rows of twelve steps, lightest on the left.">
149        ${FAMILIES.map((f) => `<span class="home-lohse-name">${NAMES[f]}</span>${Array.from({ length: 12 }, (_, i) => `<i${fam(f)} data-step="${i + 1}"></i>`).join("")}`).join("")}
150      </div>
151      <figcaption id="lohse-c">Seventy-two colors, six rows of twelve steps, in your device's theme. Laid out after Richard Paul Lohse's systematic color series (Zurich, from 1943), where every square is the same size and the system makes the picture.</figcaption>
152    </figure>
153    <ul class="home-families">
154      ${FAMILIES.map((f) => {
155        const info = d.families[f];
156        return `<li${fam(f)}><p class="home-family-name" aria-hidden="true"><span>${NAMES[f]}</span></p><h3>${NAMES[f]} <code>${esc(info?.seed ?? "")}</code></h3><p>${esc((info?.note ?? "").replace(/\s*\(rules?[^)]*\)/g, ""))}</p></li>`;
157      }).join("\n      ")}
158    </ul>
159    <div class="home-try">
160      <h3 id="try-h">One attribute changes the family</h3>
161      <p class="home-sub">These are Capsomer's own components, live. Pick a family and the panel takes it, the way a site does with <code>data-family</code>; the theme button at the top switches light and dark.</p>
162      <fieldset class="cap-seg">
163        <legend>Family</legend>
164        <div class="cap-seg-options">
165          ${FAMILIES.map((f, i) => `<label><input type="radio" name="home-family" value="${f}"${i === 0 ? " checked" : ""} /> ${NAMES[f]}</label>`).join("\n          ")}
166        </div>
167      </fieldset>
168      <div class="home-try-stage" data-cap-part="stage">
169        <div class="home-try-row">
170          <button type="button" class="cap-btn" data-variant="primary">Save changes</button>
171          <button type="button" class="cap-btn" data-variant="secondary">Preview</button>
172          <button type="button" class="cap-btn">Cancel</button>
173          <button type="button" class="cap-btn" data-variant="link">View history</button>
174        </div>
175        <div class="cap-field">
176          <label class="cap-field-label" for="home-try-name">Site name</label>
177          <input class="cap-input" id="home-try-name" value="Phage λ notes" autocomplete="off" />
178        </div>
179        <div class="home-try-row">
180          <label class="cap-switch" data-cap="switch"><input type="checkbox" role="switch" checked /> Publish on save <span class="cap-switch-state" aria-hidden="true">On</span></label>
181          <div class="cap-chips" role="group" aria-label="Show">
182            <button type="button" class="cap-chip" aria-pressed="true">Drafts</button>
183            <button type="button" class="cap-chip" aria-pressed="false">Published</button>
184          </div>
185        </div>
186        <div class="home-try-row">
187          <span class="cap-status" data-tone="ok"><svg class="cap-status-glyph" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M8 1a7 7 0 1 0 0 14A7 7 0 1 0 8 1zM3.9 9l3 3 5.2-5.6-1.4-1.4-3.8 4.2-1.6-1.6z"/></svg>Healthy</span>
188          <span class="cap-status" data-tone="warn"><svg class="cap-status-glyph" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M8 1.2 15.4 14H.6zM7.3 6h1.4v4H7.3zM7.3 11h1.4v1.4H7.3z"/></svg>Needs you</span>
189          <span class="cap-status" data-tone="crit"><svg class="cap-status-glyph" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M5 1h6l4 4v6l-4 4H5l-4-4V5zM7.2 4h1.6v5H7.2zM7.2 10.4h1.6V12H7.2z"/></svg>Down</span>
190        </div>
191      </div>
192    </div>
193    <h3 class="home-albers-h">${d.pairs ? `${d.pairs.total - d.pairs.failing} of ${d.pairs.total} contrast pairs pass` : "Every contrast pair is checked"}</h3>
194    <p class="home-sub">A color is only as readable as what sits behind it, so the generator checks every pair a component puts together, in both themes, against WCAG 2.2. The squares are after Josef Albers's <i>Homage to the Square</i> (from 1950), his study of how a color changes with the one around it.</p>
195    <ul class="home-albers">
196      ${FAMILIES.map((f) => {
197        const [l, dk] = d.accentText[f] ?? [0, 0];
198        return `<li${fam(f)}><div class="home-albers-sq" aria-hidden="true"><div><div><div></div></div></div></div><p><b>${NAMES[f]}</b> text on its page: ${l.toFixed(1)}:1 light, ${dk.toFixed(1)}:1 dark</p></li>`;
199      }).join("\n      ")}
200    </ul>
201  </div>
202</section>
203
204<section id="type" data-family="navy" aria-labelledby="type-h">
205  ${band("Type", ["navy"], "section")}
206  <div class="home-wrap">
207    <h2 id="type-h">Three faces, one scale</h2>
208    <div class="home-faces">
209      <figure data-face="ui"><p aria-hidden="true">Aa</p><figcaption><b>Schibsted Grotesk</b> for every screen of an app</figcaption></figure>
210      <figure data-face="mono"><p aria-hidden="true">Aa</p><figcaption><b>Martian Mono</b> for identifiers and code</figcaption></figure>
211      <figure data-face="prose"><p aria-hidden="true">Aa</p><figcaption><b>Source Serif 4</b> for long reading</figcaption></figure>
212    </div>
213    <ol class="home-scale">
214      ${d.type.map(([name, value, note]) => `<li><span class="home-scale-sample" data-fs="${esc(name)}">Phage λ</span><code>--${esc(name)}</code><span>${esc(value)}</span><span class="home-muted">${esc(note)}</span></li>`).join("\n      ")}
215    </ol>
216  </div>
217</section>
218
219<section id="components" aria-labelledby="components-h">
220  ${band("Components", ["purple"], "section")}
221  <div class="home-wrap">
222    <h2 id="components-h">${d.components.length} components, every state on show</h2>
223    <p class="home-sub">Each one is built once and shared by every app. Open any of them for how to use it, every state it has in light and dark, and its test results.</p>
224    <div class="home-find" data-cap-part="find" hidden>
225      <label class="cap-field-label" for="home-find">Find a component</label>
226      <input class="cap-input" id="home-find" type="search" autocomplete="off" aria-describedby="home-find-n" />
227      <p class="home-muted" id="home-find-n" role="status">${d.components.length} components</p>
228    </div>
229    <ul class="home-parts">
230      ${d.components.map((c) => `<li><a href="/components/${esc(c.name)}/states">${esc(c.title)}</a><span>${prose(c.summary)}</span></li>`).join("\n      ")}
231    </ul>
232  </div>
233</section>
234
235<section id="defaults" data-family="teal" aria-labelledby="defaults-h">
236  ${band("Defaults", ["teal"], "section")}
237  <div class="home-wrap">
238    <h2 id="defaults-h">Defaults, each with its reason</h2>
239    <p class="home-sub">A default is not a law: a better design overrides it and writes down why. CI blocks only on accessibility, security, privacy and correctness. Open one for its reason.</p>
240    <ul class="home-defaults">
241      ${d.defaults.map((t) => `<li><details class="cap-disclosure"><summary><span>${prose(t.lead)}</span></summary><div class="cap-disclosure-body">${renderMarkdown(t.reason, 0)}</div></details></li>`).join("\n      ")}
242    </ul>
243  </div>
244</section>
245
246<section id="use" data-family="amber" aria-labelledby="use-h">
247  ${band("Install", ["amber"], "section")}
248  <div class="home-wrap">
249    <h2 id="use-h">Pin a release, import what you use</h2>
250    <p class="home-sub">An app pins a tagged release and imports the tokens, then each component's CSS as it needs it. Every Capsomer rule sits in a <code>cap.*</code> cascade layer, so the app's own CSS still wins while it moves over one screen at a time.</p>
251    <div class="home-code-wrap">
252      <pre class="home-code" id="home-install"><code>${esc(install)}</code></pre>
253      <button type="button" class="cap-btn" data-size="sm" data-cap-part="copy" aria-describedby="home-install" hidden>Copy</button>
254    </div>
255  </div>
256</section>
257</main>
258<footer class="home-foot">
259  <div class="home-wrap">
260    <ul>
261      <li><a href="/admin/">Admin</a></li>
262      <li><a href="https://github.com/DrDustinEdwards/capsomer">Source</a></li>
263      <li><a href="https://github.com/DrDustinEdwards/capsomer/blob/main/CHANGELOG.md">Changes</a></li>
264      <li><a href="https://dustinedwards.info">Dustin Edwards</a></li>
265    </ul>
266  </div>
267</footer>`;
268}