react-cheminfo 0.7.0 → 0.9.0

package/lib/tokens/core/colors.js

@@ -0,0 +1,119 @@
+// tokens-ok: file — the colour reader is tested against literals.
+/**
+ * Reading a colour out of source text, in both spellings the same value is
+ * written in: `#5f6b7c` and `rgb(95 107 124)`. Both come back as the same six
+ * lowercase hex digits, so a table of banned colours holds one entry per
+ * colour rather than one per way of typing it.
+ */
+/**
+ * The colour a hex literal starts at, in `#rgb`, `#rgba`, `#rrggbb` or
+ * `#rrggbbaa` form. The alpha, when there is one, says nothing about the
+ * colour and is dropped.
+ * @param lower - The text being scanned, already lowercased.
+ * @param start - The index of the `#`.
+ * @returns The colour and its end, or `null` when it is not a hex colour.
+ */
+export function readHexColor(lower, start) {
+    let end = start + 1;
+    while (isHexDigit(lower[end]))
+        end++;
+    // A run of hex digits running straight into a word is an identifier — a
+    // private field, an anchor — rather than a colour.
+    if (isWordChar(lower[end]))
+        return null;
+    const digits = end - start - 1;
+    if (digits === 3 || digits === 4) {
+        const red = lower[start + 1];
+        const green = lower[start + 2];
+        const blue = lower[start + 3];
+        return { color: `${red}${red}${green}${green}${blue}${blue}`, end };
+    }
+    if (digits === 6 || digits === 8) {
+        return { color: lower.slice(start + 1, start + 7), end };
+    }
+    return null;
+}
+/**
+ * The colour an `rgb()` or `rgba()` call starts at, in either the comma or the
+ * space separated spelling.
+ *
+ * Only a plain byte triple is read: a percentage, a decimal or a variable
+ * inside the call means the value cannot be compared with a hex literal, and
+ * is left alone rather than guessed at.
+ * @param lower - The text being scanned, already lowercased.
+ * @param start - The index of the `r`.
+ * @returns The colour and its end, or `null` when it is not one.
+ */
+export function readRgbColor(lower, start) {
+    let open = -1;
+    if (lower.startsWith('rgb(', start))
+        open = start + 3;
+    else if (lower.startsWith('rgba(', start))
+        open = start + 4;
+    if (open === -1)
+        return null;
+    const close = lower.indexOf(')', open);
+    if (close === -1)
+        return null;
+    const components = [];
+    let value = -1;
+    for (let index = open + 1; index < close; index++) {
+        const char = lower[index];
+        if (char !== undefined && char >= '0' && char <= '9') {
+            value = Math.max(value, 0) * 10 + Number(char);
+            continue;
+        }
+        if (value >= 0) {
+            components.push(value);
+            value = -1;
+        }
+        // The alpha of the modern syntax, which the colour does not depend on.
+        if (char === '/')
+            break;
+        if (char !== ' ' && char !== ',' && char !== '\t' && char !== '\n') {
+            return null;
+        }
+    }
+    if (value >= 0)
+        components.push(value);
+    if (components.length < 3)
+        return null;
+    let color = '';
+    for (let index = 0; index < 3; index++) {
+        const component = components[index];
+        if (component === undefined || component > 255)
+            return null;
+        color += component.toString(16).padStart(2, '0');
+    }
+    return { color, end: close + 1 };
+}
+/**
+ * The `rrggbb` form of a colour written by hand — in an allow list, on a
+ * command line — in any of the spellings the scanner itself reads.
+ * @param value - The colour, with or without its `#`.
+ * @returns The six lowercase hex digits, or `null` when it is not a colour.
+ */
+export function normalizeColor(value) {
+    const text = value.trim().toLowerCase();
+    if (text === '')
+        return null;
+    let match = null;
+    if (text.startsWith('#'))
+        match = readHexColor(text, 0);
+    else if (text.startsWith('rgb'))
+        match = readRgbColor(text, 0);
+    else
+        match = readHexColor(`#${text}`, 0);
+    return match === null ? null : match.color;
+}
+function isHexDigit(char) {
+    if (char === undefined)
+        return false;
+    return (char >= '0' && char <= '9') || (char >= 'a' && char <= 'f');
+}
+function isWordChar(char) {
+    if (char === undefined)
+        return false;
+    return ((char >= '0' && char <= '9') || (char >= 'a' && char <= 'z') || char === '_');
+}
+//# sourceMappingURL=colors.js.map

package/lib/tokens/core/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/tokens/core/colors.ts"],"names":[],"mappings":"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"}

package/lib/tokens/core/index.d.ts

@@ -0,0 +1,3 @@
+export type { CheckTokensOptions, TokenViolation, TokenViolationKind, } from './checkTokens.ts';
+export { findTokenViolations } from './checkTokens.ts';
+//# sourceMappingURL=index.d.ts.map

package/lib/tokens/core/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tokens/core/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,kBAAkB,EAClB,cAAc,EACd,kBAAkB,GACnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/tokens/core/index.js

@@ -0,0 +1,2 @@
+export { findTokenViolations } from "./checkTokens.js";
+//# sourceMappingURL=index.js.map

package/lib/tokens/core/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tokens/core/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}

package/lib/tokens/core/rules.d.ts

@@ -0,0 +1,23 @@
+import type { TokenViolationKind } from './checkTokens.ts';
+/** What a colour a site may not write should have been. */
+export interface ColorRule {
+    /** Which kind of violation writing it raises. */
+    kind: TokenViolationKind;
+    /** The token to write instead, in one line. */
+    hint: string;
+}
+/**
+ * The colours a site may not write, keyed by their six lowercase hex digits.
+ *
+ * Two things land here. Blueprint's own neutrals and intent blue, which arrive
+ * by reading a value off a component and pasting it: they are near the
+ * family's greys without being them, which is what makes two of our sites
+ * opened side by side read as two products. And the family's own token values
+ * re-typed as literals, which pins the page to the colour the token held on
+ * the day it was copied — a retune then moves everything except it.
+ *
+ * `#ffffff` is deliberately absent: `--surface` is white, and so are a hundred
+ * legitimate whites in a shadow, a gradient or a `color-mix`.
+ */
+export declare const BANNED_COLORS: ReadonlyMap<string, ColorRule>;
+//# sourceMappingURL=rules.d.ts.map

package/lib/tokens/core/rules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rules.d.ts","sourceRoot":"","sources":["../../../src/tokens/core/rules.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,2DAA2D;AAC3D,MAAM,WAAW,SAAS;IACxB,iDAAiD;IACjD,IAAI,EAAE,kBAAkB,CAAC;IACzB,+CAA+C;IAC/C,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,CA8EvD,CAAC"}

package/lib/tokens/core/rules.js

@@ -0,0 +1,90 @@
+/**
+ * The colours a site may not write, keyed by their six lowercase hex digits.
+ *
+ * Two things land here. Blueprint's own neutrals and intent blue, which arrive
+ * by reading a value off a component and pasting it: they are near the
+ * family's greys without being them, which is what makes two of our sites
+ * opened side by side read as two products. And the family's own token values
+ * re-typed as literals, which pins the page to the colour the token held on
+ * the day it was copied — a retune then moves everything except it.
+ *
+ * `#ffffff` is deliberately absent: `--surface` is white, and so are a hundred
+ * legitimate whites in a shadow, a gradient or a `color-mix`.
+ */
+export const BANNED_COLORS = new Map([
+    [
+        'f6f7f9',
+        {
+            kind: 'blueprint-grey',
+            hint: "Blueprint's page grey — the family's page is var(--surface-sunken).",
+        },
+    ],
+    [
+        'd3d8de',
+        {
+            kind: 'blueprint-grey',
+            hint: "Blueprint's light grey — the family's line is var(--border).",
+        },
+    ],
+    [
+        '5f6b7c',
+        {
+            kind: 'blueprint-grey',
+            hint: "Blueprint's muted text — use var(--text-muted).",
+        },
+    ],
+    [
+        '2d72d2',
+        {
+            kind: 'blueprint-blue',
+            hint: "Blueprint's intent blue — the site's own colour is var(--accent).",
+        },
+    ],
+    [
+        '137cbd',
+        {
+            kind: 'blueprint-blue',
+            hint: "Blueprint's older intent blue — the site's own colour is var(--accent).",
+        },
+    ],
+    [
+        'f5f7fa',
+        {
+            kind: 'retyped-token',
+            hint: 'the value of --surface-sunken — use var(--surface-sunken).',
+        },
+    ],
+    [
+        'dfe3e8',
+        {
+            kind: 'retyped-token',
+            hint: 'the value of --border — use var(--border).',
+        },
+    ],
+    [
+        'c3cad3',
+        {
+            kind: 'retyped-token',
+            hint: 'the value of --border-strong — use var(--border-strong).',
+        },
+    ],
+    [
+        '16202c',
+        { kind: 'retyped-token', hint: 'the value of --text — use var(--text).' },
+    ],
+    [
+        '5b6875',
+        {
+            kind: 'retyped-token',
+            hint: 'the value of --text-muted — use var(--text-muted).',
+        },
+    ],
+    [
+        '8a96a3',
+        {
+            kind: 'retyped-token',
+            hint: 'the value of --text-faint — use var(--text-faint).',
+        },
+    ],
+]);
+//# sourceMappingURL=rules.js.map

package/lib/tokens/core/rules.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rules.js","sourceRoot":"","sources":["../../../src/tokens/core/rules.ts"],"names":[],"mappings":"AAWA;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,aAAa,GAAmC,IAAI,GAAG,CAGlE;IACA;QACE,QAAQ;QACR;YACE,IAAI,EAAE,gBAAgB;YACtB,IAAI,EAAE,qEAAqE;SAC5E;KACF;IACD;QACE,QAAQ;QACR;YACE,IAAI,EAAE,gBAAgB;YACtB,IAAI,EAAE,8DAA8D;SACrE;KACF;IACD;QACE,QAAQ;QACR;YACE,IAAI,EAAE,gBAAgB;YACtB,IAAI,EAAE,iDAAiD;SACxD;KACF;IACD;QACE,QAAQ;QACR;YACE,IAAI,EAAE,gBAAgB;YACtB,IAAI,EAAE,mEAAmE;SAC1E;KACF;IACD;QACE,QAAQ;QACR;YACE,IAAI,EAAE,gBAAgB;YACtB,IAAI,EAAE,yEAAyE;SAChF;KACF;IACD;QACE,QAAQ;QACR;YACE,IAAI,EAAE,eAAe;YACrB,IAAI,EAAE,4DAA4D;SACnE;KACF;IACD;QACE,QAAQ;QACR;YACE,IAAI,EAAE,eAAe;YACrB,IAAI,EAAE,4CAA4C;SACnD;KACF;IACD;QACE,QAAQ;QACR;YACE,IAAI,EAAE,eAAe;YACrB,IAAI,EAAE,0DAA0D;SACjE;KACF;IACD;QACE,QAAQ;QACR,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,wCAAwC,EAAE;KAC1E;IACD;QACE,QAAQ;QACR;YACE,IAAI,EAAE,eAAe;YACrB,IAAI,EAAE,oDAAoD;SAC3D;KACF;IACD;QACE,QAAQ;QACR;YACE,IAAI,EAAE,eAAe;YACrB,IAAI,EAAE,oDAAoD;SAC3D;KACF;CACF,CAAC,CAAC"}

package/lib/ui.d.ts

@@ -1,3 +1,4 @@
+export * from './about/ui/index.ts';
 export * from './capsule/ui/index.ts';
 export * from './chrome/ui/index.ts';
 export * from './citation/ui/index.ts';

package/lib/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}

package/lib/ui.js

@@ -1,3 +1,4 @@
+export * from "./about/ui/index.js";
 export * from "./capsule/ui/index.js";
 export * from "./chrome/ui/index.js";
 export * from "./citation/ui/index.js";

package/lib/ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui.js","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"ui.js","sourceRoot":"","sources":["../src/ui.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC"}

package/lib/vite.d.ts

@@ -1,2 +1,3 @@
 export * from './seo/vite/index.ts';
+export * from './slides/vite/index.ts';
 //# sourceMappingURL=vite.d.ts.map

package/lib/vite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["../src/vite.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"vite.d.ts","sourceRoot":"","sources":["../src/vite.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC"}

package/lib/vite.js

@@ -1,2 +1,3 @@
 export * from "./seo/vite/index.js";
+export * from "./slides/vite/index.js";
 //# sourceMappingURL=vite.js.map

package/lib/vite.js.map

@@ -1 +1 @@
-{"version":3,"file":"vite.js","sourceRoot":"","sources":["../src/vite.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"vite.js","sourceRoot":"","sources":["../src/vite.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-cheminfo",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "license": "MIT",
   "description": "Assembled React components shared by the cheminfo sites: a Cite button and an ecosystem menu",
   "author": "Luc Patiny",
@@ -14,18 +14,24 @@
   "exports": {
     "./core": "./lib/core.js",
     "./orbital": "./lib/orbital.js",
+    "./slides": "./lib/slides.js",
     "./structure": "./lib/structure.js",
     "./ui": "./lib/ui.js",
     "./vite": "./lib/vite.js",
     "./styles/*.css": "./styles/*.css"
   },
+  "bin": {
+    "cheminfo-check-tokens": "bin/check-tokens.mjs"
+  },
   "files": [
+    "bin",
     "lib",
     "src",
     "styles"
   ],
   "scripts": {
     "build-storybook": "storybook build",
+    "check-tokens": "node bin/check-tokens.mjs styles src",
     "check-types": "tsc --noEmit",
     "clean": "rimraf coverage lib storybook-static",
     "dev": "storybook dev -p 10815",
@@ -34,7 +40,7 @@
     "prepack": "npm run tsc",
     "prettier": "prettier --check .",
     "prettier-write": "prettier --write .",
-    "test": "npm run test-only && npm run check-types && npm run eslint && npm run prettier",
+    "test": "npm run test-only && npm run check-types && npm run check-tokens && npm run eslint && npm run prettier",
     "test-e2e": "playwright test",
     "test-e2e-ui": "playwright test --ui",
     "test-only": "vitest run --coverage",
@@ -42,7 +48,9 @@
     "tsc-build": "tsc --project tsconfig.build.json"
   },
   "dependencies": {
-    "cheminfo-font": "^1.28.0"
+    "cheminfo-font": "^1.28.0",
+    "react-markdown": "^10.1.0",
+    "rehype-raw": "^7.0.0"
   },
   "devDependencies": {
     "@blueprintjs/core": "^6.18.0",

package/src/about/core/about.ts

@@ -0,0 +1,176 @@
+import type { CitedWork } from '../../citation/core/works.ts';
+import type { CreditEntry, CreditId } from '../../credits/core/credits.ts';
+import { credits } from '../../credits/core/credits.ts';
+import { siteById } from '../../ecosystem/core/lookup.ts';
+import type { EcosystemSite, SiteId } from '../../ecosystem/core/sites.ts';
+
+/**
+ * What a site says about itself: the one page a visitor opens to find out what
+ * the tool is, what it stands on, and who to tell when it breaks.
+ *
+ * Every field is content, never markup. A site writes this record and the page
+ * is drawn from it, which is what keeps fourteen About pages in one order and
+ * one voice — the shape they were in before was fourteen hand-written pages,
+ * each crediting a different half of what it runs on.
+ */
+export interface AboutContent {
+  /** The site the page belongs to. */
+  siteId: SiteId;
+  /** One sentence: what this tool is. */
+  what: string;
+  /**
+   * At most two short paragraphs of context — what the site replaces, where
+   * its numbers come from, what it deliberately does not do.
+   * @default undefined
+   */
+  paragraphs?: readonly string[];
+  /** Three to six one-line entries: what a visitor can do here. */
+  can: readonly string[];
+  /** Ids into the shared credits registry, in display order. */
+  credits: readonly CreditId[];
+  /**
+   * Works to cite, from the citation module.
+   * @default undefined — the site asks for no citation of its own
+   */
+  cite?: readonly CitedWork[];
+  /**
+   * Licence the site itself is published under.
+   * @default 'MIT'
+   */
+  license?: string;
+  /**
+   * Where the sources live.
+   * @default the repository of the ECOSYSTEM_SITES record
+   */
+  repository?: string;
+  /**
+   * The running version, when the site knows it.
+   * @default undefined
+   */
+  version?: string;
+  /**
+   * Where a problem is reported.
+   * @default the repository's /issues
+   */
+  issues?: string;
+}
+
+/**
+ * The same record with nothing left to look up: every default filled in, and
+ * every credit id replaced by the entry it names.
+ */
+export interface ResolvedAbout {
+  /** The site's own record, which carries its name, tagline and colours. */
+  site: EcosystemSite;
+  what: string;
+  /** The context paragraphs, empty when the site writes none. */
+  paragraphs: readonly string[];
+  can: readonly string[];
+  /** The borrowed works themselves, in the order the site names them. */
+  credits: CreditEntry[];
+  /** The works to cite, empty when the site asks for none. */
+  cite: readonly CitedWork[];
+  license: string;
+  repository: string;
+  /** The running version, or `undefined` when the site does not know it. */
+  version: string | undefined;
+  issues: string;
+}
+
+/**
+ * Fill in what a site left to the family, and resolve what it named.
+ * @param content - What the site wrote about itself.
+ * @returns The record the About page is drawn from.
+ * @throws {Error} When the site is not one of the family, or when a credit id
+ *   is not in the registry: an About page that silently drops a borrowed work
+ *   credits nobody.
+ */
+export function resolveAbout(content: AboutContent): ResolvedAbout {
+  const site = siteById(content.siteId);
+  const repository = content.repository ?? site.repository;
+
+  return {
+    site,
+    what: content.what,
+    paragraphs: content.paragraphs ?? [],
+    can: content.can,
+    credits: credits(content.credits),
+    cite: content.cite ?? [],
+    license: content.license ?? DEFAULT_LICENSE,
+    repository,
+    version: content.version,
+    issues: content.issues ?? `${withoutTrailingSlash(repository)}/issues`,
+  };
+}
+
+/**
+ * What is wrong with a record before anyone reads the page it draws.
+ *
+ * Short and efficient prose is the house style, and prose is exactly what no
+ * test, lint rule or type ever checks: a `what` that runs to a paragraph and a
+ * `can` list of a dozen lines both compile. This is where that is caught, so a
+ * site can assert it in its own suite rather than discover it in review.
+ * @param content - What the site wrote about itself.
+ * @returns One line per problem, in reading order; empty when there is none.
+ */
+export function aboutProblems(content: AboutContent): string[] {
+  const problems: string[] = [];
+
+  if (content.what.length > WHAT_LIMIT) {
+    problems.push(
+      `\`what\` is ${content.what.length} characters: one sentence of at most ${WHAT_LIMIT} says what the tool is.`,
+    );
+  }
+
+  const can = content.can;
+  if (can.length < CAN_MIN || can.length > CAN_MAX) {
+    problems.push(
+      `\`can\` lists ${can.length} entries: between ${CAN_MIN} and ${CAN_MAX} is what a visitor reads before deciding to stay.`,
+    );
+  }
+  for (let index = 0; index < can.length; index++) {
+    const line = can[index] ?? '';
+    if (line.length > CAN_LINE_LIMIT) {
+      problems.push(
+        `\`can\` entry ${index + 1} is ${line.length} characters: one line of at most ${CAN_LINE_LIMIT}, not a sentence about it.`,
+      );
+    }
+  }
+
+  const paragraphs = content.paragraphs ?? [];
+  if (paragraphs.length > PARAGRAPH_MAX) {
+    problems.push(
+      `\`paragraphs\` holds ${paragraphs.length}: at most ${PARAGRAPH_MAX} short paragraphs of context, and the rest belongs in the README.`,
+    );
+  }
+  for (let index = 0; index < paragraphs.length; index++) {
+    const paragraph = paragraphs[index] ?? '';
+    if (paragraph.length > PARAGRAPH_LIMIT) {
+      problems.push(
+        `paragraph ${index + 1} is ${paragraph.length} characters: at most ${PARAGRAPH_LIMIT}, or it is documentation rather than context.`,
+      );
+    }
+  }
+
+  if (content.credits.length === 0) {
+    problems.push(
+      '`credits` is empty: every page of ours stands on borrowed work, and naming it is what the section is for.',
+    );
+  }
+
+  return problems;
+}
+
+/** What a site is published under unless it says otherwise. */
+const DEFAULT_LICENSE = 'MIT';
+
+const WHAT_LIMIT = 160;
+const CAN_MIN = 3;
+const CAN_MAX = 6;
+const CAN_LINE_LIMIT = 90;
+const PARAGRAPH_MAX = 2;
+const PARAGRAPH_LIMIT = 400;
+
+function withoutTrailingSlash(url: string): string {
+  return url.endsWith('/') ? url.slice(0, -1) : url;
+}

package/src/about/core/index.ts

@@ -0,0 +1,2 @@
+export type { AboutContent, ResolvedAbout } from './about.ts';
+export { aboutProblems, resolveAbout } from './about.ts';

package/src/about/ui/AboutCitations.tsx

@@ -0,0 +1,79 @@
+import type { CSSProperties, ReactElement } from 'react';
+
+import { DEFAULT_CITATION_STYLE } from '../../citation/core/formats.ts';
+import { doiUrl } from '../../citation/core/reference.ts';
+import type { CitedWork } from '../../citation/core/works.ts';
+import { CitationPreview } from '../../citation/ui/CitationPreview.tsx';
+
+export interface AboutCitationsProps {
+  /** The works the site asks for, in the order it names them. */
+  works: readonly CitedWork[];
+}
+
+/**
+ * What to cite, and what citing each work credits: a reader handed two
+ * references has to be told which is which before they can pick one.
+ * @param props - See {@link AboutCitationsProps}.
+ * @returns The works, each with its reference and its DOI.
+ */
+export function AboutCitations(props: AboutCitationsProps): ReactElement {
+  const { works } = props;
+
+  return (
+    <div className="about-citations" style={LIST_STYLE}>
+      {works.map((work) => (
+        <div key={work.reference.doi} className="about-citation">
+          <div style={WHAT_STYLE}>{work.what}</div>
+          {work.note === undefined ? null : (
+            <p style={NOTE_STYLE}>{work.note}</p>
+          )}
+          <div style={PLATE_STYLE}>
+            <CitationPreview
+              reference={work.reference}
+              format="text"
+              style={DEFAULT_CITATION_STYLE}
+            />
+          </div>
+          <a
+            href={doiUrl(work.reference)}
+            target="_blank"
+            rel="noopener noreferrer"
+            style={DOI_STYLE}
+          >
+            doi:{work.reference.doi}
+          </a>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const LIST_STYLE = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 14,
+} as const satisfies CSSProperties;
+
+const WHAT_STYLE = { fontWeight: 600 } as const satisfies CSSProperties;
+
+const NOTE_STYLE = {
+  margin: '2px 0 6px',
+  color: 'var(--text-muted)',
+  fontSize: 13,
+} as const satisfies CSSProperties;
+
+// The preview is set in the light ink of the tooltip it was drawn for, so it
+// is given the dark plate that ink is legible on.
+const PLATE_STYLE = {
+  padding: '8px 10px',
+  borderRadius: 'var(--radius)',
+  background: 'var(--text)',
+  overflow: 'auto',
+} as const satisfies CSSProperties;
+
+const DOI_STYLE = {
+  display: 'inline-block',
+  marginTop: 6,
+  color: 'var(--accent)',
+  fontSize: 12,
+} as const satisfies CSSProperties;