docs: add release OG image generator#1258
Conversation
fi3ework
changed the title
Rsdoctor Bundle Diff AnalysisFound 12 projects in monorepo, 0 projects with changes. 📊 Quick Summary
Generated by Rsdoctor GitHub Action |
Deploying rstest with
|
| Latest commit: |
8f97c9d
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://da989181.rstest.pages.dev |
| Branch Preview URL: | https://feat-og-image-generator.rstest.pages.dev |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 84c20799b8
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
fi3ework
force-pushed
the
feat/og-image-generator
branch
from
8c7b7d0 to
a17b810
Compare
fi3ework
changed the title
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: a17b810aeb
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
fi3ework
force-pushed
the
feat/og-image-generator
branch
from
a17b810 to
8abdbe7
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 86bc34ffc3
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
fi3ework
force-pushed
the
feat/og-image-generator
branch
from
d4f6185 to
7c00332
Compare
fi3ework
changed the title
fi3ework
changed the title
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 7c0033287e
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| "build": "rspress build", | ||
| "build:agent-install": "node scripts/buildAgentInstall.mjs", | ||
| "dev": "rspress dev", | ||
| "gen:og": "node --experimental-strip-types scripts/og-image/cli.mts", |
There was a problem hiding this comment.
On Node 20.19.x, which this repo still allows via the root engines (^20.19.0 || >=22.12.0), this script exits before loading because --experimental-strip-types was only added in Node 22.6.0 (Node CLI docs list "Added in: v22.6.0", and the Node 20.19.0 CLI options do not include it). Release authors using a supported Node 20 LTS environment therefore cannot run pnpm gen:og; please either make the script executable under Node 20 or narrow the required engine for this workflow.
Useful? React with 👍 / 👎.
|
|
||
| 1. Run `pnpm gen:og --version <ver> --description "<tagline>"` from `website/`. Use `--out` to write directly into a local clone of the design-resources repo at `rstest/assets/rstest-og-image-v{version-with-hyphens}.png` (e.g. `v0-5.png`). The background gradient is randomized (color scheme, blob count, placement) on every run and there is no seed flag — re-run until you get a composition you like before committing. | ||
| 2. Commit the PNG in the design-resources repo and open a PR — that repo is the only place release PNGs are stored. | ||
| 3. After CDN deploy, the PNG is reachable at `assets.rspack.rs/rstest/assets/rstest-og-image-v0-5.png`. Wiring it up per blog `routePath` in `rspress.config.ts` is a separate follow-up — the site currently sets a single static `og:image` via `pluginOpenGraph`. |
There was a problem hiding this comment.
Fresh evidence: the current website/rspress.config.ts:84-90 already maps release blog routes to https://assets.rspack.rs/rstest/rstest-og-image-v*.png, so this documented /rstest/assets/... CDN target (and the "separate follow-up" wording) makes release authors upload generated images to a path the live og:image hook never requests. For any release following the workflow, the blog keeps pointing at /rstest/rstest-og-image-vX-Y.png while the new PNG sits under /rstest/assets/; align the storage path or the config mapping.
Useful? React with 👍 / 👎.
fi3ework
force-pushed
the
feat/og-image-generator
branch
from
7c00332 to
8f97c9d
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8f97c9d036
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| const end = `hsla(${h}, ${s}%, ${l}%, 0)`; | ||
| return `radial-gradient(ellipse ${w}% ${h2}% at ${x}% ${y}%, ${start}, ${end} ${endStop}%)`; | ||
| }); | ||
| return `${blobs.join(', ')}, #ffffff`; |
There was a problem hiding this comment.
When pnpm gen:og renders any card, this returns at least two comma-separated background layers (radial-gradient(...), #ffffff, and often more) and template.mts injects them via the background shorthand. Satori’s CSS support is limited to a single backgroundImage/backgroundColor layer, so these stacked blobs are not a supported input and the generated PNGs can lose or drop the randomized 1–3 blob background instead of matching the intended design. Please compose the blobs as separate positioned elements/SVG layers or feed Satori supported single-layer styles.
Useful? React with 👍 / 👎.
2 participants
Summary
Background
Each Rstest release needs an Open Graph image for its blog post
og:image/twitter:imagetags. Until now there was no template — only a single site-levelrstest-og-image.pnglived inrstack-design-resources, and per-release covers had to be hand-composed in Sketch.Implementation
website/scripts/og-image/(cli.mts + render.mts + template.mts) plus apnpm gen:og --version <ver>script.sharp/libvips.assets.rspack.rsCDN at generation time so logo updates flow through without re-committing the template.assets/fonts/(thegeistnpm package pulls innext>=13.2so its raw.ttfwas avoided).website/AGENTS.md+website/README.md: generate locally, compress externally, commit the PNG torstackjs/rstack-design-resources, CDN serves it.Out of scope
Wiring
rspress.config.tsto route each blogroutePath→ per-version PNG is a separate follow-up. The site still uses the single staticog:imageviapluginOpenGraph; only the generator + assets are added here.User Impact
None — internal tooling for release authors. Generated PNGs are committed to
rstack-design-resources, not this repo.Checklist
pnpm gen:og --version 0.5 --description …).website/AGENTS.md+website/README.mdupdated.