#!/usr/bin/env node /** * build-font-index: rebuild skill/scripts/data/font-index.json, the fingerprint * index of the Google Fonts catalog that `font-match.mjs --rank` uses as its * candidate generator. * * This is a RELEASE-TIME step, not part of `bun run build`. It needs the * network (Google Fonts metadata + CSS) and Playwright Chromium, renders every * latin family at up to three weights (300 / 400 / 700, whichever the family * ships) at two cap heights (48px and 14px), fingerprints each render with * skill/scripts/lib/font-fingerprint.mjs, and packs the vectors with * skill/scripts/lib/font-index.mjs. A full run is ~6,000 renders and takes * 20-40 minutes. Rerun it when the fingerprint's FEATURES or STATS change * (the index stores only the features the fitted distance weights) or when * the catalog has moved on enough to matter; commit the regenerated JSON. * * node scripts/build-font-index.mjs [--out skill/scripts/data/font-index.json] * [--sample N] # first N families only (tests, smoke) * [--families "Inter,Oswald"] * [--metadata path] # cached fonts.google.com/metadata/fonts JSON * [--resume] # keep entries already in --out * * One-time setup: `npx playwright install chromium`. */ import fs from 'node:fs'; import path from 'node:path'; import { fileURLToPath } from 'node:url'; import { createRequire } from 'node:module'; import { fingerprint } from '../skill/scripts/lib/font-fingerprint.mjs'; import { decodePng } from '../skill/scripts/lib/png.mjs'; import { INDEX_PATH, INDEX_SIZES, INDEX_FEATURES, CATEGORIES, packVector } from '../skill/scripts/lib/font-index.mjs'; const require = createRequire(import.meta.url); const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..'); /** Text every catalog face is rendered with; covers caps, x-height letters, ascenders, descenders, digits. */ export const INDEX_TEXT = 'The quick brown fox jumps over the lazy dog 0123456789 HAMBURGEVONS'; /** All-caps variant, rendered at the large cap size only: a caps headline * crop has no x-height band, so its features (advance, run lengths, vertical * profile) belong to a different distribution than mixed-case text; matching * a caps crop against mixed-case renders ranked barcode faces above the * headline's own family. */ export const INDEX_TEXT_CAPS = 'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG 0123456789 HAMBURGEVONS'; export const INDEX_WEIGHTS = [300, 400, 700]; const METADATA_URL = 'https://fonts.google.com/metadata/fonts'; const CATEGORY_MAP = { 'Sans Serif': 'sans', Serif: 'serif', Display: 'display', Handwriting: 'handwriting', Monospace: 'mono' }; function arg(name, fallback = null) { const i = process.argv.indexOf(`--${name}`); if (i === -1) return fallback; const v = process.argv[i + 1]; return v && !v.startsWith('--') ? v : fallback; } const has = (name) => process.argv.includes(`--${name}`); /** Catalog entries [{ family, weight, category, variable }] from the Google Fonts metadata document. */ export function entriesFromMetadata(meta, { weights = INDEX_WEIGHTS } = {}) { const list = (meta.familyMetadataList || []).filter((x) => (x.subsets || []).includes('latin')); const out = []; for (const x of list) { const ax = (x.axes || []).find((a) => a.tag === 'wght'); const ks = Object.keys(x.fonts || {}).filter((k) => !k.endsWith('i')).map(Number); const ws = weights.filter((t) => (ax ? t >= ax.min && t <= ax.max : ks.includes(t))); for (const w of ws) out.push({ family: x.family, weight: w, category: CATEGORY_MAP[x.category] || String(x.category || '').toLowerCase(), variable: !!ax }); } return out; } /** Serialize decoded entries into the on-disk shape (see lib/font-index.mjs). */ export function serializeIndex(entries, { text = INDEX_TEXT, textCaps = INDEX_TEXT_CAPS, sizes = INDEX_SIZES } = {}) { const rows = entries.map((e) => [e.family, e.weight, Math.max(0, CATEGORIES.indexOf(e.category)), e.variable ? 1 : 0, ...sizes.map((sz) => (e.fp?.[sz] ? packVector(e.fp[sz]) : null))]); return JSON.stringify({ schema: 2, text, textCaps, sizes, features: INDEX_FEATURES, categories: CATEGORIES, entries: rows }); } const gfHref = (f, w) => `https://fonts.googleapis.com/css2?family=${encodeURIComponent(f).replace(/%20/g, '+')}:wght@${w}&display=block`; /** Render one face at a target cap height on an open page and return its fingerprint (or null when the face did not load). */ async function fingerprintFace(page, e, targetCap, text) { let size = Math.round(targetCap * 1.4), fp = null; for (let pass = 0; pass < 2; pass++) { await page.evaluate(({ family, weight, size, text }) => { document.body.innerHTML = `
${text}
`; }, { family: e.family, weight: e.weight, size, text }); let loaded = false; try { loaded = await Promise.race([page.evaluate(async (f) => { const faces = await document.fonts.load(`${f.weight} 32px '${f.family}'`); await document.fonts.ready; const covers = (face) => { const w = String(face.weight || '400').split(/\s+/).map(Number); const lo = w[0], hi = w[1] ?? w[0]; return f.weight >= lo - 50 && f.weight <= hi + 50; }; return faces.some((face) => face.family.replace(/["']/g, '') === f.family && face.status === 'loaded' && covers(face)); }, e), new Promise((r) => setTimeout(() => r(false), 8000))]); } catch { loaded = false; } if (!loaded) return null; const box = await page.evaluate(() => { const r = document.querySelector('div.s').getBoundingClientRect(); return { w: Math.ceil(r.width) + 8, h: Math.ceil(r.height) + 8 }; }); const buf = await page.screenshot({ clip: { x: 0, y: 0, width: Math.min(3000, box.w), height: Math.min(300, box.h) } }); fp = fingerprint(decodePng(buf)); if (!fp || pass === 1) break; size = Math.max(6, Math.round(size * (targetCap / fp.capHeightPx))); } return fp; } async function main() { const out = path.resolve(ROOT, arg('out', INDEX_PATH)); const sample = arg('sample') ? parseInt(arg('sample'), 10) : null; const only = arg('families') ? new Set(arg('families').split(',').map((s) => s.trim())) : null; const metaPath = arg('metadata'); const meta = metaPath ? JSON.parse(fs.readFileSync(metaPath, 'utf8')) : await (await fetch(METADATA_URL)).json(); let entries = entriesFromMetadata(meta); if (only) entries = entries.filter((e) => only.has(e.family)); if (sample) { const fams = [...new Set(entries.map((e) => e.family))].slice(0, sample); const keep = new Set(fams); entries = entries.filter((e) => keep.has(e.family)); } // --resume keeps entries already in --out. An entry whose fp is missing a // size the current INDEX_SIZES names (a schema-1 index before `48c`) is // re-rendered for the missing sizes only. const done = new Map(); if (has('resume') && fs.existsSync(out)) { const { loadFontIndex } = await import('../skill/scripts/lib/font-index.mjs'); for (const e of loadFontIndex(out).entries) { const missing = INDEX_SIZES.filter((sz) => !e.fp[sz]); if (missing.length && missing.length < INDEX_SIZES.length) e.missing = missing; done.set(`${e.family}:${e.weight}`, e); } } const renderSize = async (e, sz) => (typeof sz === 'string' && sz.endsWith('c') ? fingerprintFace(page, e, parseInt(sz, 10), INDEX_TEXT_CAPS) : fingerprintFace(page, e, sz, INDEX_TEXT)); const pw = require('playwright'); const browser = await pw.chromium.launch(); const page = await browser.newPage({ viewport: { width: 3000, height: 300 }, deviceScaleFactor: 1 }); const results = [...done.values()].filter((e) => !e.missing); const failures = []; const byFam = new Map(); for (const e of entries) { const prev = done.get(`${e.family}:${e.weight}`); if (prev && !prev.missing) continue; if (!byFam.has(e.family)) byFam.set(e.family, []); byFam.get(e.family).push(prev ? { ...e, prev } : e); } const fams = [...byFam.keys()]; const t0 = Date.now(); let n = 0; for (let i = 0; i < fams.length; i += 20) { const todo = fams.slice(i, i + 20).flatMap((f) => byFam.get(f)); const links = todo.map((e) => ``).join(''); const html = `${links}`; try { await page.setContent(html, { waitUntil: 'load', timeout: 30000 }); } catch (err) { console.error(`batch at ${i}: ${err.message}`); } for (const e of todo) { n++; try { const fp = e.prev ? { ...e.prev.fp } : {}; for (const sz of (e.prev ? e.prev.missing : INDEX_SIZES)) fp[sz] = await renderSize(e, sz); if (!fp[INDEX_SIZES[0]]) { failures.push({ ...e, reason: 'not loaded or no lettering' }); continue; } const { prev, ...clean } = e; results.push({ ...clean, fp }); } catch (err) { failures.push({ ...e, reason: err.message.slice(0, 120) }); } } fs.mkdirSync(path.dirname(out), { recursive: true }); fs.writeFileSync(out, serializeIndex(results)); const el = (Date.now() - t0) / 1000; console.error(`${n}/${entries.length - done.size} rendered, ${results.length} indexed, ${failures.length} failed, ${el.toFixed(0)}s`); } await browser.close(); fs.writeFileSync(out, serializeIndex(results)); if (failures.length) fs.writeFileSync(out.replace(/\.json$/, '-failures.json'), JSON.stringify(failures, null, 1)); console.error(`DONE ${results.length} faces -> ${out} (${(fs.statSync(out).size / 1024).toFixed(0)} KB), ${failures.length} failed`); } const isMain = (() => { try { return !!process.argv[1] && fs.realpathSync(process.argv[1]) === fs.realpathSync(fileURLToPath(import.meta.url)); } catch { return false; } })(); if (isMain) main().catch((e) => { console.error(`build-font-index: ${e.message}`); process.exit(1); });