hecks 3.10.0 → 3.11.0

data/lib/hecks/projections/site/cms_editor/templates/src/assets.ts.tmpl

@@ -0,0 +1,98 @@
+__BANNER__
+
+// The editor's static files, for a signed-in editor only: its theme script (read from `src/ui/`),
+// the stylesheet and script `npm run build` writes to `dist/`, and the Editor row's logo.
+//
+// Every file is sent with an ETag made from its bytes. A page asks for it as `name?v=<version>`
+// where the version is the same hash, so a changed file has a new address and a request that names
+// the current version may be kept for a year (`immutable`); any other request is revalidated and
+// answered 304 when nothing changed. Files are `private`: they are behind the session, and a
+// shared cache must not hold them for someone who has not signed in.
+import { createHash } from "node:crypto";
+import { existsSync, readFileSync, statSync } from "node:fs";
+import { extname } from "node:path";
+
+import { EDITOR } from "./config.ts";
+
+const SOURCE = new URL("./ui/", import.meta.url);
+const DIST = new URL("../dist/", import.meta.url);
+
+/** The files read from `src/ui/`; everything else comes from `dist/`. */
+const SOURCES = ["theme.js"];
+
+/** A built file's name: plain characters and a `.js` or `.css` ending, so no path leaves `dist/`. */
+const BUILT = /^[A-Za-z0-9][A-Za-z0-9._-]*\.(js|css)$/;
+
+const TYPES: Record<string, string> = {
+  js: "text/javascript; charset=utf-8",
+  css: "text/css; charset=utf-8",
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  webp: "image/webp",
+  gif: "image/gif",
+  avif: "image/avif",
+  svg: "image/svg+xml",
+};
+
+interface Held {
+  bytes: Buffer;
+  type: string;
+  version: string;
+  stamp: number;
+}
+
+const held = new Map<string, Held>();
+
+function locate(name: string): URL | null {
+  if (SOURCES.includes(name)) return new URL(name, SOURCE);
+  if (!BUILT.test(name)) return null;
+  const built = new URL(name, DIST);
+  return existsSync(built) ? built : null;
+}
+
+function load(name: string): Held | null {
+  const where = name === "logo" ? logoPath() : locate(name);
+  if (!where || !existsSync(where)) return null;
+  const stamp = statSync(where).mtimeMs;
+  const known = held.get(name);
+  if (known && known.stamp === stamp) return known;
+  const bytes = readFileSync(where);
+  const type = TYPES[extname(String(where)).slice(1).toLowerCase()] ?? "application/octet-stream";
+  const made = { bytes, type, version: createHash("sha256").update(bytes).digest("hex").slice(0, 12), stamp };
+  held.set(name, made);
+  return made;
+}
+
+/** Where the row's logo is kept: a path from the server's working directory, or null when none is named. */
+function logoPath(): string | null {
+  return EDITOR.logo === "" ? null : EDITOR.logo;
+}
+
+/** Whether `npm run build` has written the stylesheet and the script. */
+export const isBuilt = (): boolean => existsSync(new URL("editor.css", DIST)) && existsSync(new URL("editor.js", DIST));
+
+/** Whether the row names a logo that is there to be shown. */
+export const hasLogo = (): boolean => load("logo") !== null;
+
+/** The address of a file, with the version that makes it cacheable for good. */
+export function assetUrl(name: string): string {
+  const version = load(name)?.version;
+  return `${EDITOR.basePath}/assets/${name}${version ? `?v=${version}` : ""}`;
+}
+
+/** Answers a request for one asset: the bytes, a 304 when the browser holds them, or a 404. */
+export function serveAsset(name: string, request: Request): Response {
+  const file = load(name);
+  if (!file) return new Response("Not found.", { status: 404, headers: { "Content-Type": "text/plain" } });
+  const etag = `"${file.version}"`;
+  const headers = new Headers({
+    "Content-Type": file.type,
+    ETag: etag,
+    "X-Content-Type-Options": "nosniff",
+    "Cache-Control": new URL(request.url).searchParams.get("v") === file.version ? "private, max-age=31536000, immutable" : "private, no-cache",
+  });
+  if (name === "logo") headers.set("Content-Security-Policy", "sandbox");
+  if (request.headers.get("if-none-match") === etag) return new Response(null, { status: 304, headers });
+  return new Response(new Uint8Array(file.bytes), { headers });
+}

data/lib/hecks/projections/site/cms_editor/templates/src/auth/membership.ts.tmpl

@@ -24,6 +24,8 @@ export function authSecret(): string {
 export interface Membership {
   /** True while `email` holds an editor role on the host; false when it does not, or cannot be asked. */
   isAdmitted(email: string): Promise<boolean>;
+  /** The role `email` holds, for the header to show; null when it holds none. Answered from the same memory. */
+  roleOf?(email: string): Promise<string | null>;
 }
 
 export interface MembershipOptions {
@@ -33,47 +35,53 @@ export interface MembershipOptions {
   now?: () => number;
 }
 
-/** True when the host's members list holds `email` with an editor role and not disabled. */
-export function holdsRole(rows: unknown, email: string): boolean {
+/** The editor role the host's members list gives `email`, or null when it holds none or is disabled. */
+export function roleHeld(rows: unknown, email: string): string | null {
   const roles: readonly string[] = EDITOR.roles;
-  return (
-    Array.isArray(rows) &&
-    rows.some(
-      (row: any) =>
-        typeof row?.email === "string" && row.email.trim().toLowerCase() === email && roles.includes(row.role) && row.disabled !== true,
-    )
-  );
+  const row = Array.isArray(rows)
+    ? rows.find(
+        (candidate: any) =>
+          typeof candidate?.email === "string" &&
+          candidate.email.trim().toLowerCase() === email &&
+          roles.includes(candidate.role) &&
+          candidate.disabled !== true,
+      )
+    : undefined;
+  return row ? String(row.role) : null;
 }
 
+/** True when the host's members list holds `email` with an editor role and not disabled. */
+export const holdsRole = (rows: unknown, email: string): boolean => roleHeld(rows, email) !== null;
+
 /** A membership check with its own one-minute memory. */
 export function membershipCheck(options: MembershipOptions = {}): Membership {
-  const remembered = new Map<string, { admitted: boolean; until: number }>();
+  const remembered = new Map<string, { role: string | null; until: number }>();
   const now = options.now ?? Date.now;
   const send = options.fetch ?? fetch;
 
-  async function ask(email: string): Promise<boolean> {
+  async function ask(email: string): Promise<string | null> {
     const secret = options.secret ?? authSecret();
-    if (!secret) return false;
+    if (!secret) return null;
     const cookieName = resolveAccountCookieName(process.env.HECKS_SESSION_COOKIE || EDITOR.hostCookie);
     try {
       const res = await send(`${hostUrl({ url: options.url })}${EDITOR.membersPath}`, {
         headers: { Cookie: `${cookieName}=${accountToken(secret, email, TOKEN_TTL_SECONDS)}` },
         signal: AbortSignal.timeout(EDITOR.timeoutMs),
       });
-      return res.ok && holdsRole(await res.json().catch(() => null), email);
+      return res.ok ? roleHeld(await res.json().catch(() => null), email) : null;
     } catch {
-      return false;
+      return null;
     }
   }
 
-  return {
-    async isAdmitted(email: string): Promise<boolean> {
-      const key = email.trim().toLowerCase();
-      const hit = remembered.get(key);
-      if (hit && hit.until > now()) return hit.admitted;
-      const admitted = await ask(key);
-      remembered.set(key, { admitted, until: now() + EDITOR.rememberMs });
-      return admitted;
-    },
-  };
+  async function roleOf(email: string): Promise<string | null> {
+    const key = email.trim().toLowerCase();
+    const hit = remembered.get(key);
+    if (hit && hit.until > now()) return hit.role;
+    const role = await ask(key);
+    remembered.set(key, { role, until: now() + EDITOR.rememberMs });
+    return role;
+  }
+
+  return { roleOf, isAdmitted: async (email: string): Promise<boolean> => (await roleOf(email)) !== null };
 }

data/lib/hecks/projections/site/cms_editor/templates/src/browser/app.css.tmpl

@@ -0,0 +1,412 @@
+__CSS_BANNER__
+
+/*
+ * The editor's stylesheet source. `npm run build` runs it through Tailwind, which finds the class
+ * names the pages and the browser code use (every class is written out whole, never built by
+ * joining strings, so the scanner sees it), and emits the daisyUI components those classes name.
+ *
+ * Colours come from the Editor row's accent (the generator's Palette moves each pair until it
+ * reaches WCAG AA) and are declared once, as two daisyUI themes: `editor-light`, and `editor-dark`
+ * for a visitor whose system prefers dark. The theme button sets `data-theme` on the root element.
+ */
+@import "tailwindcss";
+@plugin "daisyui" {
+  themes: false;
+  logs: false;
+}
+@plugin "@tailwindcss/typography";
+@source "../ui";
+@source ".";
+
+@plugin "daisyui/theme" {
+  name: "editor-light";
+  default: true;
+  prefersdark: false;
+  color-scheme: light;
+__LIGHT__
+  --radius-selector: 2rem;
+  --radius-field: 0.375rem;
+  --radius-box: 0.625rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.225rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+@plugin "daisyui/theme" {
+  name: "editor-dark";
+  default: false;
+  prefersdark: true;
+  color-scheme: dark;
+__DARK__
+  --radius-selector: 2rem;
+  --radius-field: 0.375rem;
+  --radius-box: 0.625rem;
+  --size-selector: 0.25rem;
+  --size-field: 0.225rem;
+  --border: 1px;
+  --depth: 0;
+  --noise: 0;
+}
+
+@theme {
+  --font-sans: ui-sans-serif, "Avenir Next", "Segoe UI", Roboto, system-ui, sans-serif;
+  --font-serif: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
+  --text-xs: 0.8125rem;
+  --text-sm: 0.9375rem;
+  --text-base: 1.0625rem;
+  --text-lg: 1.25rem;
+  --text-xl: 1.5rem;
+  --text-2xl: 1.875rem;
+}
+
+@theme inline {
+  --color-muted: var(--ed-muted);
+  --color-edge: var(--ed-edge);
+  --color-soft: var(--ed-soft);
+  --color-ok-bg: var(--ed-ok-bg);
+  --color-warn-bg: var(--ed-warn-bg);
+  --color-danger-bg: var(--ed-danger-bg);
+}
+
+@layer base {
+  html {
+    -webkit-text-size-adjust: 100%;
+    scroll-padding-top: 4.5rem;
+  }
+
+  body {
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  h1, h2, h3, h4 {
+    font-family: var(--font-sans);
+    font-weight: 650;
+    letter-spacing: -0.015em;
+    line-height: 1.2;
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  main:focus {
+    outline: none;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  main a:not([class]) {
+    color: var(--color-primary);
+    text-underline-offset: 0.18em;
+  }
+
+  .icon {
+    width: 1.125rem;
+    height: 1.125rem;
+    flex: none;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.75;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  table {
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* A fieldset will not shrink below its content by default, so one row that does not wrap (the
+     writing surface's toolbar, which scrolls on a phone) would widen the whole page. */
+  fieldset {
+    min-inline-size: 0;
+  }
+}
+
+@layer components {
+  /* Read-only and written text share one typeface and one rhythm: a serif page, a sans interface. */
+  .prose {
+    --tw-prose-body: var(--color-base-content);
+    --tw-prose-headings: var(--color-base-content);
+    --tw-prose-lead: var(--ed-muted);
+    --tw-prose-links: var(--color-primary);
+    --tw-prose-bold: var(--color-base-content);
+    --tw-prose-counters: var(--ed-muted);
+    --tw-prose-bullets: var(--ed-muted);
+    --tw-prose-hr: var(--ed-edge);
+    --tw-prose-quotes: var(--ed-muted);
+    --tw-prose-quote-borders: var(--ed-edge);
+    --tw-prose-captions: var(--ed-muted);
+    --tw-prose-code: var(--color-base-content);
+    --tw-prose-th-borders: var(--ed-edge);
+    --tw-prose-td-borders: var(--color-base-300);
+    max-width: 66ch;
+    font-family: var(--font-serif);
+    font-size: 1.125rem;
+    line-height: 1.65;
+    overflow-wrap: anywhere;
+  }
+
+  .prose :where(h1, h2, h3, h4, figcaption) {
+    font-family: var(--font-sans);
+  }
+
+  .prose :where(h1) { font-size: 1.875rem; }
+  .prose :where(h2) { font-size: 1.5rem; }
+  .prose :where(h3) { font-size: 1.25rem; }
+  .prose :where(h4) { font-size: 1.0625rem; }
+
+  .prose :where(code)::before,
+  .prose :where(code)::after {
+    content: none;
+  }
+
+  .prose :where(code) {
+    padding: 0.1em 0.35em;
+    border-radius: 4px;
+    background: color-mix(in srgb, var(--color-base-content) 8%, var(--color-base-100));
+    font-size: 0.85em;
+    font-weight: 500;
+  }
+
+  .prose :where(blockquote) {
+    font-weight: 400;
+  }
+
+  .prose :where(blockquote p:first-of-type)::before,
+  .prose :where(blockquote p:last-of-type)::after {
+    content: none;
+  }
+
+  .prose [data-align="left"] { text-align: left; }
+  .prose [data-align="center"] { text-align: center; }
+  .prose [data-align="right"] { text-align: right; }
+  .prose [data-align="justify"] { text-align: justify; }
+  .prose [data-indent="1"] { margin-left: 2rem; }
+  .prose [data-indent="2"] { margin-left: 4rem; }
+  .prose [data-indent="3"] { margin-left: 6rem; }
+  .prose [data-indent="4"] { margin-left: 8rem; }
+  .prose [data-indent="5"] { margin-left: 10rem; }
+  .prose [data-indent="6"] { margin-left: 12rem; }
+  .prose [data-indent="7"] { margin-left: 14rem; }
+  .prose [data-indent="8"] { margin-left: 16rem; }
+  .prose li[data-depth="1"] { margin-left: 1.5rem; }
+  .prose li[data-depth="2"] { margin-left: 3rem; }
+  .prose li[data-depth="3"] { margin-left: 4.5rem; }
+  .prose li[data-depth="4"] { margin-left: 6rem; }
+  .prose li[data-depth="5"] { margin-left: 7.5rem; }
+
+  .prose .body-media {
+    display: inline-block;
+    padding: 0.2em 0.6em;
+    border: 1px dashed var(--ed-edge);
+    border-radius: 4px;
+    color: var(--ed-muted);
+    font-family: var(--font-sans);
+    font-size: 0.85em;
+  }
+
+  /* ProseMirror's own rules, written here because the editor is told to inject none (a strict
+     content security policy blocks a style element the script adds). */
+  .ProseMirror {
+    position: relative;
+    outline: none;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    white-space: break-spaces;
+    font-variant-ligatures: none;
+    font-feature-settings: "liga" 0;
+  }
+
+  .ProseMirror pre {
+    white-space: pre-wrap;
+  }
+
+  .ProseMirror li {
+    position: relative;
+  }
+
+  .ProseMirror-hideselection *::selection,
+  .ProseMirror-hideselection *::-moz-selection {
+    background: transparent;
+  }
+
+  .ProseMirror-hideselection {
+    caret-color: transparent;
+  }
+
+  .ProseMirror .ProseMirror-selectednode {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 3px;
+  }
+
+  .ProseMirror-gapcursor {
+    position: absolute;
+    display: none;
+    pointer-events: none;
+  }
+
+  .ProseMirror-gapcursor::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: -2px;
+    width: 20px;
+    border-top: 1px solid var(--color-base-content);
+    animation: caret 1.1s steps(2, start) infinite;
+  }
+
+  .ProseMirror-focused .ProseMirror-gapcursor {
+    display: block;
+  }
+
+  img.ProseMirror-separator {
+    display: inline !important;
+    border: none !important;
+    margin: 0 !important;
+  }
+
+  .ProseMirror p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    color: var(--ed-muted);
+    pointer-events: none;
+  }
+
+  .ProseMirror :where(ul, ol) {
+    margin: 0;
+    padding-left: 1.5em;
+  }
+
+  .ProseMirror :where(ul, ol)[data-list-indent="1"] { margin-left: 1.5em; }
+  .ProseMirror :where(ul, ol)[data-list-indent="2"] { margin-left: 3em; }
+  .ProseMirror :where(ul, ol)[data-list-indent="3"] { margin-left: 4.5em; }
+  .ProseMirror :where(ul, ol)[data-list-indent="4"] { margin-left: 6em; }
+  .ProseMirror :where(ul, ol)[data-list-indent="5"] { margin-left: 7.5em; }
+  .ProseMirror ul { list-style: disc; }
+  .ProseMirror ul[data-list-indent="1"] { list-style: circle; }
+  .ProseMirror ul[data-list-indent="2"] { list-style: square; }
+  .ProseMirror ol { list-style: decimal; }
+  .ProseMirror ol[data-list-indent="1"] { list-style: lower-alpha; }
+  .ProseMirror ol[data-list-indent="2"] { list-style: lower-roman; }
+
+  .ProseMirror [data-align="left"] { text-align: left; }
+  .ProseMirror [data-align="center"] { text-align: center; }
+  .ProseMirror [data-align="right"] { text-align: right; }
+  .ProseMirror [data-align="justify"] { text-align: justify; }
+  .ProseMirror [data-indent="1"] { margin-left: 2rem; }
+  .ProseMirror [data-indent="2"] { margin-left: 4rem; }
+  .ProseMirror [data-indent="3"] { margin-left: 6rem; }
+  .ProseMirror [data-indent="4"] { margin-left: 8rem; }
+  .ProseMirror [data-indent="5"] { margin-left: 10rem; }
+  .ProseMirror [data-indent="6"] { margin-left: 12rem; }
+  .ProseMirror [data-indent="7"] { margin-left: 14rem; }
+  .ProseMirror [data-indent="8"] { margin-left: 16rem; }
+
+  @keyframes caret {
+    to {
+      visibility: hidden;
+    }
+  }
+
+  /* Motion answers an action: a dialog opening, a notice arriving, a row that just changed. */
+  @keyframes settle {
+    from {
+      background-color: var(--ed-soft);
+    }
+  }
+
+  .just-changed {
+    animation: settle 1.6s ease-out;
+  }
+
+  /* The current item of the navigation: the accent marks where you are. */
+  .menu li > a[aria-current="page"] {
+    background: var(--ed-soft) !important;
+    color: var(--color-primary) !important;
+    font-weight: 600;
+  }
+
+  .menu a[aria-current="page"] .text-muted {
+    color: inherit;
+  }
+
+  /* A toggle button of the writing surface's toolbar that is on. */
+  .btn[aria-pressed="true"] {
+    background: var(--ed-soft);
+    color: var(--color-primary);
+  }
+}
+
+/* Outside the layers, so they win over the component library's own: a plain button is a ruled outline
+   on the page; the filled ones are the primary action and the dangerous one. */
+.btn:not([class*="btn-"]) {
+  --btn-bg: var(--color-base-100);
+  --btn-border: var(--ed-edge);
+}
+
+/* The component library fades an inactive tab to half its ink, which is under 4.5:1 on a light page. */
+.tab:not(.tab-active):not(:hover) {
+  color: var(--ed-muted);
+}
+
+/* On a phone or any touch screen a control is at least 44 by 44 CSS pixels (a fingertip, and past the
+   24 pixel floor of WCAG 2.2's target size): buttons, fields, tabs, menu rows, the sort buttons of a
+   table's head and the links in its rows. */
+@media (pointer: coarse), (max-width: 40rem) {
+  .btn,
+  .tab,
+  .menu a {
+    min-height: 2.75rem;
+  }
+
+  .input,
+  .select,
+  .file-input {
+    height: 2.75rem;
+  }
+
+  .btn-square,
+  .tab {
+    min-width: 2.75rem;
+    justify-content: center;
+  }
+
+  header a,
+  th button,
+  th a,
+  td a {
+    display: inline-flex;
+    align-items: center;
+    min-height: 2.75rem;
+    min-width: 2.75rem;
+  }
+}
+
+/* The picture picker stands in the window, never taller than the part of it the page's bars leave
+   (the script narrows this to the sticky action bar's top edge and the on-screen keyboard), scrolls
+   inside itself, and keeps clear of the notch and the home bar. */
+.picker-panel {
+  max-height: calc(100dvh - 5rem - env(safe-area-inset-bottom, 0px));
+  max-width: min(42rem, calc(100vw - 1rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
+  box-sizing: border-box;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}