111 lines
3.6 KiB
JavaScript
111 lines
3.6 KiB
JavaScript
/**
|
|
* PWA Icon Generator Script
|
|
* Generiert Placeholder-Icons für die PWA
|
|
*
|
|
* Verwendung: node tools/generate-pwa-icons.mjs
|
|
*
|
|
* Für echte Icons: Ersetze die generierten Dateien mit deinen
|
|
* eigenen Icons oder nutze https://www.pwabuilder.com/imageGenerator
|
|
*/
|
|
|
|
import { writeFileSync, mkdirSync, existsSync } from 'fs';
|
|
import { dirname, join } from 'path';
|
|
import { fileURLToPath } from 'url';
|
|
|
|
const __dirname = dirname(fileURLToPath(import.meta.url));
|
|
const ICONS_DIR = join(__dirname, '../public/assets/icons');
|
|
|
|
const SIZES = [72, 96, 128, 144, 152, 192, 384, 512];
|
|
const BRAND_COLOR = '#C2410C';
|
|
const BG_COLOR = '#ffffff';
|
|
|
|
// Stelle sicher dass der Ordner existiert
|
|
if (!existsSync(ICONS_DIR)) {
|
|
mkdirSync(ICONS_DIR, { recursive: true });
|
|
}
|
|
|
|
/**
|
|
* Generiert ein einfaches SVG-Icon als Placeholder
|
|
*/
|
|
function generateSvgIcon(size) {
|
|
const padding = size * 0.15;
|
|
const innerSize = size - (padding * 2);
|
|
const fontSize = size * 0.35;
|
|
|
|
return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
|
|
<rect width="${size}" height="${size}" fill="${BG_COLOR}" rx="${size * 0.15}"/>
|
|
<rect x="${padding}" y="${padding}" width="${innerSize}" height="${innerSize}" fill="${BRAND_COLOR}" rx="${innerSize * 0.1}"/>
|
|
<text x="50%" y="52%" dominant-baseline="middle" text-anchor="middle"
|
|
font-family="Arial, sans-serif" font-weight="bold" font-size="${fontSize}px" fill="white">
|
|
L&B
|
|
</text>
|
|
</svg>`;
|
|
}
|
|
|
|
/**
|
|
* Konvertiert SVG zu PNG mit Canvas (vereinfachte Base64 Version)
|
|
* Hinweis: Für echte PNG-Generierung würde man sharp oder canvas npm packages verwenden
|
|
*/
|
|
function generatePlaceholderPng(size) {
|
|
// Da wir keine externen Dependencies haben, generieren wir eine Info-Datei
|
|
const infoContent = `PWA Icon Placeholder - ${size}x${size}px
|
|
|
|
WICHTIG: Ersetze diese Datei mit einem echten PNG-Icon!
|
|
|
|
Empfohlene Tools:
|
|
- PWA Builder: https://www.pwabuilder.com/imageGenerator
|
|
- Maskable App: https://maskable.app/editor
|
|
- Real Favicon Generator: https://realfavicongenerator.net/
|
|
|
|
Icon-Anforderungen:
|
|
- Größe: ${size}x${size} Pixel
|
|
- Format: PNG mit Transparenz
|
|
- Safe Zone für Maskable: 80% des Icons sollte im inneren Kreis sein
|
|
`;
|
|
return infoContent;
|
|
}
|
|
|
|
// Generiere SVG Icons (können direkt verwendet werden)
|
|
console.log('🎨 Generiere PWA Icons...\n');
|
|
|
|
SIZES.forEach(size => {
|
|
const svgPath = join(ICONS_DIR, `icon-${size}x${size}.svg`);
|
|
const svg = generateSvgIcon(size);
|
|
writeFileSync(svgPath, svg);
|
|
console.log(` ✓ icon-${size}x${size}.svg`);
|
|
});
|
|
|
|
// Erstelle eine README
|
|
const readme = `# PWA Icons
|
|
|
|
Diese SVG-Icons wurden automatisch generiert und dienen als Placeholder.
|
|
|
|
## Für die Produktion:
|
|
|
|
1. Erstelle ein quadratisches Logo (mindestens 512x512px)
|
|
2. Gehe zu https://www.pwabuilder.com/imageGenerator
|
|
3. Lade dein Logo hoch
|
|
4. Lade die generierten Icons herunter
|
|
5. Ersetze die SVG-Dateien hier mit den PNG-Dateien
|
|
|
|
## Benötigte Größen:
|
|
${SIZES.map(s => `- icon-${s}x${s}.png`).join('\n')}
|
|
|
|
## Icon-Tipps:
|
|
- Verwende PNG mit Transparenz
|
|
- Halte wichtige Elemente in der "Safe Zone" (innere 80%)
|
|
- Teste mit https://maskable.app/editor
|
|
|
|
## Schnelle Alternative:
|
|
Die SVG-Icons funktionieren auch, aber PNGs sind kompatibler.
|
|
Ändere in manifest.webmanifest die Endungen von .png zu .svg.
|
|
`;
|
|
|
|
writeFileSync(join(ICONS_DIR, 'README.md'), readme);
|
|
|
|
console.log('\n✅ PWA Icons generiert!\n');
|
|
console.log('📝 Nächste Schritte:');
|
|
console.log(' 1. Öffne public/assets/icons/README.md für Anweisungen');
|
|
console.log(' 2. Ersetze die SVGs mit echten PNGs für beste Kompatibilität');
|
|
console.log(' 3. Oder ändere manifest.webmanifest zu .svg Endungen\n');
|