/** * Generate og-image.png (1200x630) for SEO/social preview * Output: public/og-image.png */ import { chromium } from 'playwright'; import { writeFileSync, readFileSync } from 'fs'; import { join } from 'path'; const ROOT = process.cwd(); const OUT_PATH = join(ROOT, 'public', 'og-image.png'); async function main() { const catalog = JSON.parse(readFileSync(join(ROOT, 'catalog', 'index.json'), 'utf-8')); const pkg = JSON.parse(readFileSync(join(ROOT, 'package.json'), 'utf-8')); const html = `

Extract real design from any URL.
Automatically.

Playwright + getComputedStyle() → narrative DESIGN.md + tokens.json + screenshots.

${catalog.count}
brands extracted
${Math.round(catalog.brands.reduce((s: number, b: any) => s + (b.completeness||0), 0) / catalog.brands.length)}/100
avg completeness
1.8×
vs getdesign.md
$npx clone-architect add linear.app
`; // --disable-dev-shm-usage: deploy runs this in a background bash task where /dev/shm can be // tiny; under that pressure captureScreenshot fails with "Unable to capture screenshot" // (seen when og-image ran concurrently with showcase regen). These args + a one-shot retry // make it robust. deploy-site.ts also wraps this call in try/catch (non-fatal) as a backstop. const browser = await chromium.launch({ headless: true, args: ['--no-sandbox', '--disable-gpu', '--disable-dev-shm-usage'], }); try { const page = await browser.newPage({ viewport: { width: 1200, height: 630 } }); await page.setContent(html, { waitUntil: 'load' }); let lastErr: unknown; for (let attempt = 1; attempt <= 2; attempt++) { try { await page.screenshot({ path: OUT_PATH, type: 'png', clip: { x: 0, y: 0, width: 1200, height: 630 } }); lastErr = undefined; break; } catch (e) { lastErr = e; if (attempt < 2) await page.waitForTimeout(500); } } if (lastErr) throw lastErr; console.log(`✅ og-image generated → ${OUT_PATH}`); } finally { await browser.close(); } } main().catch(err => { console.error(err); process.exit(1); });