Add per-post banners (16:9 hero images) + banner-gen script; add banner to all posts

scripts/banner-gen/README.md

@@ -0,0 +1,43 @@
+# banner-gen — per-post banner/hero image generator
+
+Generates a branded 1600×900 (16:9) banner image for a blog post — shown at
+the top of the article, above the title. Matches the site's cobalt-blue
+branding and the "terminal / debugging" visual language (siblings with
+`scripts/og-gen/`, which produces the 1200×630 social-share image).
+
+## Usage
+
+```bash
+node scripts/banner-gen/generate.mjs <post-slug>
+```
+
+Reads the post's category from frontmatter, fills `template.html`, renders
+with headless Chrome, and writes `public/banners/<slug>.png`.
+
+Then add `banner: /banners/<slug>.png` to the post frontmatter (en + zh) —
+`[...slug].astro` renders it above the H1 title.
+
+## Customizing content
+
+Each post's banner content lives in `BANNERS` in `generate.mjs`, keyed by
+slug, with three parts:
+
+- `titlebar` — the terminal window's title-bar text
+- `lines` — terminal body rows: `{ t, text }` where `t` ∈
+  `cmd` · `dim` · `err` (red) · `ok` (green) · `hl` (amber) · `prompt` (`$`)
+- `flow` — bottom pipeline steps: `{ n: '1', label: '...', err?: true }`
+
+No entry → a generic default banner.
+
+## Requirements
+
+- Google Chrome at `C:\Program Files\Google\Chrome\Application\chrome.exe`
+  (`CHROME_PATH` to override).
+- Node 20+.
+
+## Relationship to og-gen
+
+- og-gen → `public/og/<slug>.png` (1200×630, 2:1) for social sharing.
+- banner-gen → `public/banners/<slug>.png` (1600×900, 16:9) for the article
+  hero. The banner is a "filled" visual (terminal + flow pipeline), not a
+  poster — avoid large empty margins.

scripts/banner-gen/generate.mjs

@@ -0,0 +1,223 @@
+#!/usr/bin/env node
+/**
+ * banner-gen — generate a 1600×900 (16:9) banner/hero image for a blog post.
+ *
+ * Usage:
+ *   node scripts/banner-gen/generate.mjs <slug> [--all]
+ *
+ * Reads the post's frontmatter, fills the template, renders with headless
+ * Chrome, and writes public/banners/<slug>.png.
+ *
+ * Each post's content (titlebar, terminal lines, flow steps) is defined in
+ * BANNERS below, keyed by slug. Falls back to a generic default.
+ *
+ * The post frontmatter then needs `banner: /banners/<slug>.png` so the
+ * article renders it above the title ([...slug].astro does this).
+ */
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'node:fs';
+import { execSync } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+import { dirname, join, resolve } from 'node:path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const ROOT = resolve(__dirname, '..', '..');
+
+const slug = process.argv[2];
+if (!slug) {
+  console.error('Usage: node scripts/banner-gen/generate.mjs <slug> | --all');
+  process.exit(1);
+}
+
+// ---------- per-post banner content ----------
+// lines: [{ t: 'cmd'|'dim'|'err'|'ok'|'hl'|'prompt', text }]
+// flow: [{ n: '1', label: '...', err?: true }]
+const BANNERS = {
+  'why-telegram-bot-notifications-die': {
+    titlebar: 'root@dsm — carousell-monitor',
+    lines: [
+      { t: 'dim', text: '2026-09-08 20:45:41' }, { t: 'prompt', text: 'INFO' }, { t: 'cmd', text: 'scraping "uniform" — 49 cards parsed' },
+      { t: 'dim', text: '2026-09-08 20:45:42' }, { t: 'prompt', text: 'INFO' }, { t: 'cmd', text: '2 new listings → archiving to NocoDB' },
+      { t: 'dim', text: '2026-09-08 20:45:44' }, { t: 'prompt', text: 'WARN' }, { t: 'err', text: 'telegram sendPhoto failed: 400 nginx/1.30.1' },
+      { t: 'dim', text: '2026-09-08 20:45:44' }, { t: 'prompt', text: 'WARN' }, { t: 'err', text: 'telegram sendMessage failed: 400 nginx/1.30.1' },
+      { t: 'prompt', text: '$', },
+      { t: 'cmd', text: 'getent hosts api.telegram.org' },
+      { t: 'hl', text: '2001:67c:4e8:f004::9' }, { t: 'dim', text: 'api.telegram.org   ← IPv6 only, no A record' },
+      { t: 'prompt', text: '$' },
+      { t: 'cmd', text: 'fix = extra_hosts → IPv4 · multipart join → binary-safe' },
+      { t: 'prompt', text: '' }, { t: 'ok', text: '→ delivered ✓' },
+    ],
+    flow: [
+      { n: '1', label: 'Collect listings' },
+      { n: '2', label: 'sendPhoto 400', err: true },
+      { n: '3', label: 'DNS → IPv6 only' },
+      { n: '4', label: 'multipart fix' },
+      { n: '5', label: 'delivered ✓' },
+    ],
+  },
+
+  'authentik-major-upgrade-gotchas': {
+    titlebar: 'root@dsm — authentik upgrade',
+    lines: [
+      { t: 'prompt', text: '$' }, { t: 'cmd', text: 'docker compose pull authentik-worker' },
+      { t: 'dim', text: 'Pulling authentik:2026.8.1 ... done' },
+      { t: 'prompt', text: '$' }, { t: 'cmd', text: 'docker compose up -d && docker logs -f authentik' },
+      { t: 'err', text: 'authorization_flow not found · SSO broken' },
+      { t: 'dim', text: 'trusted_proxy_cidrs was reset · storage mount changed' },
+      { t: 'prompt', text: '$' }, { t: 'cmd', text: 'fix = authorization_flow → authentication_flow' },
+      { t: 'prompt', text: '' }, { t: 'ok', text: '→ SSO restored ✓' },
+    ],
+    flow: [
+      { n: '1', label: '2025.8 → 2026.8' },
+      { n: '2', label: 'SSO broken', err: true },
+      { n: '3', label: 'flow renamed' },
+      { n: '4', label: 'trusted proxy' },
+      { n: '5', label: 'restored ✓' },
+    ],
+  },
+
+  'how-i-host-this-blog': {
+    titlebar: 'root@unraid — deploy pipeline',
+    lines: [
+      { t: 'prompt', text: '$' }, { t: 'cmd', text: 'git push origin main' },
+      { t: 'dim', text: '→ git.hoelee.com/hoelee/hoelee-blog' },
+      { t: 'prompt', text: 'INFO' }, { t: 'cmd', text: 'Gitea Actions → build (Astro 5)' },
+      { t: 'prompt', text: 'INFO' }, { t: 'cmd', text: 'npm ci && npm run build → dist/' },
+      { t: 'prompt', text: 'INFO' }, { t: 'cmd', text: 'deploy → unRaid runner → nginx' },
+      { t: 'ok', text: '✓ served via Cloudflare (cache + SSL)' },
+      { t: 'dim', text: 'git-as-CMS · zero-downtime deploy' },
+    ],
+    flow: [
+      { n: '1', label: 'git push' },
+      { n: '2', label: 'Gitea Actions' },
+      { n: '3', label: 'Astro build' },
+      { n: '4', label: 'unRaid nginx' },
+      { n: '5', label: 'Cloudflare' },
+    ],
+  },
+
+  'how-i-built-the-digikedai-telegram-bot': {
+    titlebar: 'DigiKedai — AI support bot',
+    lines: [
+      { t: 'prompt', text: '>' }, { t: 'cmd', text: 'user: "does this course have a free trial?"' },
+      { t: 'prompt', text: '¶' }, { t: 'ok', text: 'bot: yes — here\'s your trial account ✓' },
+      { t: 'dim', text: '(answered in < 2s, no human in the loop)' },
+      { t: 'prompt', text: '>' }, { t: 'cmd', text: 'user: "which package should I buy?"' },
+      { t: 'prompt', text: '¶' }, { t: 'ok', text: 'bot: recommends + provisions a free account' },
+      { t: 'prompt', text: '$' }, { t: 'cmd', text: 'stack = grammY · LiteLLM · Cloudflare tunnel · 24/7' },
+    ],
+    flow: [
+      { n: '1', label: 'User asks' },
+      { n: '2', label: 'grammY webhook' },
+      { n: '3', label: 'LiteLLM' },
+      { n: '4', label: 'AI answers' },
+      { n: '5', label: 'provisions ✓' },
+    ],
+  },
+
+  'hello-world': {
+    titlebar: '~/hoelee-blog — first commit',
+    lines: [
+      { t: 'prompt', text: '$' }, { t: 'cmd', text: 'git init hoelee-blog && git add -A' },
+      { t: 'prompt', text: '$' }, { t: 'cmd', text: 'git commit -m "Hello, world"' },
+      { t: 'ok', text: '[main 0000001] Hello, world ✓' },
+      { t: 'dim', text: 'technical writing · self-hosting · build log' },
+      { t: 'prompt', text: '$' }, { t: 'cmd', text: 'about → blog.hoelee.com' },
+    ],
+    flow: [
+      { n: '1', label: 'Why this blog' },
+      { n: '2', label: 'what I build' },
+      { n: '3', label: 'self-hosting' },
+      { n: '4', label: 'learn in public' },
+    ],
+  },
+};
+
+const DEFAULT_BANNER = {
+  titlebar: 'root@host — shell',
+  lines: [
+    { t: 'prompt', text: '$' }, { t: 'cmd', text: 'engineering · devops · self-hosting' },
+    { t: 'prompt', text: '' }, { t: 'ok', text: 'read the full post →' },
+  ],
+  flow: [
+    { n: '1', label: 'start' }, { n: '2', label: 'work' }, { n: '3', label: 'ship' },
+  ],
+};
+
+// ---------- read frontmatter ----------
+const postPath = join(ROOT, 'src', 'content', 'posts', `${slug}.md`);
+let category = 'devops';
+if (existsSync(postPath)) {
+  const raw = readFileSync(postPath, 'utf8');
+  const fm = raw.match(/^---\r?\n([\s\S]*?)\r?\n---/)?.[1] ?? '';
+  const c = fm.match(/^category\s*:\s*(.+)$/m)?.[1]?.trim();
+  if (c) category = c.replace(/["']/g, '');
+}
+
+const esc = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+// render terminal lines
+function renderLines(lines) {
+  // group into visual lines: each entry has t + text; consecutive dim/prompt/cmd share a row
+  let html = '';
+  let i = 0;
+  while (i < lines.length) {
+    const l = lines[i];
+    if (l.t === 'prompt') {
+      // prompt may be followed by a cmd/err/ok/hl/dim on same row
+      const next = lines[i + 1];
+      const promptClass = l.text === '$' ? 'prompt' : 'prompt';
+      let row = `<span class="${promptClass}">${esc(l.text) || '&nbsp;'}</span>`;
+      if (next && next.t !== 'prompt') {
+        row += `<span class="${next.t}">${esc(next.text)}</span>`;
+        i += 1;
+      }
+      html += `<div class="line" style="margin-top:6px;">${row}</div>`;
+    } else {
+      html += `<div class="line" style="margin-top:6px;"><span class="${l.t}">${esc(l.text)}</span></div>`;
+    }
+    i += 1;
+  }
+  return html;
+}
+
+function renderFlow(flow) {
+  let html = '';
+  flow.forEach((s, idx) => {
+    html += `<div class="step${s.err ? ' err-step' : ''}"><span class="num">${s.n}</span>${esc(s.label)}</div>`;
+    if (idx < flow.length - 1) html += `<div class="arrow">→</div>`;
+  });
+  return html;
+}
+
+const cfg = BANNERS[slug] || DEFAULT_BANNER;
+const logoPath = 'file:///' + join(ROOT, 'public', 'logo-square.png').replace(/\\/g, '/');
+
+let tpl = readFileSync(join(__dirname, 'template.html'), 'utf8');
+tpl = tpl
+  .replace('{{CATEGORY}}', esc(category))
+  .replace('{{SLUG}}', esc(slug))
+  .replace('{{LOGO_PATH}}', logoPath)
+  .replace('{{TITLEBAR}}', esc(cfg.titlebar))
+  .replace('{{TERMINAL_HTML}}', renderLines(cfg.lines))
+  .replace('{{FLOW_HTML}}', renderFlow(cfg.flow));
+
+mkdirSync(join(ROOT, '.og', 'gen'), { recursive: true });
+const htmlPath = join(ROOT, '.og', 'gen', `${slug}-banner.html`);
+writeFileSync(htmlPath, tpl);
+
+const chrome = process.env.CHROME_PATH || 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe';
+const outPng = join(ROOT, '.og', 'gen', `${slug}-banner.png`);
+try {
+  execSync(`"${chrome}" --headless --disable-gpu --force-device-scale-factor=1 --window-size=1600,900 --virtual-time-budget=3000 --screenshot="${outPng}" "file:///${htmlPath.replace(/\\/g, '/')}"`, { stdio: 'pipe' });
+} catch (e) {
+  console.error('Chrome render failed:', e.message);
+  process.exit(1);
+}
+
+const publicDir = join(ROOT, 'public', 'banners');
+mkdirSync(publicDir, { recursive: true });
+const finalPng = join(publicDir, `${slug}.png`);
+execSync(`copy /Y "${outPng}" "${finalPng}"`, { stdio: 'pipe' });
+
+console.log(`✓ Banner generated: public/banners/${slug}.png`);
+console.log(`  category: ${category}`);

scripts/banner-gen/template.html

@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body { width: 1600px; height: 900px; overflow: hidden; }
+
+  body {
+    font-family: "JetBrains Mono", "Fira Code", "SF Mono", Menlo, Consolas, monospace;
+    background: #0d1220;
+    position: relative;
+    padding: 48px 52px;
+  }
+
+  .glow {
+    position: absolute;
+    border-radius: 50%;
+    filter: blur(100px);
+  }
+  .glow.g1 { width: 500px; height: 500px; background: #295cff; opacity: 0.28; top: -180px; right: -120px; }
+  .glow.g2 { width: 400px; height: 400px; background: #0e94ff; opacity: 0.20; bottom: -150px; left: -120px; }
+
+  .topbar {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 26px;
+  }
+  .topbar .crumb {
+    display: flex; align-items: center; gap: 10px;
+    color: #6b7c99; font-size: 18px;
+  }
+  .topbar .crumb .pipe { color: #2a3550; }
+  .topbar .crumb .active { color: #e6edf3; }
+  .topbar .logo { width: 40px; height: 40px; background: #fff; border-radius: 8px; padding: 3px; }
+  .topbar .logo img { width: 100%; height: 100%; object-fit: contain; }
+
+  .terminal {
+    position: relative;
+    z-index: 2;
+    height: 690px;
+    background: rgba(22, 30, 46, 0.95);
+    border: 1px solid #2a3550;
+    border-radius: 14px;
+    box-shadow: 0 24px 70px rgba(0,0,0,0.45);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  .terminal .titlebar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 16px 22px;
+    background: #131a2a;
+    border-bottom: 1px solid #2a3550;
+  }
+  .terminal .dot { width: 13px; height: 13px; border-radius: 50%; }
+  .terminal .dot.r { background: #ff5c5c; }
+  .terminal .dot.y { background: #f5a524; }
+  .terminal .dot.g { background: #3fb950; }
+  .terminal .title-text { margin-left: 12px; color: #6b7c99; font-size: 16px; }
+
+  .terminal .body { padding: 30px 36px; font-size: 22px; line-height: 1.8; flex: 1; }
+  .terminal .line { display: flex; gap: 12px; margin-bottom: 8px; }
+  .terminal .prompt { color: #7599ff; flex-shrink: 0; }
+  .terminal .cmd { color: #e6edf3; }
+  .terminal .dim { color: #6b7c99; }
+  .terminal .err {
+    color: #ff5c5c;
+    background: rgba(255,92,92,0.10);
+    padding: 2px 10px;
+    border-radius: 5px;
+  }
+  .terminal .ok { color: #3fb950; }
+  .terminal .hl { color: #f5a524; }
+
+  .flow {
+    position: relative;
+    z-index: 2;
+    margin-top: 26px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+  .flow .step {
+    flex: 1;
+    text-align: center;
+    padding: 14px 8px;
+    background: #161e2e;
+    border: 1px solid #2a3550;
+    border-radius: 10px;
+    color: #e6edf3;
+    font-size: 17px;
+  }
+  .flow .step .num { display: block; color: #7599ff; font-size: 13px; margin-bottom: 4px; }
+  .flow .step.err-step { border-color: #ff5c5c; }
+  .flow .step.err-step .num { color: #ff5c5c; }
+  .flow .arrow { color: #2a3550; font-size: 22px; flex-shrink: 0; }
+</style>
+</head>
+<body>
+  <div class="glow g1"></div>
+  <div class="glow g2"></div>
+
+  <div class="topbar">
+    <div class="crumb">
+      <span>blog.hoelee.com</span><span class="pipe">/</span>
+      <span>{{CATEGORY}}</span><span class="pipe">/</span>
+      <span class="active">{{SLUG}}</span>
+    </div>
+    <div class="logo"><img src="{{LOGO_PATH}}" alt=""></div>
+  </div>
+
+  <div class="terminal">
+    <div class="titlebar">
+      <span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
+      <span class="title-text">{{TITLEBAR}}</span>
+    </div>
+    <div class="body">
+      {{TERMINAL_HTML}}
+    </div>
+  </div>
+
+  <div class="flow">
+    {{FLOW_HTML}}
+  </div>
+</body>
+</html>