Generate dynamic OG image via Satori (per-seed if possible) #4

New issue

Closed

opened 2026-05-23 20:54:21 +00:00 by coilysiren · 1 comment

coilysiren commented

2026-05-23 20:54:21 +00:00

Owner

Originally filed by @coilysiren on 2026-05-02T23:20:39Z - https://github.com/coilysiren/galaxy-gen/issues/30

🤖 Filed by Claude Code on Kai's behalf.

galaxy-gen.coilysiren.me currently has no `og:image`. Add one via Satori (JSX → SVG) + resvg-js (SVG → PNG), wired into the existing TS/JS build pipeline.

Two options, ordered easiest first:

Static OG image at build time. Add a small `scripts/render-og.ts` that emits one `og.png` (1200x630) showing the galaxy-gen logo / title / one-line description. Reference from the page `<head>`.
Per-seed OG image (cooler, more work). When a user shares `?seed=abc123`, that link's preview shows that specific galaxy. Two ways:
- Pre-render at build time for a curated set of seeds.
- Add a tiny serverless/edge function (Cloudflare Worker, Netlify Function) at `/og?seed=...` that runs Satori on the fly and returns a PNG. The page sets `og:image` to that URL with the current seed. Cache aggressively.

For option 2, the actual galaxy rendering happens in WASM in the browser, so the OG version would be a stylized representation (seed text + procedural pattern from the seed) rather than the live D3 view, unless you reuse the WASM in Node.

Verify: paste a galaxy-gen URL into Bluesky and confirm the preview renders.

🤖 Filed by Claude Code on Kai's behalf.

_Originally filed by @coilysiren on 2026-05-02T23:20:39Z - [https://github.com/coilysiren/galaxy-gen/issues/30](https://github.com/coilysiren/galaxy-gen/issues/30)_ > 🤖 Filed by Claude Code on Kai's behalf. galaxy-gen.coilysiren.me currently has no \`og:image\`. Add one via [Satori](https://github.com/vercel/satori) (JSX → SVG) + [resvg-js](https://github.com/yisibl/resvg-js) (SVG → PNG), wired into the existing TS/JS build pipeline. **Two options, ordered easiest first:** 1. **Static OG image at build time.** Add a small \`scripts/render-og.ts\` that emits one \`og.png\` (1200x630) showing the galaxy-gen logo / title / one-line description. Reference from the page \`<head>\`. 2. **Per-seed OG image** (cooler, more work). When a user shares \`?seed=abc123\`, that link's preview shows that specific galaxy. Two ways: - Pre-render at build time for a curated set of seeds. - Add a tiny serverless/edge function (Cloudflare Worker, Netlify Function) at \`/og?seed=...\` that runs Satori on the fly and returns a PNG. The page sets \`og:image\` to that URL with the current seed. Cache aggressively. For option 2, the actual galaxy rendering happens in WASM in the browser, so the OG version would be a stylized representation (seed text + procedural pattern from the seed) rather than the live D3 view, unless you reuse the WASM in Node. **Verify:** paste a galaxy-gen URL into Bluesky and confirm the preview renders. > 🤖 Filed by Claude Code on Kai's behalf.

coilysiren commented

2026-05-30 05:43:16 +00:00

Author

Owner

Iceboxed in the 2026-05-29 backlog burn-down: Speculative OG-image nice-to-have via Satori. Reopen anytime if it becomes real.

coilysiren

2026-05-30 05:43:16 +00:00