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/BlurhashImg.vue

@@ -0,0 +1,34 @@
+<template>
+  <canvas ref="canvas" width="32" height="32" />
+</template>
+
+<script lang="ts" setup>
+import { decode } from "blurhash";
+
+import { ref, onMounted } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    hash: string;
+    aspectRatio?: number;
+  }>(),
+  { aspectRatio: 1 }
+);
+
+const canvas = ref<HTMLCanvasElement | undefined>(undefined);
+
+onMounted(() => {
+  try {
+    if (canvas.value) {
+      const pixels = decode(props.hash, 32, 32);
+      const imageData = new ImageData(pixels, 32, 32);
+      const context = canvas.value.getContext("2d");
+      if (context) {
+        context.putImageData(imageData, 0, 0);
+      }
+    }
+  } catch (e) {
+    console.error(e);
+  }
+});
+</script>

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>

src/components/Image/LazyImageWrapper.vue

@@ -0,0 +1,52 @@
+<template>
+  <lazy-image
+    v-if="pictureOrDefault.url !== undefined"
+    :src="pictureOrDefault.url"
+    :width="pictureOrDefault.metadata.width"
+    :height="pictureOrDefault.metadata.height"
+    :blurhash="pictureOrDefault.metadata.blurhash"
+    :rounded="rounded"
+  />
+</template>
+<script lang="ts" setup>
+import { computed } from "vue";
+import { IMedia } from "@/types/media.model";
+import LazyImage from "../Image/LazyImage.vue";
+
+const DEFAULT_CARD_URL = "/img/mobilizon_default_card.png";
+const DEFAULT_BLURHASH = "MCHKI4El-P-U}+={R-WWoes,Iu-P=?R,xD";
+const DEFAULT_WIDTH = 630;
+const DEFAULT_HEIGHT = 350;
+const DEFAULT_PICTURE = {
+  url: DEFAULT_CARD_URL,
+  metadata: {
+    width: DEFAULT_WIDTH,
+    height: DEFAULT_HEIGHT,
+    blurhash: DEFAULT_BLURHASH,
+  },
+};
+
+const props = withDefaults(
+  defineProps<{
+    picture?: IMedia | null;
+    rounded?: boolean;
+  }>(),
+  {
+    rounded: false,
+  }
+);
+
+const pictureOrDefault = computed(() => {
+  if (props.picture === null) {
+    return DEFAULT_PICTURE;
+  }
+  return {
+    url: props?.picture?.url,
+    metadata: {
+      width: props?.picture?.metadata?.width,
+      height: props?.picture?.metadata?.height,
+      blurhash: props?.picture?.metadata?.blurhash,
+    },
+  };
+});
+</script>