Various bug fixes (#102)

* feat: set lang in html head

* fix: add # in front of git ref

* fix: remove unused vars from example env

* fix: package name and license field

* fix: enable sourcemap for client and server

* fix: emojis not showing in prod

this is extremely cursed, but it works

* chore: refactor auth manager

* feat: disable invitations if simple auth disabled

* feat: add drop version to footer

* feat: translate auth endpoints

* chore: move oidc module

* feat: add weekly tasks

enabled object cleanup as weekly task

* feat: add timestamp to task log msgs

* feat: add guard to prevent invalid progress %

* fix: add missing global scope to i18n components

* feat: set base url for i18n

* feat: switch task log to json format

* ci: run ci on develop branch only

* fix: UserWidget text not updating #109

* fix: EXTERNAL_URL being computed at build

* feat: add basic language outlines for translation

* feat: add more english dialects

components/EmojiText.vue

@@ -9,9 +9,7 @@ const props = defineProps<{
   emoji: string;
 }>();
 
-const emojiEl = ref<HTMLElement | null>(null);
-
 const url = computed(() => {
-  return `/api/v1/emojis/${twemoji.convert.toCodePoint(props.emoji)}.svg`;
+  return `/twemoji/${twemoji.convert.toCodePoint(props.emoji)}.svg`;
 });
 </script>

components/LanguageSelector.vue

@@ -9,9 +9,10 @@
           class="grid w-full cursor-default grid-cols-1 rounded-md bg-zinc-900 py-1.5 pr-2 pl-3 text-left text-zinc-300 outline-1 -outline-offset-1 outline-zinc-700 focus:outline-2 focus:-outline-offset-2 focus:outline-blue-600 sm:text-sm/6"
         >
           <span class="col-start-1 row-start-1 flex items-center gap-3 pr-6">
-            <span alt="" class="-mt-0.5 shrink-0 rounded-full">{{
-              localeToEmoji(wiredLocale)
-            }}</span>
+            <EmojiText
+              :emoji="localeToEmoji(wiredLocale)"
+              class="-mt-0.5 shrink-0 max-w-6"
+            />
             <span class="block truncate">{{
               currentLocaleInformation?.name ?? wiredLocale
             }}</span>
@@ -46,9 +47,10 @@
                 ]"
               >
                 <div class="flex items-center">
-                  <span class="-mt-0.5 shrink-0 rounded-full">
-                    {{ localeToEmoji(listLocale.code) }}
-                  </span>
+                  <EmojiText
+                    :emoji="localeToEmoji(listLocale.code)"
+                    class="-mt-0.5 shrink-0 max-w-6"
+                  />
                   <span
                     :class="[
                       selected ? 'font-semibold' : 'font-normal',
@@ -106,21 +108,50 @@ import {
 } from "@headlessui/vue";
 import { ChevronUpDownIcon } from "@heroicons/vue/16/solid";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
+import type { Locale } from "vue-i18n";
 
-const { locales, locale, setLocale } = useI18n();
+const { locales, locale: currLocale, setLocale } = useI18n();
+
+function changeLocale(locale: Locale) {
+  setLocale(locale);
+
+  // dynamically update the HTML attributes for language and direction
+  // this is necessary for proper rendering of the page in the new language
+  useHead({
+    htmlAttrs: {
+      lang: locale,
+      dir: locales.value.find((l) => l.code === locale)?.dir || "ltr",
+    },
+  });
+}
 
 function localeToEmoji(local: string): string {
   switch (local) {
+    // Default locale
     case "en":
-    case "en-gb":
-    case "en-ca":
-    case "en-au":
-    case "en-us": {
+    case "en-us":
       return "🇺🇸";
-    }
-    case "en-pirate": {
+
+    case "en-gb":
+      return "🇬🇧";
+    case "en-ca":
+      return "🇨🇦";
+    case "en-au":
+      return "🇦🇺";
+    case "en-pirate":
       return "🏴‍☠️";
-    }
+    case "fr":
+      return "🇫🇷";
+    case "de":
+      return "🇩🇪";
+    case "es":
+      return "🇪🇸";
+    case "it":
+      return "🇮🇹";
+    case "zh":
+      return "🇨🇳";
+    case "zh-tw":
+      return "🇹🇼";
 
     default: {
       return "❓";
@@ -130,10 +161,10 @@ function localeToEmoji(local: string): string {
 
 const wiredLocale = computed({
   get() {
-    return locale.value;
+    return currLocale.value;
   },
   set(v) {
-    setLocale(v);
+    changeLocale(v);
   },
 });
 const currentLocaleInformation = computed(() =>

components/UserFooter.vue

@@ -2,6 +2,7 @@
   <footer class="bg-zinc-950" aria-labelledby="footer-heading">
     <h2 id="footer-heading" class="sr-only">{{ $t("footer.footer") }}</h2>
     <div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8">
+      <!-- Drop Info -->
       <div class="xl:grid xl:grid-cols-3 xl:gap-8">
         <div class="space-y-8">
           <DropWordmark class="h-10" />
@@ -24,6 +25,8 @@
             </NuxtLink>
           </div>
         </div>
+
+        <!-- Foot links -->
         <div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
           <div class="md:grid md:grid-cols-2 md:gap-8">
             <div>
@@ -86,6 +89,21 @@
             </div>
           </div>
         </div>
+
+        <div class="flex items-center justify-center xl:col-span-3 mt-8">
+          <p
+            class="text-xs text-zinc-700 hover:text-zinc-400 transition-colors duration-200 cursor-default select-none"
+          >
+            <i18n-t keypath="footer.version" tag="p" scope="global">
+              <template #version>
+                <span>{{ versionInfo.version }}</span>
+              </template>
+              <template #gitRef>
+                <span>{{ versionInfo.gitRef }}</span>
+              </template>
+            </i18n-t>
+          </p>
+        </div>
       </div>
     </div>
   </footer>
@@ -96,6 +114,8 @@ import { IconsDiscordLogo, IconsGithubLogo } from "#components";
 
 const { t } = useI18n();
 
+const versionInfo = await $dropFetch("/api/v1");
+
 const navigation = {
   games: [
     { name: t("store.recentlyAdded"), href: "#" },

components/UserHeader/UserWidget.vue

@@ -85,20 +85,21 @@ import { useObject } from "~/composables/objects";
 import type { NavigationItem } from "~/composables/types";
 
 const user = useUser();
-const { t } = useI18n();
 
-const navigation: NavigationItem[] = [
-  user.value?.admin
-    ? {
-        label: t("userHeader.profile.admin"),
-        route: "/admin",
-        prefix: "",
-      }
-    : undefined,
-  {
-    label: t("userHeader.profile.settings"),
-    route: "/account",
-    prefix: "",
-  },
-].filter((e) => e !== undefined);
+const navigation = computed<NavigationItem[]>(() =>
+  [
+    user.value?.admin
+      ? {
+          label: $t("userHeader.profile.admin"),
+          route: "/admin",
+          prefix: "",
+        }
+      : undefined,
+    {
+      label: $t("userHeader.profile.settings"),
+      route: "/account",
+      prefix: "",
+    },
+  ].filter((e) => e !== undefined),
+);
 </script>