@caltho/site-kit 0.2.9 → 0.2.11

package/dist/next/sections.js

@@ -1,20 +1,41 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { placementClass } from "../content/index.js";
-import { image } from "./data.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { buttonStyleClass, placementClass } from "../content/index.js";
+import { ICONS } from "../sections/icons.js";
+import { videoEmbed } from "../sections/index.js";
+import { image, isDraft, lookValues } from "./data.js";
 import { Img } from "./parts/Img.js";
 import { Md } from "./parts/Md.js";
 import { Slideshow } from "./slideshow.js";
+/** The kit's own classes, drawn from the Look by sections.css. */
+export const KIT_CLASSES = {
+    section: "kit-section",
+    wrap: "kit-wrap",
+    headingLarge: "kit-h kit-h-large",
+    headingMedium: "kit-h kit-h-medium",
+    headingSmall: "kit-h kit-h-small",
+    text: "kit-text",
+    muted: "kit-muted",
+    button: "kit-button",
+    buttonQuiet: "kit-button kit-button-quiet",
+};
 /** A block of one of the kit's types, drawn; null for any other (the site's own to draw). */
-export function KitSection({ s, level = 2, classes = {} }) {
+export function KitSection({ s, level = 2, classes: given }) {
+    const classes = { ...KIT_CLASSES, ...definedOnly(given) };
     switch (s.type) {
         case "gallery":
             return _jsx(Gallery, { s: s, level: level, classes: classes });
         case "slideshow":
             return _jsx(Slides, { s: s, level: level, classes: classes });
+        case "own":
+            return _jsx(Own, { s: s, level: level, classes: classes });
         default:
             return null;
     }
 }
+/** A site's classes, those it left undefined taking the kit's ("" is the site's: nothing). */
+function definedOnly(c) {
+    return Object.fromEntries(Object.entries(c ?? {}).filter(([, v]) => typeof v === "string"));
+}
 const RATIO = { square: "1/1", landscape: "4/3", portrait: "4/5", "as-taken": undefined };
 function Heading({ level, id, className, children }) {
     const H = `h${Math.min(Math.max(level, 1), 6)}`;
@@ -24,7 +45,7 @@ function Heading({ level, id, className, children }) {
 function Gallery({ s, level, classes }) {
     const columns = Number(s.columns ?? "3");
     const headingId = s.heading ? `${s.id ?? "gallery"}-heading` : undefined;
-    return (_jsx("section", { className: [classes.section ?? "kit-section", "kit-gallery", placementClass(s)].filter(Boolean).join(" "), id: s.id, "aria-labelledby": headingId, children: _jsxs("div", { className: classes.wrap ?? "kit-wrap", children: [s.heading && (_jsx(Heading, { level: level, id: headingId, className: classes.heading ?? "kit-heading", children: s.heading })), s.intro && _jsx(Md, { text: s.intro, top: level + 1, className: "kit-intro" }), _jsx("ul", { className: `kit-gallery-grid kit-cols-${columns}`, children: s.images.map((img) => {
+    return (_jsx("section", { className: [classes.section, "kit-gallery", placementClass(s)].filter(Boolean).join(" "), id: s.id, "aria-labelledby": headingId, children: _jsxs("div", { className: classes.wrap, children: [s.heading && (_jsx(Heading, { level: level, id: headingId, className: classes.headingLarge, children: s.heading })), s.intro && _jsx(Md, { text: s.intro, top: level + 1, className: "kit-intro" }), _jsx("ul", { className: `kit-gallery-grid kit-cols-${columns}`, children: s.images.map((img) => {
                         const copies = image(img.src).srcset;
                         const largest = copies.at(-1)?.url ?? image(img.src).src;
                         return (_jsx("li", { children: _jsxs("figure", { children: [_jsx("a", { href: largest, className: "kit-gallery-open", children: _jsx(Img, { src: img.src, alt: img.alt, sizes: `(min-width: 1024px) ${Math.round(100 / columns)}vw, 50vw`, ratio: RATIO[s.shape ?? "square"] }) }), img.caption && _jsx("figcaption", { children: img.caption })] }) }, img.src));
@@ -34,5 +55,145 @@ const SLIDE_RATIO = { wide: "kit-shape-wide", landscape: "kit-shape-landscape",
 /** Photos one at a time (Slideshow), each with its caption under it; its heading above when it has one. */
 function Slides({ s, level, classes }) {
     const headingId = s.heading ? `${s.id ?? "slideshow"}-heading` : undefined;
-    return (_jsx("section", { className: [classes.section ?? "kit-section", "kit-slideshow", placementClass(s)].filter(Boolean).join(" "), id: s.id, "aria-labelledby": headingId, children: _jsxs("div", { className: classes.wrap ?? "kit-wrap", children: [s.heading && (_jsx(Heading, { level: level, id: headingId, className: classes.heading ?? "kit-heading", children: s.heading })), _jsx(Slideshow, { label: s.heading ?? "Photos", seconds: s.seconds, className: SLIDE_RATIO[s.shape ?? "wide"], children: s.images.map((img, i) => (_jsxs("figure", { children: [_jsx(Img, { src: img.src, alt: img.alt, sizes: "(min-width: 1200px) 1200px, 100vw", eager: i === 0 }), img.caption && _jsx("figcaption", { children: img.caption })] }, img.src))) })] }) }));
+    return (_jsx("section", { className: [classes.section, "kit-slideshow", placementClass(s)].filter(Boolean).join(" "), id: s.id, "aria-labelledby": headingId, children: _jsxs("div", { className: classes.wrap, children: [s.heading && (_jsx(Heading, { level: level, id: headingId, className: classes.headingLarge, children: s.heading })), _jsx(Slideshow, { label: s.heading ?? "Photos", seconds: s.seconds, className: SLIDE_RATIO[s.shape ?? "wide"], children: s.images.map((img, i) => (_jsxs("figure", { children: [_jsx(Img, { src: img.src, alt: img.alt, sizes: "(min-width: 1200px) 1200px, 100vw", eager: i === 0 }), img.caption && _jsx("figcaption", { children: img.caption })] }, img.src))) })] }) }));
+}
+const SHAPE = { "as-taken": undefined, landscape: "4/3", square: "1/1", portrait: "4/5" };
+const COLUMNS = { one: 1, two: 2, three: 3, four: 4, "wide-left": 2, "wide-right": 2 };
+/**
+ * A section of the business's own: its heading and intro (in the site's section heading style), then
+ * its columns of parts, laid out as chosen, each part in the site's own classes where it gave them
+ * and the kit's otherwise. A part's heading is the page's next level down (two down under a section
+ * heading). Its tone and spacing are classes (sections.css) from the site's Look: on soft, brand or
+ * dark it's a card inset within the content's width (its shape, unless it's a band across the
+ * page); a photo behind it is a picture under a scrim, the words light over it. On brand, dark or a
+ * photo the kit keeps the words and buttons readable over the site's own colour classes.
+ */
+function Own({ s, level, classes }) {
+    const n = COLUMNS[s.layout ?? "one"] ?? 1;
+    const columns = s.columns.slice(0, n);
+    const tone = s.tone ?? "plain";
+    const behind = s.background;
+    const inverse = Boolean(behind) || tone === "brand" || tone === "dark";
+    const shaped = tone !== "plain" && !behind;
+    const align = s.align ?? "left";
+    const headingId = s.heading ? `${s.id ?? "own"}-heading` : undefined;
+    const partLevel = s.heading ? level + 1 : level;
+    const className = [
+        classes.section,
+        "kit-own",
+        `kit-own-${tone}`,
+        `kit-own-pad-${s.spacing ?? "normal"}`,
+        shaped && `kit-own-shape-${s.shape ?? "card"}`,
+        behind && "kit-own-behind",
+        inverse && "kit-own-inverse",
+        placementClass(s),
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return (_jsxs("section", { className: className, id: s.id, "aria-labelledby": headingId, children: [behind && (_jsx("div", { className: "kit-own-bg", "aria-hidden": "true", children: _jsx(Img, { src: behind.src, alt: "", sizes: "100vw" }) })), _jsx("div", { className: classes.wrap, children: _jsxs("div", { className: "kit-own-panel", children: [(s.heading || s.intro) && (_jsxs("div", { className: `kit-own-head kit-own-align-${align}`, children: [s.heading && (_jsx(Heading, { level: level, id: headingId, className: classes.headingLarge, children: s.heading })), s.intro && _jsx(Md, { text: s.intro, top: level + 1, className: ["kit-own-intro", classes.text].filter(Boolean).join(" ") })] })), _jsx("div", { className: `kit-own-grid kit-own-${s.layout ?? "one"} kit-own-align-${align}`, children: columns.map((c, i) => (_jsx("div", { className: ["kit-own-column", c.card && "kit-own-card", c.end && "kit-own-column-end", c.place && c.place !== "top" && `kit-own-column-${c.place}`].filter(Boolean).join(" "), children: runs(c.parts).map((run) => run.buttons ? (_jsx("div", { className: "kit-own-actions", children: run.parts.map((p, j) => (_jsx(OwnPart, { p: p, level: partLevel, classes: classes, columns: n }, run.at + j))) }, run.at)) : (_jsx(OwnPart, { p: run.parts[0], level: partLevel, classes: classes, columns: n }, run.at))) }, i))) })] }) })] }));
+}
+/** A column's parts, buttons one after another kept together (side by side, wrapping on a phone). */
+function runs(parts) {
+    const out = [];
+    parts.forEach((p, i) => {
+        const last = out.at(-1);
+        if (p.type === "button" && last?.buttons)
+            last.parts.push(p);
+        else
+            out.push({ at: i, buttons: p.type === "button", parts: [p] });
+    });
+    return out;
+}
+/** A part's words in the Look's other font, where it says. */
+const fontClass = (font) => (font === "text" ? "kit-font-text" : font === "heading" ? "kit-font-heading" : undefined);
+function OwnPart({ p, level, classes, columns }) {
+    const width = `(min-width: 1024px) ${Math.round(100 / columns)}vw, 100vw`;
+    switch (p.type) {
+        case "heading": {
+            // Display, page and large are the section's own heading level (display and page drawn at the
+            // Look's largest sizes); medium and small the levels under it.
+            const big = p.size === "large" || p.size === "display" || p.size === "page";
+            const at = level + (big ? 0 : p.size === "small" ? 2 : 1);
+            const cls = [big ? classes.headingLarge : p.size === "small" ? classes.headingSmall : classes.headingMedium, p.size === "display" && "kit-type-display", p.size === "page" && "kit-type-h1", fontClass(p.font)];
+            return (_jsx(Heading, { level: at, className: cls.filter(Boolean).join(" "), children: p.text }));
+        }
+        case "text":
+            return _jsx(Md, { text: p.text, top: level + 1, className: ["kit-own-text", classes.text, fontClass(p.font)].filter(Boolean).join(" ") });
+        case "photo":
+            // No photo chosen yet: a quiet box where it will go in CalOS's preview, nothing on the site.
+            if (!p.image)
+                return isDraft() ? _jsx("div", { className: `kit-own-photo-empty kit-own-shape-${p.shape ?? "as-taken"}`, "aria-hidden": "true" }) : null;
+            return (_jsxs("figure", { className: "kit-own-photo", children: [_jsx(Img, { src: p.image.src, alt: p.image.alt, sizes: width, ratio: SHAPE[p.shape ?? "as-taken"] }), p.image.caption && _jsx("figcaption", { children: p.image.caption })] }));
+        case "button": {
+            const quiet = p.style === "quiet";
+            // One of the business's own button styles, where it names one (kit-btn-3); else the theme's.
+            let vars = {};
+            try {
+                vars = lookValues();
+            }
+            catch {
+                // Drawn without the site's data (a test): only the theme's styles.
+            }
+            const own = buttonStyleClass(p.style, vars);
+            return (_jsx("p", { className: quiet ? "kit-own-action kit-own-action-quiet" : "kit-own-action", children: _jsx("a", { href: p.href, className: [quiet ? classes.buttonQuiet : p.style === "accent" ? `${classes.button} kit-button-accent` : classes.button, own].filter(Boolean).join(" "), children: p.label }) }));
+        }
+        case "list": {
+            const L = p.style === "numbers" ? "ol" : "ul";
+            return (_jsx(L, { className: ["kit-own-list", `kit-own-list-${p.style ?? "bullets"}`, classes.text].filter(Boolean).join(" "), children: p.items.map((item, i) => (_jsx("li", { children: item }, i))) }));
+        }
+        case "items": {
+            const L = p.numbered === false ? "ul" : "ol";
+            return (_jsx(L, { className: ["kit-own-items", p.lines === false ? "" : "kit-own-items-lines"].filter(Boolean).join(" "), children: p.items.map((it, i) => (_jsxs("li", { children: [p.numbered !== false && (_jsx("span", { className: ["kit-own-items-n", classes.muted].filter(Boolean).join(" "), "aria-hidden": "true", children: String(i + 1).padStart(2, "0") })), _jsxs("div", { children: [_jsx("h3", { className: ["kit-own-items-title", classes.headingMedium, fontClass(p.font)].filter(Boolean).join(" "), children: it.title }), it.text && _jsx("p", { className: ["kit-own-items-text", classes.muted].filter(Boolean).join(" "), children: it.text })] })] }, i))) }));
+        }
+        case "quote":
+            return (_jsxs("figure", { className: "kit-own-quote", children: [_jsx("blockquote", { className: [classes.text, fontClass(p.font)].filter(Boolean).join(" "), children: p.text }), p.who && _jsx("figcaption", { className: classes.muted, children: p.who })] }));
+        case "stats":
+            return (_jsx("dl", { className: "kit-own-stats", children: p.items.map((it, i) => (_jsxs("div", { children: [_jsx("dt", { className: classes.muted, children: it.label }), _jsx("dd", { className: classes.headingMedium, children: it.value })] }, i))) }));
+        case "price":
+            return (_jsxs("p", { className: "kit-own-price", children: [_jsx("span", { className: `kit-own-amount ${classes.headingMedium}`, children: p.amount }), p.per && _jsxs("span", { className: `kit-own-per ${classes.muted}`, children: [" ", p.per] }), p.note && _jsx("span", { className: `kit-own-note ${classes.muted}`, children: p.note })] }));
+        case "gallery": {
+            const n = Number(p.columns ?? "3");
+            return (_jsx("ul", { className: `kit-gallery-grid kit-cols-${n}`, children: p.images.map((img) => (_jsx("li", { children: _jsxs("figure", { children: [_jsx(Img, { src: img.src, alt: img.alt, sizes: `(min-width: 1024px) ${Math.round(100 / (n * columns))}vw, 50vw`, ratio: "1/1" }), img.caption && _jsx("figcaption", { children: img.caption })] }) }, img.src))) }));
+        }
+        case "slideshow":
+            return (_jsx(Slideshow, { label: "Photos", seconds: p.seconds, className: "kit-shape-landscape", children: p.images.map((img, i) => (_jsxs("figure", { children: [_jsx(Img, { src: img.src, alt: img.alt, sizes: width, eager: i === 0 }), img.caption && _jsx("figcaption", { children: img.caption })] }, img.src))) }));
+        case "space":
+            return _jsx("div", { "aria-hidden": "true", className: `kit-own-space kit-own-space-${p.size ?? "medium"}` });
+        case "table":
+            return _jsx(Table, { p: p, level: level, classes: classes });
+        case "icon":
+            return ICONS[p.name] ? _jsx(Icon, { name: p.name, part: true, className: `kit-own-icon kit-own-icon-${p.size ?? "medium"}` }) : null;
+        case "logos":
+            return (_jsxs("div", { className: "kit-own-logos", children: [p.title && _jsx("p", { className: ["kit-own-logos-title", classes.muted].filter(Boolean).join(" "), children: p.title }), _jsx("ul", { children: p.images.map((img, i) => (_jsx("li", { children: _jsx(Img, { src: img.src, alt: img.alt, sizes: "200px" }) }, i))) })] }));
+        case "video": {
+            const embed = p.url ? videoEmbed(p.url) : null;
+            // No address yet (or one that isn't a video's): a quiet box where it will go in CalOS's preview, nothing on the site.
+            if (!embed)
+                return isDraft() ? _jsx("div", { className: "kit-own-video kit-own-video-empty", "aria-hidden": "true" }) : null;
+            return (_jsx("div", { className: "kit-own-video", children: _jsx("iframe", { src: embed.src, title: p.title, width: 1280, height: 720, loading: "lazy", allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture; fullscreen", allowFullScreen: true, referrerPolicy: "strict-origin-when-cross-origin" }) }));
+        }
+    }
+}
+/** One of the kit's line icons, drawn inline in the colour of what it's in; beside words, so hidden from a screen reader. */
+function Icon({ name, className, part }) {
+    return (_jsx("svg", { "data-icon": part ? name : undefined, className: className ? `kit-icon ${className}` : "kit-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", focusable: "false", children: ICONS[name].map((d, i) => (_jsx("path", { d: d }, i))) }));
+}
+/** A cell's words, or a tick for "yes" and a dash for "no", each read out as the word. */
+function Cell({ value }) {
+    const v = value.trim().toLowerCase();
+    if (v === "yes" || v === "no")
+        return (_jsxs("span", { className: v === "yes" ? "kit-table-yes" : "kit-table-no", children: [_jsx(Icon, { name: v === "yes" ? "check" : "minus" }), _jsx("span", { className: "kit-sr", children: v === "yes" ? "Yes" : "No" })] }));
+    return _jsx(_Fragment, { children: value });
+}
+/**
+ * Rows compared across a few columns: a table on a wider screen (a heading over each column, each
+ * row's label heading its row), and on a phone each row a small card of its own, its label as its
+ * heading, then each column's heading and the row's cell under it, so nothing is read across a
+ * table too wide to see. One or the other shows (sections.css), never both.
+ */
+function Table({ p, level, classes }) {
+    const heads = p.columns.slice(1);
+    const cells = (r) => heads.map((_, i) => r.cells[i] ?? "");
+    const picked = (i) => (p.highlight === i + 1 ? "kit-table-highlight" : undefined);
+    return (_jsxs("div", { className: "kit-own-table", children: [_jsx("div", { className: "kit-table-wide", children: _jsxs("table", { className: ["kit-table", classes.text].filter(Boolean).join(" "), children: [_jsx("thead", { children: _jsxs("tr", { children: [p.columns[0] ? _jsx("th", { scope: "col", children: p.columns[0] }) : _jsx("td", {}), heads.map((h, i) => (_jsx("th", { scope: "col", className: picked(i), children: h }, i)))] }) }), _jsx("tbody", { children: p.rows.map((r, j) => (_jsxs("tr", { children: [_jsx("th", { scope: "row", children: r.label }), cells(r).map((c, i) => (_jsx("td", { className: picked(i), children: _jsx(Cell, { value: c }) }, i)))] }, j))) })] }) }), _jsx("ul", { className: "kit-table-cards", children: p.rows.map((r, j) => (_jsxs("li", { className: "kit-table-card", children: [_jsx(Heading, { level: level, className: classes.headingSmall, children: r.label }), _jsx("dl", { className: classes.text || undefined, children: cells(r).map((c, i) => (_jsxs("div", { className: picked(i), children: [_jsx("dt", { children: heads[i] }), _jsx("dd", { children: _jsx(Cell, { value: c }) })] }, i))) })] }, j))) })] }));
 }

package/dist/prepare.d.ts

@@ -1,4 +1,4 @@
-import type { Site } from "./content/index.ts";
+import { type Site } from "./content/index.ts";
 export type PreparedImage = {
     width: number;
     height: number;
@@ -27,6 +27,10 @@ export type Prepared = {
     preferPicture?: boolean;
     /** Where its visits are counted, when CalOS counts them (Caltho's analytics server): finish puts its script in every page. */
     analytics?: Analytics;
+    /** The Look's values as CSS variables (lookVars), for a site with a Look: KitBlocks reads its colours to know a dark background. */
+    look?: Record<string, string>;
+    /** The @font-face rules for the Google fonts its Look uses, their files fetched into public/_fonts (LookStyle writes them). */
+    fontFaces?: string;
 };
 /** A site's visits counted: the id its pages send them with, where they're sent, and the script that sends them. */
 export type Analytics = {

package/dist/prepare.js

@@ -19,6 +19,8 @@ import { copyFile, mkdir, readdir, readFile, writeFile } from "node:fs/promises"
 import { dirname, extname, join, relative } from "node:path";
 import sharp from "sharp";
 import { pathToFileURL } from "node:url";
+import { lookVars, uploadedFontCss } from "./content/index.js";
+import { fontFaceCss, fontFiles, googleFont, servedAt } from "./fonts-google.js";
 import { imagesIn, shareImageOf } from "./images.js";
 import { makeCards } from "./share.js";
 /** What CalOS says of the site's analytics, taken only when it's whole and its addresses are https (or a laptop's). */
@@ -107,7 +109,9 @@ export async function prepare(root, env = process.env, log = console.log) {
     const images = await pictures(site, imagesDir, pub, log);
     const cards = await makeCards(site, definition.share, root, pub, log);
     const preferPicture = !!definition.share && definition.share.prefer === "picture";
-    const prepared = { site, images, csp: definition.csp, cards, ...(preferPicture ? { preferPicture } : {}), ...(editors.length ? { editors } : {}), ...(analytics ? { analytics } : {}) };
+    const look = definition.look ? lookVars(site.look, definition.look) : undefined;
+    const fontFaces = definition.look ? [await googleFontsFor(site.look, definition.look, pub, log), await uploadedFontsFor(site.look, imagesDir, pub, log)].filter(Boolean).join("\n") : "";
+    const prepared = { site, images, csp: definition.csp, cards, ...(look ? { look } : {}), ...(fontFaces ? { fontFaces } : {}), ...(preferPicture ? { preferPicture } : {}), ...(editors.length ? { editors } : {}), ...(analytics ? { analytics } : {}) };
     await writeFile(join(out, "prepared.json"), JSON.stringify(prepared));
     log(`site-kit: content from ${from}, ${site.pages.length} pages, ${Object.keys(images).length} images${analytics ? ", visits counted" : ""}`);
     return prepared;
@@ -217,3 +221,57 @@ async function pushSchema(contentUrl, schemaUrl, token, schema, log) {
         log(`site-kit: warning: couldn't tell CalOS the site's schema (${url}): ${err.message}`);
     }
 }
+/**
+ * The Google fonts the Look uses (a heading or text font that isn't one of the site's own): each
+ * one's files fetched once into public/_fonts, so the site serves them itself, and their
+ * @font-face rules. A file a font doesn't have (no italic at a weight) is skipped; one that can't
+ * be fetched stops the build, rather than a site going out in the wrong font.
+ */
+/**
+ * The fonts the business uploaded in CalOS (fetched with its pictures into content/images/fonts):
+ * copied to public/_fonts/own, served by the site, and their @font-face rules. A file the content
+ * names that isn't there stops the build, as a missing picture does.
+ */
+async function uploadedFontsFor(look, imagesDir, pub, log) {
+    const rules = [];
+    for (const f of look?.uploadedFonts ?? []) {
+        for (const x of f.files) {
+            const from = join(imagesDir, x.src);
+            if (!existsSync(from))
+                throw new Error(`The content names a font file that isn't in content/images: ${x.src}`);
+            const at = join(pub, "_fonts", "own", x.src.slice("fonts/".length));
+            await mkdir(dirname(at), { recursive: true });
+            await writeFile(at, await readFile(from));
+        }
+        rules.push(uploadedFontCss(f, (src) => `/_fonts/own/${src.slice("fonts/".length)}`));
+        log(`site-kit: ${f.family} (uploaded), ${f.files.length} files, served by the site`);
+    }
+    return rules.join("\n");
+}
+async function googleFontsFor(look, o, pub, log) {
+    const own = o.fonts ?? {};
+    const names = [...new Set([look?.headingFont, look?.bodyFont].filter((n) => typeof n === "string" && !(n in own)))];
+    const rules = [];
+    for (const name of names) {
+        const f = googleFont(name);
+        if (!f)
+            continue;
+        const kept = [];
+        for (const x of fontFiles(f)) {
+            const at = join(pub, servedAt(f, x));
+            if (!existsSync(at)) {
+                const res = await fetch(x.url);
+                if (res.status === 404)
+                    continue;
+                if (!res.ok)
+                    throw new Error(`Couldn't fetch ${f.family} (${x.file}): ${res.status}`);
+                await mkdir(dirname(at), { recursive: true });
+                await writeFile(at, new Uint8Array(await res.arrayBuffer()));
+            }
+            kept.push(x);
+        }
+        rules.push(fontFaceCss(f, kept, (x) => servedAt(f, x)));
+        log(`site-kit: ${f.family}, ${kept.length} files, served by the site`);
+    }
+    return rules.join("\n");
+}

package/dist/preview-match.d.ts

@@ -23,3 +23,11 @@ export declare function fieldForImage(value: unknown, base: Path, url: string, i
         url: string;
     }[];
 }>): Path | null;
+/**
+ * Which block drew each of `main`'s drawn children, by the block's index (null: not known). `drawn`:
+ * each child's words, its pictures' alt text included. One drawn for each block pairs them in order.
+ * Otherwise they're found by their words, in order: a block may draw nothing (a list with nothing in
+ * it yet) or more than one (a hero above its rows), and a child without the words to say is left
+ * unknown, never guessed, unless the next block has no words to find it by.
+ */
+export declare function matchBlocks(blocks: unknown[], drawn: string[]): (number | null)[];

package/dist/preview-match.js

@@ -4,7 +4,7 @@
 /** The preview page's list of the pictures its build made (by path), as a JSON script with this id (../finish.ts). */
 export const BUILT_IMAGES = "calos-built-images";
 /** Keys that hold no words a visitor reads: never what a click on words means. */
-const SKIP = new Set(["type", "id", "href", "path", "style", "menuStyle", "footer", "ratio", "tone"]);
+const SKIP = new Set(["type", "id", "href", "url", "path", "style", "menuStyle", "footer", "ratio", "tone"]);
 /** Words as they read on the page: Markdown's marks gone, a link's address gone, spacing and case evened. */
 export function readable(text) {
     return text
@@ -78,3 +78,35 @@ export function fieldForImage(value, base, url, images) {
     // The picture's group (its src and alt together) is what's edited.
     return hit.path.slice(0, -1).length > base.length ? hit.path.slice(0, -1) : hit.path;
 }
+/**
+ * Which block drew each of `main`'s drawn children, by the block's index (null: not known). `drawn`:
+ * each child's words, its pictures' alt text included. One drawn for each block pairs them in order.
+ * Otherwise they're found by their words, in order: a block may draw nothing (a list with nothing in
+ * it yet) or more than one (a hero above its rows), and a child without the words to say is left
+ * unknown, never guessed, unless the next block has no words to find it by.
+ */
+export function matchBlocks(blocks, drawn) {
+    if (drawn.length === blocks.length)
+        return blocks.map((_, i) => i);
+    const page = drawn.map(readable);
+    const words = blocks.map((b) => textsIn(b).map((t) => readable(t.text)).filter((t) => t.length >= 4));
+    const out = [];
+    let last = -1;
+    for (const text of page) {
+        // A later block whose words are here, else more of the block before (its words here too), else
+        // the next one when it has no words to be found by.
+        const shows = (i) => words[i].some((w) => text.includes(w));
+        let at = null;
+        for (let i = last + 1; i < blocks.length && at === null; i++)
+            if (shows(i))
+                at = i;
+        if (at === null && last >= 0 && shows(last))
+            at = last;
+        if (at === null && last + 1 < blocks.length && !words[last + 1].length)
+            at = last + 1;
+        out.push(at);
+        if (at !== null)
+            last = at;
+    }
+    return out;
+}

package/dist/schema.d.ts

@@ -58,3 +58,13 @@ export declare function checkStructure(site: {
 export declare function describePath(raw: unknown, path: PropertyKey[]): string;
 /** The last named field in a path, for a short label. */
 export declare const fieldOf: (path: (string | number)[]) => string | undefined;
+/**
+ * What a block is called where a person sees a list of them (CalOS's sections, Cal's changes): a
+ * section of the business's own by its heading, else its first heading part; any other by its
+ * `heading`, `title` or the first line of its `headline`; else what its kind is called
+ * (`kindTitle`). At most 60 characters.
+ */
+export declare function blockLabel(block: {
+    type?: unknown;
+    [field: string]: unknown;
+}, kindTitle: string): string;

package/dist/schema.js

@@ -235,3 +235,29 @@ export function describePath(raw, path) {
 }
 /** The last named field in a path, for a short label. */
 export const fieldOf = words;
+/**
+ * What a block is called where a person sees a list of them (CalOS's sections, Cal's changes): a
+ * section of the business's own by its heading, else its first heading part; any other by its
+ * `heading`, `title` or the first line of its `headline`; else what its kind is called
+ * (`kindTitle`). At most 60 characters.
+ */
+export function blockLabel(block, kindTitle) {
+    const str = (v) => (typeof v === "string" && v.trim() ? v.trim().split("\n")[0].trim() : undefined);
+    let label;
+    if (block.type === "own") {
+        label = str(block.heading);
+        if (!label && Array.isArray(block.columns)) {
+            for (const c of block.columns) {
+                const h = Array.isArray(c?.parts) ? c.parts.find((p) => p?.type === "heading" && str(p.text)) : undefined;
+                if (h) {
+                    label = str(h.text);
+                    break;
+                }
+            }
+        }
+    }
+    else
+        label = str(block.heading) ?? str(block.title) ?? str(block.headline);
+    const out = label ?? kindTitle;
+    return out.length > 60 ? `${out.slice(0, 59).trimEnd()}…` : out;
+}

package/dist/sections/icons.d.ts

@@ -0,0 +1,47 @@
+/** Each icon's strokes, as SVG path data (stroke 2, round ends and joins, no fill). */
+export declare const ICONS: {
+    readonly check: readonly ["M20 6 9 17l-5-5"];
+    readonly calendar: readonly ["M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z", "M16 2v4M8 2v4M3 10h18"];
+    readonly clock: readonly ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M12 6v6l4 2"];
+    readonly users: readonly ["M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2", "M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z", "M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"];
+    readonly user: readonly ["M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2", "M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"];
+    readonly chat: readonly ["M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"];
+    readonly mail: readonly ["M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z", "m22 6-10 7L2 6"];
+    readonly phone: readonly ["M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z"];
+    readonly "map-pin": readonly ["M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z", "M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"];
+    readonly chart: readonly ["M18 20V10M12 20V4M6 20v-6"];
+    readonly file: readonly ["M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z", "M14 2v6h6M16 13H8M16 17H8M10 9H8"];
+    readonly folder: readonly ["M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"];
+    readonly invoice: readonly ["M5 2h14v20l-3-2-2 2-2-2-2 2-2-2-3 2z", "M9 7h6M9 11h6M9 15h4"];
+    readonly card: readonly ["M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z", "M1 10h22"];
+    readonly shield: readonly ["M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"];
+    readonly lock: readonly ["M5 11h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2z", "M7 11V7a5 5 0 0 1 10 0v4"];
+    readonly star: readonly ["m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"];
+    readonly heart: readonly ["M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"];
+    readonly bolt: readonly ["M13 2 3 14h9l-1 8 10-12h-9z"];
+    readonly gear: readonly ["M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z", "M12 19a7 7 0 1 0 0-14 7 7 0 0 0 0 14z", "M12 1v4M12 19v4M1 12h4M19 12h4M4.2 4.2l2.85 2.85M16.95 16.95l2.85 2.85M4.2 19.8l2.85-2.85M16.95 7.05l2.85-2.85"];
+    readonly search: readonly ["M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z", "m21 21-4.35-4.35"];
+    readonly home: readonly ["m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z", "M9 22V12h6v10"];
+    readonly building: readonly ["M4 22V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v18", "M2 22h20", "M9 6h1M14 6h1M9 10h1M14 10h1M9 14h1M14 14h1", "M10 22v-4h4v4"];
+    readonly truck: readonly ["M1 3h15v13H1z", "M16 8h4l3 3v5h-7z", "M5.5 21a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z", "M18.5 21a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"];
+    readonly wrench: readonly ["M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"];
+    readonly leaf: readonly ["M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z", "M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"];
+    readonly sun: readonly ["M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10z", "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"];
+    readonly globe: readonly ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M2 12h20", "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"];
+    readonly link: readonly ["M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71", "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"];
+    readonly camera: readonly ["M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z", "M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"];
+    readonly play: readonly ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "m10 8 6 4-6 4z"];
+    readonly "arrow-right": readonly ["M5 12h14M12 5l7 7-7 7"];
+    readonly plus: readonly ["M12 5v14M5 12h14"];
+    readonly minus: readonly ["M5 12h14"];
+    readonly x: readonly ["M18 6 6 18M6 6l12 12"];
+    readonly info: readonly ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M12 16v-4M12 8h.01"];
+    readonly warning: readonly ["M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z", "M12 9v4M12 17h.01"];
+    readonly list: readonly ["M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"];
+    readonly grid: readonly ["M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z"];
+    readonly tag: readonly ["M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z", "M7 7h.01"];
+    readonly award: readonly ["M12 15a7 7 0 1 0 0-14 7 7 0 0 0 0 14z", "M8.21 13.89 7 23l5-3 5 3-1.21-9.12"];
+};
+export type IconName = keyof typeof ICONS;
+/** Every icon's name, in the order CalOS offers them. */
+export declare const ICON_NAMES: [IconName, ...IconName[]];

package/dist/sections/icons.js

@@ -0,0 +1,51 @@
+// The kit's icons: plain line drawings on a 24-unit grid, drawn inline (an `own` section's icon part,
+// a table's yes and no) so they need nothing fetched and take the colour of what they're in. No
+// sparkles: an icon says what something is, not that it's new or clever.
+/** Each icon's strokes, as SVG path data (stroke 2, round ends and joins, no fill). */
+export const ICONS = {
+    check: ["M20 6 9 17l-5-5"],
+    calendar: ["M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z", "M16 2v4M8 2v4M3 10h18"],
+    clock: ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M12 6v6l4 2"],
+    users: ["M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2", "M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z", "M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"],
+    user: ["M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2", "M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"],
+    chat: ["M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"],
+    mail: ["M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z", "m22 6-10 7L2 6"],
+    phone: [
+        "M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z",
+    ],
+    "map-pin": ["M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z", "M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"],
+    chart: ["M18 20V10M12 20V4M6 20v-6"],
+    file: ["M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z", "M14 2v6h6M16 13H8M16 17H8M10 9H8"],
+    folder: ["M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"],
+    invoice: ["M5 2h14v20l-3-2-2 2-2-2-2 2-2-2-3 2z", "M9 7h6M9 11h6M9 15h4"],
+    card: ["M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z", "M1 10h22"],
+    shield: ["M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"],
+    lock: ["M5 11h14a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2z", "M7 11V7a5 5 0 0 1 10 0v4"],
+    star: ["m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"],
+    heart: ["M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"],
+    bolt: ["M13 2 3 14h9l-1 8 10-12h-9z"],
+    gear: ["M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z", "M12 19a7 7 0 1 0 0-14 7 7 0 0 0 0 14z", "M12 1v4M12 19v4M1 12h4M19 12h4M4.2 4.2l2.85 2.85M16.95 16.95l2.85 2.85M4.2 19.8l2.85-2.85M16.95 7.05l2.85-2.85"],
+    search: ["M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z", "m21 21-4.35-4.35"],
+    home: ["m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z", "M9 22V12h6v10"],
+    building: ["M4 22V4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v18", "M2 22h20", "M9 6h1M14 6h1M9 10h1M14 10h1M9 14h1M14 14h1", "M10 22v-4h4v4"],
+    truck: ["M1 3h15v13H1z", "M16 8h4l3 3v5h-7z", "M5.5 21a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z", "M18.5 21a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"],
+    wrench: ["M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"],
+    leaf: ["M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z", "M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"],
+    sun: ["M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10z", "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"],
+    globe: ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M2 12h20", "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"],
+    link: ["M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71", "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"],
+    camera: ["M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z", "M12 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"],
+    play: ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "m10 8 6 4-6 4z"],
+    "arrow-right": ["M5 12h14M12 5l7 7-7 7"],
+    plus: ["M12 5v14M5 12h14"],
+    minus: ["M5 12h14"],
+    x: ["M18 6 6 18M6 6l12 12"],
+    info: ["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M12 16v-4M12 8h.01"],
+    warning: ["M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z", "M12 9v4M12 17h.01"],
+    list: ["M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"],
+    grid: ["M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z"],
+    tag: ["M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z", "M7 7h.01"],
+    award: ["M12 15a7 7 0 1 0 0-14 7 7 0 0 0 0 14z", "M8.21 13.89 7 23l5-3 5 3-1.21-9.12"],
+};
+/** Every icon's name, in the order CalOS offers them. */
+export const ICON_NAMES = Object.keys(ICONS);