Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
616cfec3e7 | ||
|
|
ac12e45393 | ||
|
|
223eb62973 | ||
|
|
dc4bdd36c7 | ||
|
|
136f881252 | ||
|
|
fd11048f2c | ||
|
|
c1b448639e | ||
|
|
97021f016b |
1
.gitignore
vendored
@@ -54,3 +54,4 @@ next-env.d.ts
|
|||||||
docker-compose.yml
|
docker-compose.yml
|
||||||
scripts/scrape-bahn-expert-statements.js
|
scripts/scrape-bahn-expert-statements.js
|
||||||
docs/bahn-expert-statements.txt
|
docs/bahn-expert-statements.txt
|
||||||
|
/public/logos.zip
|
||||||
|
|||||||
@@ -1,7 +1,9 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import CuratorSpecialsPage from '@/app/curator/specials/page';
|
import CuratorSpecialsClient from '@/app/curator/specials/CuratorSpecialsClient';
|
||||||
|
|
||||||
export default CuratorSpecialsPage;
|
export default function CuratorSpecialsPage() {
|
||||||
|
return <CuratorSpecialsClient />;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
156
app/curator/specials/CuratorSpecialsClient.tsx
Normal file
@@ -0,0 +1,156 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { useRouter, usePathname } from 'next/navigation';
|
||||||
|
import { useLocale, useTranslations } from 'next-intl';
|
||||||
|
import { Link } from '@/lib/navigation';
|
||||||
|
import { getCuratorAuthHeaders } from '@/lib/curatorAuth';
|
||||||
|
import { getLocalizedValue } from '@/lib/i18n';
|
||||||
|
|
||||||
|
interface CuratorSpecial {
|
||||||
|
id: number;
|
||||||
|
name: string | { de?: string; en?: string };
|
||||||
|
songCount: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CuratorSpecialsClient() {
|
||||||
|
const router = useRouter();
|
||||||
|
const pathname = usePathname();
|
||||||
|
const urlLocale = pathname?.split('/')[1] as 'de' | 'en' | undefined;
|
||||||
|
const intlLocale = useLocale() as 'de' | 'en';
|
||||||
|
const locale: 'de' | 'en' = urlLocale === 'de' || urlLocale === 'en' ? urlLocale : intlLocale;
|
||||||
|
const t = useTranslations('Curator');
|
||||||
|
|
||||||
|
const [specials, setSpecials] = useState<CuratorSpecial[]>([]);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchSpecials = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
const res = await fetch('/api/curator/specials', {
|
||||||
|
headers: getCuratorAuthHeaders(),
|
||||||
|
});
|
||||||
|
if (!res.ok) {
|
||||||
|
if (res.status === 403) {
|
||||||
|
setError(t('specialForbidden'));
|
||||||
|
} else {
|
||||||
|
setError('Failed to load specials');
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const data = await res.json();
|
||||||
|
setSpecials(data);
|
||||||
|
} catch (e) {
|
||||||
|
setError('Failed to load specials');
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchSpecials();
|
||||||
|
}, [t]);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
|
||||||
|
<p>{t('loading')}</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
|
||||||
|
<p style={{ color: 'red' }}>{error}</p>
|
||||||
|
<Link
|
||||||
|
href="/curator"
|
||||||
|
style={{
|
||||||
|
display: 'inline-block',
|
||||||
|
marginTop: '1rem',
|
||||||
|
padding: '0.5rem 1rem',
|
||||||
|
background: '#6b7280',
|
||||||
|
color: 'white',
|
||||||
|
textDecoration: 'none',
|
||||||
|
borderRadius: '0.375rem',
|
||||||
|
fontSize: '0.9rem',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('backToDashboard') || 'Back to Dashboard'}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ maxWidth: '960px', margin: '2rem auto', padding: '1rem' }}>
|
||||||
|
<header style={{ marginBottom: '2rem' }}>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<h1 style={{ fontSize: '1.75rem', marginBottom: '0.25rem' }}>
|
||||||
|
{t('curateSpecialsTitle') || 'Curate Specials'}
|
||||||
|
</h1>
|
||||||
|
<Link
|
||||||
|
href="/curator"
|
||||||
|
style={{
|
||||||
|
padding: '0.5rem 1rem',
|
||||||
|
background: '#6b7280',
|
||||||
|
color: 'white',
|
||||||
|
textDecoration: 'none',
|
||||||
|
borderRadius: '0.375rem',
|
||||||
|
fontSize: '0.9rem',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('backToDashboard') || 'Back to Dashboard'}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{specials.length === 0 ? (
|
||||||
|
<div style={{ padding: '2rem', textAlign: 'center', color: '#666' }}>
|
||||||
|
<p>{t('noSpecialsAssigned') || 'No specials assigned to you.'}</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||||
|
{specials.map((special) => (
|
||||||
|
<Link
|
||||||
|
key={special.id}
|
||||||
|
href={`/curator/specials/${special.id}`}
|
||||||
|
style={{
|
||||||
|
display: 'block',
|
||||||
|
padding: '1.5rem',
|
||||||
|
background: '#f9fafb',
|
||||||
|
border: '1px solid #e5e7eb',
|
||||||
|
borderRadius: '0.5rem',
|
||||||
|
textDecoration: 'none',
|
||||||
|
color: 'inherit',
|
||||||
|
transition: 'all 0.2s',
|
||||||
|
}}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
e.currentTarget.style.background = '#f3f4f6';
|
||||||
|
e.currentTarget.style.borderColor = '#d1d5db';
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
e.currentTarget.style.background = '#f9fafb';
|
||||||
|
e.currentTarget.style.borderColor = '#e5e7eb';
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||||
|
<div>
|
||||||
|
<h2 style={{ fontSize: '1.25rem', marginBottom: '0.5rem', color: '#111827' }}>
|
||||||
|
{getLocalizedValue(special.name, locale)}
|
||||||
|
</h2>
|
||||||
|
<p style={{ fontSize: '0.875rem', color: '#6b7280' }}>
|
||||||
|
{special.songCount} {special.songCount === 1 ? 'song' : 'songs'}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div style={{ fontSize: '1.5rem', color: '#10b981' }}>→</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -681,7 +681,8 @@ export default function Game({ dailyPuzzle, genre = null, isSpecial = false, max
|
|||||||
fontFamily: 'inherit',
|
fontFamily: 'inherit',
|
||||||
resize: 'vertical',
|
resize: 'vertical',
|
||||||
marginBottom: '0.5rem',
|
marginBottom: '0.5rem',
|
||||||
display: 'block' // Ensure block display for proper alignment
|
display: 'block',
|
||||||
|
boxSizing: 'border-box' // Ensure padding and border are included in width
|
||||||
}}
|
}}
|
||||||
disabled={commentSending}
|
disabled={commentSending}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -29,9 +29,7 @@ export async function getOrCreateDailyPuzzle(genre: Genre | null = null) {
|
|||||||
const allSongs = await prisma.song.findMany({
|
const allSongs = await prisma.song.findMany({
|
||||||
where: whereClause,
|
where: whereClause,
|
||||||
include: {
|
include: {
|
||||||
puzzles: {
|
puzzles: true, // Load ALL puzzles, not just for this genre (to use total activations)
|
||||||
where: { genreId: genreId }
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -40,28 +38,24 @@ export async function getOrCreateDailyPuzzle(genre: Genre | null = null) {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Calculate weights
|
// Find songs with the minimum number of activations (all puzzles, not just for this genre)
|
||||||
const weightedSongs = allSongs.map(song => ({
|
// Only select from songs with the fewest activations to ensure fair distribution
|
||||||
|
const songsWithActivations = allSongs.map(song => ({
|
||||||
song,
|
song,
|
||||||
weight: 1.0 / (song.puzzles.length + 1),
|
activations: song.puzzles.length,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
// Calculate total weight
|
// Find minimum activations
|
||||||
const totalWeight = weightedSongs.reduce((sum, item) => sum + item.weight, 0);
|
const minActivations = Math.min(...songsWithActivations.map(item => item.activations));
|
||||||
|
|
||||||
// Pick a random song based on weights using cumulative weights
|
// Filter to only songs with minimum activations
|
||||||
// This ensures proper distribution and handles edge cases
|
const songsWithMinActivations = songsWithActivations
|
||||||
let random = Math.random() * totalWeight;
|
.filter(item => item.activations === minActivations)
|
||||||
let selectedSong = weightedSongs[weightedSongs.length - 1].song; // Fallback to last song
|
.map(item => item.song);
|
||||||
|
|
||||||
let cumulativeWeight = 0;
|
// Randomly select from songs with minimum activations
|
||||||
for (const item of weightedSongs) {
|
const randomIndex = Math.floor(Math.random() * songsWithMinActivations.length);
|
||||||
cumulativeWeight += item.weight;
|
const selectedSong = songsWithMinActivations[randomIndex];
|
||||||
if (random <= cumulativeWeight) {
|
|
||||||
selectedSong = item.song;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Create the daily puzzle
|
// Create the daily puzzle
|
||||||
try {
|
try {
|
||||||
@@ -141,7 +135,7 @@ export async function getOrCreateSpecialPuzzle(special: Special) {
|
|||||||
song: {
|
song: {
|
||||||
include: {
|
include: {
|
||||||
puzzles: {
|
puzzles: {
|
||||||
where: { specialId: special.id }
|
where: { specialId: special.id } // For specials, only count puzzles within this special
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -150,25 +144,25 @@ export async function getOrCreateSpecialPuzzle(special: Special) {
|
|||||||
|
|
||||||
if (specialSongs.length === 0) return null;
|
if (specialSongs.length === 0) return null;
|
||||||
|
|
||||||
// Calculate weights
|
// Find songs with the minimum number of activations within this special
|
||||||
const weightedSongs = specialSongs.map(specialSong => ({
|
// Note: For specials, we only count puzzles within the special (not all puzzles),
|
||||||
|
// since specials are curated, separate lists
|
||||||
|
const songsWithActivations = specialSongs.map(specialSong => ({
|
||||||
specialSong,
|
specialSong,
|
||||||
weight: 1.0 / (specialSong.song.puzzles.length + 1),
|
activations: specialSong.song.puzzles.length,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const totalWeight = weightedSongs.reduce((sum, item) => sum + item.weight, 0);
|
// Find minimum activations
|
||||||
let random = Math.random() * totalWeight;
|
const minActivations = Math.min(...songsWithActivations.map(item => item.activations));
|
||||||
let selectedSpecialSong = weightedSongs[weightedSongs.length - 1].specialSong; // Fallback to last song
|
|
||||||
|
|
||||||
// Pick a random song based on weights using cumulative weights
|
// Filter to only songs with minimum activations
|
||||||
let cumulativeWeight = 0;
|
const songsWithMinActivations = songsWithActivations
|
||||||
for (const item of weightedSongs) {
|
.filter(item => item.activations === minActivations)
|
||||||
cumulativeWeight += item.weight;
|
.map(item => item.specialSong);
|
||||||
if (random <= cumulativeWeight) {
|
|
||||||
selectedSpecialSong = item.specialSong;
|
// Randomly select from songs with minimum activations
|
||||||
break;
|
const randomIndex = Math.floor(Math.random() * songsWithMinActivations.length);
|
||||||
}
|
const selectedSpecialSong = songsWithMinActivations[randomIndex];
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
dailyPuzzle = await prisma.dailyPuzzle.create({
|
dailyPuzzle = await prisma.dailyPuzzle.create({
|
||||||
|
|||||||
@@ -279,11 +279,13 @@
|
|||||||
"batchUpdateError": "Fehler: {error}",
|
"batchUpdateError": "Fehler: {error}",
|
||||||
"batchUpdateNetworkError": "Netzwerkfehler bei der Batch-Aktualisierung",
|
"batchUpdateNetworkError": "Netzwerkfehler bei der Batch-Aktualisierung",
|
||||||
"backToDashboard": "Zurück zum Dashboard",
|
"backToDashboard": "Zurück zum Dashboard",
|
||||||
|
"loading": "Laden...",
|
||||||
"curateSpecialsButton": "Specials kuratieren",
|
"curateSpecialsButton": "Specials kuratieren",
|
||||||
"curateSpecialsTitle": "Deine Specials kuratieren",
|
"curateSpecialsTitle": "Deine Specials kuratieren",
|
||||||
"curateSpecialsDescription": "Hier kannst du die Startzeiten der Songs in deinen zugewiesenen Specials für das Rätsel feinjustieren.",
|
"curateSpecialsDescription": "Hier kannst du die Startzeiten der Songs in deinen zugewiesenen Specials für das Rätsel feinjustieren.",
|
||||||
"noSpecialPermissions": "Dir sind keine Specials zugeordnet.",
|
"noSpecialPermissions": "Dir sind keine Specials zugeordnet.",
|
||||||
"noSpecialsInScope": "Keine Specials zum Kuratieren vorhanden.",
|
"noSpecialsInScope": "Keine Specials zum Kuratieren vorhanden.",
|
||||||
|
"noSpecialsAssigned": "Dir sind keine Specials zugeordnet.",
|
||||||
"curateSpecialSongCount": "{count, plural, one {# Song} other {# Songs}} in diesem Special",
|
"curateSpecialSongCount": "{count, plural, one {# Song} other {# Songs}} in diesem Special",
|
||||||
"curateSpecialOpen": "Öffnen",
|
"curateSpecialOpen": "Öffnen",
|
||||||
"specialForbidden": "Du darfst dieses Special nicht bearbeiten.",
|
"specialForbidden": "Du darfst dieses Special nicht bearbeiten.",
|
||||||
|
|||||||
@@ -279,11 +279,13 @@
|
|||||||
"batchUpdateError": "Error: {error}",
|
"batchUpdateError": "Error: {error}",
|
||||||
"batchUpdateNetworkError": "Network error during batch update",
|
"batchUpdateNetworkError": "Network error during batch update",
|
||||||
"backToDashboard": "Back to dashboard",
|
"backToDashboard": "Back to dashboard",
|
||||||
|
"loading": "Loading...",
|
||||||
"curateSpecialsButton": "Curate Specials",
|
"curateSpecialsButton": "Curate Specials",
|
||||||
"curateSpecialsTitle": "Curate your Specials",
|
"curateSpecialsTitle": "Curate your Specials",
|
||||||
"curateSpecialsDescription": "Here you can fine-tune the start times of the songs in your assigned specials for the puzzle.",
|
"curateSpecialsDescription": "Here you can fine-tune the start times of the songs in your assigned specials for the puzzle.",
|
||||||
"noSpecialPermissions": "You do not have any specials assigned to you.",
|
"noSpecialPermissions": "You do not have any specials assigned to you.",
|
||||||
"noSpecialsInScope": "No specials available for you to curate.",
|
"noSpecialsInScope": "No specials available for you to curate.",
|
||||||
|
"noSpecialsAssigned": "No specials assigned to you.",
|
||||||
"curateSpecialSongCount": "{count, plural, one {# song} other {# songs}} in this special",
|
"curateSpecialSongCount": "{count, plural, one {# song} other {# songs}} in this special",
|
||||||
"curateSpecialOpen": "Open",
|
"curateSpecialOpen": "Open",
|
||||||
"specialForbidden": "You are not allowed to edit this special.",
|
"specialForbidden": "You are not allowed to edit this special.",
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "hoerdle",
|
"name": "hoerdle",
|
||||||
"version": "0.1.6.13",
|
"version": "0.1.6.16",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
|
|||||||
BIN
public/favicon-base.png
Normal file
|
After Width: | Height: | Size: 563 KiB |
BIN
public/logo-1024.png
Normal file
|
After Width: | Height: | Size: 437 KiB |
BIN
public/logo-128.png
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
public/logo-256.png
Normal file
|
After Width: | Height: | Size: 37 KiB |
BIN
public/logo-512.png
Normal file
|
After Width: | Height: | Size: 124 KiB |
19
public/logo-large.svg
Normal file
|
After Width: | Height: | Size: 507 KiB |
19
public/logo.svg
Normal file
|
After Width: | Height: | Size: 142 KiB |
47
scripts/convert-logos-to-png.js
Normal file
@@ -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();
|
||||||
|
|
||||||
138
scripts/create-logo-from-favicon-v2.js
Normal file
@@ -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 = `<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="${size}" height="${size}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- White background -->
|
||||||
|
<rect width="${size}" height="${size}" fill="#ffffff"/>
|
||||||
|
<image href="data:image/png;base64,${faviconBuffer.toString('base64')}"
|
||||||
|
x="${iconX}"
|
||||||
|
y="${iconY}"
|
||||||
|
width="${faviconSize}"
|
||||||
|
height="${faviconSize}"/>
|
||||||
|
<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.de
|
||||||
|
</text>
|
||||||
|
</svg>`;
|
||||||
|
|
||||||
|
// 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 = `<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<svg width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<!-- White background covering entire image -->
|
||||||
|
<rect width="${size}" height="${size}" fill="#ffffff"/>
|
||||||
|
<image href="data:image/png;base64,${faviconBuffer.toString('base64')}"
|
||||||
|
x="${iconX}"
|
||||||
|
y="${iconY}"
|
||||||
|
width="${faviconSize}"
|
||||||
|
height="${faviconSize}"/>
|
||||||
|
<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.de
|
||||||
|
</text>
|
||||||
|
</svg>`;
|
||||||
|
|
||||||
|
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();
|
||||||
|
|
||||||
120
scripts/create-logo-from-favicon.js
Normal file
@@ -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 ? `
|
||||||
|
<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();
|
||||||
|
|
||||||