From ef786864322cb15cfb92d294d3024dfd8404c28f Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Mon, 22 Jan 2024 14:43:52 +0100
Subject: [PATCH] no blurred image if JS disabled

---
 src/lib/components/Card.svelte             | 7 ++++++-
 src/lib/components/TitleImgParallax.svelte | 5 +++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index 616287b..759472f 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -48,6 +48,8 @@ onMount(() => {
 	height: 255px;
 	object-fit: cover;
 	transition: 200ms;
+}
+.blur{
 	filter: blur(10px);
 	backdrop-filter: blur(10px);
 }
@@ -172,7 +174,10 @@ onMount(() => {
 <div class="card" class:search_me={search} data-tags=[{recipe.tags}]>
 	<div class=div_div_image >
 		<div class=div_image style="background-image:url({'https://bocken.org/static/rezepte/placeholder/' + recipe.short_name + '.webp'})">
-			<img class:unblur={isloaded} id=image src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy  alt="{recipe.alt}" on:load={() => isloaded=true}/>
+			<noscript>
+				<img id=image src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy  alt="{recipe.alt}"/>
+			</noscript>
+			<img class:blur={!isloaded} id=image class=blur src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy  alt="{recipe.alt}" on:load={() => isloaded=true}/>
 		</div>
 	</div>
 	{#if icon_override || recipe.season.includes(current_month)}
diff --git a/src/lib/components/TitleImgParallax.svelte b/src/lib/components/TitleImgParallax.svelte
index 0fcbd71..c0f4a25 100644
--- a/src/lib/components/TitleImgParallax.svelte
+++ b/src/lib/components/TitleImgParallax.svelte
@@ -170,6 +170,11 @@ dialog button{
 			<img class:unblur={isloaded} id=image {src} on:load={() => {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=""/>
+			</div>
+		</noscript>
 	</div>
     </figure>
     <div class=content><slot></slot></div>