Create separate CSS bundles to reduce shop page load times:
- app-shop.css (45KB/7.8KB gzip): Shop pages only, no daisyUI
- app.css (139KB): Admin pages with daisyUI and theme editor
Key changes:
- Add app-shop.css with targeted @source paths for shop files only
- Move .preview-frame rules from theme-layer2-attributes.css to app.css
- Delete fonts.css (fonts now generated inline by CSSGenerator)
- Add inline all-fonts generation in theme editor for typography switching
- Configure separate Tailwind profiles and watchers for both bundles
Shop pages now load 54% less CSS by excluding:
- daisyUI components (admin only)
- .preview-frame theme switching rules (editor only)
- Admin-specific Tailwind utilities
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add pattern to ignore Phoenix-digested versions of mockup files
(files with 32-char hash in filename from mix phx.digest).
Also changed thumb pattern to catch all extensions.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add path_resolver parameter to font generation functions so both
font preloads and CSS @font-face declarations use the same digested
paths in production. This prevents duplicate font downloads when
preloads were using digested paths but CSS used non-digested paths.
- Add path_resolver parameter to Fonts.generate_font_faces/2,
Fonts.preload_links/2, and Fonts.generate_all_font_faces/1
- Update CSSGenerator.generate/2 to accept path_resolver
- Update CSSCache.warm/0 to use Endpoint.static_path/1
- Move CSSCache to start after Endpoint in supervision tree
- Add 1-year cache headers for static assets
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add WCAG AA compliant accent color variants and update default accent
to meet 4.5:1 contrast ratio requirements.
- Add --t-accent-text (darker for text on light backgrounds)
- Add --t-accent-button (darker for button backgrounds with white text)
- Change default accent from #3b82f6 to #2563eb (better contrast)
- Update presets and tests for new default
These changes ensure accent colors meet accessibility standards while
maintaining visual consistency with the brand palette.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Update theme preview to use optimized responsive images with modern
format support (AVIF/WebP with JPEG fallback).
- Change mockup URLs from .jpg to base paths for srcset generation
- Add source_width to preview products for proper variant selection
- Add responsive_image component with <picture> element
- Update image_text_section to use optimized 800px WebP variant
This ensures the theme preview loads optimal image formats and sizes,
matching the production responsive image behavior.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Create a DRY Fonts module that centralizes all font definitions and
generates @font-face declarations dynamically based on typography preset.
- Add Fonts module with typography font mappings
- Generate @font-face CSS in CSSGenerator based on active preset
- Add font preload links in shop_root layout for performance
- Remove hardcoded font-face declarations from CSS
This improves font loading performance by only loading fonts for the
active typography preset and preloading critical fonts.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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>
Convert mockup source images from JPG to WebP format for 76% size
reduction (20MB → 4.7MB). Variants are now auto-generated on startup
via Oban, keeping the same DRY approach as database images.
Changes:
- Add OptimizeWorker.enqueue_mockup/1 for filesystem images
- Extend VariantCache to check mockup sources on startup
- Update MockupGenerator to save source as optimized WebP
- Update .gitignore to ignore generated variants
- Convert 55 source mockups from JPG to WebP
The mockup pipeline now uses the same code paths as database images:
- Optimizer.to_optimized_webp/1 for source conversion
- Optimizer.process_file/3 for variant generation
- OptimizeWorker for Oban background processing
- VariantCache for startup cache validation
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add Optimizer module with lossless WebP conversion
- Generate responsive variants at [400, 800, 1200] widths
- Only create sizes <= source dimensions (no upscaling)
- Support AVIF, WebP, and JPEG output formats
- Add disk cache at priv/static/image_cache/
- Add comprehensive test suite (12 tests)
- Add image fixtures helper for testing
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add source_width, source_height, variants_status fields to images table
- Remove thumbnail_data (now derived to disk cache)
- Add Oban tables via Oban.Migration.up(version: 12)
- Update Image schema changeset to include new fields
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add Oban ~> 2.18 with SQLite support (Oban.Engines.Lite) for durable
background job processing. Configure aggressive pruning (60s max_age)
to keep database lean, with a dedicated images queue.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Detailed implementation plan for automatic image optimization:
- Lossless WebP storage in SQLite (26-41% smaller than PNG)
- AVIF/WebP/JPEG responsive variants generated to disk cache
- Oban for durable async processing with SQLite
- 10-phase incremental implementation with checkpoints
- Comprehensive test coverage strategy
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The shop.html.heex and shop_root.html.heex were both full HTML documents.
When nested (root layout + live layout), this created invalid HTML with
duplicate <!DOCTYPE>, <html>, <head>, and <body> tags.
This caused:
- "Cannot bind multiple views to the same DOM element" console errors
- Failed Lighthouse audits
- Potential rendering issues
Fix:
- shop_root.html.heex: Now contains the full HTML document with theme
settings, CSS variables, and data attributes
- shop.html.heex: Now just passes through @inner_content
Results:
- Console errors: Gone
- Best Practices: 96 → 100
- Total Blocking Time: 140ms → 30ms
- HTML validation: Passes
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Self-hosted fonts:
- Download all 10 typefaces (35 font files, 728KB) from Google Fonts
- Create @font-face declarations in assets/css/fonts.css
- Remove Google Fonts external dependency from layouts
- Privacy improvement (no Google tracking)
- Performance improvement (no DNS lookup to fonts.googleapis.com)
- GDPR compliant (no third-party requests)
Admin access:
- Add /admin route that redirects to /admin/theme (requires auth)
- Remove Admin link from footer (too visible for visitors)
- Shop owners can bookmark or type /admin directly
Layout improvements:
- Create shop_root.html.heex as minimal root for shop pages
- Shop pages no longer show admin nav bar
Other:
- Update .gitignore to exclude digested static files
- Add PageSpeed 100% task to ROADMAP.md
- Fix test to check /users/settings instead of shop homepage
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add Mobile Bottom Navigation section to ROADMAP
- Update routes table in README (collections routes)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Replace cramped horizontal nav on mobile with a fixed bottom tab bar
for thumb-friendly navigation. The header nav is now hidden on mobile
(<768px) and the bottom nav provides Home, Shop, About, and Contact
links with icons.
- Add mobile_bottom_nav component with icon + label nav items
- Active page has accent-colored background highlight and larger icon
- Add shadow to lift nav visually off the page
- Update all page templates with bottom padding and bottom nav
- Remove CSS rule that was overriding Tailwind's hidden class
- Responsive header padding (tighter on mobile)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Remove marketing fluff "Be the first" - everyone on the list gets
emails at the same time. Just describe what they'll receive.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
More personal and authentic for a solo POD seller:
- "Get in touch" instead of "Contact Us"
- "Drop me a message" instead of "Drop us"
- "I'll get back to you" instead of "we'll"
- "Send a message" instead of "Send us a message"
- "How can I help?" instead of "How can we help?"
- "I'll send you a link" instead of "we'll send"
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
More accurate than "Stay in touch" - newsletters are one-way communication.
Also updated description slightly: "news" instead of "updates" to avoid
repetition with the title.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
More neutral and personal than "Follow us":
- Works for all platform types (GitHub, Ko-fi, etc., not just social follows)
- "me" fits a solo POD seller better than corporate "us"
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Select platforms typical for a quirky, nerdy POD seller:
- Instagram: primary visual portfolio
- Bluesky: nerdy Twitter alternative
- Mastodon: federated/open web presence
- Ko-fi: indie tips and commissions
- GitHub: open source projects
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add newsletter_card component with :card and :inline variants to share
between footer and contact page. Add social_links_card component with
full-width icon+text cards for better discoverability.
Improve contact_form with optional email link and response time display,
keeping important contact info above the fold. Reorganize contact page
layout with form on left, info cards on right.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Mark as completed:
- Navigation links between admin and shop
- Collection routes with filtering and sorting
- Header navigation accessibility improvements
Update Phase 9 routes to reflect current implementation.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Current page in nav is now a span instead of a link (no self-links)
- Logo links to home page, except when already on home
- Use aria-current="page" with accent underline for current page indicator
- Extract logo_content, logo_inner, and nav_item helper components
- Update CSS to target both a and span elements in .shop-nav
This follows WCAG accessibility guidelines - links that point to
the current page are confusing for screen reader users.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Add sort functionality to /collections/:slug pages with 6 sort options
(featured, newest, price ascending/descending, name A-Z/Z-A). Sort
selection persists across category navigation via URL query params.
Refactor handle_params to be DRY using load_collection/1 helper.
Add comprehensive unit tests for PreviewData category functions and
LiveView tests for the Collection page sorting and navigation.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add ShopLive.Collection LiveView for collection pages
- Add products_by_category/1 and category_by_slug/1 to PreviewData
- Support /collections/all for all products view
- Remove /products route and ShopLive.Products (replaced by collections)
- Update all links to use /collections/all instead of /products
- Update category nav to link to /collections/:slug
- Update PDP breadcrumb to link to specific collection
URL structure now follows Shopify convention:
- /collections/all - All products
- /collections/art-prints - Art Prints collection
- /collections/apparel - Apparel collection
- etc.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add "← View Shop" link on admin/theme page for easy navigation
- Add collapsible sidebar with chevron toggle button
- Include proper ARIA attributes for accessibility (aria-label,
aria-expanded, aria-controls)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Verifies that updating theme settings regenerates the CSS cache
with the new values. Tests accent color changes from red to blue
and confirms the correct HSL hue values appear in cached CSS.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Tests cover:
- get/0, put/1, invalidate/0, warm/0 functions
- Performance benchmark comparing cache hit vs CSS generation
- 100 cache hit consistency test
Run with: mix test test/simpleshop_theme/theme/css_cache_test.exs --include benchmark
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The CSSCache.init/1 already calls warm() on startup.
Remove from Quick Wins, add to Completed section.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Update README title to "SimpleShop"
- Update ROADMAP title to "SimpleShop Roadmap"
- Add "Rename Project to SimpleShop" to Technical Debt section
with list of files that would need updating
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The shop is the product; the theme editor is a feature.
Reorder features section to lead with "The Shop" before
"Theme Editor".
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Newsletter signup card for prominent subscription CTA
- Social media links card with icons and text labels
- Makes social links more discoverable than small footer icons
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Remove reference to deleted sample-content.md
- Move Sample Content to Completed section (it's implemented)
- Note Printify integration in completed features
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Add ShopLive.Cart at /cart using shared PageTemplates
- Update ErrorHTML to render fully themed 404/500 pages
- Add dev-only error preview routes at /dev/errors/404 and /dev/errors/500
- Update error page tests for themed output
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Document the architecture and implementation phases for transforming
static page templates into a database-driven, customizable page builder
with visual editing capabilities.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
