i18n Support and Task improvements (#80)

* fix: release workflow

* feat: move mostly to internal tasks system

* feat: migrate object clean to new task system

* fix: release not  getting good base version

* chore: set version v0.3.0

* chore: style

* feat: basic task concurrency

* feat: temp pages to fill in page links

* feat: inital i18n support

* feat: localize store page

* chore: style

* fix: weblate doesn't like multifile thing

* fix: update nuxt

* feat: improved error logging

* fix: using old task api

* feat: basic translation docs

* feat: add i18n eslint plugin

* feat: translate store and auth pages

* feat: more translation progress

* feat: admin dash i18n progress

* feat: enable update check by default in prod

* fix: using wrong i18n keys

* fix: crash in library sources page

* feat: finish i18n work

* fix: missing i18n translations

* feat: use twemoji for emojis

* feat: sanatize object ids

* fix: EmojiText's alt text

* fix: UserWidget not using links

* feat: cache and auth for emoji api

* fix: add more missing translations

pages/store/[id]/index.vue

@@ -44,7 +44,7 @@
             type="button"
             class="inline-flex items-center gap-x-2 rounded-md bg-zinc-800 px-3 py-1 text-sm font-semibold font-display text-white shadow-sm hover:bg-zinc-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 duration-200 hover:scale-105 active:scale-95"
           >
-            Open in Admin Dashboard
+            {{ $t("store.openAdminDashboard") }}
             <ArrowTopRightOnSquareIcon
               class="-mr-0.5 h-7 w-7 p-1"
               aria-hidden="true"
@@ -56,19 +56,19 @@
                 <td
                   class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
                 >
-                  Released
+                  {{ $t("store.released") }}
                 </td>
                 <td class="whitespace-nowrap px-3 py-4 text-sm text-zinc-400">
-                  {{
-                    DateTime.fromISO(game.mReleased).toFormat("d MMMM, yyyy")
-                  }}
+                  <time datetime="game.mReleased">
+                    {{ $d(new Date(game.mReleased), "short") }}
+                  </time>
                 </td>
               </tr>
               <tr>
                 <td
                   class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
                 >
-                  Platform(s)
+                  {{ $t("store.platform", platforms.length) }}
                 </td>
                 <td
                   class="whitespace-nowrap inline-flex gap-x-4 px-3 py-4 text-sm text-zinc-400"
@@ -82,7 +82,7 @@
                   <span
                     v-if="platforms.length == 0"
                     class="font-semibold text-blue-600"
-                    >coming soon</span
+                    >{{ $t("store.commingSoon") }}</span
                   >
                 </td>
               </tr>
@@ -90,7 +90,7 @@
                 <td
                   class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-zinc-100 sm:pl-3"
                 >
-                  Rating
+                  {{ $t("store.rating") }}
                 </td>
                 <td
                   class="whitespace-nowrap flex flex-row items-center gap-x-1 px-3 py-4 text-sm text-zinc-400"
@@ -103,9 +103,9 @@
                       'w-4 h-4',
                     ]"
                   />
-                  <span class="text-zinc-600"
-                    >({{ rating._sum.mReviewCount ?? 0 }} reviews)</span
-                  >
+                  <span class="text-zinc-600">{{
+                    $t("store.reviews", [rating._sum.mReviewCount ?? 0])
+                  }}</span>
                 </td>
               </tr>
             </tbody>
@@ -131,7 +131,7 @@
                 <div
                   class="h-48 lg:h-96 aspect-[1/2] flex items-center justify-center text-zinc-700 font-bold font-display"
                 >
-                  No images
+                  {{ $t("store.noImages") }}
                 </div>
               </VueSlide>
 
@@ -162,7 +162,9 @@
               <div class="grow h-[1px] bg-zinc-700 rounded-full" />
               <span
                 class="uppercase text-sm font-semibold font-display text-zinc-600"
-                >Click to read {{ showPreview ? "more" : "less" }}</span
+                >{{
+                  showPreview ? $t("store.readMore") : $t("store.readLess")
+                }}</span
               >
               <div class="grow h-[1px] bg-zinc-700 rounded-full" />
             </button>
@@ -177,7 +179,6 @@
 import { ArrowTopRightOnSquareIcon } from "@heroicons/vue/24/outline";
 import { StarIcon } from "@heroicons/vue/24/solid";
 import { micromark } from "micromark";
-import { DateTime } from "luxon";
 import type { PlatformClient } from "~/composables/types";
 
 const route = useRoute();

pages/store/index.vue

@@ -1,5 +1,9 @@
 <template>
   <div class="w-full flex flex-col overflow-x-hidden">
+    <DevOnly
+      ><h1 class="text-gray-100">{{ $t("welcome") }}</h1>
+    </DevOnly>
+
     <!-- Hero section -->
     <VueCarousel
       v-if="recent.length > 0"
@@ -24,7 +28,7 @@
           >
             <div class="relative text-center">
               <h3 class="text-base/7 font-semibold text-blue-300">
-                Recently added
+                {{ $t("store.recentlyAdded") }}
               </h3>
               <h2
                 class="text-3xl font-bold tracking-tight text-white sm:text-5xl"
@@ -41,7 +45,7 @@
                   <NuxtLink
                     :href="`/store/${game.id}`"
                     class="block w-full rounded-md border border-transparent bg-white px-8 py-3 text-base font-medium text-gray-900 hover:bg-gray-100 sm:w-auto duration-200 hover:scale-105"
-                    >Check it out</NuxtLink
+                    >{{ $t("store.lookAt") }}</NuxtLink
                   >
                   <AddLibraryButton :game-id="game.id" />
                 </div>
@@ -62,18 +66,22 @@
       <h2
         class="uppercase text-xl font-bold tracking-tight text-zinc-700 sm:text-3xl"
       >
-        no game
+        {{ $t("store.noGame") }}
       </h2>
     </div>
 
     <!-- new releases -->
     <div class="px-4 sm:px-12 py-4">
       <h1 class="text-zinc-100 text-2xl font-bold font-display">
-        Recently released
+        {{ $t("store.recentlyReleased") }}
       </h1>
-      <NuxtLink class="text-blue-600 font-semibold"
-        >Explore more &rarr;</NuxtLink
-      >
+      <NuxtLink class="text-blue-600 font-semibold">
+        <i18n-t keypath="store.exploreMore" tag="span">
+          <template #arrow>
+            <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+          </template>
+        </i18n-t>
+      </NuxtLink>
       <div class="mt-4">
         <GameCarousel :items="released" :min="12" />
       </div>
@@ -82,11 +90,15 @@
     <!-- recently updated -->
     <div class="px-4 sm:px-12 py-4" hydrate-on-visible>
       <h1 class="text-zinc-100 text-2xl font-bold font-display">
-        Recently updated
+        {{ $t("store.recentlyUpdated") }}
       </h1>
-      <NuxtLink class="text-blue-600 font-semibold"
-        >Explore more &rarr;</NuxtLink
-      >
+      <NuxtLink class="text-blue-600 font-semibold">
+        <i18n-t keypath="store.exploreMore" tag="span">
+          <template #arrow>
+            <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+          </template>
+        </i18n-t>
+      </NuxtLink>
       <div class="mt-4">
         <GameCarousel :items="updated" :min="12" />
       </div>
@@ -102,7 +114,9 @@ const released = await $dropFetch("/api/v1/store/released");
 // const developers = await $dropFetch("/api/v1/store/developers");
 // const publishers = await $dropFetch("/api/v1/store/publishers");
 
+const { t } = useI18n();
+
 useHead({
-  title: "Store",
+  title: t("store.title"),
 });
 </script>