diff --git a/public/favicon-base.png b/public/favicon-base.png new file mode 100644 index 0000000..82a8a0b Binary files /dev/null and b/public/favicon-base.png differ diff --git a/scripts/convert-logos-to-png.js b/scripts/convert-logos-to-png.js new file mode 100644 index 0000000..d81ea9c --- /dev/null +++ b/scripts/convert-logos-to-png.js @@ -0,0 +1,47 @@ +const sharp = require('sharp'); +const fs = require('fs'); +const path = require('path'); + +async function convertSvgToPng(svgPath, pngPath, size) { + try { + const svgBuffer = fs.readFileSync(svgPath); + + await sharp(svgBuffer, { + density: 300 // High DPI for better quality + }) + .resize(size, size, { + fit: 'contain', + background: { r: 255, g: 255, b: 255, alpha: 0 } // Transparent background + }) + .png() + .toFile(pngPath); + + console.log(`✅ Created ${pngPath} (${size}x${size})`); + } catch (error) { + console.error(`❌ Error converting ${svgPath}:`, error.message); + } +} + +async function main() { + const publicDir = path.join(__dirname, '..', 'public'); + + // Convert logo.svg to various PNG sizes + const logoPath = path.join(publicDir, 'logo.svg'); + if (fs.existsSync(logoPath)) { + await convertSvgToPng(logoPath, path.join(publicDir, 'logo-512.png'), 512); + await convertSvgToPng(logoPath, path.join(publicDir, 'logo-256.png'), 256); + await convertSvgToPng(logoPath, path.join(publicDir, 'logo-128.png'), 128); + } + + // Convert logo-large.svg to larger PNG sizes + const logoLargePath = path.join(publicDir, 'logo-large.svg'); + if (fs.existsSync(logoLargePath)) { + await convertSvgToPng(logoLargePath, path.join(publicDir, 'logo-1024.png'), 1024); + await convertSvgToPng(logoLargePath, path.join(publicDir, 'logo-512.png'), 512); + } + + console.log('\n✨ Logo conversion complete!'); +} + +main(); + diff --git a/scripts/create-logo-from-favicon-v2.js b/scripts/create-logo-from-favicon-v2.js new file mode 100644 index 0000000..9472f48 --- /dev/null +++ b/scripts/create-logo-from-favicon-v2.js @@ -0,0 +1,138 @@ +const sharp = require('sharp'); +const fs = require('fs'); +const path = require('path'); + +async function createLogoWithText(faviconPath, outputPath, size) { + try { + // Load and resize favicon - smaller to leave room for text + const faviconSize = Math.floor(size * 0.65); + const faviconBuffer = await sharp(faviconPath) + .resize(faviconSize, faviconSize, { + fit: 'contain', + background: { r: 255, g: 255, b: 255, alpha: 0 } + }) + .toBuffer(); + + // Create SVG with favicon and text + const textSize = Math.floor(size * 0.12); + const iconY = Math.floor(size * 0.10); // Logo higher up + const textY = Math.floor(size * 0.92); // Text further down + const iconX = Math.floor((size - faviconSize) / 2); + + const svg = ` + + + + + + hördle.de + +`; + + // Convert SVG to PNG with white background + await sharp(Buffer.from(svg)) + .resize(size, size) + .png() + .toFile(outputPath); + + console.log(`✅ Created ${path.basename(outputPath)} (${size}x${size})`); + } catch (error) { + console.error(`❌ Error creating ${outputPath}:`, error.message); + } +} + +async function createSVGLogo(faviconPath, outputPath, size) { + try { + // Load and resize favicon - smaller to leave room for text + const faviconSize = Math.floor(size * 0.65); + const faviconBuffer = await sharp(faviconPath) + .resize(faviconSize, faviconSize, { + fit: 'contain', + background: { r: 255, g: 255, b: 255, alpha: 0 } + }) + .toBuffer(); + + // Create SVG with favicon and text + const textSize = Math.floor(size * 0.12); + const iconY = Math.floor(size * 0.10); // Logo higher up + const textY = Math.floor(size * 0.92); // Text further down + const iconX = Math.floor((size - faviconSize) / 2); + + const svg = ` + + + + + + hördle.de + +`; + + fs.writeFileSync(outputPath, svg); + console.log(`✅ Created ${path.basename(outputPath)} (${size}x${size} SVG)`); + } 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 for processing + 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\n'); + + // Create SVG logo + await createSVGLogo(tempFavicon, path.join(publicDir, 'logo.svg'), 512); + await createSVGLogo(tempFavicon, path.join(publicDir, 'logo-large.svg'), 1024); + + // Create PNG 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); + + // Clean up temp file + if (fs.existsSync(tempFavicon)) { + fs.unlinkSync(tempFavicon); + } + + console.log('\n✨ Logo creation complete!'); +} + +main(); + diff --git a/scripts/create-logo-from-favicon.js b/scripts/create-logo-from-favicon.js new file mode 100644 index 0000000..483d2fe --- /dev/null +++ b/scripts/create-logo-from-favicon.js @@ -0,0 +1,120 @@ +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 ? ` + + + + + + + + + Hördle + + + ` : ` + + + + `; + + // 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 = ` + + + + + + + Hördle + +`; + + 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(); +