Mercurial
diff mrjunejune/PWA_SETUP.md @ 241:9c2eec61a152
[assets] Generate site images as WebP with Bazel
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Mon, 03 Aug 2026 11:26:30 -0700 |
| parents | 3b47e82ac57e |
| children | e02e2036ef84 |
line wrap: on
line diff
--- a/mrjunejune/PWA_SETUP.md Mon Aug 03 10:48:59 2026 -0700 +++ b/mrjunejune/PWA_SETUP.md Mon Aug 03 11:26:30 2026 -0700 @@ -10,50 +10,35 @@ 4. **offline.html** - Offline fallback page 5. **Updated base_head.html** - Links to manifest and PWA script -## Missing: App Icons +## App Icons and WebP Assets -You need to create PNG icons from your SVG. Run these commands: - -### Using ImageMagick (recommended): +All shipped raster images are generated as WebP by Bazel. Source PNGs live +under `mrjunejune/assets/png/` and are never copied into the release bundle. ```bash -cd src/public - -# 192x192 icon -convert epi_all_colors.svg -resize 192x192 -background none icon-192.png - -# 512x512 icon -convert epi_all_colors.svg -resize 512x512 -background none icon-512.png - -# Maskable icon (512x512 with safe zone) -convert epi_all_colors.svg -resize 409x409 -background none -gravity center -extent 512x512 icon-maskable-512.png +bazel build //mrjunejune:generated_webp_assets ``` -### Or using Inkscape: +The complete site bundle also runs the conversion pipeline: ```bash -inkscape epi_all_colors.svg --export-type=png --export-filename=icon-192.png -w 192 -h 192 -inkscape epi_all_colors.svg --export-type=png --export-filename=icon-512.png -w 512 -h 512 -inkscape epi_all_colors.svg --export-type=png --export-filename=icon-maskable-512.png -w 512 -h 512 +bazel build //mrjunejune:mrjunejune_server_bundle ``` -### Or use an online tool: -- https://realfavicongenerator.net/ -- https://www.pwabuilder.com/ - ## Optional: Screenshots (for better app install experience) Create screenshots of your site: ```bash # Mobile screenshot (540x720) -screenshot-mobile.png +screenshot-mobile.webp # Desktop screenshot (1280x720) -screenshot-desktop.png +screenshot-desktop.webp ``` -You can use browser DevTools to capture these, or remove the `screenshots` section from manifest.json if you don't want them. +You can use browser DevTools to capture these. Add their PNG sources to the +WebP asset list before referencing the generated `.webp` files in the manifest. ## Testing Your PWA