#!/usr/bin/env node /** * Generate OG Image * * Renders the OG image using Playwright with proper Google Fonts. * Counts skills and commands dynamically from the source/ directory. * * 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, 'public', 'og-image.jpg'); // Count skills and commands from source directory function getCounts() { const skillsDir = path.join(ROOT_DIR, 'source', 'skills'); const commandsDir = path.join(ROOT_DIR, 'source', 'commands'); const skills = fs.existsSync(skillsDir) ? fs.readdirSync(skillsDir).filter(f => fs.statSync(path.join(skillsDir, f)).isDirectory()).length : 0; const commands = fs.existsSync(commandsDir) ? fs.readdirSync(commandsDir).filter(f => f.endsWith('.md')).length : 0; return { skills, commands }; } async function generateOgImage() { const { skills, commands } = getCounts(); console.log(`Detected ${skills} skill(s), ${commands} command(s)`); const html = `

/

Impeccable

Design fluency for AI harnesses

${skills} ${skills === 1 ? 'skill' : 'skills'}

+

${commands} ${commands === 1 ? 'command' : 'commands'}

+

anti-patterns

impeccable.style

`; 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: 85, }); 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); });