Gallery Images
Gallery images show the current source build. Historical release archives retain their original templates.
Capture Settings
Use the same settings for every theme so images remain comparable:
| Setting | Value |
|---|---|
| Template | Register Notify |
| Language | en-US |
| View | Modern |
| Viewport | Desktop |
| Information panel | Collapsed |
| Output | PNG, 600px wide recommended |
Save images as <theme-name>.png in this directory, matching the directory name under themes/. Each file must be at most 50 KiB; 10–20 KiB is preferred. Optimize larger PNGs with tools such as pngquant or optipng.
Automated Capture
Generate preview data from the repository root:
cd tools
go run . preview all
cd qa
npm install
npx playwright install chromium
npm test -- --update-gallery
To use installed Chrome or Edge, set BROWSER_EXECUTABLE_PATH instead of installing Chromium. The script checks language loading, controls and mobile overflow, saves captures in build/screenshots/, then copies them here after enforcing the size limit. Review the resulting images before committing.
Run npm test without --update-gallery to perform the checks and capture images without changing the committed gallery.
Manual Capture
- Run
go run . devfromtools/and open http://127.0.0.1:3456. Alternatively, rungo run . preview alland open preview/index.html directly. - Select a theme and apply the capture settings above.
- Capture the rendered email, excluding the preview toolbar and information panel.
- Save the PNG as
<theme-name>.png, check its size and repeat for the remaining themes.
When adding a theme, update its gallery entry in both the English README and Simplified Chinese README.