feat(website): add release OG image generator

Author: fi3ework

pnpm-lock.yaml

@@ -4,6 +4,7 @@ antd
 apng
 apos
 applescript
+artboard
 Asus
 atrules
 autodocs
@@ -63,6 +64,7 @@ fnames
 frontends
 fullhash
 gzipped
+Grotesk
 icss
 idents
 iife
@@ -105,6 +107,7 @@ onclosetag
 onopentag
 ontext
 opencode
+Optim
 osascript
 outbase
 outro
@@ -117,6 +120,7 @@ PIPEWRAP
 pjpeg
 pluggable
 pmmmwh
+pngquant
 pnpx
 postcssrc
 preact
@@ -130,7 +134,9 @@ pxtorem
 quasis
 quxx
 RANDOMBYTESREQUEST
+rasterizes
 rebranded
+resvg
 rolldown
 rootdir
 rsbuild
@@ -151,6 +157,7 @@ SIGNREQUEST
 sirv
 sokra
 speedscope
+Squoosh
 srcset
 stacktracey
 styl

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`). 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`.
+
+### 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
+- Before committing the PNG to design-resources, run it through [TinyPNG](https://tinypng.com) (or Squoosh / ImageOptim / `pngquant`) — the raw resvg output is ~300 KB and palette quantization typically drops it to ~1/4 the size 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": "^2.0.0",
     "@rspress/core": "2.0.15",
     "@rspress/plugin-algolia": "2.0.15",
@@ -26,6 +28,8 @@
     "rsbuild-plugin-open-graph": "^1.1.3",
     "rspress-plugin-font-open-sans": "^1.0.4",
     "rspress-plugin-sitemap": "^1.2.1",
+    "satori": "^0.26.0",
+    "satori-html": "^0.3.2",
     "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,47 @@
+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)`);
+console.log(
+  'Tip: compress the PNG before committing — typically drops the file to ~1/4 the size with no visible loss.',
+);
+console.log('  https://tinypng.com (or Squoosh / ImageOptim)');