build: switch from yarn to npm to manage js dependencies and move js contents to root

yarn v1 is being deprecated and starts to have some issues

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

src/components/Image/LazyImage.vue

@@ -0,0 +1,88 @@
+<template>
+  <div ref="wrapper" class="flex-1" v-bind="$attrs">
+    <div class="h-full w-full max-w-100 min-h-[10rem]">
+      <!-- Show the placeholder as background -->
+      <blurhash-img
+        v-if="blurhash"
+        :hash="blurhash"
+        :aspect-ratio="height / width"
+        class="transition-opacity duration-500"
+        :class="blurhashOpacity"
+      />
+
+      <!-- Show the real image on the top and fade in after loading -->
+      <img
+        ref="image"
+        class="transition-opacity duration-500 rounded-lg object-cover mx-auto h-full"
+        :class="imageOpacity"
+        alt=""
+        src=""
+        loading="lazy"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BlurhashImg from "./BlurhashImg.vue";
+
+import { computed, ref, onMounted, onUnmounted, watchEffect } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    src: string;
+    blurhash?: string | null;
+    width?: number;
+    height?: number;
+    rounded?: boolean;
+  }>(),
+  { blurhash: null, width: 100, height: 100, rounded: false }
+);
+
+const isLoaded = ref(false);
+const observer = ref<IntersectionObserver | null>(null);
+
+const wrapper = ref<HTMLElement | null>(null);
+const image = ref<HTMLImageElement | null>(null);
+
+const src = computed(() => props.src);
+
+const isIntersecting = ref(false);
+
+const blurhashOpacity = computed(() =>
+  isLoaded.value ? "opacity-0 hidden" : "opacity-100"
+);
+
+const imageOpacity = computed(() =>
+  isLoaded.value ? "opacity-100" : "opacity-0"
+);
+
+onMounted(() => {
+  observer.value = new IntersectionObserver((entries) => {
+    isIntersecting.value = entries[0].isIntersecting;
+  });
+
+  if (wrapper.value) {
+    observer.value.observe(wrapper.value);
+  }
+});
+
+onUnmounted(() => {
+  if (observer.value) {
+    observer.value.disconnect();
+  }
+});
+
+watchEffect(() => {
+  // Image is visible (means: has entered the viewport),
+  // so start loading by setting the src attribute
+  if (image.value) {
+    image.value.src = src.value;
+
+    image.value.onload = () => {
+      // Image is loaded, so start fading in
+      isLoaded.value = true;
+    };
+  }
+});
+</script>