From dcae816cf252000a8502a75554f83b96260df831 Mon Sep 17 00:00:00 2001
From: Aran Roig <aranseraroig@gmail.com>
Date: Mon, 13 Apr 2026 16:00:17 +0200
Subject: [PATCH] Test

---
 frontend/app/components/content/BlurImage.vue | 53 +++++++++++++++++++
 frontend/app/components/content/ProseImg.vue  | 16 ------
 frontend/content.config.ts                    |  1 -
 frontend/content/art/ca/nozt.md               |  8 ++-
 frontend/content/art/en/nozt.md               |  8 ++-
 frontend/content/art/es/nozt.md               |  8 ++-
 6 files changed, 74 insertions(+), 20 deletions(-)
 create mode 100644 frontend/app/components/content/BlurImage.vue
 delete mode 100644 frontend/app/components/content/ProseImg.vue

diff --git a/frontend/app/components/content/BlurImage.vue b/frontend/app/components/content/BlurImage.vue
new file mode 100644
index 0000000..4689310
--- /dev/null
+++ b/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>
diff --git a/frontend/app/components/content/ProseImg.vue b/frontend/app/components/content/ProseImg.vue
deleted file mode 100644
index 1e3a55d..0000000
--- a/frontend/app/components/content/ProseImg.vue
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/frontend/content.config.ts b/frontend/content.config.ts
index a9695f5..f767d36 100644
--- a/frontend/content.config.ts
+++ b/frontend/content.config.ts
@@ -32,7 +32,6 @@ export default defineContentConfig({
   },
   markdown: {
     tags: {
-      img: 'ProseImg'
     }
   }
 })
\ No newline at end of file
diff --git a/frontend/content/art/ca/nozt.md b/frontend/content/art/ca/nozt.md
index 3da5fe4..01e3e59 100644
--- a/frontend/content/art/ca/nozt.md
+++ b/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
 
diff --git a/frontend/content/art/en/nozt.md b/frontend/content/art/en/nozt.md
index fc3c520..d9b7c5b 100644
--- a/frontend/content/art/en/nozt.md
+++ b/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
 
diff --git a/frontend/content/art/es/nozt.md b/frontend/content/art/es/nozt.md
index 6db651d..33f0f71 100644
--- a/frontend/content/art/es/nozt.md
+++ b/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