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

fix duplicate image IDs and migrate TitleImgParallax to Svelte 5 runes

Browse Source 
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.
This commit is contained in:
Alexander Bocken
2025-12-31 17:37:25 +01:00
parent 1182cfd239
commit 8a7d50ceb7
2 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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}