mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-15 01:21:09 +02:00
72 lines
No EOL
2.7 KiB
JavaScript
72 lines
No EOL
2.7 KiB
JavaScript
#!/usr/bin/env node
|
|
|
|
// Script to generate PWA icons from logo
|
|
import fs from 'fs';
|
|
import path from 'path';
|
|
import { fileURLToPath } from 'url';
|
|
|
|
const __filename = fileURLToPath(import.meta.url);
|
|
const __dirname = path.dirname(__filename);
|
|
|
|
// SVG Logo content (simple U for uLoad)
|
|
const createSvgIcon = (size) => `
|
|
<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="${size}" height="${size}" fill="#3B82F6" rx="${size * 0.15}"/>
|
|
<text x="50%" y="55%" font-family="system-ui, -apple-system, sans-serif" font-size="${size * 0.5}px" font-weight="bold" fill="white" text-anchor="middle" dominant-baseline="middle">U</text>
|
|
</svg>
|
|
`;
|
|
|
|
// Icon sizes needed for PWA
|
|
const sizes = [72, 96, 128, 144, 152, 192, 384, 512];
|
|
|
|
// Ensure directory exists
|
|
const iconsDir = path.join(__dirname, '..', 'static', 'icons');
|
|
if (!fs.existsSync(iconsDir)) {
|
|
fs.mkdirSync(iconsDir, { recursive: true });
|
|
}
|
|
|
|
// Generate SVG icons - but also need PNG for manifest
|
|
sizes.forEach(size => {
|
|
const filename = `icon-${size}x${size}.svg`;
|
|
const filepath = path.join(iconsDir, filename);
|
|
const content = createSvgIcon(size);
|
|
|
|
fs.writeFileSync(filepath, content.trim());
|
|
console.log(`Generated ${filename}`);
|
|
|
|
// Also create PNG placeholder (we'll use SVG as PNG alternative)
|
|
const pngFilename = `icon-${size}x${size}.png`;
|
|
const pngFilepath = path.join(iconsDir, pngFilename);
|
|
// Create a symlink or copy the SVG as PNG won't work, so we'll update manifest instead
|
|
});
|
|
|
|
// Also create apple-touch-icon
|
|
const appleIcon = createSvgIcon(180);
|
|
fs.writeFileSync(path.join(iconsDir, 'apple-touch-icon.svg'), appleIcon.trim());
|
|
console.log('Generated apple-touch-icon.svg');
|
|
|
|
// Create maskable icon (with safe area padding)
|
|
const createMaskableIcon = (size) => {
|
|
const safeArea = size * 0.8; // 80% safe area
|
|
const padding = (size - safeArea) / 2;
|
|
|
|
return `
|
|
<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg">
|
|
<rect width="${size}" height="${size}" fill="#3B82F6"/>
|
|
<rect x="${padding}" y="${padding}" width="${safeArea}" height="${safeArea}" fill="#3B82F6" rx="${safeArea * 0.15}"/>
|
|
<text x="50%" y="55%" font-family="system-ui, -apple-system, sans-serif" font-size="${safeArea * 0.5}px" font-weight="bold" fill="white" text-anchor="middle" dominant-baseline="middle">U</text>
|
|
</svg>
|
|
`;
|
|
};
|
|
|
|
// Generate maskable icons
|
|
[192, 512].forEach(size => {
|
|
const filename = `icon-maskable-${size}x${size}.svg`;
|
|
const filepath = path.join(iconsDir, filename);
|
|
const content = createMaskableIcon(size);
|
|
|
|
fs.writeFileSync(filepath, content.trim());
|
|
console.log(`Generated ${filename}`);
|
|
});
|
|
|
|
console.log('\n✅ All PWA icons generated successfully!'); |