Merge nucleic/eager-feather-seal-fsqu into main

Mirrored from corpo 80a719b.
2026-08-12 02:31:02 -07:00
parent 7e72470e1e
commit f5ab9dcd48
5 changed files with 377 additions and 3 deletions
@@ -0,0 +1,114 @@
+// Renders website/scripts/og.html to website/public/og.png at 1200x630.
+//
+//   CHROME_PATH=/path/to/chrome npm run og
+//
+// Uses puppeteer-core, the driver this package already carries for
+// profile:runtime, so the card needs no browser dependency of its own.
+import { fileURLToPath } from 'node:url';
+import { dirname, resolve } from 'node:path';
+
+import puppeteer from 'puppeteer-core';
+
+const chromePath = process.env.CHROME_PATH;
+
+if (!chromePath) {
+  throw new Error('Set CHROME_PATH to a Chromium/Chrome executable.');
+}
+
+const here = dirname(fileURLToPath(import.meta.url));
+const source = resolve(here, 'og.html');
+const target = resolve(here, '../public/og.png');
+
+const browser = await puppeteer.launch({
+  executablePath: chromePath,
+  headless: true,
+  // Same pair profile:runtime uses, and for the same reason: the container and CI
+  // images this gets run in are root with a small /dev/shm.
+  args: ['--no-sandbox', '--disable-dev-shm-usage'],
+});
+const page = await browser.newPage();
+await page.setViewport({ width: 1200, height: 630, deviceScaleFactor: 1 });
+await page.goto(`file://${source}`, { waitUntil: 'networkidle0' });
+
+// The fonts and the mark are the whole card; screenshotting before they arrive
+// silently produces a fallback-font PNG that still looks plausible.
+await page.evaluate(async () => {
+  await document.fonts.ready;
+  await Promise.all([...document.images].map((image) => (image.complete ? null : image.decode())));
+});
+
+// Guard the legibility contract. Feeds render this card as small as 320px wide — a
+// 27% scale — so crowded, clipped, or re-wrapped type is worth failing over.
+const problems = await page.evaluate(() => {
+  const pad = 72;
+  const width = 1200;
+  const height = 630;
+
+  // The statement hangs its box outside the padding by a deliberate optical inset,
+  // so the R's printed edge — not its box — lands on the padding. That slack is a
+  // CONSTANT on purpose: reading it back off the element under test would let any
+  // margin-left, however wrong, widen the very bound meant to catch it.
+  const opticalSlack = 12;
+
+  const found = [];
+  const label = (element) => element.className || element.tagName;
+
+  for (const element of document.querySelectorAll('.card p, .card h1, .card .brand-name')) {
+    const size = parseFloat(getComputedStyle(element).fontSize);
+    if (size < 30) found.push(`${label(element)} is ${size}px (< 30px)`);
+  }
+
+  const statement = document.querySelector('.statement');
+  const range = document.createRange();
+
+  for (const element of document.querySelectorAll('.statement .line, .foot p, .brand-name')) {
+    const leftBound = pad - (statement.contains(element) ? opticalSlack : 0);
+    range.selectNodeContents(element);
+    // One rect per inline box, not per line — "that" and "runs." are two boxes on
+    // one line, and a <br> contributes an empty one. Distinct tops is the line count.
+    const rects = [...range.getClientRects()].filter((rect) => rect.width > 0 && rect.height > 0);
+    const lines = new Set(rects.map((rect) => Math.round(rect.top))).size;
+
+    // Oversized type does not run past the padding — it wraps, quietly turning a
+    // two-line headline into three and pushing the composition out of the frame.
+    // One source line must stay one rendered line.
+    const expectedLines = element.classList.contains('brand-name') ? 2 : 1;
+    if (lines !== expectedLines) {
+      found.push(`${label(element)} renders ${lines} lines, expected ${expectedLines}`);
+    }
+
+    for (const rect of rects) {
+      if (rect.left < leftBound - 1 || rect.right > width - pad + 1) {
+        found.push(
+          `${label(element)} spans ${Math.round(rect.left)}-${Math.round(rect.right)}px ` +
+            `(bounds ${leftBound}-${width - pad})`,
+        );
+      }
+    }
+  }
+
+  // Nothing may run off the bottom: the card clips, so an overflowing block is
+  // invisible here and obvious in a feed.
+  for (const element of document.querySelectorAll('.lockup, .statement, .foot, .rule')) {
+    const rect = element.getBoundingClientRect();
+    if (rect.top < -1 || rect.bottom > height + 1) {
+      found.push(
+        `${label(element)} runs ${Math.round(rect.top)}-${Math.round(rect.bottom)}px vertically ` +
+          `(card is 0-${height})`,
+      );
+    }
+  }
+
+  return found;
+});
+
+if (problems.length) {
+  await browser.close();
+  console.error('og.png legibility check failed:\n  ' + problems.join('\n  '));
+  process.exit(1);
+}
+
+await page.screenshot({ path: target });
+await browser.close();
+
+console.log(`wrote ${target}`);