121 lines
4.2 KiB
JavaScript
121 lines
4.2 KiB
JavaScript
const sharp = require('sharp');
|
|
const fs = require('fs');
|
|
const path = require('path');
|
|
|
|
async function createLogoWithText(faviconPath, outputPath, size, includeText = true) {
|
|
try {
|
|
const favicon = await sharp(faviconPath)
|
|
.resize(size * 0.7, size * 0.7, {
|
|
fit: 'contain',
|
|
background: { r: 255, g: 255, b: 255, alpha: 0 }
|
|
})
|
|
.toBuffer();
|
|
|
|
// Create SVG with favicon and text
|
|
const textSize = Math.floor(size * 0.15);
|
|
const spacing = Math.floor(size * 0.05);
|
|
const iconSize = Math.floor(size * 0.7);
|
|
const iconY = Math.floor(includeText ? size * 0.25 : size * 0.5);
|
|
const textY = Math.floor(size * 0.85);
|
|
|
|
// For now, we'll create a composite image
|
|
// First, create the favicon part
|
|
const svg = includeText ? `
|
|
<svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<pattern id="faviconPattern" x="0" y="0" width="1" height="1">
|
|
<image href="data:image/png;base64,${favicon.toString('base64')}"
|
|
x="${(size - iconSize) / 2}"
|
|
y="${iconY - iconSize / 2}"
|
|
width="${iconSize}"
|
|
height="${iconSize}"/>
|
|
</pattern>
|
|
</defs>
|
|
<rect width="${size}" height="${size}" fill="url(#faviconPattern)"/>
|
|
<text x="${size / 2}" y="${textY}"
|
|
font-family="system-ui, -apple-system, sans-serif"
|
|
font-size="${textSize}"
|
|
font-weight="bold"
|
|
fill="#000000"
|
|
text-anchor="middle"
|
|
letter-spacing="-0.5">
|
|
Hördle
|
|
</text>
|
|
</svg>
|
|
` : `
|
|
<svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg">
|
|
<image href="data:image/png;base64,${favicon.toString('base64')}"
|
|
x="${(size - iconSize) / 2}"
|
|
y="${(size - iconSize) / 2}"
|
|
width="${iconSize}"
|
|
height="${iconSize}"/>
|
|
</svg>
|
|
`;
|
|
|
|
// Convert SVG to PNG
|
|
await sharp(Buffer.from(svg))
|
|
.png()
|
|
.toFile(outputPath);
|
|
|
|
console.log(`✅ Created ${outputPath} (${size}x${size})`);
|
|
} catch (error) {
|
|
console.error(`❌ Error creating ${outputPath}:`, error.message);
|
|
}
|
|
}
|
|
|
|
async function main() {
|
|
const faviconPath = path.join(__dirname, '..', 'app', 'favicon.ico');
|
|
const publicDir = path.join(__dirname, '..', 'public');
|
|
|
|
if (!fs.existsSync(faviconPath)) {
|
|
console.error('❌ Favicon not found at', faviconPath);
|
|
return;
|
|
}
|
|
|
|
// Extract favicon to PNG first
|
|
const tempFavicon = path.join(publicDir, 'favicon-temp.png');
|
|
const faviconBuffer = fs.readFileSync(faviconPath);
|
|
|
|
// Convert ICO to PNG
|
|
await sharp(faviconBuffer)
|
|
.resize(1024, 1024, { fit: 'contain' })
|
|
.png()
|
|
.toFile(tempFavicon);
|
|
|
|
console.log('✅ Extracted favicon to PNG');
|
|
|
|
// Create logos with text in various sizes
|
|
await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-128.png'), 128);
|
|
await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-256.png'), 256);
|
|
await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-512.png'), 512);
|
|
await createLogoWithText(tempFavicon, path.join(publicDir, 'logo-1024.png'), 1024);
|
|
|
|
// Create SVG version
|
|
const faviconPng = await sharp(faviconBuffer)
|
|
.resize(512, 512, { fit: 'contain' })
|
|
.png()
|
|
.toBuffer();
|
|
|
|
const svgContent = `<?xml version="1.0" encoding="UTF-8"?>
|
|
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<defs>
|
|
<image id="faviconImg" href="data:image/png;base64,${faviconPng.toString('base64')}" width="358" height="358" x="77" y="77"/>
|
|
</defs>
|
|
<use href="#faviconImg"/>
|
|
<text x="256" y="430" font-family="system-ui, -apple-system, sans-serif" font-size="48" font-weight="bold" fill="#000000" text-anchor="middle" letter-spacing="-0.5">
|
|
Hördle
|
|
</text>
|
|
</svg>`;
|
|
|
|
fs.writeFileSync(path.join(publicDir, 'logo.svg'), svgContent);
|
|
console.log('✅ Created logo.svg');
|
|
|
|
// Clean up temp file
|
|
fs.unlinkSync(tempFavicon);
|
|
|
|
console.log('\n✨ Logo creation complete!');
|
|
}
|
|
|
|
main();
|
|
|