pandorga 1.6.7 → 1.6.8

data/scripts/check_home_lists.mjs

@@ -0,0 +1,209 @@
+#!/usr/bin/env node
+// Load the built example home and fail when a listing band is still empty.
+// The runtime fills those bands after the document loads. A score-only
+// Lighthouse run treats an empty home as a fast page.
+
+import { spawn } from 'node:child_process';
+import { mkdtemp, rm } from 'node:fs/promises';
+import { createServer } from 'node:net';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { setTimeout as delay } from 'node:timers/promises';
+
+const args = process.argv.slice(2);
+
+function flag(name) {
+  const index = args.indexOf(name);
+  if (index === -1 || !args[index + 1]) {
+    console.error(`ERROR: missing ${name}`);
+    process.exit(1);
+  }
+  return args[index + 1];
+}
+
+const chromePath = flag('--chrome');
+const pageUrl = flag('--url');
+
+const COUNTS = `({
+  projects: document.querySelectorAll('#home-projects .home-project-inventory-row').length,
+  articles: document.querySelectorAll('#home-articles .home-featured, #home-articles .ledger-card').length,
+  posts: document.querySelectorAll('#home-blog .home-draft-card').length,
+  projectsText: (document.querySelector('#home-projects') || {}).innerText || '',
+  articlesText: (document.querySelector('#home-articles') || {}).innerText || ''
+})`;
+
+const VIEWPORTS = [
+  { name: 'mobile', width: 390, height: 844, mobile: true, deviceScaleFactor: 2 },
+  { name: 'desktop', width: 1280, height: 800, mobile: false, deviceScaleFactor: 1 }
+];
+
+function freePort() {
+  return new Promise((resolve, reject) => {
+    const server = createServer();
+    server.once('error', reject);
+    server.listen(0, '127.0.0.1', () => {
+      const { port } = server.address();
+      server.close(() => resolve(port));
+    });
+  });
+}
+
+class Cdp {
+  constructor(ws) {
+    this.ws = ws;
+    this.next = 1;
+    this.pending = new Map();
+    this.listeners = [];
+    ws.addEventListener('message', (event) => {
+      const message = JSON.parse(event.data);
+      if (message.id && this.pending.has(message.id)) {
+        const { resolve, reject } = this.pending.get(message.id);
+        this.pending.delete(message.id);
+        if (message.error) reject(new Error(message.error.message || JSON.stringify(message.error)));
+        else resolve(message.result || {});
+        return;
+      }
+      if (message.method) this.listeners.forEach((listen) => listen(message));
+    });
+  }
+
+  send(method, params = {}, sessionId) {
+    const id = this.next++;
+    const payload = { id, method, params };
+    if (sessionId) payload.sessionId = sessionId;
+    return new Promise((resolve, reject) => {
+      this.pending.set(id, { resolve, reject });
+      this.ws.send(JSON.stringify(payload));
+    });
+  }
+
+  once(method, sessionId) {
+    return new Promise((resolve) => {
+      const listen = (message) => {
+        if (message.method !== method) return;
+        if (sessionId && message.sessionId !== sessionId) return;
+        this.listeners = this.listeners.filter((entry) => entry !== listen);
+        resolve(message.params || {});
+      };
+      this.listeners.push(listen);
+    });
+  }
+}
+
+async function waitForDevtools(port) {
+  for (let attempt = 0; attempt < 50; attempt += 1) {
+    try {
+      const response = await fetch(`http://127.0.0.1:${port}/json/version`);
+      if (response.ok) return response.json();
+    } catch (_error) {
+      // Chrome is still starting.
+    }
+    await delay(100);
+  }
+  throw new Error('Chrome DevTools did not answer');
+}
+
+async function openSocket(url) {
+  const ws = new WebSocket(url);
+  await new Promise((resolve, reject) => {
+    ws.addEventListener('open', resolve, { once: true });
+    ws.addEventListener('error', () => reject(new Error('DevTools socket failed')), { once: true });
+  });
+  return ws;
+}
+
+async function navigate(browser, sessionId, url) {
+  const loaded = browser.once('Page.loadEventFired', sessionId);
+  await browser.send('Page.navigate', { url }, sessionId);
+  await Promise.race([
+    loaded,
+    delay(20000).then(() => {
+      throw new Error('home did not finish loading');
+    })
+  ]);
+}
+
+async function counts(browser, sessionId) {
+  const deadline = Date.now() + 15000;
+  let last = { projects: 0, articles: 0, posts: 0, projectsText: '', articlesText: '' };
+  while (Date.now() < deadline) {
+    const evaluated = await browser.send('Runtime.evaluate', {
+      expression: COUNTS,
+      returnByValue: true
+    }, sessionId);
+    if (evaluated.exceptionDetails) {
+      throw new Error('home list probe failed');
+    }
+    last = (evaluated.result && evaluated.result.value) || last;
+    if (last.projects > 0 && last.articles > 0 && last.posts > 0) return last;
+    await delay(200);
+  }
+  return last;
+}
+
+function filled(result) {
+  return result.projects > 0 && result.articles > 0 && result.posts > 0;
+}
+
+async function main() {
+  const profile = await mkdtemp(join(tmpdir(), 'pandorga-home-'));
+  const port = await freePort();
+  const chrome = spawn(chromePath, [
+    '--headless=new',
+    '--no-sandbox',
+    '--disable-gpu',
+    '--disable-dev-shm-usage',
+    '--no-first-run',
+    '--remote-allow-origins=*',
+    `--remote-debugging-port=${port}`,
+    `--user-data-dir=${profile}`,
+    'about:blank'
+  ], { stdio: 'ignore' });
+
+  let failed = false;
+  try {
+    const version = await waitForDevtools(port);
+    const ws = await openSocket(version.webSocketDebuggerUrl);
+    const browser = new Cdp(ws);
+    const created = await browser.send('Target.createTarget', { url: 'about:blank' });
+    const attached = await browser.send('Target.attachToTarget', {
+      targetId: created.targetId,
+      flatten: true
+    });
+    const sessionId = attached.sessionId;
+    await browser.send('Page.enable', {}, sessionId);
+    await browser.send('Runtime.enable', {}, sessionId);
+
+    for (const viewport of VIEWPORTS) {
+      await browser.send('Emulation.setDeviceMetricsOverride', {
+        width: viewport.width,
+        height: viewport.height,
+        deviceScaleFactor: viewport.deviceScaleFactor,
+        mobile: viewport.mobile
+      }, sessionId);
+      await navigate(browser, sessionId, pageUrl);
+      const result = await counts(browser, sessionId);
+      console.log(
+        `home lists (${viewport.name}): projects=${result.projects} articles=${result.articles} posts=${result.posts}`
+      );
+      if (!filled(result)) {
+        console.error(`ERROR: ${viewport.name} home is missing project, article, or post items`);
+        console.error(`projects band: ${JSON.stringify(String(result.projectsText).slice(0, 180))}`);
+        console.error(`articles band: ${JSON.stringify(String(result.articlesText).slice(0, 180))}`);
+        failed = true;
+      }
+    }
+    ws.close();
+  } finally {
+    chrome.kill('SIGKILL');
+    await delay(100);
+    await rm(profile, { recursive: true, force: true });
+  }
+
+  if (failed) process.exit(1);
+}
+
+main().catch((error) => {
+  console.error(`ERROR: ${error.message}`);
+  process.exit(1);
+});

data/scripts/lighthouse-home.sh

@@ -57,6 +57,12 @@ for _ in 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20; do
 done
 [[ "${ready}" == "1" ]] || fail "example server did not answer on port ${PORT}"
 
+# Empty bands still score well. This fails in warn mode and in enforce mode.
+step "Home lists after load (mobile and desktop)"
+node "${ROOT}/scripts/check_home_lists.mjs" \
+  --chrome "${CHROME}" \
+  --url "http://127.0.0.1:${PORT}/"
+
 step "Lighthouse mobile (one run)"
 rm -f "${OUT}"
 npx --yes lighthouse@13.5.0 "http://127.0.0.1:${PORT}/" \

data/scripts/render-pwa-icons.py

@@ -0,0 +1,141 @@
+#!/usr/bin/env python3
+"""Rasterize the site and Studio launcher icons from the site stamp.
+
+Both icons use the square mark in `_includes/theme/site-logo.html` and the
+light-on-dark plate of `assets/icons/favicon.svg`: dark frame, pastel triad.
+Studio adds a small plate in the lower right. Nothing important sits outside
+the maskable safe zone (the center 80% circle). File names match
+`lib/pandorga/jekyll/plugins/web_manifest.rb`. Requires Pillow.
+"""
+
+from __future__ import annotations
+
+import argparse
+from pathlib import Path
+
+from PIL import Image, ImageDraw
+
+# 32×32 square site stamp.
+PRIMARY = [(0, 0), (23, 0), (15, 17), (0, 20)]
+SECONDARY = [(23, 0), (32, 0), (32, 32), (17, 21), (15, 17)]
+TERTIARY = [(0, 20), (15, 17), (17, 21), (32, 32), (0, 32)]
+
+PLATE = (0x5E, 0x5D, 0x59)
+FILL_PRIMARY = (0xA4, 0xC8, 0xDA)
+FILL_SECONDARY = (0x95, 0xC8, 0xA6)
+FILL_TERTIARY = (0xDD, 0xD8, 0xA8)
+BADGE = (0xB8, 0xB7, 0xAE)
+
+# The mark's box is 52% of the canvas. Its corners stay inside the 80% circle
+# (half-diagonal 0.367 of the canvas, safe radius 0.40).
+MARK_SCALE = 0.52
+# Badge center, as an offset from the canvas center, and its side. The badge
+# corners stay inside the same circle.
+BADGE_OFFSET = 0.18
+BADGE_SIDE = 0.09
+
+
+def _polygon(points: list[tuple[int, int]], size: int) -> list[tuple[float, float]]:
+    span = size * MARK_SCALE
+    offset = (size - span) / 2
+    return [(offset + x / 32 * span, offset + y / 32 * span) for x, y in points]
+
+
+def _ink_bounds(image: Image.Image) -> tuple[int, int, int, int]:
+    pixels = image.load()
+    width, height = image.size
+    min_x, min_y = width, height
+    max_x, max_y = -1, -1
+    for y in range(height):
+        for x in range(width):
+            if pixels[x, y] == PLATE:
+                continue
+            min_x = min(min_x, x)
+            min_y = min(min_y, y)
+            max_x = max(max_x, x)
+            max_y = max(max_y, y)
+    return (min_x, min_y, max_x, max_y)
+
+
+def render(size: int, studio: bool) -> Image.Image:
+    image = Image.new("RGB", (size, size), PLATE)
+    draw = ImageDraw.Draw(image)
+    draw.polygon(_polygon(PRIMARY, size), fill=FILL_PRIMARY)
+    draw.polygon(_polygon(SECONDARY, size), fill=FILL_SECONDARY)
+    draw.polygon(_polygon(TERTIARY, size), fill=FILL_TERTIARY)
+    if studio:
+        # The badge may only replace stamp pixels. Painting the plate would
+        # grow the art and make Studio a different size on the home screen.
+        stamped = image.copy()
+        side = size * BADGE_SIDE
+        center = size * (0.5 + BADGE_OFFSET)
+        origin = center - side / 2
+        draw.rectangle([origin, origin, origin + side, origin + side], fill=BADGE)
+        source = stamped.load()
+        painted = image.load()
+        for y in range(size):
+            for x in range(size):
+                if source[x, y] == PLATE:
+                    painted[x, y] = PLATE
+    return image
+
+
+def main() -> None:
+    parser = argparse.ArgumentParser(description=__doc__)
+    parser.add_argument(
+        "--repo-root",
+        type=Path,
+        default=Path(__file__).resolve().parents[1],
+    )
+    args = parser.parse_args()
+    icons = args.repo_root / "assets" / "icons"
+    icons.mkdir(parents=True, exist_ok=True)
+
+    site = {
+        512: ["icon-512.png", "icon-maskable-512.png"],
+        192: ["icon-192.png", "icon-maskable-192.png"],
+        180: ["apple-touch-icon.png"],
+        32: ["icon-32.png", "favicon-32.png"],
+    }
+    studio = {
+        512: ["studio-icon-512.png", "studio-maskable-512.png"],
+        192: ["studio-icon-192.png", "studio-maskable-192.png"],
+        180: ["studio-apple-touch-icon.png"],
+        32: ["studio-logo-32.png"],
+    }
+    for size in site:
+        plain = render(size, studio=False)
+        marked = render(size, studio=True)
+        if plain.size != marked.size or _ink_bounds(plain) != _ink_bounds(marked):
+            raise SystemExit(
+                f"{size}px site and Studio art bounds differ: "
+                f"{plain.size} {_ink_bounds(plain)} vs {marked.size} {_ink_bounds(marked)}"
+            )
+        for name in site[size]:
+            plain.save(icons / name, "PNG")
+        for name in studio[size]:
+            marked.save(icons / name, "PNG")
+    icon32 = render(32, studio=False)
+    icon16 = render(16, studio=False)
+    studio32 = render(32, studio=True)
+    studio16 = render(16, studio=True)
+    if _ink_bounds(icon16) != _ink_bounds(studio16):
+        raise SystemExit("16px site and Studio art bounds differ")
+    icon32.save(
+        icons / "favicon.ico",
+        format="ICO",
+        sizes=[(16, 16), (32, 32)],
+        append_images=[icon16],
+    )
+    studio32.save(
+        icons / "studio-logo.ico",
+        format="ICO",
+        sizes=[(16, 16), (32, 32)],
+        append_images=[studio16],
+    )
+
+    print(f"Wrote launcher icons under {icons.relative_to(args.repo_root)}")
+
+
+if __name__ == "__main__":
+    main()

data/scripts/test/test-home-articles.rb

@@ -0,0 +1,30 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+# PLT-AC-27. Home Articles band: titles are 2pt larger, and on a phone the
+# featured card has more room above its text. Listed cards keep their padding.
+
+require "pathname"
+
+ROOT = Pathname.new(__dir__).join("..", "..").expand_path
+
+def fail!(message)
+  warn "FAIL test-home-articles: #{message}"
+  exit 1
+end
+
+home = ROOT.join("assets/css/ledger/home.css").read
+
+fail!("featured article title is not 2pt larger") unless home.include?(
+  '[data-home-kind="articles"] .home-featured-title'
+) && home.include?("calc(var(--home-featured-title-size) + 2pt)")
+
+fail!("listed article titles are not 2pt larger") unless home.include?(
+  "calc(var(--type-card) + 2pt)"
+) && home.include?('[data-home-kind="articles"] .home-card-grid .card-title')
+
+phone = home[/^@media \(max-width: 767px\) \{\n  \[data-home-kind="articles"\] \.home-featured \{.*?\n  \}/m]
+fail!("phone featured card has no extra top padding") unless phone && phone.include?("padding-top:")
+fail!("phone featured padding changes the listed cards") if phone.include?("ledger-card") || phone.include?("home-card-grid")
+
+puts "PASS test-home-articles"

data/scripts/test/test-home-lists.rb

@@ -0,0 +1,74 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+# PLT-AC-26. Listing scripts follow the page, and the runtime stays after
+# it. Those scripts have to start once the runtime is assigned. The
+# Lighthouse script then loads the built example home and fails when the
+# project, article, or post bands are still empty.
+
+require "pathname"
+require "open3"
+
+ROOT = Pathname.new(__dir__).join("..", "..").expand_path
+
+def fail!(message)
+  warn "FAIL test-home-lists: #{message}"
+  exit 1
+end
+
+runtime = ROOT.join("_includes/page/content-runtime.html").read
+assigned = runtime.index("window.ContentRuntime = (function () {")
+dispatched = runtime.index("document.dispatchEvent(new CustomEvent('pandorga:runtime'))")
+fail!("runtime does not assign ContentRuntime") unless assigned
+fail!("runtime does not announce pandorga:runtime") unless dispatched
+fail!("runtime announces itself before the assignment") unless dispatched > assigned
+fail!("runtime moved back ahead of the page") unless ROOT.join("_layouts/shell.html").read.index("{{ content }}") <
+  ROOT.join("_layouts/shell.html").read.index("page/content-runtime.html")
+
+pages = %w[
+  _layouts/home.html
+  _layouts/articles.html
+  _layouts/blog.html
+  _layouts/projects.html
+  _layouts/cv.html
+  _layouts/resources.html
+  _layouts/bibliography.html
+  _includes/page/network-graph.html
+  _includes/page/timeline-section.html
+]
+pages.each do |relative|
+  text = ROOT.join(relative).read
+  fail!("#{relative} does not wait for pandorga:runtime") unless text.include?("pandorga:runtime")
+end
+
+home = ROOT.join("_layouts/home.html").read
+fail!("home paint still runs before the runtime") unless home.scan("pandorga:runtime").length >= 2
+fail!("home bands still return when the runtime is missing") if home.include?("if (!runtime) return")
+
+marked = ROOT.join("_includes/content-runtime/00-config.html").read
+fail!("markdown library no longer defers") unless marked.include?("<script defer ")
+
+shell = ROOT.join("_layouts/shell.html").read
+fail!("text faces no longer wait for the first paint") unless shell.scan("requestAnimationFrame").length >= 2
+fail!("icon subset link was removed") unless shell.include?("__pandorgaIconsHref")
+
+spec = ROOT.join("docs/spec.md").read
+fail!("spec is missing PLT-AC-26") unless spec.include?("PLT-AC-26")
+fail!("spec no longer keeps the runtime after the page") unless spec.include?("runtime stays after the page")
+
+lighthouse = ROOT.join("scripts/lighthouse-home.sh").read
+checker = lighthouse.index("check_home_lists.mjs")
+score = lighthouse.index("Lighthouse mobile (one run)")
+fail!("lighthouse script does not load the home lists") unless checker
+fail!("list check runs only after the score") unless score && checker < score
+
+probe = ROOT.join("scripts/check_home_lists.mjs").read
+fail!("probe ignores the project inventory") unless probe.include?("#home-projects .home-project-inventory-row")
+fail!("probe ignores article cards") unless probe.include?("#home-articles .home-featured, #home-articles .ledger-card")
+fail!("probe ignores the phone viewport") unless probe.include?("name: 'mobile'")
+fail!("probe ignores the desktop viewport") unless probe.include?("name: 'desktop'")
+
+_out, err, status = Open3.capture3("node", "--check", ROOT.join("scripts/check_home_lists.mjs").to_s)
+fail!("home list probe is not valid JavaScript\n#{err}") unless status.success?
+
+puts "PASS test-home-lists"