fix: delayed hydration improvements

.gitignore

@@ -15,3 +15,5 @@ assets/img/projects/.DS_Store
 
 **/**.DS_Store
 **/.DS_Store
+
+.unlighthouse

components/content/ProseImg.vue

@@ -1,37 +1,49 @@
 <template>
-    <figure class="block my-6">
-        <img :src="refinedSrc" :alt="alt" :width="width" :height="height" class="mx-auto"/>
-        <figcaption class="text-base leading-base text-center mt-2 opacity-70 block">{{ alt }}</figcaption>    
-    </figure>
+  <figure class="block my-6">
+    <NuxtImg
+      :src="refinedSrc"
+      :alt="alt"
+      :width="width"
+      :height="height"
+      class="mx-auto"
+      loading="lazy"
+      sizes="450px md:650px lg:1080px"
+    />
+    <figcaption
+      class="text-base leading-base text-center mt-2 opacity-70 block"
+    >
+      {{ alt }}
+    </figcaption>
+  </figure>
 </template>
 
 <script setup lang="ts">
 import { withBase } from 'ufo';
 import { useRuntimeConfig, computed } from '#imports';
 
 const props = defineProps({
-    src: {
-        type: String,
-        default: ''
-    },
-    alt: {
-        type: String,
-        default: ''
-    },
-    width: {
-        type: [String, Number],
-        default: undefined
-    },
-    height: {
-        type: [String, Number],
-        default: undefined
-    }
+  src: {
+    type: String,
+    default: '',
+  },
+  alt: {
+    type: String,
+    default: '',
+  },
+  width: {
+    type: [String, Number],
+    default: undefined,
+  },
+  height: {
+    type: [String, Number],
+    default: undefined,
+  },
 });
 
 const refinedSrc = computed(() => {
-    if (props.src?.startsWith('/') && !props.src.startsWith('//')) {
-        return withBase(props.src, useRuntimeConfig().app.baseURL);
-    }
-    return props.src;
+  if (props.src?.startsWith('/') && !props.src.startsWith('//')) {
+    return withBase(props.src, useRuntimeConfig().app.baseURL);
+  }
+  return props.src;
 });
 </script>

components/films/item.vue

@@ -11,6 +11,7 @@
       :src="movie.img"
       :alt="`Poster for ${movie.title}.`"
       loading="lazy"
+      class="w-full"
     />
     <div
       class="absolute bottom-0 left-0 w-full bg-brand_primary_light text-typography_primary_dark dark:bg-brand_primary_dark dark:text-typography_primary_light px-2 py-1 movie-info translate-y-full transform transition-transform duration-200 group-hover:translate-y-0"

nuxt.config.ts

@@ -76,7 +76,7 @@ export default defineNuxtConfig({
     'nuxt-delay-hydration',
   ],
   delayHydration: {
-    mode: 'init',
+    mode: 'manual',
     debug: process.env.NODE_ENV === 'development',
   },
   colorMode: {

pages/index.vue

@@ -8,12 +8,18 @@
     <SectionsPassion />
     <SectionsProjects />
     <ClientOnly>
-      <LazySectionsGithubSummary />
+      <DelayHydration>
+        <HydrationStatus />
+        <LazySectionsGithubSummary />
+      </DelayHydration>
     </ClientOnly>
     <SectionsProjectsExtended />
     <SectionsContact />
     <ClientOnly>
-      <LazySectionsFilms />
+      <DelayHydration>
+        <HydrationStatus />
+        <LazySectionsFilms />
+      </DelayHydration>
     </ClientOnly>
   </main>
 </template>