#!/usr/bin/env node /** * Generate OG Image * * Renders the OG image using Playwright with proper Google Fonts. * Counts commands dynamically from the source/ directory and composes * the wordmark alongside a real screenshot of the Chrome extension * detection panel from public/assets/extension-detection.png. * * Usage: bun run og-image */ import { chromium } from 'playwright'; import path from 'path'; import fs from 'fs'; import { fileURLToPath } from 'url'; const __filename = fileURLToPath(import.meta.url); const __dirname = path.dirname(__filename); const ROOT_DIR = path.resolve(__dirname, '..'); const OUTPUT_PATH = path.join(ROOT_DIR, 'site', 'public', 'og-image.jpg'); const EXTENSION_IMAGE_PATH = path.join( ROOT_DIR, 'public', 'assets', 'extension-detection.png', ); // Count sub-commands from skill/scripts/command-metadata.json (the post-v3.0 // single source of truth). Commands and skills were unified in v2.0; v3.0 // then collapsed to a single user-invocable skill (`impeccable`) with // sub-commands listed in command-metadata.json. function getCommandCount() { const metadataPath = path.join(ROOT_DIR, 'skill', 'scripts', 'command-metadata.json'); if (!fs.existsSync(metadataPath)) return 0; const metadata = JSON.parse(fs.readFileSync(metadataPath, 'utf8')); return Object.keys(metadata).length; } // Load extension screenshot as base64 data URL so setContent is self-contained function getExtensionDataUrl() { const buf = fs.readFileSync(EXTENSION_IMAGE_PATH); return `data:image/png;base64,${buf.toString('base64')}`; } async function generateOgImage() { const commands = getCommandCount(); const extensionDataUrl = getExtensionDataUrl(); console.log(`Detected ${commands} command(s)`); const html = `
Impeccable
Design fluency for AI harnesses
${commands} commands · Chrome extension · CLI
impeccable.style
Impeccable Chrome extension detection panel
`; const browser = await chromium.launch(); const page = await browser.newPage({ viewport: { width: 1200, height: 630 }, deviceScaleFactor: 1, }); await page.setContent(html, { waitUntil: 'networkidle' }); // Wait for fonts to load await page.evaluate(() => document.fonts.ready); await page.screenshot({ path: OUTPUT_PATH, type: 'jpeg', quality: 90, }); await browser.close(); const size = (fs.statSync(OUTPUT_PATH).size / 1024).toFixed(0); console.log(`Generated ${OUTPUT_PATH} (${size} KB)`); } generateOgImage().catch((err) => { console.error('Failed to generate OG image:', err); process.exit(1); });