<📈⚙> generate an image of the homepage / posts for opengraph banners #28

New issue

Closed

opened 2026-05-23 20:55:42 +00:00 by coilysiren · 1 comment

coilysiren commented

2026-05-23 20:55:42 +00:00

Owner

Originally filed by @coilysiren on 2023-10-09T06:35:00Z - https://github.com/coilysiren/website/issues/1216

Generate OpenGraph banner images so link previews on social (Mastodon, Bluesky, LinkedIn) look intentional instead of whatever Gatsby picks by default.

Approach: SVG template + sharp (no AI art)

Design one SVG template in `src/assets/og-template.svg` with placeholder text slots: post title, date, author handle. Readable sans-serif, high contrast, matches site visual language.
In `gatsby-node.ts`, for each post page created, render the template with the post's front-matter title/date substituted in, rasterize to PNG via `sharp` (1200x630, the standard OG size), write to `public/og/.png`.
In `src/components/site-metadata.tsx` (or wherever `og:image` meta is set), point `og:image` at the per-post PNG, with a homepage fallback (`public/og/index.png`).

Why SVG to PNG

No runtime image-gen dep, no API calls, no cost.
Fast: sharp handles ~100 posts in seconds at build time.
Typography stays crisp because we rasterize once at the exact target resolution.

Verification

`npm run build` produces `public/og/*.png` for every post and the homepage.
`curl -I https://coilysiren.me/posts/` and check `` points at the right URL.
Paste the post URL into opengraph.xyz and confirm the preview renders.
Test one post in Mastodon and Bluesky compose boxes; the banner should load.

Out of scope

No generative-AI image models. Template-based rendering only.

_Originally filed by @coilysiren on 2023-10-09T06:35:00Z - [https://github.com/coilysiren/website/issues/1216](https://github.com/coilysiren/website/issues/1216)_ Generate OpenGraph banner images so link previews on social (Mastodon, Bluesky, LinkedIn) look intentional instead of whatever Gatsby picks by default. ## Approach: SVG template + sharp (no AI art) 1. Design one SVG template in \`src/assets/og-template.svg\` with placeholder text slots: post title, date, author handle. Readable sans-serif, high contrast, matches site visual language. 2. In \`gatsby-node.ts\`, for each post page created, render the template with the post's front-matter title/date substituted in, rasterize to PNG via \`sharp\` (1200x630, the standard OG size), write to \`public/og/<slug>.png\`. 3. In \`src/components/site-metadata.tsx\` (or wherever \`og:image\` meta is set), point \`og:image\` at the per-post PNG, with a homepage fallback (\`public/og/index.png\`). ## Why SVG to PNG - No runtime image-gen dep, no API calls, no cost. - Fast: sharp handles ~100 posts in seconds at build time. - Typography stays crisp because we rasterize once at the exact target resolution. ## Verification - \`npm run build\` produces \`public/og/*.png\` for every post and the homepage. - \`curl -I https://coilysiren.me/posts/<slug>\` and check \`<meta property="og:image">\` points at the right URL. - Paste the post URL into opengraph.xyz and confirm the preview renders. - Test one post in Mastodon and Bluesky compose boxes; the banner should load. ## Out of scope - No generative-AI image models. Template-based rendering only.

coilysiren commented

2026-05-30 05:42:56 +00:00

Author

Owner

Iceboxed in the 2026-05-29 backlog burn-down: Nice-to-have OpenGraph banners, no dependency. Reopen anytime if it becomes real.

coilysiren

2026-05-30 05:42:57 +00:00

closed this issue
added the
icebox
label

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

coilysiren/website#28

No description provided.

Rows
Columns