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

@@ -0,0 +1,115 @@
+<template>
+  <footer
+    class="bg-violet-2 color-secondary flex flex-col items-center py-2 px-3"
+    ref="footer"
+  >
+    <picture class="flex max-w-xl">
+      <source
+        :srcset="`/img/pics/footer_${random}-1024w.webp 1x, /img/pics/footer_${random}-1920w.webp 2x`"
+        type="image/webp"
+      />
+      <img
+        :src="`/img/pics/footer_${random}-1024w.webp`"
+        alt=""
+        width="1024"
+        height="428"
+        loading="lazy"
+      />
+    </picture>
+    <ul
+      class="inline-flex flex-wrap justify-around gap-3 text-lg text-white underline decoration-yellow-1"
+    >
+      <li>
+        <o-select
+          class="text-black dark:text-white"
+          :aria-label="t('Language')"
+          v-model="locale"
+          :placeholder="t('Select a language')"
+        >
+          <option
+            v-for="(language, lang) in langs"
+            :value="lang"
+            :key="lang"
+            :selected="isLangSelected(lang)"
+          >
+            {{ language }}
+          </option>
+        </o-select>
+      </li>
+      <li>
+        <router-link :to="{ name: RouteName.ABOUT }">{{
+          t("About")
+        }}</router-link>
+      </li>
+      <li>
+        <router-link :to="{ name: RouteName.TERMS }">{{
+          t("Terms")
+        }}</router-link>
+      </li>
+      <li>
+        <a
+          rel="external"
+          hreflang="en"
+          href="https://framagit.org/framasoft/mobilizon/blob/main/LICENSE"
+        >
+          {{ t("License") }}
+        </a>
+      </li>
+      <li>
+        <a href="#navbar">{{ t("Back to top") }}</a>
+      </li>
+    </ul>
+    <div class="text-center flex-1 pt-2 text-yellow-1">
+      <i18n-t
+        tag="span"
+        keypath="Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}."
+      >
+        <template #mobilizon>
+          <a
+            rel="external"
+            class="text-white underline decoration-yellow-1"
+            href="https://joinmobilizon.org"
+            >{{ t("Mobilizon") }}</a
+          >
+        </template>
+        <template #date
+          ><span>{{ new Date().getFullYear() }}</span></template
+        >
+        <template #contributors>
+          <a
+            rel="external"
+            class="text-white underline decoration-yellow-1"
+            href="https://joinmobilizon.org/hall-of-fame"
+            >{{ t("more than 1360 contributors") }}</a
+          >
+        </template>
+      </i18n-t>
+    </div>
+  </footer>
+</template>
+<script setup lang="ts">
+import { saveLocaleData } from "@/utils/auth";
+import { loadLanguageAsync } from "@/utils/i18n";
+import RouteName from "../router/name";
+import langs from "../i18n/langs.json";
+import { computed, watch } from "vue";
+import { useI18n } from "vue-i18n";
+
+const { locale, t } = useI18n({ useScope: "global" });
+
+const random = computed((): number => {
+  return Math.floor(Math.random() * 4) + 1;
+});
+
+watch(locale, async () => {
+  if (locale) {
+    console.debug("Setting locale from footer");
+    await loadLanguageAsync(locale.value as string);
+    saveLocaleData(locale.value as string);
+  }
+});
+
+const isLangSelected = (lang: string): boolean => {
+  return lang === locale.value;
+};
+</script>