Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrate Card component to Svelte 5 runes to fix image hydration
All checks were successful
CI / update (push) Successful in 1m10s
Details

Browse Source 
Use $props(), $state(), and $derived() to make image references properly
reactive. This fixes the issue where recipe card images weren't updating
correctly when switching between languages.
This commit is contained in:
Alexander Bocken
2025-12-26 23:01:33 +01:00
parent 3e43b731c9
commit e6839f56f9
1 changed files with 21 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/lib/components/Card.svelte
View File

@@ -1,37 +1,33 @@
<script lang="ts">
export let recipe
export let current_month
export let icon_override = false;
export let search = true;
import "$lib/css/nordtheme.css";
import "$lib/css/shake.css";
import "$lib/css/icon.css";
export let do_margin_right = false;
export let isFavorite = false;
export let showFavoriteIndicator = false;
// to manually override lazy loading for top cards
export let loading_strat : "lazy" | "eager" | undefined;
// route prefix for language support (/rezepte or /recipes)
export let routePrefix = '/rezepte';
if(loading_strat === undefined){
loading_strat = "lazy"
}
if(icon_override){
current_month = recipe.season[0]
}
let isloaded = false
import { onMount } from "svelte";
let {
recipe,
current_month: currentMonthProp = 0,
icon_override = false,
search = true,
do_margin_right = false,
isFavorite = false,
showFavoriteIndicator = false,
loading_strat = "lazy",
routePrefix = '/rezepte'
} = $props();
// Make current_month reactive based on icon_override
let current_month = $derived(icon_override ? recipe.season[0] : currentMonthProp);
let isloaded = $state(false);
onMount(() => {
isloaded = document.querySelector("img")?.complete ? true : false
})
});
// Use germanShortName for images if available (English recipes), otherwise use short_name (German recipes)
const imageShortName = recipe.germanShortName || recipe.short_name;
const img_name = imageShortName + ".webp?v=" + recipe.dateModified
const imageShortName = $derived(recipe.germanShortName || recipe.short_name);
const img_name = $derived(imageShortName + ".webp?v=" + recipe.dateModified);
</script>
<style>
.card_anchor{
@@ -255,7 +251,7 @@ const img_name = imageShortName + ".webp?v=" + recipe.dateModified
}
</style>
<div class=card_anchor class:search_me={search} data-tags=[{recipe.tags}]>
<div class=card_anchor class:search_me={search} data-tags="[{recipe.tags}]">
<div class="card" class:margin_right={do_margin_right}>
<a href="{routePrefix}/{recipe.short_name}" class="card-main-link" aria-label="View recipe: {recipe.name}">
<span class="visually-hidden">View recipe: {recipe.name}</span>