Files
hoelee-blog/scripts/banner-gen
hoelee daca86dc43
Deploy / build (push) Successful in 22s
Add post: Replacing RDPGuard With IPBan (EN + ZH, og+banner)
Case study of migrating from paid RDPGuard 7.8.7 to open-source IPBan
4.1.0, covering the three undocumented traps: the uninstaller that would
have silently unbanned 12 active attackers, the non-existent
--install-service flag in v4.1.0, and ExpireTime vs BanTime.

Also fixes an og-gen defect: the tag chip hardcoded KIND='DevOps', so
every non-devops post carried a wrong label (e.g. "case-studies · DevOps"
on the STT card). KIND now derives from the post category, and all 29
existing OG images are regenerated with correct badges.
2026-09-19 19:50:27 +08:00
..

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

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 tcmd · 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.