Test

frontend/app/components/content/BlurImage.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="image-wrapper">
+    <img
+      :src="lowResSrc"
+      :alt="alt"
+      class="image-base blur-sm scale-105"
+      :class="{ 'opacity-0': isLoaded }"
+    />
+    <img
+      :src="highResSrc"
+      :alt="alt"
+      class="image-base"
+      :class="{ 'opacity-0': !isLoaded }"
+      @load="isLoaded = true"
+    />
+  </div>
+</template>
+
+<style scoped>
+.image-wrapper {
+  position: relative;
+}
+
+.image-base {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: opacity 0.3s ease;
+}
+
+.image-base:last-child {
+  position: absolute;
+  inset: 0;
+}
+
+.blur-sm {
+  filter: blur(20px);
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+</style>
+
+<script setup>
+defineProps({
+  lowResSrc: { type: String, required: true },
+  highResSrc: { type: String, required: true },
+  alt: { type: String, default: '' },
+})
+
+const isLoaded = ref(false)
+</script>

frontend/app/components/content/ProseImg.vue

@@ -1,16 +0,0 @@
-<!-- components/content/ProseImg.vue -->
-<template>
-  <NuxtImg
-    :src="src"
-    :alt="alt"
-    format="webp"
-    loading="lazy"
-  />
-</template>
-
-<script setup>
-defineProps({
-  src: String,
-  alt: String
-})
-</script>

frontend/content.config.ts

@@ -32,7 +32,6 @@ export default defineContentConfig({
   },
   markdown: {
     tags: {
-      img: 'ProseImg'
     }
   }
 })

frontend/content/art/ca/nozt.md

@@ -8,7 +8,13 @@ thumb: https://cdn.aranroig.com/art/nozt/nozt-full-low.png
 
 #left
 
-![Alt text](https://cdn.aranroig.com/art/nozt/nozt-full.png)
+::blur-image
+---
+low-res-src: https://cdn.aranroig.com/art/nozt/nozt-full-low.png
+high-res-src: https://cdn.aranroig.com/art/nozt/nozt-full.png
+alt: My photo
+---
+::
 
 Aquesta imatge té resolució completa siii
 

frontend/content/art/en/nozt.md

@@ -8,7 +8,13 @@ thumb: https://cdn.aranroig.com/art/nozt/nozt-full-low.png
 
 #left
 
-![Alt text](https://cdn.aranroig.com/art/nozt/nozt-full.png)
+::blur-image
+---
+low-res-src: https://cdn.aranroig.com/art/nozt/nozt-full-low.png
+high-res-src: https://cdn.aranroig.com/art/nozt/nozt-full.png
+alt: My photo
+---
+::
 
 This is the full resolution image
 

frontend/content/art/es/nozt.md

@@ -8,7 +8,13 @@ thumb: https://cdn.aranroig.com/art/nozt/nozt-full-low.png
 
 #left
 
-![Alt text](https://cdn.aranroig.com/art/nozt/nozt-full.png)
+::blur-image
+---
+low-res-src: https://cdn.aranroig.com/art/nozt/nozt-full-low.png
+high-res-src: https://cdn.aranroig.com/art/nozt/nozt-full.png
+alt: My photo
+---
+::
 
 Ésta imagen tiene resolución completa siiii