Paul Bailey
6cb9a593d4
- Generate app icons in multiple sizes (192x192, 512x512, 180x180, 32x32) - Create favicon and apple-touch-icon SVG files - Add comprehensive PWA meta tags in app layout - Configure theme color (#3B82F6) and background color - Update manifest.json with icon references (PNG and SVG) - Create icon generation scripts (SVG and PNG conversion) - Add browser-based PNG icon generator (HTML) - Create comprehensive PWA testing guide - Add icon setup documentation Requirements: 4.1, 4.2 Task: 13. Add PWA assets and metadata
60 lines
1.9 KiB
JavaScript
60 lines
1.9 KiB
JavaScript
// SVG to PNG converter using sharp library
|
|
// Run: npm install --save-dev sharp
|
|
// Then: node scripts/convert-with-sharp.js
|
|
|
|
const fs = require('fs');
|
|
const path = require('path');
|
|
|
|
async function convertIcons() {
|
|
try {
|
|
const sharp = require('sharp');
|
|
console.log('Converting SVG icons to PNG using sharp...\n');
|
|
|
|
const publicDir = path.join(__dirname, '..', 'public');
|
|
|
|
const conversions = [
|
|
{ input: 'icon-192.svg', output: 'icon-192.png', size: 192 },
|
|
{ input: 'icon-512.svg', output: 'icon-512.png', size: 512 },
|
|
{ input: 'apple-touch-icon.svg', output: 'apple-touch-icon.png', size: 180 },
|
|
{ input: 'favicon.svg', output: 'favicon-32.png', size: 32 }
|
|
];
|
|
|
|
for (const conv of conversions) {
|
|
const inputPath = path.join(publicDir, conv.input);
|
|
const outputPath = path.join(publicDir, conv.output);
|
|
|
|
if (!fs.existsSync(inputPath)) {
|
|
console.log(`⚠️ ${conv.input} not found, skipping...`);
|
|
continue;
|
|
}
|
|
|
|
await sharp(inputPath)
|
|
.resize(conv.size, conv.size)
|
|
.png()
|
|
.toFile(outputPath);
|
|
|
|
console.log(`✓ Created ${conv.output} (${conv.size}x${conv.size})`);
|
|
}
|
|
|
|
console.log('\n✓ All PNG icons generated successfully!');
|
|
console.log('\nNext steps:');
|
|
console.log(' 1. Update manifest.json to reference PNG icons');
|
|
console.log(' 2. Update app/layout.tsx to use PNG apple-touch-icon');
|
|
console.log(' 3. Test "Add to Home Screen" on iOS Safari');
|
|
|
|
} catch (error) {
|
|
if (error.code === 'MODULE_NOT_FOUND') {
|
|
console.error('❌ Sharp is not installed.');
|
|
console.log('\nTo install sharp, run:');
|
|
console.log(' npm install --save-dev sharp');
|
|
console.log('\nOr use alternative conversion methods:');
|
|
console.log(' node scripts/svg-to-png.js');
|
|
} else {
|
|
console.error('Error converting icons:', error.message);
|
|
}
|
|
process.exit(1);
|
|
}
|
|
}
|
|
|
|
convertIcons();
|