marcel/mealprep
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(planner): transliterate German umlauts in protein gradient CSS key

Browse Source 
'Hähnchen'.toLowerCase() → 'hähnchen' which never matched the CSS var
--gradient-protein-haehnchen. Add toCssKey() to replace ä→ae, ö→oe,
ü→ue, ß→ss so gradient fallbacks actually resolve.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel Raddatz
2026-04-10 11:31:06 +02:00
parent 8709e85d80
commit 389500c1dd
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/lib/planner/DesktopDayTile.svelte
View File

@@ -72,12 +72,17 @@
} }
} }
const umlautMap: Record<string, string> = { ä: 'ae', ö: 'oe', ü: 'ue', ß: 'ss' };
function toCssKey(name: string): string {
return name.toLowerCase().replace(/[äöüß]/g, (c) => umlautMap[c] ?? c);
}
const gradientBackground = $derived((() => { const gradientBackground = $derived((() => {
if (!slot.recipe) return 'var(--color-surface)'; if (!slot.recipe) return 'var(--color-surface)';
if (slot.recipe.heroImageUrl) return `url(${slot.recipe.heroImageUrl})`; if (slot.recipe.heroImageUrl) return `url(${slot.recipe.heroImageUrl})`;
const proteinTag = slot.recipe.tags?.find((t) => t.tagType === 'protein'); const proteinTag = slot.recipe.tags?.find((t) => t.tagType === 'protein');
if (proteinTag?.name) { if (proteinTag?.name) {
return `var(--gradient-protein-${proteinTag.name.toLowerCase()})`; return `var(--gradient-protein-${toCssKey(proteinTag.name)})`;
} }
return 'var(--color-surface)'; return 'var(--color-surface)';
})()); })());