Asset Pipeline

What it does

packages/internal/asset-pipeline generates every production asset the website ships: brand logos vectorized to SVG, raster images optimized to WebP, consistent favicons for each product app, and standardized screenshots of the live tools. It orchestrates @shaw/vector-processing, @shaw/image-processing, and Playwright rather than reimplementing anything.

SOURCE ASSETS (apps/website/assets/source/**)
    ↓
ASSET PIPELINE
    ├── @shaw/vector-processing  → logos become production SVG
    ├── @shaw/image-processing   → raster images become optimized WebP
    └── Playwright               → standardized live-tool screenshots
    ↓
GENERATED ASSETS (apps/website/public/generated/** + app favicons)

Commands

pnpm assets:build          # logos + images + favicons (incremental)
pnpm assets:logos          # vectorize brand logos → SVG
pnpm assets:images         # optimize raster images (Studio's preset)
pnpm assets:favicons       # regenerate favicons for the product apps
pnpm assets:screenshots    # capture all live-tool screenshots
pnpm assets:product vector # capture one tool (vector | studio | audit)
pnpm assets:verify         # check outputs and website references exist

Source vs. generated

• apps/website/assets/source/** holds the editable originals.
• apps/website/public/generated/** (and each app's favicon files) is reproducible output — never hand-edited.
• apps/website/assets/manifest.json records every output with dimensions, format, byte size, and source/config hashes; unchanged inputs are skipped on rebuild.

Screenshots

Screenshots are captured from the live production tools in real working states — Shaw Image Vector tracing the Shaw logo, Shaw Image Studio processing a real batch with visible savings, Shaw SEO Audit showing a completed report with Lighthouse scores. Geometry is standardized (desktop 1600×1170, mobile 390×844 at 2×) so every tool card on the website aligns, and captures are optimized through the image engine before landing in the generated tree.