diff --git a/package.json b/package.json index e461a63..3bfb9e5 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "scripts": { "dev": "astro dev", "build": "astro build", + "og": "node scripts/render-og.mjs", "profile:runtime": "node scripts/profile-runtime.mjs", "preview": "astro preview", "deploy": "wrangler deploy" diff --git a/public/og.png b/public/og.png index 84d7f87..98f062b 100644 Binary files a/public/og.png and b/public/og.png differ diff --git a/scripts/og.html b/scripts/og.html new file mode 100644 index 0000000..d6ccd01 --- /dev/null +++ b/scripts/og.html @@ -0,0 +1,249 @@ + + + + + + + + +
+ + +
+ + Blakeslee
Research +
+ +

+ Research + that runs. +

+ +
+ +
+

blakeslee.xyz

+
+
+ + diff --git a/scripts/render-og.mjs b/scripts/render-og.mjs new file mode 100644 index 0000000..eda2a47 --- /dev/null +++ b/scripts/render-og.mjs @@ -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
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}`); diff --git a/src/pages/index.astro b/src/pages/index.astro index 70776cc..5bd6145 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -3,6 +3,13 @@ const title = 'Blakeslee Research — research that runs'; const description = 'Blakeslee Research engineers infrastructure that keeps AI agents—and the digital intelligence to come—forever online and forever active, including Nucleic, the home for persistent, orchestrated, observable coding agents.'; const canonical = new URL('/', Astro.site); + +// Every scraper that matters — Facebook, X, Slack, iMessage, LinkedIn — caches the +// card against this exact URL and will happily keep serving a card it fetched +// months ago. Re-rendering og.png in place therefore changes nothing for any link +// already in the wild. Bump this whenever scripts/og.html changes, so the card is +// requested under a URL none of them has seen. +const socialImage = new URL('/og.png?v=2', Astro.site); --- @@ -46,14 +53,17 @@ const canonical = new URL('/', Astro.site); - + - + - +