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