Drop-OSS · DecDuck · Jun 4, 2025 · May 29, 2025 · May 30, 2025 · May 30, 2025
diff --git a/.github/workflows/release.yml b/.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 }}
diff --git a/.vscode/extensions.json b/.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"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -17,5 +17,20 @@
     "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)}"
+  ],
+  "i18n-ally.extract.ignoredByFiles": {
+    "pages/admin/library/sources/index.vue": ["Filesystem"],
+    "components/NewsArticleCreateButton.vue": ["[", "`", "Enter"]
+  }
 }
diff --git a/CONTRIBUTING.md b/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/)

diff --git a/components/AccountSidebar.vue b/components/AccountSidebar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex grow flex-col gap-y-5 overflow-y-auto px-6 py-4">
     <span class="inline-flex items-center gap-x-2 font-semibold text-zinc-100">
-      <UserIcon class="size-5" /> Account Settings
+      <UserIcon class="size-5" /> {{ $t("account.settings") }}
     </span>
     <nav class="flex flex-1 flex-col">
       <ul role="list" class="flex flex-1 flex-col gap-y-7">
@@ -50,30 +50,31 @@ import { UserIcon } from "@heroicons/vue/24/solid";
 import type { Component } from "vue";
 
 const notifications = useNotifications();
+const { t } = useI18n();
 
 const navigation: (NavigationItem & { icon: Component; count?: number })[] = [
-  { label: "Home", route: "/account", icon: HomeIcon, prefix: "/account" },
+  { label: t("home"), route: "/account", icon: HomeIcon, prefix: "/account" },
   {
-    label: "Security",
+    label: t("security"),
     route: "/account/security",
     prefix: "/account/security",
     icon: LockClosedIcon,
   },
   {
-    label: "Devices",
+    label: t("account.devices.title"),
     route: "/account/devices",
     prefix: "/account/devices",
     icon: DevicePhoneMobileIcon,
   },
   {
-    label: "Notifications",
+    label: t("account.notifications.notifications"),
     route: "/account/notifications",
     prefix: "/account/notifications",
     icon: BellIcon,
     count: notifications.value.length,
   },
   {
-    label: "Settings",
+    label: t("settings"),
     route: "/account/settings",
     prefix: "/account/settings",
     icon: WrenchScrewdriverIcon,

diff --git a/components/AddLibraryButton.vue b/components/AddLibraryButton.vue
@@ -8,7 +8,7 @@
       class="transition w-full inline-flex items-center justify-center h-full gap-x-2 rounded-none rounded-l-md bg-white/10 hover:bg-white/20 text-zinc-100 backdrop-blur px-5 py-3 active:scale-95"
       @click="() => toggleLibrary()"
     >
-      {{ inLibrary ? "In Library" : "Add to Library" }}
+      {{ inLibrary ? $t("library.inLib") : $t("library.addToLib") }}
       <CheckIcon v-if="inLibrary" class="-mr-0.5 h-5 w-5" aria-hidden="true" />
       <PlusIcon v-else class="-mr-0.5 h-5 w-5" aria-hidden="true" />
     </LoadingButton>
@@ -36,7 +36,7 @@
             <div
               class="font-display uppercase px-3 py-2 text-sm font-semibold text-zinc-500"
             >
-              Collections
+              {{ $t("library.collection.collections") }}
             </div>
             <div
               class="flex flex-col gap-y-2 py-1 max-h-[150px] overflow-y-auto"
@@ -45,7 +45,7 @@
                 v-if="collections.length === 0"
                 class="px-3 py-2 text-sm text-zinc-500"
               >
-                No collections
+                {{ $t("library.collection.noCollections") }}
               </div>
               <MenuItem
                 v-for="(collection, collectionIdx) in collections"
@@ -75,7 +75,7 @@
                 @click="createCollectionModal = true"
               >
                 <PlusIcon class="mr-2 h-4 w-4" />
-                Add to new collection
+                {{ $t("library.collection.addToNew") }}
               </LoadingButton>
             </div>
           </div>
@@ -100,6 +100,7 @@ const props = defineProps<{
 
 const isLibraryLoading = ref(false);
 
+const { t } = useI18n();
 const createCollectionModal = ref(false);
 const collections = await useCollections();
 const library = await useLibrary();
@@ -127,9 +128,11 @@ async function toggleLibrary() {
     createModal(
       ModalType.Notification,
       {
-        title: "Failed to add game to library",
-        // @ts-expect-error attempt to display statusMessage on error
-        description: `Drop couldn't add this game to your library: ${e?.statusMessage}`,
+        title: t("errors.library.add.title"),
+        description: t("errors.library.add.desc", [
+          // @ts-expect-error attempt to display statusMessage on error
+          e?.statusMessage ?? t("errors.unknown"),
+        ]),
       },
       (_, c) => c(),
     );
@@ -156,9 +159,11 @@ async function toggleCollection(id: string) {
     createModal(
       ModalType.Notification,
       {
-        title: "Failed to add game to library",
-        // @ts-expect-error attempt to display statusMessage on error
-        description: `Drop couldn't add this game to your library: ${e?.statusMessage}`,
+        title: t("errors.library.add.title"),
+        description: t("errors.library.add.desc", [
+          // @ts-expect-error attempt to display statusMessage on error
+          e?.statusMessage ?? t("errors.unknown"),
+        ]),
       },
       (_, c) => c(),
     );

diff --git a/components/Auth/OpenID.vue b/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 &rarr;
+      <i18n-t keypath="auth.signin.externalProvider" tag="span" scope="global">
+        <template #arrow>
+          <span aria-hidden="true">{{ $t("chars.arrow") }}</span>
+        </template>
+      </i18n-t>
     </a>
   </div>
 </template>

diff --git a/components/Auth/Simple.vue b/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(() => {

diff --git a/components/CreateCollectionModal.vue b/components/CreateCollectionModal.vue
@@ -3,19 +3,18 @@
     <template #default>
       <div>
         <DialogTitle as="h3" class="text-lg font-medium leading-6 text-white">
-          Create collection
+          {{ $t("library.collection.create") }}
         </DialogTitle>
         <p class="mt-1 text-zinc-400 text-sm">
-          Collections can used to organise your games and find them more easily,
-          especially if you have a large library.
+          {{ $t("library.collection.createDesc") }}
         </p>
       </div>
       <div class="mt-2">
         <form @submit.prevent="() => createCollection()">
           <input
             v-model="collectionName"
             type="text"
-            placeholder="Collection name"
+            :placeholder="$t('library.collection.namePlaceholder')"
             class="block w-full rounded-md border-0 bg-zinc-800 py-1.5 text-white shadow-sm ring-1 ring-inset ring-zinc-700 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
           />
           <button class="hidden" type="submit" />
@@ -30,15 +29,15 @@
         class="w-full sm:w-fit"
         @click="() => createCollection()"
       >
-        Create
+        {{ $t("create") }}
       </LoadingButton>
       <button
         ref="cancelButtonRef"
         type="button"
         class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-800 hover:bg-zinc-900 sm:mt-0 sm:w-auto"
         @click="() => close()"
       >
-        Cancel
+        {{ $t("cancel") }}
       </button>
     </template>
   </ModalTemplate>
@@ -60,6 +59,7 @@ const emit = defineEmits<{
 
 const open = defineModel<boolean>({ required: true });
 
+const { t } = useI18n();
 const collectionName = ref("");
 const createCollectionLoading = ref(false);
 const collections = await useCollections();
@@ -101,8 +101,10 @@ async function createCollection() {
     createModal(
       ModalType.Notification,
       {
-        title: "Failed to create collection",
-        description: `Drop couldn't create your collection: ${err?.statusMessage}`,
+        title: t("errors.library.collection.create.title"),
+        description: t("errors.library.collection.create.desc", [
+          err?.statusMessage ?? t("errors.unknown"),
+        ]),
       },
       (_, c) => c(),
     );