feat: reimplement crowdin (closes #687)

HangarMC · May 9, 2024 · 6b3bff2 · 6b3bff2
1 parent ae67393
commit 6b3bff2
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 43 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -90,18 +90,18 @@ jobs:
           DEBUG: "hangar:*"
         run: (cd frontend && pnpm lint:eslint)
 
-      # - name: Sync forth and back with crowdin
-      #   uses: crowdin/[email protected]
-      #   with:
-      #     upload_sources: true
-      #     download_translations: true
-      #     push_translations: false
-      #     create_pull_request: false
-      #     skip_untranslated_strings: true
-      #     config: 'crowdin.yml'
-      #     crowdin_branch_name: master
-      #   env:
-      #     CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
+      - name: Sync forth and back with crowdin
+        uses: crowdin/[email protected]
+        with:
+          upload_sources: true
+          download_translations: true
+          push_translations: false
+          create_pull_request: false
+          skip_untranslated_strings: true
+          config: 'crowdin.yml'
+          crowdin_branch_name: master
+        env:
+          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}
 
       - name: Build frontend
         env:

diff --git a/README.md b/README.md
@@ -1,4 +1,9 @@
 # Hangar - Paper's Plugin Repository
+[![Crowdin](https://badges.crowdin.net/e/b13e6a1c05002365ee9031712112bd63/localized.svg)](https://hangar.crowdin.com/hangar)
+[![Discord](https://img.shields.io/discord/855123416889163777?)](https://discord.gg/zvrAEbvJ4a)
+![GitHub License](https://img.shields.io/github/license/hangarmc/hangar)
+[![Swagger Validator](https://img.shields.io/swagger/valid/3.0?specUrl=https%3A%2F%2Fhangar.papermc.io%2Fv3%2Fapi-docs%2Fpublic)](https://hangar.papermc.io/api-docs)
+[![BrowserStack Status](https://automate.browserstack.com/badge.svg?badge_key=OHFacEE0WmlHRldDajYrZFdsZUtDOFZBcmUyR1VWdWlUaStlQWJYS0xZVT0tLWRKODJVblZQblczRXMvejNQTGhEZ1E9PQ==--54e7c90dad3680579c945ff532d63909156aa024)](https://automate.browserstack.com/public-build/OHFacEE0WmlHRldDajYrZFdsZUtDOFZBcmUyR1VWdWlUaStlQWJYS0xZVT0tLWRKODJVblZQblczRXMvejNQTGhEZ1E9PQ==--54e7c90dad3680579c945ff532d63909156aa024)
 
 This is the repository for Hangar, a plugin repository used for Paper, Velocity, and Waterfall plugins and similar software.
 

diff --git a/crowdin.yml b/crowdin.yml
@@ -5,5 +5,5 @@ api_token_env: CROWDIN_PERSONAL_TOKEN
 preserve_hierarchy: true
 
 files:
-  - source: /frontend/locales/en.ts
-    translation: /frontend/locales/%two_letters_code%.ts
+  - source: /frontend/src/i18n/locales/en.json
+    translation: /frontend/src/i18n/locales/%two_letters_code%.ts
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
@@ -74,11 +74,16 @@ export default defineNuxtConfig({
         file: "en.json",
         name: "English",
       },
-      // {
-      //   code: "de",
-      //   file: "de.json",
-      //   name: "Deutsch",
-      // },
+      {
+        code: "de",
+        file: "de.json",
+        name: "Deutsch",
+      },
+      {
+        code: "dum",
+        file: "dum.json",
+        name: "in-context editing",
+      },
     ],
     compilation: {
       jit: false,

diff --git a/frontend/src/composables/useSeo.ts b/frontend/src/composables/useSeo.ts
@@ -44,12 +44,26 @@ export function useSeo(
       }),
       key: "breadcrumb",
     },
-  ];
+  ] as UseHeadInput["script"];
 
   if (additionalScripts) {
     script.push(...additionalScripts);
   }
 
+  if (useI18n().locale.value === "dum") {
+    console.log("found crowdin language activated, lets inject the script");
+    script.push(
+      {
+        type: "text/javascript",
+        children: "var _jipt = []; _jipt.push(['project', '0cbf58a3d76226e92659632533015495']); _jipt.push(['domain', 'hangar']);",
+      },
+      {
+        type: "text/javascript",
+        src: "https://cdn.crowdin.com/jipt/jipt.js",
+      }
+    );
+  }
+
   const seo = {
     title,
     link: [
@@ -65,21 +79,6 @@ export function useSeo(
     script,
   } as UseHeadInput;
 
-  // todo renenable crowdin integration
-  // if (context.app.i18n.locale === 'dum') {
-  //     console.log('found crowdin language activated, lets inject the script');
-  //     seo.script = seo.script ? seo.script : [];
-  //     seo.script.push({
-  //         type: 'text/javascript',
-  //         innerHTML: 'var _jipt = []; _jipt.push([\'project\', \'0cbf58a3d76226e92659632533015495\']); _jipt.push([\'domain\', \'hangar\']);'
-  //     });
-  //     seo.script.push({
-  //         type: 'text/javascript',
-  //         src: 'https://cdn.crowdin.com/jipt/jipt.js'
-  //     });
-  //     seo.__dangerouslyDisableSanitizers = ['script'];
-  // }
-
   return seo;
 }
 

diff --git a/frontend/src/composables/useSettingsHelper.ts b/frontend/src/composables/useSettingsHelper.ts
@@ -6,10 +6,11 @@ export function useSettingsHelper(
   ssr: boolean,
   userData: ComputedRef<{ hasUser: boolean; theme?: string; language?: string }>,
   getThemeCookie: () => string | undefined | null,
-  setLocale: (locale: string) => void,
   setTheme: (dark: boolean) => void,
   saveSettings: () => Promise<void>,
-  darkMode: Ref<boolean>
+  darkMode: Ref<boolean>,
+  locale: Ref<string>,
+  i18n: ReturnType<typeof useI18n>
 ) {
   function loadSettingsServer(event: H3Event) {
     if (!ssr) return;
@@ -55,7 +56,7 @@ export function useSettingsHelper(
       }
     }
 
-    setLocale(newLocale);
+    locale.value = newLocale;
     setTheme(theme === "dark");
   }
 
@@ -64,6 +65,15 @@ export function useSettingsHelper(
     await saveSettings();
   });
 
+  watch(locale, async (newLocale) => {
+    if (!newLocale) return;
+    i18n.locale.value = newLocale;
+    await i18n.loadLocaleMessages(newLocale);
+
+    if (ssr) return;
+    await saveSettings();
+  });
+
   function loadSettingsClient() {
     if (ssr) return;
     let darkMode: boolean;

diff --git a/frontend/src/pages/auth/settings/other.vue b/frontend/src/pages/auth/settings/other.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-const { t } = useI18n();
+const i18n = useI18n();
+const settings = useSettingsStore();
 
 const accentColors = [
   { value: "blue", text: "Blue" },
@@ -22,12 +23,20 @@ const accentColors = [
   { value: "gray", text: "Gray" },
 ];
 const accentColor = useAccentColor();
+
+const languages = (useRuntimeConfig().public.i18n.configLocales as { code: string; name: string }[]).map((locale) => ({
+  value: locale.code,
+  text: locale.name,
+}));
 </script>
 
 <template>
   <div>
-    <PageTitle>{{ t("auth.settings.misc.header") }}</PageTitle>
+    <PageTitle>{{ i18n.t("auth.settings.misc.header") }}</PageTitle>
     <Alert type="warning" class="mb-4">The accent colors are mostly untested and full of contrast issues, proceed with caution!</Alert>
-    <InputSelect v-model="accentColor" :values="accentColors" :label="t('auth.settings.misc.accentColor')" />
+    <InputSelect v-model="accentColor" :values="accentColors" :label="i18n.t('auth.settings.misc.accentColor')" />
+
+    <Alert type="warning" class="my-4">Translations are experimental!</Alert>
+    <InputSelect v-model="settings.locale" :values="languages" :label="i18n.t('auth.settings.misc.language')" />
   </div>
 </template>
diff --git a/frontend/src/store/settings.ts b/frontend/src/store/settings.ts
@@ -59,10 +59,11 @@ export const useSettingsStore = defineStore("settings", () => {
     import.meta.env.SSR,
     userData,
     () => useCookie("HANGAR_theme").value,
-    (loc) => (locale.value = loc),
     (dark) => (darkMode.value = dark),
     saveSettings,
-    darkMode
+    darkMode,
+    locale,
+    useNuxtApp().$i18n
   );
 
   function setupMobile() {

diff --git a/frontend/src/types/globals.d.ts b/frontend/src/types/globals.d.ts
@@ -1,6 +1,14 @@
+import "vue-i18n";
+import en from "@/i18n/locales/en.json";
+
 declare global {
   interface Window {
     hangarLoaded?: boolean;
     hangarDebug?: Record<string, Function<void, any>>;
   }
 }
+
+type MainTranslations = typeof en;
+declare module "vue-i18n" {
+  export interface DefineLocaleMessage extends MainTranslations {}
+}