site/specimen.ts

Functions

None: it only declares types or values.

Imports

It imports no other module of this repo. No module of this repo imports it.

Source

1// Loaded by every component's states.html. It brings in the fonts, the tokens, the base
2// and every component's CSS, and sets the theme from ?theme=light|dark so the site can
3// show a page in either theme and the tests can visit both.
4import "@fontsource/schibsted-grotesk/400.css";
5import "@fontsource/schibsted-grotesk/500.css";
6import "@fontsource/schibsted-grotesk/600.css";
7import "@fontsource/schibsted-grotesk/800.css";
8import "@fontsource/martian-mono/400.css";
9import "@fontsource-variable/source-serif-4/index.css";
10import "../css/tokens.css";
11import "../css/base.css";
12import "../css/prose.css";
13import "./specimen.css";
14
15import.meta.glob("../components/*/*.css", { eager: true });
16
17const params = new URLSearchParams(location.search);
18const theme = params.get("theme");
19if (theme === "light" || theme === "dark") document.documentElement.dataset.theme = theme;
20
21// Page-level specimens (the shell, a status region) are written as
22// <template data-specimen="id" data-title="Title" data-height="420">. A states page shows
23// each one in a frame of its own, so every specimen is a whole document with one main
24// landmark and its own ids; ?only=<id> renders that one template as the whole page, which
25// is also what a spec visits.
26const only = params.get("only");
27if (only) {
28  const tpl = document.querySelector<HTMLTemplateElement>(`template[data-specimen="${CSS.escape(only)}"]`);
29  document.body.className = "cap-specimen-only";
30  document.body.replaceChildren(tpl ? tpl.content.cloneNode(true) : Object.assign(document.createElement("p"), { textContent: `No specimen named ${only}.` }));
31  document.title = `${tpl?.dataset.title ?? only}: ${document.title}`;
32} else {
33  for (const tpl of document.querySelectorAll<HTMLTemplateElement>("template[data-specimen]")) {
34    const id = tpl.dataset.specimen ?? "";
35    const section = document.createElement("section");
36    section.className = "cap-specimen";
37    section.setAttribute("aria-labelledby", `specimen-${id}`);
38    const h = document.createElement("h2");
39    h.id = `specimen-${id}`;
40    h.textContent = tpl.dataset.title ?? id;
41    const frame = document.createElement("iframe");
42    const q = new URLSearchParams({ only: id });
43    if (theme) q.set("theme", theme);
44    frame.src = `?${q}`;
45    frame.title = `${tpl.dataset.title ?? id} specimen`;
46    frame.className = "cap-specimen-frame";
47    frame.dataset.width = tpl.dataset.width ?? "";
48    // Sizes through the CSSOM, never a style attribute (CSP style-src 'self').
49    frame.style.setProperty("--frame-h", `${Number(tpl.dataset.height ?? 360)}px`);
50    if (tpl.dataset.width) frame.style.setProperty("--frame-w", `${Number(tpl.dataset.width)}px`);
51    section.append(h, frame);
52    tpl.replaceWith(section);
53  }
54}