@coralreefventures/site-tools 0.3.0 → 0.4.1

package/dist/lighthouse.js

@@ -11,6 +11,22 @@ import { mkdir, readFile, rm } from "node:fs/promises";
 import path from "node:path";
 import { serve } from "./serve.js";
 export const categories = ["performance", "accessibility", "best-practices", "seo"];
+/** The median of the scores, which three runs with one low outlier put at the typical run. */
+export const median = (values) => {
+    const sorted = [...values].sort((left, right) => left - right);
+    const middle = Math.floor(sorted.length / 2);
+    if (sorted.length === 0) {
+        return 0;
+    }
+    return sorted.length % 2 === 1
+        ? sorted[middle]
+        : (sorted[middle - 1] + sorted[middle]) / 2;
+};
+/** The categories under the threshold, by the median of each one's scores over the runs so far. */
+export const judge = (runs, threshold) => {
+    const scores = Object.fromEntries(categories.map((category) => [category, median(runs.map((run) => run[category]))]));
+    return { scores, low: categories.filter((category) => scores[category] < threshold) };
+};
 /** Every page's path from the export's sitemap, whatever origin the sitemap names. */
 export const pagesFromSitemap = async (root) => {
     const sitemap = await readFile(path.join(root, "sitemap.xml"), "utf8");
@@ -52,6 +68,25 @@ const audit = (url, base, version, chrome) => new Promise((resolve, reject) => {
     run.on("error", reject);
     run.on("exit", (code) => (code === 0 ? resolve() : reject(new Error(`Lighthouse exited with ${code} on ${url}`))));
 });
+const shown = (scores) => categories.map((category) => Math.round(scores[category] * 100)).join("  ");
+/** One page's verdict: measured again while under the threshold, up to `retries` more times; the median decides. */
+const measurePage = async (pagePath, base, measure) => {
+    const runs = [];
+    let verdict = judge(runs, measure.threshold);
+    while (runs.length === 0 || (verdict.low.length > 0 && runs.length <= measure.retries)) {
+        await audit(`${measure.origin}${pagePath}`, base, measure.version, measure.chrome);
+        const report = JSON.parse(await readFile(`${base}.report.json`, "utf8"));
+        const scores = Object.fromEntries(categories.map((category) => [category, report.categories[category]?.score ?? 0]));
+        runs.push(scores);
+        verdict = judge(runs, measure.threshold);
+        if (verdict.low.length > 0 && runs.length <= measure.retries) {
+            measure.log(`again ${pagePath.padEnd(28)} ${shown(scores)}   (run ${runs.length} of ${measure.retries + 1})`);
+        }
+    }
+    const over = runs.length > 1 ? `   (median of ${runs.length} runs)` : "";
+    measure.log(`${verdict.low.length ? "FAIL" : "ok  "} ${pagePath.padEnd(28)} ${shown(verdict.scores)}${over}`);
+    return { path: pagePath, scores: verdict.scores, low: verdict.low, runs: runs.length };
+};
 /**
  * The merge gate: Lighthouse on every page, each category at the threshold or above, with Lighthouse's default
  * mobile emulation and throttling, against the export served as the host serves it. A page under the threshold
@@ -61,6 +96,7 @@ export const runLighthouse = async (options = {}) => {
     const root = options.root ?? "out";
     const reportDir = options.reportDir ?? "lighthouse";
     const threshold = options.threshold ?? 0.9;
+    const retries = Math.max(0, options.retries ?? 2);
     const version = options.lighthouseVersion ?? "13.5.0";
     const log = options.log ?? console.log;
     const paths = options.paths?.length ? options.paths : await pagesFromSitemap(root);
@@ -71,14 +107,9 @@ export const runLighthouse = async (options = {}) => {
         await mkdir(reportDir, { recursive: true });
         for (const pagePath of paths) {
             const base = reportBase(reportDir, pagePath);
-            await audit(`${origin}${pagePath}`, base, version, chrome);
-            const report = JSON.parse(await readFile(`${base}.report.json`, "utf8"));
-            const scores = Object.fromEntries(categories.map((category) => [category, report.categories[category]?.score ?? 0]));
-            const low = categories.filter((category) => scores[category] < threshold);
-            results.push({ path: pagePath, scores, low });
-            const shown = categories.map((category) => Math.round(scores[category] * 100)).join("  ");
-            log(`${low.length ? "FAIL" : "ok  "} ${pagePath.padEnd(28)} ${shown}`);
-            if (low.length === 0) {
+            const result = await measurePage(pagePath, base, { origin, version, chrome, threshold, retries, log });
+            results.push(result);
+            if (result.low.length === 0) {
                 await rm(`${base}.report.json`);
                 await rm(`${base}.report.html`);
             }

package/dist/lighthouse.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coralreefventures/site-tools",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Command-line tools for a Coral Reef public site: serve the static export as the host does, gate it with Lighthouse, and lock it behind the door.",
   "license": "MIT",
   "type": "module",

package/src/bin/reef-door-bundle.ts

@@ -6,10 +6,16 @@ import { bundleDoor } from "../door/package.ts";
 
 const usage = `reef-door-bundle --site <id> [--out out] [--dest .amplify-hosting] --door-url <url> --hosts <h1,h2>
                  --jwks-url <url> [--signout-chain id=host,id=host] [--host-header host|x-forwarded-host]
+                 [--name <display name>] [--mark <file in out>] [--mark-dark <file in out>]
+                 [--accent #rrggbb] [--accent-dark #rrggbb]
 
 Locks a static export behind the door: writes .amplify-hosting with the export inside the gate's compute bundle and
 one route, /* to Compute. --door-url, --hosts, --jwks-url, --signout-chain and --host-header fall back to
-CRV_DOOR_URL, CRV_DOOR_HOSTS, CRV_DOOR_JWKS_URL, CRV_DOOR_SIGNOUT_CHAIN and CRV_DOOR_HOST_HEADER.`;
+CRV_DOOR_URL, CRV_DOOR_HOSTS, CRV_DOOR_JWKS_URL, CRV_DOOR_SIGNOUT_CHAIN and CRV_DOOR_HOST_HEADER.
+
+A page load without a session gets a coming-soon page: --name (the site id, capitalized, by default), --mark and
+--mark-dark (an .svg or .png inside the export, inlined; none by default), --accent and --accent-dark (the button's
+color in each scheme, at least 3:1 on the page; neutral by default).`;
 
 const { values } = parseArgs({
   options: {
@@ -21,6 +27,11 @@ const { values } = parseArgs({
     "jwks-url": { type: "string" },
     "signout-chain": { type: "string" },
     "host-header": { type: "string" },
+    name: { type: "string" },
+    mark: { type: "string" },
+    "mark-dark": { type: "string" },
+    accent: { type: "string" },
+    "accent-dark": { type: "string" },
     help: { type: "boolean", short: "h" },
   },
 });
@@ -52,6 +63,13 @@ try {
     jwksUrl,
     signout: parseSignoutChain(values["signout-chain"] ?? env.CRV_DOOR_SIGNOUT_CHAIN),
     hostHeader,
+    page: {
+      name: values.name,
+      mark: values.mark,
+      markDark: values["mark-dark"],
+      accent: values.accent,
+      accentDark: values["accent-dark"],
+    },
   });
   console.log(`reef-door-bundle: ${values.dest} written for ${values.site}, gate ${manifest.framework.version}`);
 } catch (error) {

package/src/bin/reef-lighthouse.ts

@@ -4,11 +4,13 @@ import { parseArgs } from "node:util";
 import { runLighthouse } from "../lighthouse.ts";
 
 /**
- * reef-lighthouse [--root out] [--reports lighthouse] [--port N] [--threshold 90] [--chrome <path>] [path ...]
+ * reef-lighthouse [--root out] [--reports lighthouse] [--port N] [--threshold 90] [--retries 2] [--chrome <path>] [path ...]
  *
  * Lighthouse on every page in the export's sitemap, or the paths given, each category at the threshold or above. The
- * export is served on a free port unless --port pins one (Streamlane's run met EADDRINUSE on a fixed 3160).
- * Exits 1 with the failing pages named when one is under, and leaves their reports in --reports.
+ * export is served on a free port unless --port pins one (Streamlane's run met EADDRINUSE on a fixed 3160). A page
+ * under the threshold is measured again, up to --retries more times, and the median of its runs decides, since a
+ * performance score swings a few points between runs on a shared runner. Exits 1 with the failing pages named when
+ * one is under, and leaves their reports in --reports.
  */
 const { values, positionals } = parseArgs({
   allowPositionals: true,
@@ -17,6 +19,7 @@ const { values, positionals } = parseArgs({
     reports: { type: "string", default: "lighthouse" },
     port: { type: "string" },
     threshold: { type: "string", default: "90" },
+    retries: { type: "string", default: "2" },
     chrome: { type: "string" },
     "lighthouse-version": { type: "string", default: "13.5.0" },
     help: { type: "boolean", short: "h" },
@@ -25,7 +28,7 @@ const { values, positionals } = parseArgs({
 
 if (values.help) {
   console.log(
-    "reef-lighthouse [--root out] [--reports lighthouse] [--port N] [--threshold 90] [--chrome <path>] [path ...]",
+    "reef-lighthouse [--root out] [--reports lighthouse] [--port N] [--threshold 90] [--retries 2] [--chrome <path>] [path ...]",
   );
   process.exit(0);
 }
@@ -36,6 +39,7 @@ const results = await runLighthouse({
   reportDir: values.reports,
   ...(values.port !== undefined && { port: Number(values.port) }),
   threshold,
+  retries: Number(values.retries),
   paths: positionals,
   lighthouseVersion: values["lighthouse-version"],
   ...(values.chrome !== undefined && { chrome: values.chrome }),

package/src/door/config.ts

@@ -1,5 +1,6 @@
 import { readFile } from "node:fs/promises";
 
+import { type PageConfig, type PageConfigFile, parsePageConfig } from "./page.ts";
 import { type Jwks, parseJwks } from "./verify.ts";
 
 /** One stop on the sign-out walk: a site behind the door, by id, and the host its gate answers on. */
@@ -20,9 +21,11 @@ export type GateConfigFile = {
   signout: SignoutStop[];
   /** The door's public keys. */
   jwks: { keys: unknown[] };
+  /** The coming-soon page a visitor without a session sees: the product's name, mark and colors. Optional (0.4.0). */
+  page?: PageConfigFile;
 };
 
-export type GateConfig = Omit<GateConfigFile, "jwks"> & { keys: Jwks; issuer: string };
+export type GateConfig = Omit<GateConfigFile, "jwks" | "page"> & { keys: Jwks; issuer: string; page: PageConfig };
 
 const siteId = /^[a-z0-9][a-z0-9-]{0,31}$/;
 const hostName = /^[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*(:\d{1,5})?$/;
@@ -79,6 +82,7 @@ export const parseGateConfig = (value: unknown): GateConfig => {
   }
   const signout = checkSignout(file.signout ?? []);
   const keys = parseJwks(file.jwks);
+  const page = parsePageConfig(file.page, file.site);
   return {
     version: 1,
     site: file.site,
@@ -88,6 +92,7 @@ export const parseGateConfig = (value: unknown): GateConfig => {
     hostHeader: file.hostHeader,
     signout,
     keys,
+    page,
   };
 };
 

package/src/door/package.ts

@@ -1,8 +1,9 @@
-import { cp, mkdir, readdir, readFile, rm, stat, writeFile } from "node:fs/promises";
+import { cp, mkdir, readdir, readFile, realpath, rm, stat, writeFile } from "node:fs/promises";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
 import { type GateConfigFile, parseGateConfig, type SignoutStop } from "./config.ts";
+import { maxMarkBytes, type PageConfigFile, type PageImage } from "./page.ts";
 import { parseJwks } from "./verify.ts";
 
 /**
@@ -10,7 +11,14 @@ import { parseJwks } from "./verify.ts";
  * import Node's modules and each other and nothing else, so the bundle needs no node_modules (a test holds the list
  * against the imports).
  */
-export const gateFiles = ["serve.js", "door/server.js", "door/config.js", "door/next.js", "door/verify.js"];
+export const gateFiles = [
+  "serve.js",
+  "door/server.js",
+  "door/config.js",
+  "door/next.js",
+  "door/page.js",
+  "door/verify.js",
+];
 
 /** Amplify takes a deployment of up to 220 MB; the gate refuses one over 200, which leaves room. */
 export const maxBundleBytes = 200 * 1024 * 1024;
@@ -38,11 +46,57 @@ export type BundleDoorOptions = {
   /** The sign-out walk, in order. */
   signout?: SignoutStop[];
   hostHeader?: GateConfigFile["hostHeader"];
+  /** The coming-soon page: the product's display name, its mark and dark mark as files in the export, its colors. */
+  page?: BundlePageOptions;
   /** The compiled package root the gate's files are copied from; this package's own `dist` by default. */
   gateRoot?: string;
   maxBytes?: number;
 };
 
+/** What the bin's page flags name. The marks are paths inside the static export, which the bundle inlines. */
+export type BundlePageOptions = {
+  name?: string | undefined;
+  mark?: string | undefined;
+  markDark?: string | undefined;
+  accent?: string | undefined;
+  accentDark?: string | undefined;
+};
+
+const pngSignature = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]);
+
+/**
+ * Reads a mark from the site's own export, for the coming-soon page to carry inline: an SVG or a PNG, inside the
+ * export (a symbolic link out of it is refused), and small. It is shown through `<img>`, where an SVG runs no script.
+ */
+export const readMark = async (out: string, file: string): Promise<PageImage> => {
+  const root = await realpath(out);
+  const resolved = await realpath(path.resolve(root, file.replace(/^\/+/, ""))).catch(() => {
+    throw new Error(`the mark is not in the static export: ${file}`);
+  });
+  if (!resolved.startsWith(`${root}${path.sep}`)) throw new Error(`the mark is outside the static export: ${file}`);
+  const bytes = await readFile(resolved);
+  if (bytes.length > maxMarkBytes) throw new Error(`the mark is ${bytes.length} bytes, over ${maxMarkBytes}: ${file}`);
+  const extension = path.extname(resolved).toLowerCase();
+  if (extension === ".png") {
+    if (!bytes.subarray(0, 8).equals(pngSignature)) throw new Error(`the mark is not a PNG: ${file}`);
+    return { type: "image/png", data: bytes.toString("base64") };
+  }
+  if (extension === ".svg") {
+    if (!/<svg[\s>]/.test(bytes.toString("utf8"))) throw new Error(`the mark is not an SVG: ${file}`);
+    return { type: "image/svg+xml", data: bytes.toString("base64") };
+  }
+  throw new Error(`the mark must be an .svg or a .png: ${file}`);
+};
+
+/** The page's configuration from the bin's flags: the marks read from the export, everything else as given. */
+const pageFile = async (out: string, options: BundlePageOptions = {}): Promise<PageConfigFile> => ({
+  ...(options.name !== undefined && { name: options.name }),
+  ...(options.mark !== undefined && { mark: await readMark(out, options.mark) }),
+  ...(options.markDark !== undefined && { markDark: await readMark(out, options.markDark) }),
+  ...(options.accent !== undefined && { accent: options.accent }),
+  ...(options.accentDark !== undefined && { accentDark: options.accentDark }),
+});
+
 const packageRoot = fileURLToPath(new URL("../../", import.meta.url));
 const compiledRoot = fileURLToPath(new URL("../", import.meta.url));
 
@@ -155,6 +209,7 @@ export const bundleDoor = async (options: BundleDoorOptions): Promise<DeployMani
     hostHeader: options.hostHeader ?? "host",
     signout: options.signout ?? [],
     jwks,
+    page: await pageFile(out, options.page),
   };
   const config = parseGateConfig(configFile);
   configFile.door = config.door;

package/src/door/page.ts

@@ -0,0 +1,218 @@
+import { createHash } from "node:crypto";
+
+/**
+ * The coming-soon page: what a locked site answers a page load with when the visitor holds no session. It is the
+ * gate's own HTML and carries nothing of the site: one inline stylesheet, the mark as a data URI, no script and no
+ * request to anywhere. It is the same bytes for every path but one, the canonical next its sign-in link carries.
+ */
+
+/** An image the page shows, carried in gate.config.json as base64 so the page needs no request for it. */
+export type PageImage = { type: "image/svg+xml" | "image/png"; data: string };
+
+/** gate.config.json's `page`: everything a site says about its coming-soon page. All optional. */
+export type PageConfigFile = {
+  /** The product's display name, as the page writes it. The site id, capitalized, by default. */
+  name?: string;
+  /** The mark, shown beside the name. None by default, and the name stands alone. */
+  mark?: PageImage;
+  /** The mark for a dark scheme. Without it the dark scheme shows `mark` on a light tile. */
+  markDark?: PageImage;
+  /** The button's color in the light scheme, `#rrggbb`. */
+  accent?: string;
+  /** The button's color in the dark scheme, `#rrggbb`. */
+  accentDark?: string;
+};
+
+export type PageConfig = Required<Pick<PageConfigFile, "name" | "accent" | "accentDark">> &
+  Pick<PageConfigFile, "mark" | "markDark">;
+
+/** The page's own surfaces; a site's accent has to stand out from these. */
+export const surfaces = {
+  light: { background: "#ffffff", text: "#1a1f24", muted: "#4b5560" },
+  dark: { background: "#11161b", text: "#e6e9ec", muted: "#a9b3bc" },
+};
+
+export const defaultAccent = "#1f2933";
+export const defaultAccentDark = "#d5dbe1";
+/** A mark larger than this is not a mark; the page is answered to every visitor without a session. */
+export const maxMarkBytes = 64 * 1024;
+
+const hexColor = /^#[0-9a-f]{6}$/i;
+const base64 = /^[A-Za-z0-9+/]+={0,2}$/;
+
+/** WCAG 2's relative luminance of `#rrggbb`. */
+export const luminance = (hex: string): number => {
+  const channel = (offset: number) => {
+    const value = Number.parseInt(hex.slice(offset, offset + 2), 16) / 255;
+    return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(1) + 0.7152 * channel(3) + 0.0722 * channel(5);
+};
+
+/** WCAG 2's contrast ratio between two `#rrggbb` colors, 1 to 21. */
+export const contrast = (a: string, b: string): number => {
+  const [high, low] = [luminance(a), luminance(b)].sort((x, y) => y - x) as [number, number];
+  return (high + 0.05) / (low + 0.05);
+};
+
+/**
+ * The button's text on an accent: white or black, whichever reads better. One of the two always reaches 4.5:1 (the
+ * worst accent, where they tie, gives 4.58), so the label meets AA whatever color a site picks. Not a softer near-black:
+ * #111111 ties at 4.35, under the line.
+ */
+export const textOn = (accent: string): string =>
+  contrast(accent, "#ffffff") >= contrast(accent, "#000000") ? "#ffffff" : "#000000";
+
+/** The site id as a display name: `driftline` becomes `Driftline`. */
+export const defaultName = (site: string): string => site.charAt(0).toUpperCase() + site.slice(1);
+
+const checkImage = (value: unknown, label: string): PageImage | undefined => {
+  if (value === undefined) return undefined;
+  const image = value as Partial<PageImage> | null;
+  if (image?.type !== "image/svg+xml" && image?.type !== "image/png") {
+    throw new Error(`the page's ${label} must be an SVG or a PNG`);
+  }
+  if (typeof image.data !== "string" || !base64.test(image.data)) {
+    throw new Error(`the page's ${label} is not base64`);
+  }
+  if (Buffer.byteLength(image.data, "base64") > maxMarkBytes) {
+    throw new Error(`the page's ${label} is over ${maxMarkBytes} bytes`);
+  }
+  return { type: image.type, data: image.data };
+};
+
+const checkColor = (value: unknown, fallback: string, label: string, surface: string): string => {
+  if (value === undefined) return fallback;
+  if (typeof value !== "string" || !hexColor.test(value))
+    throw new Error(`the page's ${label} is not #rrggbb: ${value}`);
+  // WCAG 1.4.11: the button's edge and the focus ring are drawn in the accent, so it must reach 3:1 on the page.
+  const ratio = contrast(value, surface);
+  if (ratio < 3) {
+    throw new Error(`the page's ${label} ${value} is ${ratio.toFixed(2)}:1 on ${surface}; it needs 3:1`);
+  }
+  return value.toLowerCase();
+};
+
+/**
+ * Checks gate.config.json's `page` and fills in the defaults, or throws naming what is wrong. With no `page` at all
+ * the result still renders a correct page: the site id as the name, no mark, and a neutral button.
+ */
+export const parsePageConfig = (value: unknown, site: string): PageConfig => {
+  if (value !== undefined && (typeof value !== "object" || value === null)) {
+    throw new Error("the page configuration is not an object");
+  }
+  const file = (value ?? {}) as PageConfigFile;
+  const name = file.name ?? defaultName(site);
+  if (typeof name !== "string" || name.trim() !== name || name.length === 0 || name.length > 60) {
+    throw new Error(`the page's name must be 1 to 60 characters with no space at either end: ${JSON.stringify(name)}`);
+  }
+  if ([...name].some((c) => c <= "\u001f" || c === "\u007f"))
+    throw new Error("the page's name has a control character");
+  const mark = checkImage(file.mark, "mark");
+  const markDark = checkImage(file.markDark, "dark mark");
+  if (markDark && !mark) throw new Error("the page has a dark mark but no mark");
+  return {
+    name,
+    accent: checkColor(file.accent, defaultAccent, "accent", surfaces.light.background),
+    accentDark: checkColor(file.accentDark, defaultAccentDark, "dark accent", surfaces.dark.background),
+    ...(mark && { mark }),
+    ...(markDark && { markDark }),
+  };
+};
+
+const escapeHtml = (value: string) =>
+  value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+
+const dataUri = (image: PageImage) => `data:${image.type};base64,${image.data}`;
+
+/** The stylesheet, which depends only on the configuration, so its hash is fixed for the gate's life. */
+const stylesheet = (page: PageConfig): string => {
+  const { light, dark } = surfaces;
+  // The dark scheme shows the dark mark if there is one; otherwise the one mark, on a light tile so a dark-ink mark
+  // stays visible.
+  const darkMark = page.markDark
+    ? ".mark-light{display:none}.mark-dark{display:block}"
+    : `.mark-light{background:${light.background};border-radius:10px;padding:4px}`;
+  return [
+    ":root{color-scheme:light dark;",
+    `--bg:${light.background};--text:${light.text};--muted:${light.muted};`,
+    `--accent:${page.accent};--on-accent:${textOn(page.accent)}}`,
+    "@media (prefers-color-scheme:dark){:root{",
+    `--bg:${dark.background};--text:${dark.text};--muted:${dark.muted};`,
+    `--accent:${page.accentDark};--on-accent:${textOn(page.accentDark)}}${darkMark}}`,
+    "*{box-sizing:border-box}",
+    "html{-webkit-text-size-adjust:100%;text-size-adjust:100%}",
+    "body{margin:0;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;",
+    "padding:48px 24px;background:var(--bg);color:var(--text);",
+    'font:400 1.0625rem/1.55 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif}',
+    "main{width:100%;max-width:34rem}",
+    ".lockup{display:flex;align-items:center;gap:12px;margin:0 0 40px;font-weight:700;font-size:1.25rem;",
+    "letter-spacing:-0.01em}",
+    ".lockup img{display:block;height:48px;width:auto;max-width:96px}",
+    ".mark-dark{display:none}",
+    "h1{margin:0 0 12px;font-size:clamp(1.75rem,6vw,2.5rem);line-height:1.15;letter-spacing:-0.02em;",
+    "font-weight:700;overflow-wrap:anywhere}",
+    ".lede{margin:0 0 32px;color:var(--muted)}",
+    ".actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}",
+    ".button{display:inline-flex;align-items:center;min-height:48px;padding:12px 20px;border-radius:8px;",
+    "background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none;",
+    "border:2px solid var(--accent)}",
+    ".button:hover{text-decoration:underline;text-underline-offset:3px}",
+    ".link{color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);",
+    "text-decoration-thickness:2px;text-underline-offset:4px;padding:12px 0}",
+    ".link:hover{text-decoration-thickness:3px}",
+    "a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}",
+    "@media (max-width:480px){body{padding:32px 16px;align-items:flex-start}.lockup{margin-bottom:32px}}",
+  ].join("");
+};
+
+export type ComingSoon = {
+  /** The page for one canonical next: the only part that differs between paths. */
+  html: (next: string) => string;
+  /** The Content-Security-Policy that allows exactly what the page uses. */
+  csp: string;
+};
+
+/**
+ * Builds the coming-soon page for a site once, as the gate starts. `door` is the door's origin, which the "Get
+ * involved" link points into; `site` is the id the door knows the site by.
+ */
+export const comingSoon = (page: PageConfig, door: string, site: string): ComingSoon => {
+  const css = stylesheet(page);
+  const styleHash = createHash("sha256").update(css).digest("base64");
+  const name = escapeHtml(page.name);
+  const getInvolved = escapeHtml(`${door}/get-involved/?${new URLSearchParams({ site })}`);
+  const marks = page.mark
+    ? `<img class="mark-light" src="${dataUri(page.mark)}" alt="">` +
+      (page.markDark ? `<img class="mark-dark" src="${dataUri(page.markDark)}" alt="">` : "")
+    : "";
+  const csp = [
+    "default-src 'none'",
+    `style-src 'sha256-${styleHash}'`,
+    ...(page.mark ? ["img-src data:"] : []),
+    "base-uri 'none'",
+    "form-action 'none'",
+    "frame-ancestors 'none'",
+  ].join("; ");
+  const head =
+    '<!doctype html><html lang="en"><head><meta charset="utf-8">' +
+    '<meta name="viewport" content="width=device-width, initial-scale=1">' +
+    '<meta name="color-scheme" content="light dark">' +
+    '<meta name="robots" content="noindex, nofollow">' +
+    '<meta name="referrer" content="strict-origin-when-cross-origin">' +
+    `<title>${name} is coming soon</title><style>${css}</style></head>`;
+  const before =
+    `<body><main><p class="lockup">${marks}<span>${name}</span></p>` +
+    `<h1>${name} is coming soon.</h1><p class="lede">Open for now to invited guests.</p>` +
+    '<p class="actions"><a class="button" href="';
+  const after = `">Have an invitation? Sign in</a><a class="link" href="${getInvolved}">Get involved</a></p></main></body></html>`;
+  return {
+    html: (next) => `${head}${before}${escapeHtml(`/_door/signin?${new URLSearchParams({ next })}`)}${after}`,
+    csp,
+  };
+};