The SVG path extended slightly beyond the viewBox (bezier control points
reached x=121.464 while viewBox ended at x=121), while the left edge was
flush at x=0. This caused uneven spacing.
Changed viewBox from "0 0 121 160" to "-0.5 0 122 160" to add equal
0.5px margins on both sides, properly centering the logo content.
https://claude.ai/code/session_019PGCQHRovoNE81udohhU3R
Co-authored-by: Claude <noreply@anthropic.com>
* feat: add Grimoire logo SVG and generate PWA assets
- Add logo.svg with the official Grimoire logo and gradient
- Create GrimoireLogo React component for use in the app
- Add scripts/generate-pwa-icons.mjs to generate all PWA icons from SVG
- Regenerate all favicon and PWA icons from the new logo
- Update mobile welcome screen to show the logo instead of text
* feat: use transparent backgrounds for PWA icons and add theme gradient option
- Update generate-pwa-icons.mjs to output PNGs with transparent backgrounds
- Add gradient prop to GrimoireLogo component ("original" or "theme")
- Theme gradient matches text-grimoire-gradient CSS (yellow -> orange -> purple -> cyan)
- Mobile welcome screen now uses theme gradient to match ASCII art
* feat: use original gradient for mobile welcome logo
---------
Co-authored-by: Claude <noreply@anthropic.com>
* feat: add site icon and favicon
- Downloaded and cropped Grimoire icon from nostr.build
- Created multiple favicon sizes (16x16, 32x32, 180x180, 512x512)
- Generated traditional .ico format and PNG variants
- Added Apple touch icon for iOS devices
- Updated index.html with proper favicon links
* feat: make Grimoire installable as a PWA
- Created web manifest (site.webmanifest) with app metadata
- Added app name, description, theme colors
- Configured standalone display mode for native-like experience
- Included all required icon sizes (192x192, 512x512)
- Added keyboard shortcut for command palette
- Generated 192x192 icon for PWA requirements
- Added manifest and theme-color meta tags to index.html
- Implemented service worker (sw.js) for offline functionality
- Network-first caching strategy for optimal performance
- Precaches core assets on install
- Provides offline fallback for navigation requests
- Registered service worker in main.tsx
Users can now install Grimoire as a standalone app on desktop and mobile devices.
* fix: properly configure maskable PWA icons
The previous configuration incorrectly marked regular icons as "maskable",
which would cause them to be cropped when displayed in circular or rounded
shapes on Android devices.
Changes:
- Created dedicated maskable icons with 10% padding (safe zone)
- Maskable icons use dark background (#020817) matching app theme
- Separated "any" and "maskable" purposes in manifest
- Regular icons (192x192, 512x512) use full space with purpose="any"
- Maskable icons (192x192-maskable, 512x512-maskable) have padding with purpose="maskable"
This ensures icons display correctly in all contexts:
- Regular icons for browser tabs, shortcuts, splash screens
- Maskable icons for adaptive icon shapes on Android
* chore: simplify PWA manifest
- Simplify name to just 'Grimoire'
- Add 'nostr' to categories for better discoverability
- Remove shortcuts (not needed for initial launch)
---------
Co-authored-by: Claude <noreply@anthropic.com>
