From 8a7d50ceb76c2abfa7fdfe02a74fead7d8d8b5ec Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Wed, 31 Dec 2025 17:37:25 +0100
Subject: [PATCH] fix duplicate image IDs and migrate TitleImgParallax to
 Svelte 5 runes

Replace id="image" with class="image" in both Card and TitleImgParallax
components to prevent duplicate IDs when multiple instances appear on the
same page. Update TitleImgParallax to use Svelte 5 $props() and $state()
runes instead of legacy export let syntax, and modernize event handlers
to use onload/onclick attributes.
---
 src/lib/components/Card.svelte             |  6 ++---
 src/lib/components/TitleImgParallax.svelte | 28 ++++++++++++----------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index 0b7d3ea..22ff3fe 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -95,7 +95,7 @@ const img_name = $derived(imageShortName + ".webp?v=" + recipe.dateModified);
 	z-index: 5;
 	text-decoration: none;
 }
-#image{
+.image{
 	width: 300px;
 	height: 255px;
 	object-fit: cover;
@@ -259,9 +259,9 @@ const img_name = $derived(imageShortName + ".webp?v=" + recipe.dateModified);
 	<div class=div_div_image >
 		<div class=div_image style="background-image:url(https://bocken.org/static/rezepte/placeholder/{img_name})">
 			<noscript>
-				<img id=image class="backdrop_blur" src="https://bocken.org/static/rezepte/thumb/{img_name}" loading={loading_strat} alt="{recipe.alt}"/>
+				<img class="image backdrop_blur" src="https://bocken.org/static/rezepte/thumb/{img_name}" loading={loading_strat} alt="{recipe.alt}"/>
 			</noscript>
-			<img class:blur={!isloaded} id=image class="backdrop_blur" src={'https://bocken.org/static/rezepte/thumb/' + imageShortName + '.webp'} loading={loading_strat} alt="{recipe.alt}" on:load={() => isloaded=true}/>
+			<img class="image backdrop_blur" class:blur={!isloaded} src={'https://bocken.org/static/rezepte/thumb/' + imageShortName + '.webp'} loading={loading_strat} alt="{recipe.alt}" on:load={() => isloaded=true}/>
 		</div>
 	</div>
 	{#if showFavoriteIndicator && isFavorite}
diff --git a/src/lib/components/TitleImgParallax.svelte b/src/lib/components/TitleImgParallax.svelte
index 9d554f9..41e9981 100644
--- a/src/lib/components/TitleImgParallax.svelte
+++ b/src/lib/components/TitleImgParallax.svelte
@@ -1,12 +1,14 @@
 <script>
-	export let src
-	export let placeholder_src
-	let isloaded=false
-	let isredirected=false
 	import { onMount } from "svelte";
+
+	let { src, placeholder_src } = $props();
+
+	let isloaded = $state(false);
+	let isredirected = $state(false);
+
 	onMount(() => {
 		const el = document.querySelector("img")
-		if(el.complete){
+		if(el?.complete){
 			isloaded = true
 		}
 		fetch(src, { method: 'HEAD' })
@@ -77,7 +79,7 @@
 }
 
 
-#image{
+.image{
   display: block;
   position: absolute;
   top: 0;
@@ -124,7 +126,7 @@ div:has(.placeholder){
   	height: max(60dvh,600px);
 	overflow: hidden;
 }
-.unblur#image{
+.unblur.image{
 	filter: blur(0px) !important;
 	opacity: 1;
 }
@@ -172,17 +174,17 @@ dialog button{
 </style>
 <section class="section">
     <figure class="image-container">
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
-    	<div class:zoom-in={isloaded && !isredirected} on:click={show_dialog_img}>
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+    	<div class:zoom-in={isloaded && !isredirected} onclick={show_dialog_img}>
 		<div class=placeholder style="background-image:url({placeholder_src})" >
 			<div class=placeholder_blur>
-			<img class:unblur={isloaded} id=image {src} on:load={() => {isloaded=true}}  alt=""/>
+			<img class="image" class:unblur={isloaded} {src} onload={() => {isloaded=true}}  alt=""/>
 			</div>
 		</div>
 		<noscript>
 			<div class=placeholder style="background-image:url({placeholder_src})" >
-				<img class="unblur" id=image {src} on:load={() => {isloaded=true}}  alt=""/>
+				<img class="image unblur" {src} onload={() => {isloaded=true}}  alt=""/>
 			</div>
 		</noscript>
 	</div>
@@ -193,7 +195,7 @@ dialog button{
 <dialog id=img_carousel>
 	<div>
 	<img class:unblur={isloaded} {src} alt="">
-		<button class=action_button on:keydown={(event) => do_on_key(event, 'Enter', false, close_dialog_img)} on:click={close_dialog_img}>
+		<button class=action_button onkeydown={(event) => do_on_key(event, 'Enter', false, close_dialog_img)} onclick={close_dialog_img}>
 	<Cross fill=white width=2rem height=2rem></Cross>
 		</button>
 	</div>