116 lines
4.5 KiB
JavaScript
116 lines
4.5 KiB
JavaScript
// 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 S'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. 0.05em at
|
|
// 125px is 6.25px; the 2px over that is rounding room, not licence to drift.
|
|
const opticalSlack = 8;
|
|
|
|
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}`);
|