i18n Support and Task improvements

.github/workflows/release.yml

@@ -23,32 +23,23 @@ jobs:
           fetch-tags: true
           token: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Get base tag
-        id: get_base_tag
+      - name: Determine final version
+        id: get_final_ver
         run: |
-          git fetch --tags
-
-          TAG=$(git describe --tags --abbrev=0 2>/dev/null || echo "v0.0.0")
-          echo "Using base tag: $TAG"
-          echo "base_tag=$TAG" >> $GITHUB_OUTPUT
-
-      - name: Determine final tag
-        id: get_final_tag
-        run: |
-          BASE_TAG=${{ steps.get_base_tag.outputs.base_tag }}
+          BASE_VER=v$(jq -r '.version' package.json)
           TODAY=$(date +'%Y.%m.%d')
 
           echo "Today will be: $TODAY"
           echo "today=$TODAY" >> $GITHUB_OUTPUT
 
           if [[ "${{ github.event_name }}" == "release" ]]; then
-            FINAL_TAG="$BASE_TAG"
+            FINAL_VER="$BASE_VER"
           else
-            FINAL_TAG="${BASE_TAG}-nightly.$TODAY"
+            FINAL_VER="${BASE_VER}-nightly.$TODAY"
           fi
 
-          echo "Drop's release tag will be: $FINAL_TAG"
-          echo "final_tag=$FINAL_TAG" >> $GITHUB_OUTPUT
+          echo "Drop's release tag will be: $FINAL_VER"
+          echo "final_ver=$FINAL_VER" >> $GITHUB_OUTPUT
 
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3
@@ -74,7 +65,7 @@ jobs:
             ghcr.io/drop-OSS/drop
           tags: |
             type=schedule,pattern=nightly
-            type=schedule,pattern=nightly.${{ steps.get_final_tag.outputs.today }}
+            type=schedule,pattern=nightly.${{ steps.get_final_ver.outputs.today }}
             type=semver,pattern=v{{version}}
             type=semver,pattern=v{{major}}.{{minor}}
             type=semver,pattern=v{{major}}
@@ -98,4 +89,4 @@ jobs:
           cache-from: type=gha
           cache-to: type=gha,mode=max
           build-args: |
-            BUILD_DROP_VERSION=${{ steps.get_final_tag.outputs.final_tag }}
+            BUILD_DROP_VERSION=${{ steps.get_final_ver.outputs.final_ver }}

.vscode/extensions.json

@@ -0,0 +1,12 @@
+{
+  "recommendations": [
+    "lokalise.i18n-ally",
+    "esbenp.prettier-vscode",
+    "Prisma.prisma",
+    "bradlc.vscode-tailwindcss",
+    "Vue.volar",
+    "arktypeio.arkdark",
+    "EditorConfig.EditorConfig",
+    "dbaeumer.vscode-eslint"
+  ]
+}

.vscode/settings.json

@@ -17,5 +17,16 @@
     "strings": "on"
   },
   // prioritize ArkType's "type" for autoimports
-  "typescript.preferences.autoImportSpecifierExcludeRegexes": ["^(node:)?os$"]
+  "typescript.preferences.autoImportSpecifierExcludeRegexes": ["^(node:)?os$"],
+  // i18n Ally settings
+  "i18n-ally.sortKeys": true,
+  "i18n-ally.keepFulfilled": true,
+  "i18n-ally.extract.autoDetect": true,
+  "i18n-ally.localesPaths": ["i18n", "i18n/locales"],
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.extract.ignored": [
+    "string >= 14",
+    "string.alphanumeric >= 5",
+    "/api/v1/admin/import/version/preload?id=${encodeURIComponent(\n      gameId,\n    )}&version=${encodeURIComponent(version)}"
+  ]
 }

CONTRIBUTING.md

@@ -130,6 +130,10 @@ and [create an issue](#reporting-issues) or [submit a PR](#submitting-pull-reque
 
 ---
 
+## Translation
+
+If you want to help translate Drop, we would love to have your help! You can do so on our weblate instance. Please make sure to read the [message format syntax](https://vue-i18n.intlify.dev/guide/essentials/syntax.html) page before starting. Failure to do so may result in your translations causing errors in Drop.
+
 ## Commit Guidelines
 
 Drop uses the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)

components/Auth/OpenID.vue

@@ -4,7 +4,11 @@
       :href="`/auth/oidc?redirect=${route.query.redirect ?? '/'}`"
       class="transition rounded-md grow inline-flex items-center justify-center bg-white/10 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-white/20"
     >
-      Sign in with external provider →
+      <i18n-t keypath="auth.signin.externalProvider" tag="span">
+        <template #arrow>
+          <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+        </template>
+      </i18n-t>
     </a>
   </div>
 </template>

components/Auth/Simple.vue

@@ -4,7 +4,7 @@
       <label
         for="username"
         class="block text-sm font-medium leading-6 text-zinc-300"
-        >Username</label
+        >{{ $t("auth.username") }}</label
       >
       <div class="mt-2">
         <input
@@ -23,7 +23,7 @@
       <label
         for="password"
         class="block text-sm font-medium leading-6 text-zinc-300"
-        >Password</label
+        >{{ $t("auth.password") }}</label
       >
       <div class="mt-2">
         <input
@@ -50,19 +50,23 @@
         <label
           for="remember-me"
           class="ml-3 block text-sm leading-6 text-zinc-400"
-          >Remember me</label
+          >{{ $t("auth.signin.rememberMe") }}</label
         >
       </div>
 
       <div class="text-sm leading-6">
-        <NuxtLink to="#" class="font-semibold text-blue-600 hover:text-blue-500"
-          >Forgot password?</NuxtLink
+        <NuxtLink
+          to="#"
+          class="font-semibold text-blue-600 hover:text-blue-500"
+          >{{ $t("auth.signin.forgot") }}</NuxtLink
         >
       </div>
     </div>
 
     <div>
-      <LoadingButton class="w-full" :loading="loading"> Sign in</LoadingButton>
+      <LoadingButton class="w-full" :loading="loading">{{
+        $t("auth.signin.signin")
+      }}</LoadingButton>
     </div>
 
     <div v-if="error" class="mt-1 rounded-md bg-red-600/10 p-4">
@@ -93,6 +97,7 @@ const error = ref<string | undefined>();
 
 const route = useRoute();
 const router = useRouter();
+const { t } = useI18n();
 
 function signin_wrapper() {
   loading.value = true;
@@ -101,7 +106,7 @@ function signin_wrapper() {
       router.push(route.query.redirect?.toString() ?? "/");
     })
     .catch((response) => {
-      const message = response.statusMessage || "An unknown error occurred";
+      const message = response.statusMessage || t("errors.unknown");
       error.value = message;
     })
     .finally(() => {

components/UserHeader.vue

@@ -54,6 +54,7 @@
             </transition>
           </Menu>
         </li>
+        <UserHeaderSelectLang />
         <UserHeaderUserWidget />
       </ol>
     </div>
@@ -76,7 +77,7 @@
           class="-m-2.5 p-2.5 text-zinc-400 lg:hidden"
           @click="sidebarOpen = true"
         >
-          <span class="sr-only">Open sidebar</span>
+          <span class="sr-only">{{ $t("userHeader.openSidebar") }}</span>
           <Bars3Icon class="h-6 w-6" aria-hidden="true" />
         </button>
       </div>
@@ -125,7 +126,9 @@
                   class="-m-2.5 p-2.5"
                   @click="sidebarOpen = false"
                 >
-                  <span class="sr-only">Close sidebar</span>
+                  <span class="sr-only">{{
+                    $t("userHeader.closeSidebar")
+                  }}</span>
                   <XMarkIcon class="h-6 w-6 text-zinc-400" aria-hidden="true" />
                 </button>
               </div>
@@ -172,6 +175,11 @@
                       <BellIcon class="h-5" />
                     </UserHeaderWidget>
                   </li>
+                  <li class="w-full">
+                    <UserHeaderWidget class="w-full">
+                      <UserHeaderSelectLang />
+                    </UserHeaderWidget>
+                  </li>
                 </div>
               </nav>
             </div>
@@ -198,28 +206,29 @@ import { Bars3Icon } from "@heroicons/vue/24/outline";
 import { XMarkIcon } from "@heroicons/vue/24/solid";
 
 const router = useRouter();
+const { t } = useI18n();
 
 const homepageURL = "/store";
 const navigation: Array<NavigationItem> = [
   {
     prefix: "/store",
     route: "/store",
-    label: "Store",
+    label: t("store.title"),
   },
   {
     prefix: "/library",
     route: "/library",
-    label: "Library",
+    label: t("userHeader.links.library"),
   },
   {
     prefix: "/community",
     route: "/community",
-    label: "Community",
+    label: t("userHeader.links.community"),
   },
   {
     prefix: "/news",
     route: "/news",
-    label: "News",
+    label: t("userHeader.links.news"),
   },
 ];
 

components/UserHeader/NotificationWidgetPanel.vue

@@ -6,7 +6,7 @@
       >
         <div class="ml-4 mt-2">
           <h3 class="text-base font-semibold text-zinc-100 text-sm">
-            Unread notifications
+            {{ $t("userHeader.notifications.unread") }}
           </h3>
         </div>
         <div class="ml-4 mt-2 shrink-0">
@@ -15,7 +15,11 @@
             type="button"
             class="text-sm text-zinc-400"
           >
-            View all &rarr;
+            <i18n-t keypath="userHeader.notifications.all" tag="span">
+              <template #arrow>
+                <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+              </template>
+            </i18n-t>
           </NuxtLink>
         </div>
       </div>
@@ -32,7 +36,7 @@
       v-if="props.notifications.length == 0"
       class="text-sm text-zinc-400 p-3 text-center w-full"
     >
-      No notifications
+      {{ $t("userHeader.notifications.none") }}
     </div>
   </PanelWidget>
 </template>

components/UserHeader/SelectLang.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
+import { ChevronDownIcon } from "@heroicons/vue/16/solid";
+import localToEmoji from "~/utils/localToEmoji";
+// import TwemojiText from "../TwemojiText.server.vue";
+
+const { locales, locale: currLocale, setLocale } = useI18n();
+</script>
+
+<template>
+  <Menu as="div" class="relative inline-block">
+    <MenuButton>
+      <UserHeaderWidget>
+        <div class="inline-flex items-center text-zinc-300 hover:text-white">
+          <!-- <TwemojiText
+            class="w-5 h-5 rounded-sm"
+            :text="localToEmoji(currLocale)"
+          /> -->
+          {{ localToEmoji(currLocale) }}
+          <!-- <span class="ml-2 text-sm font-bold">{{ locale }}</span> -->
+          <ChevronDownIcon class="ml-3 h-4" />
+        </div>
+      </UserHeaderWidget>
+    </MenuButton>
+
+    <transition
+      enter-active-class="transition ease-out duration-100"
+      enter-from-class="transform opacity-0 scale-95"
+      enter-to-class="transform opacity-100 scale-100"
+      leave-active-class="transition ease-in duration-75"
+      leave-from-class="transform opacity-100 scale-100"
+      leave-to-class="transform opacity-0 scale-95"
+    >
+      <MenuItems
+        class="absolute right-0 top-10 z-50 w-56 origin-top-right focus:outline-none shadow-md"
+      >
+        <PanelWidget class="flex-col gap-y-2">
+          <div class="flex flex-col">
+            <MenuItem
+              v-for="locale in locales"
+              :key="locale.code"
+              hydrate-on-visible
+              as="div"
+            >
+              <button @click="setLocale(locale.code)">
+                {{ localToEmoji(locale.code) }}
+                {{ locale.name }}
+              </button>
+            </MenuItem>
+          </div>
+        </PanelWidget>
+      </MenuItems>
+    </transition>
+  </Menu>
+  <!-- <div>
+    <button
+      v-for="locale in locales"
+      :key="locale.code"
+      @click="setLocale(locale.code)"
+    >
+      {{ locale.name }}
+    </button>
+  </div> -->
+</template>

components/UserHeader/UserWidget.vue

@@ -67,7 +67,7 @@
                 ]"
                 href="/auth/signout"
               >
-                Signout
+                {{ $t("auth.signout") }}
               </a>
             </MenuItem>
           </div>
@@ -84,17 +84,18 @@ import { useObject } from "~/composables/objects";
 import type { NavigationItem } from "~/composables/types";
 
 const user = useUser();
+const { t } = useI18n();
 
 const navigation: NavigationItem[] = [
   user.value?.admin
     ? {
-        label: "Admin Dashboard",
+        label: t("userHeader.profile.admin"),
         route: "/admin",
         prefix: "",
       }
     : undefined,
   {
-    label: "Account settings",
+    label: t("userHeader.profile.settings"),
     route: "/account",
     prefix: "",
   },

error.vue

@@ -12,8 +12,8 @@ const route = useRoute();
 const user = useUser();
 const statusCode = props.error?.statusCode;
 const message =
-  props.error?.statusMessage ||
   props.error?.message ||
+  props.error?.statusMessage ||
   "An unknown error occurred.";
 const showSignIn = statusCode ? statusCode == 403 || statusCode == 401 : false;
 
@@ -64,6 +64,7 @@ if (import.meta.client) {
           this to be a bug, please report it. Try signing in and see if it
           resolves the issue.
         </p>
+        <!-- <p>{{ error. }}</p> -->
         <div class="mt-10">
           <!-- full app reload to fix errors -->
           <NuxtLink