|
| 1 | +#!/usr/bin/env node |
| 2 | + |
| 3 | +// Dev-only tool: builds a single HTML page listing every generated og:image |
| 4 | +// card (thumbnail + section/title/route) so a large batch can be reviewed |
| 5 | +// in a browser at once, instead of opening 600+ PNGs one at a time. Not |
| 6 | +// part of the build pipeline — run manually after `yarn build`. |
| 7 | + |
| 8 | +const fs = require('fs'); |
| 9 | +const path = require('path'); |
| 10 | +const matter = require('gray-matter'); |
| 11 | +const ogImagePlugin = require('../plugins/og-image'); |
| 12 | + |
| 13 | +const DOCS_DIR = path.join(process.cwd(), 'docs'); |
| 14 | +const BUILD_DIR = path.join(process.cwd(), 'build'); |
| 15 | +const OUT_FILE = path.join(BUILD_DIR, '__og-gallery.html'); |
| 16 | + |
| 17 | +// Section grouping/labeling is purely a gallery-review concern now — the |
| 18 | +// generated card itself dropped the section pill in the Figma redesign, so |
| 19 | +// this doesn't live in plugins/og-image/index.js (the actual production |
| 20 | +// plugin) anymore, only here. |
| 21 | +const SDK_LABELS = { |
| 22 | + go: 'Go', |
| 23 | + python: 'Python', |
| 24 | + java: 'Java', |
| 25 | + typescript: 'TypeScript', |
| 26 | + dotnet: '.NET', |
| 27 | + php: 'PHP', |
| 28 | + ruby: 'Ruby', |
| 29 | + rust: 'Rust', |
| 30 | +}; |
| 31 | + |
| 32 | +const SECTION_OVERRIDES = { |
| 33 | + cli: 'CLI', |
| 34 | + 'tctl-v1': 'tctl v1', |
| 35 | +}; |
| 36 | + |
| 37 | +function humanize(id) { |
| 38 | + return id |
| 39 | + .replace(/[-_]+/g, ' ') |
| 40 | + .replace(/\b\w/g, (c) => c.toUpperCase()); |
| 41 | +} |
| 42 | + |
| 43 | +function resolveSection(docsDir, filePath) { |
| 44 | + const rel = path.relative(docsDir, filePath).replace(/\\/g, '/'); |
| 45 | + const segments = rel.split('/'); |
| 46 | + if (segments.length === 1) return 'Docs'; |
| 47 | + const top = segments[0]; |
| 48 | + if (top === 'develop' && segments[1] && SDK_LABELS[segments[1]]) { |
| 49 | + return `${SDK_LABELS[segments[1]]} SDK`; |
| 50 | + } |
| 51 | + return SECTION_OVERRIDES[top] || humanize(top); |
| 52 | +} |
| 53 | + |
| 54 | +async function getSiteUrl() { |
| 55 | + const createConfigAsync = require('../docusaurus.config.js'); |
| 56 | + const config = await createConfigAsync(); |
| 57 | + return config.url + (config.baseUrl || '/'); |
| 58 | +} |
| 59 | + |
| 60 | +function escapeHtml(str) { |
| 61 | + return String(str).replace(/[&<>"']/g, (c) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c])); |
| 62 | +} |
| 63 | + |
| 64 | +async function main() { |
| 65 | + if (!fs.existsSync(BUILD_DIR)) { |
| 66 | + console.error(`Build directory not found at ${BUILD_DIR}. Run \`yarn build\` first.`); |
| 67 | + process.exit(1); |
| 68 | + } |
| 69 | + |
| 70 | + const siteUrl = await getSiteUrl(); |
| 71 | + const cards = []; |
| 72 | + for (const filePath of ogImagePlugin.walkDir(DOCS_DIR)) { |
| 73 | + const raw = fs.readFileSync(filePath, 'utf8'); |
| 74 | + const { data: frontmatter, content } = matter(raw); |
| 75 | + const urlPath = ogImagePlugin.resolveUrlPath(DOCS_DIR, filePath, frontmatter); |
| 76 | + const htmlPath = ogImagePlugin.htmlPathForUrlPath(BUILD_DIR, urlPath); |
| 77 | + if (!fs.existsSync(htmlPath)) continue; |
| 78 | + |
| 79 | + const section = resolveSection(DOCS_DIR, filePath); |
| 80 | + const routePath = urlPath === 'index' ? '/' : `/${urlPath}`; |
| 81 | + |
| 82 | + if (ogImagePlugin.hasManualOverride(frontmatter, content)) { |
| 83 | + const id = frontmatter.id || path.basename(filePath).replace(/\.(md|mdx)$/i, ''); |
| 84 | + const title = ogImagePlugin.extractTitle(content, frontmatter, id); |
| 85 | + const overrideImage = ogImagePlugin.overrideImageFor(frontmatter, content, siteUrl); |
| 86 | + cards.push({ urlPath: routePath, section, title, isOverride: true, imgSrc: overrideImage }); |
| 87 | + continue; |
| 88 | + } |
| 89 | + |
| 90 | + const id = frontmatter.id || path.basename(filePath).replace(/\.(md|mdx)$/i, ''); |
| 91 | + const title = ogImagePlugin.extractTitle(content, frontmatter, id); |
| 92 | + const description = frontmatter.description; |
| 93 | + const hash = ogImagePlugin.hashFor(title, description); |
| 94 | + |
| 95 | + cards.push({ urlPath: routePath, section, title, isOverride: false, imgSrc: `/img/og/${hash}.${ogImagePlugin.IMAGE_EXTENSION}` }); |
| 96 | + } |
| 97 | + |
| 98 | + cards.sort((a, b) => a.section.localeCompare(b.section) || a.title.localeCompare(b.title)); |
| 99 | + |
| 100 | + const html = `<!doctype html> |
| 101 | +<html> |
| 102 | +<head> |
| 103 | +<meta charset="utf-8"> |
| 104 | +<title>og:image gallery (${cards.length} pages)</title> |
| 105 | +<style> |
| 106 | + body { background: #0a0a0f; color: #e5e7eb; font-family: system-ui, sans-serif; margin: 0; padding: 24px; } |
| 107 | + h1 { font-size: 18px; font-weight: 600; margin: 0 0 16px; } |
| 108 | + .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(960px, 1fr)); gap: 20px; } |
| 109 | + figure { margin: 0; background: #16161d; border-radius: 8px; overflow: hidden; border: 1px solid #26262f; } |
| 110 | + figure img { width: 100%; display: block; background: #000; } |
| 111 | + figcaption { padding: 10px 12px; font-size: 13px; line-height: 1.4; } |
| 112 | + .section { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #93c5fd; margin-bottom: 4px; } |
| 113 | + .override-badge { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: #0a0a0f; background: #facc15; padding: 2px 8px; border-radius: 4px; margin-left: 6px; } |
| 114 | + .title { color: #f3f4f6; font-weight: 600; } |
| 115 | + .path { color: #6b7280; font-size: 12px; } |
| 116 | + a { color: inherit; } |
| 117 | +</style> |
| 118 | +</head> |
| 119 | +<body> |
| 120 | +<h1>${cards.length} og:image cards (${cards.filter((c) => c.isOverride).length} manual override(s))</h1> |
| 121 | +<div class="grid"> |
| 122 | +${cards |
| 123 | + .map( |
| 124 | + (c) => ` <figure> |
| 125 | + <a href="${escapeHtml(c.urlPath)}" target="_blank"><img src="${escapeHtml(c.imgSrc)}" loading="lazy"></a> |
| 126 | + <figcaption> |
| 127 | + <span class="section">${escapeHtml(c.section)}</span>${c.isOverride ? '<span class="override-badge">Override</span>' : ''}<br> |
| 128 | + <span class="title">${escapeHtml(c.title)}</span><br> |
| 129 | + <span class="path">${escapeHtml(c.urlPath)}</span> |
| 130 | + </figcaption> |
| 131 | + </figure>`, |
| 132 | + ) |
| 133 | + .join('\n')} |
| 134 | +</div> |
| 135 | +</body> |
| 136 | +</html> |
| 137 | +`; |
| 138 | + |
| 139 | + fs.writeFileSync(OUT_FILE, html); |
| 140 | + console.log(`[generate-og-gallery] wrote ${cards.length} card(s) to ${path.relative(process.cwd(), OUT_FILE)}`); |
| 141 | +} |
| 142 | + |
| 143 | +main().catch((e) => { |
| 144 | + console.error(e); |
| 145 | + process.exit(1); |
| 146 | +}); |
0 commit comments