Improve the image optimization pipeline with better compression and
smarter variant generation:
- Change to_lossless_webp → to_optimized_webp (lossy, quality 90)
- Auto-resize uploads larger than 2000px to save storage
- Skip pre-generating JPEG variants (~50% disk savings)
- Add on-demand JPEG generation for legacy browsers (<5% of users)
- Add /images/:id/variant/:width route for dynamic serving
- Add VariantCache to supervision tree for startup validation
- Add image_cache to static paths for disk-based serving
The pipeline now stores smaller WebP sources and generates AVIF/WebP
variants upfront, with JPEG generated only when legacy browsers request it.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Move announcement_bar from ThemeLive.PreviewPages to a new shared
SimpleshopThemeWeb.ShopComponents module. This establishes the pattern
for Phase 9 storefront integration where components need to work in
both the admin theme preview and public storefront pages.
Changes:
- Create lib/simpleshop_theme_web/components/shop_components.ex
- Add optional message attribute (defaults to "Free delivery over £40")
- Import ShopComponents in html_helpers for global availability
- Import ShopComponents in PreviewPages for embedded template access
- Update all 7 preview templates to use short-form <.announcement_bar>
- Remove original announcement_bar/1 from PreviewPages (now unused)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add comprehensive layout and styling controls including header layout options (standard, centered, left), content width settings (contained, wide, full), and card shadow levels. Update all theme presets with these new settings. Replace placeholder images with real Unsplash product and category images for more realistic previews. Add announcement bar and sticky header toggle options for enhanced header customization.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Add Google Fonts link to root layout for typography presets
- Add data-mood, data-typography, data-shape, data-density attributes to preview-frame
- Create theme-layer2-attributes.css with attribute-based CSS from demo
- Move theme CSS files from priv/static/css to assets/css for proper compilation
- Update CSS import order (primitives → layer2 → semantic)
- Add 'css' to static_paths to serve theme CSS files
This fixes the issue where theme controls updated the database but didn't
visually affect the preview. The demo's attribute-based CSS system is now
properly integrated with the Phoenix LiveView implementation.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
