Files
hoelee-blog/scripts/og-gen
hoelee 378d55c3c8
Deploy / build (push) Successful in 22s
post: two reader/gateway posts — the upstream rewrite, and the front-door pattern (EN+ZH) + og/banner images
1) the-upstream-was-deleted-then-came-back-rewritten (devops, pubDate 2026-10-06)
   docker pull hectorqin/reader -> 404; the repo was re-initialised 2026-09-16 and now
   carries 233 commits, a TypeScript/Node rewrite, port 5888, SQLite /data, config moved
   into the admin UI, and an image on cnb.cool with no tags or releases. Covers telling
   dead from rewriting, the migration boundary, and keeping the front door outside the
   app image. Facts re-verified live 2026-10-06.

2) putting-a-front-door-on-an-app-you-cant-modify (devops, pubDate 2025-06-24 backdated
   into the empty 2025-06 window, updatedDate 2026-10-06 so lastmod stays honest)
   The reader-gateway pattern: a second nginx container owning the public port, the
   request-time resolver, why a proxy body rewrite cannot touch a client-rendered SPA,
   the gate-bounce injection with its pass token, the app's own CSS hook for branding,
   and the silent-failure check to run after every app upgrade.

Both: EN + ZH twins, TERMINALS/BANNERS entries appended via append_generator_entries.py
(additive, deletions 0, node --check OK), og/banner generated and measured PASS
(og rows=1 overflow=0 missingHash=0; banner 8 rows, delta 2, overflow 0).
2026-10-06 17:19:46 +08:00
..

og-gen — per-post OG image generator

Generates a branded 1200×630 social-share image for a blog post, matching the site's cobalt-blue #295cff branding, the logo-square.png mark, and the "terminal / debugging" visual style.

Usage

node scripts/og-gen/generate.mjs <post-slug>

Reads frontmatter (title, category, tags) from src/content/posts/<slug>.md, fills template.html, renders with headless Chrome, and writes public/og/<slug>.png.

The post's frontmatter needs ogImage: /og/<slug>.png so the blog serves it (layout already renders og:image + width/height; PostList shows it as a card thumbnail).

Customizing the terminal box

Each post shows a "terminal" panel (the red error / green fix lines). Add an entry keyed by slug in TERMINALS inside generate.mjs, using these tokens:

<div class="line"><span class="prompt">$</span><span class="cmd">command</span></div>
<div class="line"><span class="prompt">&nbsp;</span><span class="err">error line</span></div>
<div class="line"><span class="prompt">$</span><span class="cmd">fix</span><span class="fix">→ done ✓</span></div>

No entry → a generic default terminal.

Requirements

  • Google Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe (override with CHROME_PATH env var).
  • Node 20+.

Notes

  • PNG (not JPG) is intentional: for flat UI/terminal art, PNG is smaller and sharper than JPG (see commit history).
  • The logo-square.png referenced lives at public/logo-square.png.