feat(assets): standardize asset configuration with capacitor-assets

- Replace manual ImageMagick scripts with official capacitor-assets toolchain
- Consolidate duplicate asset sources to single resources/ directory
- Implement comprehensive asset configuration schema and validation
- Add CI safeguards for asset validation and platform asset detection
- Convert capacitor.config.json to TypeScript format
- Pin Node.js version for deterministic builds
- Remove legacy manual asset generation scripts:
  * generate-icons.sh, generate-ios-assets.sh, generate-android-icons.sh
  * check-android-resources.sh, check-ios-resources.sh
  * purge-generated-assets.sh
- Add new asset management commands:
  * assets:config - generate/update configurations
  * assets:validate - validate configurations
  * assets:clean - clean generated assets (dev only)
  * build:native - build with asset generation
- Create GitHub Actions workflow for asset validation
- Update documentation with new asset management workflow

This standardization eliminates asset duplication, improves build reliability,
and provides a maintainable asset management system using Capacitor defaults.

Breaking Changes: Manual asset generation scripts removed
Migration: Assets now sourced from resources/ directory only
CI: Automated validation prevents committed platform assets
This commit is contained in:
Matthew Raymer
2025-08-14 07:22:26 +00:00
parent 1a6b1e6151
commit a284067522
25 changed files with 1126 additions and 987 deletions

View File

@@ -136,11 +136,50 @@ const apiUrl = `${APP_SERVER}/api/claim/123`;
See [TESTING.md](test-playwright/TESTING.md) for detailed test instructions.
## Icons
## Asset Management
Application icons are in the `assets` directory, processed by the `capacitor-assets` command.
TimeSafari uses a standardized asset configuration system for consistent
icon and splash screen generation across all platforms.
To add a Font Awesome icon, add to fontawesome.ts and reference with `font-awesome` element and `icon` attribute with the hyphenated name.
### Asset Sources
- **Single source of truth**: `resources/` directory (Capacitor default)
- **Source files**: `icon.png`, `splash.png`, `splash_dark.png`
- **Format**: PNG or SVG files for optimal quality
### Asset Generation
- **Configuration**: `config/assets/capacitor-assets.config.json`
- **Schema validation**: `config/assets/schema.json`
- **Build-time generation**: Platform assets generated via `capacitor-assets`
- **No VCS commits**: Generated assets are never committed to version control
### Development Commands
```bash
# Generate/update asset configurations
npm run assets:config
# Validate asset configurations
npm run assets:validate
# Clean generated platform assets (local dev only)
npm run assets:clean
# Build with asset generation
npm run build:native
```
### Platform Support
- **Android**: Adaptive icons with foreground/background, monochrome support
- **iOS**: LaunchScreen storyboard preferred, splash assets when needed
- **Web**: PWA icons generated during build to `dist/` (not committed)
### Font Awesome Icons
To add a Font Awesome icon, add to `fontawesome.ts` and reference with
`font-awesome` element and `icon` attribute with the hyphenated name.
## Other