From bd5fdbd7c33c23bcbf616d25811cf1c595a1030f Mon Sep 17 00:00:00 2001
From: Alexander Bocken <alexander@bocken.org>
Date: Sun, 18 Feb 2024 14:43:42 +0100
Subject: [PATCH] first attempt of img cache invalidation

---
 src/lib/components/Card.svelte         | 6 ++++--
 src/routes/rezepte/[name]/+page.svelte | 4 ++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index c347997..806dfc3 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -20,6 +20,8 @@ onMount(() => {
 	isloaded = document.querySelector("img")?.complete ? true : false
 })
 
+const img_name=recipe.short_name + ".webp?v=" + recipe.dateModified
+console.log(recipe)
 </script>
 <style>
 .card_anchor{
@@ -176,9 +178,9 @@ onMount(() => {
 <a class=card_anchor href="/rezepte/{recipe.short_name}" class:search_me={search} data-tags=[{recipe.tags}] >
 <div class="card" class:margin_right={do_margin_right}>
 	<div class=div_div_image >
-		<div class=div_image style="background-image:url({'https://bocken.org/static/rezepte/placeholder/' + recipe.short_name + '.webp'})">
+		<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/' + recipe.short_name + '.webp'} loading=lazy  alt="{recipe.alt}"/>
+				<img id=image class="backdrop_blur" src="https://bocken.org/static/rezepte/thumb/{img_name}" loading=lazy  alt="{recipe.alt}"/>
 			</noscript>
 			<img class:blur={!isloaded} id=image class="backdrop_blur" src={'https://bocken.org/static/rezepte/thumb/' + recipe.short_name + '.webp'} loading=lazy  alt="{recipe.alt}" on:load={() => isloaded=true}/>
 		</div>
diff --git a/src/routes/rezepte/[name]/+page.svelte b/src/routes/rezepte/[name]/+page.svelte
index 96cacb4..3297289 100644
--- a/src/routes/rezepte/[name]/+page.svelte
+++ b/src/routes/rezepte/[name]/+page.svelte
@@ -15,8 +15,8 @@
 
     	export let data: PageData;
 
-	let hero_img_src = "https://bocken.org/static/rezepte/full/" + data.short_name + ".webp"
-	let placeholder_src = "https://bocken.org/static/rezepte/placeholder/" + data.short_name + ".webp"
+	let hero_img_src = "https://bocken.org/static/rezepte/full/" + data.short_name + ".webp?v=" + data.dateModified
+	let placeholder_src = "https://bocken.org/static/rezepte/placeholder/" + data.short_name + ".webp?v=" + data.dateModified
     	export let months = ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]
 	function season_intervals() {
 		let interval_arr = []