feat(website): add release OG image generator

Programmatic generator for per-release Open Graph images. Runs locally via
`pnpm gen:og --version <ver>` and writes a 2400x1260 (2x retina) PNG into
the design-resources repo.

Stack: satori (JSX/HTML -> SVG) + @resvg/resvg-js (SVG -> PNG) +
satori-html (template) + sharp 8-bit palette re-encoding (~500 KB ->
~140 KB with no visible loss on this design — TinyPNG-style libimagequant
quantization). Logo SVG is fetched from the assets.rspack.rs CDN at
generation time so logo updates flow through without re-committing the
template. Space Grotesk (SIL OFL) is committed under assets/fonts/.

Background is a brick pattern of pass / running / fail / skip status icons
(lucide circle-check / circle-x / loader / circle-dashed, color-matched to
@rstest/browser-ui's status palette). Grounds the og frame in the
test-runner identity rather than a generic gradient.

Layout: 7x12 grid with corner icons pinned to canvas corners (1/4 visible),
first/last row/col half-cropped at edges, odd rows offset by half a column
for brick stagger. Per-icon stroke-opacity jitter (0.06-0.26) gives a
hand-stippled feel; only the loader gets random rotation.

A radialGradient vignette is baked into the bg SVG so the v{version} hero
text reads cleanly through the wallpaper. The bg SVG is rasterized via
Resvg and embedded as <img src="data:..."> in the satori tree — satori's
`background: url(data:...)` shorthand parser doesn't accept SVG data URIs.

Author: fi3ework

pnpm-lock.yaml

@@ -13,6 +13,7 @@ allowBuilds:
   core-js-pure: false
   keytar: false
   lefthook: true
+  sharp: true
   svelte-preprocess: false
 
 autoInstallPeers: false

pnpm-workspace.yaml

@@ -4,6 +4,7 @@ antd
 apng
 apos
 applescript
+artboard
 Asus
 atrules
 autodocs
@@ -54,6 +55,7 @@ fnames
 frontends
 fullhash
 gzipped
+Grotesk
 icss
 idents
 iife
@@ -116,7 +118,9 @@ publint
 pxtorem
 quasis
 quxx
+rasterizes
 rebranded
+resvg
 rolldown
 rootdir
 rsbuild

scripts/dictionary.txt

@@ -14,8 +14,36 @@ This is the documentation website for Rstest, built with [Rspress](https://rspre
 pnpm dev      # Start dev server
 pnpm build    # Build for production
 pnpm preview  # Preview production build
+pnpm gen:og   # Generate a release Open Graph image (see below)
 ```
 
+## Open Graph image generation
+
+Per-release og images live in [rstackjs/rstack-design-resources](https://github.com/rstackjs/rstack-design-resources) and are served by the `assets.rspack.rs` CDN. The template lives **in this repo** to keep design-resources as a passive PNG store.
+
+- `scripts/og-image/cli.mts` — entry, parses `--version`/`--description`/`--out`
+- `scripts/og-image/render.mts` — fetches the Rstest logo SVG → rasterizes → composes with [satori](https://github.com/vercel/satori) → renders with [@resvg/resvg-js](https://github.com/yisibl/resvg-js) at 2x zoom for retina
+- `scripts/og-image/template.mts` — [satori-html](https://github.com/natemoo-re/satori-html) template, modeled after the `Rsbuild og image 1.0` artboard in design-resources
+
+### Release workflow
+
+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`).
+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 per-blog-post URL becomes available at `assets.rspack.rs/rstest/assets/rstest-og-image-v0-5.png`. The `head` function hook in `rspress.config.ts` routes each blog `routePath` to its matching URL.
+
+### Do
+
+- Use Space Grotesk (committed under `scripts/og-image/assets/fonts/` with SIL OFL license)
+- Render at 2x via `Resvg({ fitTo: { mode: 'zoom', value: 2 } })` so the PNG stays crisp on retina displays
+- Re-encode the resvg output as an 8-bit palette PNG via `sharp({ palette: true, quality: 90, ... })` — drops the file from ~500 KB to ~140 KB with no visible loss
+- Fetch the logo from the canonical CDN URL at generation time, not from a committed copy
+
+### Don't
+
+- Don't depend on packages like `geist` that pull in framework peer deps (`next>=13.2`); commit raw `.ttf` files directly instead
+- Don't write generated PNGs into this repo; they belong in design-resources
+- Don't bake the logo into a static asset; always fetch the SVG so logo updates propagate automatically
+
 ## Writing style guidelines
 
 When writing or editing documentation, follow these principles:

website/AGENTS.md

@@ -15,3 +15,7 @@ The same as Rspack: [Writing style guide](https://github.com/web-infra-dev/rspac
 For images you use in the document, it's better to upload them to the [rstackjs/rstack-design-resources](https://github.com/rstackjs/rstack-design-resources) repository, so the size of the current repository doesn't get too big.
 
 After you upload the images there, they will be automatically deployed under the <https://assets.rspack.rs/>.
+
+## Open Graph images
+
+`scripts/og-image/` generates per-release Open Graph images used by the `og:image` and `twitter:image` meta tags on each release blog post. See [AGENTS.md](./AGENTS.md#open-graph-image-generation) for the template architecture and release workflow.

website/README.md

@@ -9,9 +9,11 @@
     "build": "rspress build",
     "build:agent-install": "node scripts/buildAgentInstall.mjs",
     "dev": "rspress dev",
+    "gen:og": "node --experimental-strip-types scripts/og-image/cli.mts",
     "preview": "rspress preview"
   },
   "devDependencies": {
+    "@resvg/resvg-js": "^2.6.2",
     "@rsbuild/plugin-sass": "^1.5.2",
     "@rspress/core": "2.0.11",
     "@rspress/plugin-algolia": "2.0.11",
@@ -26,6 +28,9 @@
     "rsbuild-plugin-open-graph": "^1.1.2",
     "rspress-plugin-font-open-sans": "^1.0.3",
     "rspress-plugin-sitemap": "^1.2.1",
+    "satori": "^0.26.0",
+    "satori-html": "^0.3.2",
+    "sharp": "^0.34.5",
     "typescript": "^6.0.3"
   }
 }

website/package.json

@@ -0,0 +1,93 @@
+Copyright 2020 The Space Grotesk Project Authors (https://github.com/floriankarsten/space-grotesk)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

website/scripts/og-image/assets/fonts/LICENSE.txt

@@ -0,0 +1,43 @@
+import { mkdir, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import { parseArgs } from 'node:util';
+import { renderOgImage } from './render.mts';
+
+const { values } = parseArgs({
+  options: {
+    version: { type: 'string', short: 'v' },
+    description: { type: 'string' },
+    out: { type: 'string', short: 'o' },
+    help: { type: 'boolean', short: 'h' },
+  },
+});
+
+if (values.help || !values.version) {
+  console.log(`Usage: pnpm gen:og --version <ver> [options]
+
+Options:
+  --version, -v       Release version, e.g. 0.5 (required)
+  --description       Optional tagline rendered below the version
+  --out, -o           Output PNG path
+                      (default: rstest-og-image-v<ver>.png in cwd)
+  --help, -h          Show this help
+
+After generating, commit the PNG to rstackjs/rstack-design-resources
+under rstest/assets/ so the assets.rspack.rs CDN can serve it.`);
+  process.exit(values.help ? 0 : 1);
+}
+
+const versionSlug = values.version.replace(/\./g, '-');
+const outPath = path.resolve(
+  values.out ?? `rstest-og-image-v${versionSlug}.png`,
+);
+
+const png = await renderOgImage({
+  version: values.version,
+  description: values.description,
+});
+
+await mkdir(path.dirname(outPath), { recursive: true });
+await writeFile(outPath, png);
+
+console.log(`Wrote ${outPath} (${(png.length / 1024).toFixed(1)} KB)`);