feat(scripts): Draft blog graphic artboards with Gemini

[jeromehardaway]

Summary

Blog graphics are HTML artboards rendered headless by generate:blog-graphic, which made copy edits deterministic — but the first artboard of a set still had to be written by hand. This adds a --draft flag that has Gemini write that first file.

The point is that the model's output is a text file, not an image. It stays editable, diffable, and re-renderable, which is the reason these graphics moved off image generation in the first place.

What changed

• scripts/generate-blog-graphic.ts — --draft <name> "<brief>" sends Gemini the _brand.css tokens plus one existing artboard from the same folder as a house-style sample, and writes the returned HTML to <slug>/<name>.html. It stops there; the render and upload path is untouched.
• Refuses to overwrite an existing artboard, so hand edits are never clobbered by a redraft.
• main() is now behind require.main === module, matching generate-blog-image.ts, so the module can be imported by a test.
• __tests__/scripts/generate-blog-graphic.test.ts — covers stripFences, since the model routinely wraps its output in markdown fences and a fenced code sample inside the markup must survive.

Usage:

npm run generate:blog-graphic <slug> -- --draft <name> "<what the graphic should say>"
npm run generate:blog-graphic <slug> -- --dry     # review the PNG
npm run generate:blog-graphic <slug>              # render and upload

Test plan

• npm run typecheck
• npm run lint (22 pre-existing errors on master, none in the touched files)
• npm test — 472 passed, including 4 new
• Live end-to-end draft against 10-day-sprint, rendered with --dry: output used only var(--*) tokens with no raw hex, GothamPro headings, Gilroy body, correct .artboard root, and legible type throughout. Smoke-test artboard deleted afterward.

Migration / config notes

Uses GEMINI_API_KEY, already required by generate:blog-image and already documented in .env.example. No new environment variables.

Follow-up

No retry-on-bad-output and no automated validation of the drafted HTML — the --dry render is the review step. Worth adding only if drafting ever becomes unattended.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
vets-who-code-app	Ready	Preview	Aug 26, 2026 4:29am