hoelee-blog/scripts/og-gen/render_sample_suite_v2.mjs

#!/usr/bin/env node
/**
 * render_sample_suite.mjs — render the "one art, four targets" sample set from two
 * real Ideogram 4 base images (no GPU re-run needed).
 *
 * Template: scripts/og-gen/template-v2.1.html (outside consultant's v2.0 Bento spec:
 * frosted Bento card, blueprint grid, 2-line description, full-width evidence bar).
 */
import { readFileSync, writeFileSync, mkdirSync } from 'node:fs';
import { execSync } from 'node:child_process';
import { fileURLToPath } from 'node:url';
import { dirname, join, resolve } from 'node:path';
import sharp from 'sharp';

const __dirname = dirname(fileURLToPath(import.meta.url));
const ROOT = resolve(__dirname, '..', '..');
const CHROME = process.env.CHROME_PATH || 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe';

const OUT_DIR = 'C:/Users/hoelee/Desktop/blog-og-image-redesign-brief/samples-v2';
mkdirSync(OUT_DIR, { recursive: true });

const AVATAR_FILE = join(ROOT, 'public', 'images', 'lee-teong-hoe-640.jpg');
const AVATAR_URL = 'file:///' + AVATAR_FILE.replace(/\\/g, '/');

const TPL_RAW = readFileSync(join(__dirname, 'template-v2.1.html'), 'utf8');

const SAMPLES = [
  {
    slug: 'running-production-infrastructure-solo',
    bg: 'C:/AI/ideogram4/out/sample_prod_169_00001_.png',
    category: 'case-studies',
    tags: ['DOCKER', 'INFRASTRUCTURE', 'PROMETHEUS'],
    evidence: '162 containers · 3 hosts · 78 compose stacks',
    title_en: 'Running Production Infrastructure Solo: 162 Containers Across Three Hosts',
    title_zh: '独自运维 3 台主机上的 162 个生产容器：两起故障改变了我验证数字的方式',
    desc_en: 'One operator, three hosts, 162 containers in 78 compose stacks — and the two failures that changed how I verify my own numbers.',
    desc_zh: '一个人、三台宿主、78 个 compose 栈里的 162 个容器，以及两起改变了我验证数字方式的真实故障。'
  },
  {
    slug: 'docker-reported-exit-0-the-oom-killer-disagreed',
    bg: 'C:/AI/ideogram4/out/sample_oom_169_00001_.png',
    category: 'devops',
    tags: ['DOCKER', 'DMESG', 'OOM-KILLER'],
    evidence: 'exit 0 · dmesg: 6x cgroup OOM kills',
    title_en: 'Docker Reported Exit 0. The Kernel Had Already OOM-Killed It.',
    title_zh: 'Docker 报告 Exit 0，内核却早已通过 OOM 杀死了它',
    desc_en: 'A container kept stopping while Docker reported exit 0 and OOMKilled=false. The honest evidence was in dmesg: six cgroup OOM kills.',
    desc_zh: '容器不停意外停止，而 Docker 报的是 exit 0 / OOMKilled=false。真正的证据在 dmesg 里：六次 cgroup OOM 杀死。'
  }
];

/** Consultant v2.0 sizing: larger, never collapses to 36px. */
function calcTitleSize(title, isZh) {
  const len = title.replace(/<br\s*\/?>/gi, '').length;
  if (isZh) {
    if (len <= 20) return 48;
    if (len <= 30) return 44;
    return 40;
  }
  if (len <= 42) return 46;
  if (len <= 65) return 42;
  return 38;
}

/** Consultant v2.0: break Chinese titles at a colon/comma in the 7–18 char window
 *  so the second line is never an orphan tail like "杀死了它". */
function formatSmartTitle(title, isZh) {
  if (!isZh || title.includes('<br>')) return title;
  const m = title.match(/^(.{7,18}?[：，——])(.{5,})$/);
  return m ? `${m[1]}<br>${m[2]}` : title;
}

async function renderCard(sample, isZh) {
  const lang = isZh ? 'zh' : 'en';
  const rawTitle = isZh ? sample.title_zh : sample.title_en;
  const title = formatSmartTitle(rawTitle, isZh);
  const titleSize = calcTitleSize(rawTitle, isZh);
  const desc = isZh ? sample.desc_zh : sample.desc_en;

  const tagsHtml = sample.tags.map((t) => `<span>${t}</span>`).join('');
  const bgUrl = 'file:///' + sample.bg.replace(/\\/g, '/');

  const html = TPL_RAW
    .replace('{{LANG}}', isZh ? 'zh-CN' : 'en')
    .replace('{{BG_IMAGE_SRC}}', bgUrl)
    .replace('{{CATEGORY}}', sample.category)
    .replace('{{TAGS_HTML}}', tagsHtml)
    .replace('{{TITLE_SIZE}}', String(titleSize))
    .replace('{{TITLE_HTML}}', title)
    .replace('{{DESCRIPTION}}', desc)
    .replace('{{EVIDENCE_SUMMARY}}', sample.evidence)
    .replace('{{AVATAR_PATH}}', AVATAR_URL);

  if (/\{\{[A-Z_]+\}\}/.test(html)) {
    throw new Error(`unsubstituted placeholder: ${html.match(/\{\{[A-Z_]+\}\}/g)}`);
  }

  const tmpHtml = join(OUT_DIR, `temp_${sample.slug}_${lang}.html`);
  writeFileSync(tmpHtml, html, 'utf8');

  const outPng = join(OUT_DIR, `${sample.slug}_og_${lang}.png`);
  execSync(
    `"${CHROME}" --headless --screenshot="${outPng}" --window-size=1200,630 ` +
    `--hide-scrollbars --disable-gpu --force-device-scale-factor=1 ` +
    `"file:///${tmpHtml.replace(/\\/g, '/')}"`,
    { stdio: 'pipe' }
  );
  console.log(`  OG (${lang}) ${titleSize}px -> ${outPng}`);
}

async function processSample(s) {
  console.log(`\n=== ${s.slug} ===`);

  // Hero banner 1600x900: consultant flagged the old crop left 2/3 black. Crop toward
  // the 3D subject on the right so the art fills the frame instead of floating in a void.
  const banner = join(OUT_DIR, `${s.slug}_banner_1600x900.webp`);
  await sharp(s.bg)
    .resize(1600, 900, { fit: 'cover', position: 'right' })
    .webp({ quality: 88 })
    .toFile(banner);
  console.log(`  banner -> ${banner}`);

  // Listing thumbnail 800x420: pure art, right-anchored on the subject.
  const thumb = join(OUT_DIR, `${s.slug}_thumb_800x420.webp`);
  await sharp(s.bg)
    .resize(800, 420, { fit: 'cover', position: 'right' })
    .webp({ quality: 86 })
    .toFile(thumb);
  console.log(`  thumb  -> ${thumb}`);

  await renderCard(s, false);
  await renderCard(s, true);
}

for (const s of SAMPLES) await processSample(s);
console.log(`\nDone -> ${OUT_DIR}`);