Performance improvements

frontend/app/components/content/ArtColumns.vue

@@ -1,6 +1,6 @@
 <template>
   <div style="display: flex; gap: 1rem; max-height: calc(100vh - 130px);">
-    <div style="flex: 4; overflow-y: auto; text-align: center;">
+    <div style="flex: 5; overflow-y: auto; text-align: center;">
       <slot name="left" />
     </div>
     <div style="flex: 2; overflow-y: auto; margin-left: 25px;">

frontend/app/components/content/BlurImage.vue

@@ -1,45 +1,78 @@
 <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"
-    />
+    <img :src="highResSrc" alt="" class="image-sizer" aria-hidden="true" />
+    <div class="subwrapper">
+      <img
+        :src="lowResSrc"
+        :alt="alt"
+        class="image-low"
+        :class="{ 'opacity-0': isLoaded }"
+      />
+      <img
+        :src="highResSrc"
+        :alt="alt"
+        class="image-high"
+        :class="{ 'opacity-0': !isLoaded }"
+        @load="isLoaded = true"
+      />
+      <div v-if="!isLoaded" class="spinner-overlay">
+        <div class="spinner" />
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped>
 .image-wrapper {
   position: relative;
+  display: flex;
+  justify-content: center;
 }
-
-.image-base {
+.image-sizer {
+  display: block;
   width: 100%;
+  height: auto;
+  visibility: hidden;
+}
+.image-low {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0%);
   height: 100%;
-  object-fit: cover;
+  filter: blur(20px);
   transition: opacity 0.3s ease;
 }
-
-.image-base:last-child {
+.image-high {
   position: absolute;
-  inset: 0;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0%);
+  max-width: 100%;
+  height: auto;
+  transition: opacity 0.3s ease;
 }
-
-.blur-sm {
-  filter: blur(20px);
-}
-
 .opacity-0 {
   opacity: 0;
 }
+.spinner-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(255, 255, 255, 0.4);
+  border-top-color: rgba(255, 255, 255, 0.9);
+  border-radius: 50%;
+  animation: spin 0.75s linear infinite;
+}
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
 </style>
 
 <script setup>
@@ -48,6 +81,5 @@ defineProps({
   highResSrc: { type: String, required: true },
   alt: { type: String, default: '' },
 })
-
 const isLoaded = ref(false)
 </script>

frontend/app/pages/art/index.vue

@@ -1,11 +1,45 @@
 <script setup lang="ts">
 import FixedLayout from '~/components/layouts/FixedLayout.vue';
 import TableHeader from '~/components/parts/TableHeader.vue';
+
 const { locale } = useI18n();
-const localePath = useLocalePath()
-const {data: posts} = useAsyncData('art-posts', async () => 
-await queryCollection(`art`).where('path', 'LIKE', `/art/${locale.value}/%`).order('date', 'DESC').all()
-, {watch: [locale, () => useRoute().path]});
+const localePath = useLocalePath();
+
+const { data: posts } = useAsyncData('art-posts', async () => {
+  const currentLocale = locale.value;
+
+  // Always fetch English articles as the base
+  const enPosts = await queryCollection('art')
+    .where('path', 'LIKE', `/art/en/%`)
+    .order('date', 'DESC')
+    .all();
+
+  // If we're already on English, no need for a second query
+  if (currentLocale === 'en') return enPosts;
+
+  // Fetch translated articles for the current locale
+  const localePosts = await queryCollection('art')
+    .where('path', 'LIKE', `/art/${currentLocale}/%`)
+    .order('date', 'DESC')
+    .all();
+
+  // Build a set of slugs that have a translation
+  const translatedSlugs = new Set(
+    localePosts.map((p) => p.path.replace(`/art/${currentLocale}/`, ''))
+  );
+
+  // Keep English articles that have no translation in the current locale
+  const enFallbacks = enPosts.filter(
+    (p) => !translatedSlugs.has(p.path.replace('/art/en/', ''))
+  );
+
+  // Merge: translated first, then English fallbacks, re-sorted by date
+  return [...localePosts, ...enFallbacks].sort(
+    (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
+  );
+}, { watch: [locale, () => useRoute().path] });
+
+const isFallback = (art) => art.path.startsWith('/art/en/') && locale.value !== 'en';
 </script>
 
 <template>
@@ -16,7 +50,7 @@ await queryCollection(`art`).where('path', 'LIKE', `/art/${locale.value}/%`).ord
                 <NuxtLink v-for="art in posts"
                 :key="art.slug"
                 class="selector"
-                :to="localePath(`/art/${art.slug}`)">
+                :to="isFallback(art) ? `/art/${art.slug}` : localePath(`/art/${art.slug}`)">
                     <NuxtImg
                         :src="art.thumb"
                         :alt="art.title"

frontend/content/art/ca/nozt.md

@@ -1,7 +1,7 @@
 ---
 title: Nozt
 slug: nozt
-thumb: https://cdn.aranroig.com/art/nozt/nozt-full-low.png
+thumb: https://cdn.aranroig.com/art/nozt/nozt.jpg
 ---
 
 ::art-columns
@@ -10,8 +10,8 @@ thumb: https://cdn.aranroig.com/art/nozt/nozt-full-low.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
+low-res-src: https://cdn.aranroig.com/art/nozt/nozt.jpg
+high-res-src: https://cdn.aranroig.com/art/nozt/nozt.png
 alt: My photo
 ---
 ::

frontend/content/art/en/knocking.md

@@ -0,0 +1,30 @@
+---
+title: Knocking
+slug: knocking
+thumb: https://cdn.aranroig.com/art/knocking/knocking.jpg
+---
+
+::art-columns
+
+#left
+
+::blur-image
+---
+low-res-src: https://cdn.aranroig.com/art/knocking/knocking.jpg
+high-res-src: https://cdn.aranroig.com/art/knocking/knocking.png
+alt: My photo
+---
+::
+
+This is the full resolution image
+
+#right
+## Hey
+
+I'm still working on this thing I think that it can be seen
+from the official website.
+
+Anyways I will add a serious description here of like some cool lore
+for the dragon or somehting
+
+::

frontend/content/art/en/nozt.md

@@ -1,7 +1,7 @@
 ---
 title: Nozt
 slug: nozt
-thumb: https://cdn.aranroig.com/art/nozt/nozt-full-low.png
+thumb: https://cdn.aranroig.com/art/nozt/nozt.jpg
 ---
 
 ::art-columns
@@ -10,8 +10,8 @@ thumb: https://cdn.aranroig.com/art/nozt/nozt-full-low.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
+low-res-src: https://cdn.aranroig.com/art/nozt/nozt.jpg
+high-res-src: https://cdn.aranroig.com/art/nozt/nozt.png
 alt: My photo
 ---
 ::

frontend/content/art/en/valentine.md

@@ -0,0 +1,30 @@
+---
+title: Love
+slug: valentine
+thumb: https://cdn.aranroig.com/art/valentin/valentin.jpg
+---
+
+::art-columns
+
+#left
+
+::blur-image
+---
+low-res-src: https://cdn.aranroig.com/art/valentin/valentin.jpg
+high-res-src: https://cdn.aranroig.com/art/valentin/valentin.png
+alt: My photo
+---
+::
+
+This is the full resolution image
+
+#right
+## Hey
+
+I'm still working on this thing I think that it can be seen
+from the official website.
+
+Anyways I will add a serious description here of like some cool lore
+for the dragon or somehting
+
+::

frontend/content/art/es/nozt.md

@@ -1,7 +1,7 @@
 ---
 title: Nozt
 slug: nozt
-thumb: https://cdn.aranroig.com/art/nozt/nozt-full-low.png
+thumb: https://cdn.aranroig.com/art/nozt/nozt.jpg
 ---
 
 ::art-columns
@@ -10,12 +10,13 @@ thumb: https://cdn.aranroig.com/art/nozt/nozt-full-low.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
+low-res-src: https://cdn.aranroig.com/art/nozt/nozt.jpg
+high-res-src: https://cdn.aranroig.com/art/nozt/nozt.png
 alt: My photo
 ---
 ::
 
+
 Ésta imagen tiene resolución completa siiii
 
 #right