Migrate to Vue 3 and Vite

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

js/src/components/Home/CategoriesPreview.story.vue

@@ -0,0 +1,16 @@
+<template>
+  <Story :setup-app="setupApp">
+    <Variant>
+      <CategoriesPreview />
+    </Variant>
+  </Story>
+</template>
+<script lang="ts" setup>
+import { apolloClient } from "@/vue-apollo";
+import { DefaultApolloClient } from "@vue/apollo-composable";
+import CategoriesPreview from "./CategoriesPreview.vue";
+
+function setupApp({ app }) {
+  app.provide(DefaultApolloClient, apolloClient);
+}
+</script>

js/src/components/Home/CategoriesPreview.vue

@@ -0,0 +1,68 @@
+<template>
+  <section
+    class="mx-auto container flex flex-wrap items-center justify-center gap-3 md:gap-5 my-3"
+  >
+    <CategoryCard
+      v-for="category in promotedCategories"
+      :key="category.key"
+      :category="category"
+      :with-details="false"
+    />
+    <router-link :to="{ name: RouteName.CATEGORIES }">
+      <div
+        class="flex items-end brightness-85 h-36 w-36 md:h-52 md:w-52 rounded-lg font-semibold text-lg md:text-xl p-4 text-white bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500"
+      >
+        <span>
+          {{ t("View all categories") }}
+        </span>
+      </div>
+    </router-link>
+  </section>
+</template>
+<script lang="ts" setup>
+import { useQuery } from "@vue/apollo-composable";
+import { computed } from "vue";
+import CategoryCard from "../Categories/CategoryCard.vue";
+import RouteName from "@/router/name";
+import { CategoryStatsModel } from "@/types/stats.model";
+import { CATEGORY_STATISTICS } from "@/graphql/statistics";
+import { useI18n } from "vue-i18n";
+import shuffle from "lodash/shuffle";
+import { categoriesWithPictures } from "../Categories/constants";
+import { IConfig } from "@/types/config.model";
+import { CONFIG } from "@/graphql/config";
+
+const { t } = useI18n({ useScope: "global" });
+
+const { result: categoryStatsResult } = useQuery<{
+  categoryStatistics: CategoryStatsModel[];
+}>(CATEGORY_STATISTICS);
+const categoryStats = computed(
+  () => categoryStatsResult.value?.categoryStatistics ?? []
+);
+
+const { result: configResult } = useQuery<{ config: IConfig }>(CONFIG);
+
+const config = computed(() => configResult.value?.config);
+
+const eventCategories = computed(() => config.value?.eventCategories ?? []);
+
+const eventCategoryLabel = (categoryId: string): string | undefined => {
+  return eventCategories.value.find(({ id }) => categoryId == id)?.label;
+};
+
+const promotedCategories = computed((): CategoryStatsModel[] => {
+  return shuffle(
+    categoryStats.value.filter(
+      ({ key, number }) =>
+        key !== "MEETING" && number >= 1 && categoriesWithPictures.includes(key)
+    )
+  )
+    .map(({ key, number }) => ({
+      key,
+      number,
+      label: eventCategoryLabel(key),
+    }))
+    .slice(0, 10);
+});
+</script>

js/src/components/Home/MobilizonPresentation.story.vue

@@ -0,0 +1,10 @@
+<template>
+  <Story>
+    <Variant>
+      <MobilizonPresentation />
+    </Variant>
+  </Story>
+</template>
+<script lang="ts" setup>
+import MobilizonPresentation from "./MobilizonPresentation.vue";
+</script>

js/src/components/Home/MobilizonPresentation.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="container mx-auto py-4 px-2">
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
+      <div>
+        <h3 class="dark:text-white text-3xl font-bold">
+          {{ t("A practical tool") }}
+        </h3>
+        <p
+          class="dark:text-white"
+          v-html="
+            t(
+              'Mobilizon is a tool that helps you <b>find, create and organise events</b>.'
+            )
+          "
+        />
+      </div>
+      <div>
+        <h3 class="dark:text-white text-3xl font-bold">
+          {{ t("An ethical alternative") }}
+        </h3>
+        <p
+          class="dark:text-white"
+          v-html="
+            t(
+              'Ethical alternative to Facebook events, groups and pages, Mobilizon is a <b>tool designed to serve you</b>. Period.'
+            )
+          "
+        />
+      </div>
+      <div>
+        <h3 class="dark:text-white text-3xl font-bold">
+          {{ t("A federated software") }}
+        </h3>
+        <p
+          class="dark:text-white"
+          v-html="
+            t(
+              'Mobilizon is not a giant platform, but a <b>multitude of interconnected Mobilizon websites</b>.'
+            )
+          "
+        />
+      </div>
+    </div>
+    <div class="mt-4 text-center">
+      <o-button
+        variant="primary"
+        size="large"
+        tag="a"
+        href="https://joinmobilizon.org"
+        >{{ t("Learn more about Mobilizon") }}</o-button
+      >
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n({ useScope: "global" });
+</script>

js/src/components/Home/SearchFields.story.vue

@@ -0,0 +1,22 @@
+<template>
+  <Story :setup-app="setupApp">
+    <Variant>
+      <SearchFields
+        :search="''"
+        :location="{}"
+        @update:location="hstEvent('update location', $event)"
+        @update:search="hstEvent('update search', $event)"
+      />
+    </Variant>
+  </Story>
+</template>
+<script lang="ts" setup>
+import { apolloClient } from "@/vue-apollo";
+import { DefaultApolloClient } from "@vue/apollo-composable";
+import SearchFields from "./SearchFields.vue";
+import { hstEvent } from "histoire/client";
+
+function setupApp({ app }) {
+  app.provide(DefaultApolloClient, apolloClient);
+}
+</script>

js/src/components/Home/SearchFields.vue

@@ -0,0 +1,72 @@
+<template>
+  <form
+    id="search-anchor"
+    class="container mx-auto my-3 px-2 flex flex-wrap flex-col sm:flex-row items-stretch gap-2 text-center items-center justify-center dark:text-slate-100"
+    role="search"
+    @submit.prevent="emit('submit')"
+  >
+    <o-input
+      class="flex-1"
+      v-model="search"
+      :placeholder="t('Keyword, event title, group name, etc.')"
+      autofocus
+      autocapitalize="off"
+      autocomplete="off"
+      autocorrect="off"
+      maxlength="1024"
+    />
+    <full-address-auto-complete
+      :type="AddressSearchType.ADMINISTRATIVE"
+      :doGeoLocation="false"
+      v-model="location"
+    />
+    <o-button type="submit" icon-left="magnify">
+      <template v-if="search">{{ t("Go!") }}</template>
+      <template v-else>{{ t("Explore!") }}</template>
+    </o-button>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import { IAddress } from "@/types/address.model";
+import { AddressSearchType } from "@/types/enums";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import FullAddressAutoComplete from "../Event/FullAddressAutoComplete.vue";
+
+const props = defineProps<{
+  location: IAddress;
+  search: string;
+}>();
+
+const emit = defineEmits<{
+  (event: "update:location", location: IAddress): void;
+  (event: "update:search", newSearch: string): void;
+  (event: "submit"): void;
+}>();
+
+const location = computed({
+  get(): IAddress {
+    return props.location;
+  },
+  set(newLocation: IAddress) {
+    emit("update:location", newLocation);
+  },
+});
+
+const search = computed({
+  get(): string {
+    return props.search;
+  },
+  set(newSearch: string) {
+    emit("update:search", newSearch);
+  },
+});
+
+const { t } = useI18n({ useScope: "global" });
+</script>
+<style scoped>
+#search-anchor :deep(.o-ctrl-input) {
+  flex: 1;
+}
+</style>

js/src/components/Home/UnloggedIntroduction.story.vue

@@ -0,0 +1,19 @@
+<template>
+  <Story :setup-app="setupApp">
+    <Variant :title="'Open'">
+      <UnloggedIntroduction />
+    </Variant>
+    <Variant :title="'Closed'">
+      <UnloggedIntroduction />
+    </Variant>
+  </Story>
+</template>
+<script lang="ts" setup>
+import { apolloClient } from "@/vue-apollo";
+import { DefaultApolloClient } from "@vue/apollo-composable";
+import UnloggedIntroduction from "./UnloggedIntroduction.vue";
+
+function setupApp({ app }) {
+  app.provide(DefaultApolloClient, apolloClient);
+}
+</script>

js/src/components/Home/UnloggedIntroduction.vue

@@ -0,0 +1,52 @@
+<template>
+  <section v-if="config" class="container mx-auto px-2 my-3">
+    <h1 class="dark:text-white font-bold">
+      {{ config.slogan || t("Gather ⋅ Organize ⋅ Mobilize") }}
+    </h1>
+    <i18n-t
+      keypath="Join {instance}, a Mobilizon instance"
+      tag="p"
+      class="dark:text-white"
+    >
+      <template #instance>
+        <b>{{ config.name }}</b>
+      </template>
+    </i18n-t>
+    <p class="dark:text-white mb-2">{{ config.description }}</p>
+    <!-- We don't invite to find other instances yet -->
+    <!-- <p v-if="!config.registrationsOpen">
+              {{ t("This instance isn't opened to registrations, but you can register on other instances.") }}
+          </p>-->
+    <div class="flex flex-wrap gap-2 items-center">
+      <o-button
+        variant="primary"
+        tag="router-link"
+        :to="{ name: RouteName.REGISTER }"
+        v-if="config.registrationsOpen"
+        >{{ t("Create an account") }}</o-button
+      >
+      <!-- We don't invite to find other instances yet -->
+      <!-- <o-button v-else type="is-link" tag="a" href="https://joinmastodon.org">{{ t('Find an instance') }}</o-button> -->
+      <router-link
+        :to="{ name: RouteName.ABOUT }"
+        class="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-violet-title focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
+      >
+        {{ t("Learn more about {instance}", { instance: config.name }) }}
+      </router-link>
+    </div>
+  </section>
+</template>
+<script lang="ts" setup>
+import { CONFIG } from "@/graphql/config";
+import { IConfig } from "@/types/config.model";
+import { useQuery } from "@vue/apollo-composable";
+import { computed } from "vue";
+import RouteName from "@/router/name";
+import { useI18n } from "vue-i18n";
+
+const { result: configResult } = useQuery<{ config: IConfig }>(CONFIG);
+
+const config = computed(() => configResult.value?.config);
+
+const { t } = useI18n({ useScope: "global" });
+</script>