diff --git a/scripts/generate-org-chart-images.ts b/scripts/generate-org-chart-images.ts new file mode 100644 index 00000000..f60e7d1f --- /dev/null +++ b/scripts/generate-org-chart-images.ts @@ -0,0 +1,694 @@ +#!/usr/bin/env npx tsx +/** + * Standalone org chart image generator. + * + * Renders each of the 5 org chart styles to PNG using Playwright (headless Chromium). + * This gives us browser-native emoji rendering, full CSS support, and pixel-perfect output. + * + * Usage: + * npx tsx scripts/generate-org-chart-images.ts + * + * Output: tmp/org-chart-images/ + +
+${tree} +${PAPERCLIP_WATERMARK} +
+`; +} + +// ── Main ─────────────────────────────────────────────────────── + +async function main() { + const outDir = path.resolve("tmp/org-chart-images"); + fs.mkdirSync(outDir, { recursive: true }); + + const browser = await chromium.launch(); + const context = await browser.newContext({ + deviceScaleFactor: 2, // retina quality + }); + + const sizes = ["sm", "med", "lg"] as const; + const results: string[] = []; + + for (const style of STYLES) { + // README sizes + for (const size of sizes) { + const page = await context.newPage(); + const html = buildHtml(style, ORGS[size], false); + await page.setContent(html, { waitUntil: "networkidle" }); + + // Wait for fonts to load + await page.waitForFunction(() => document.fonts.ready); + await page.waitForTimeout(300); + + // Fit to content + const box = await page.evaluate(() => { + const el = document.querySelector(".org-tree")!; + const rect = el.getBoundingClientRect(); + return { + width: Math.ceil(rect.width) + 32, + height: Math.ceil(rect.height) + 32, + }; + }); + + await page.setViewportSize({ + width: Math.max(box.width, 400), + height: Math.max(box.height, 300), + }); + + const filename = `${style.key}-${size}.png`; + await page.screenshot({ + path: path.join(outDir, filename), + clip: { + x: 0, + y: 0, + width: Math.max(box.width, 400), + height: Math.max(box.height, 300), + }, + }); + await page.close(); + results.push(filename); + console.log(` ✓ ${filename}`); + } + + // OG card (1200×630) + { + const page = await context.newPage(); + await page.setViewportSize({ width: 1200, height: 630 }); + const html = buildHtml(style, OG_ORG, true); + // For OG, center the tree in a fixed viewport + const ogHtml = html.replace( + "", + ``, + ); + await page.setContent(ogHtml, { waitUntil: "networkidle" }); + await page.waitForFunction(() => document.fonts.ready); + await page.waitForTimeout(300); + + const filename = `${style.key}-og.png`; + await page.screenshot({ + path: path.join(outDir, filename), + clip: { x: 0, y: 0, width: 1200, height: 630 }, + }); + await page.close(); + results.push(filename); + console.log(` ✓ ${filename}`); + } + } + + await browser.close(); + + // Build an HTML comparison page + let compHtml = ` + + +Org Chart Style Comparison + + +

Org Chart Export — Style Comparison

+

5 styles × 3 org sizes + OG cards. All rendered via Playwright (browser-native emojis, full CSS).

+`; + + for (const style of STYLES) { + compHtml += `
+

${style.name}

+
README — Small / Medium / Large
+
+ + + +
+
OG Card (1200×630)
+
+
`; + } + + compHtml += ``; + fs.writeFileSync(path.join(outDir, "comparison.html"), compHtml); + console.log(`\n✓ All done! ${results.length} images generated.`); + console.log(` Open: tmp/org-chart-images/comparison.html`); +} + +main().catch((e) => { + console.error(e); + process.exit(1); +});