fix: crowdin progress

website/docusaurus.config.ts

@@ -1,4 +1,4 @@
-import type {Config} from '@docusaurus/types';
+import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 import { EnumChangefreq } from 'sitemap';
 
@@ -13,10 +13,20 @@ import { TWITTER_URL } from './constants';
 import lightCodeTheme from './src/themes/prismLight';
 import darkCodeTheme from './src/themes/prismDark';
 
-import { getTranslationProgress } from './src/api/crowdin.js';
-const translationProgress = getTranslationProgress();
+import { getTranslationProgress, LanguageProgress } from './src/api/crowdin';
 
-const config: Config = {
+function localeConfig(name: string, locale: string, translationProgress: Map<string, LanguageProgress>) {
+  let languageProgress = translationProgress.get(locale);
+  return {
+    label: `${name} (${languageProgress.approvalProgress || 0}%)`,
+    direction: languageProgress.language.textDirection,
+    htmlLang: languageProgress.language.locale,
+  }
+}
+
+export default async function createConfigAsync(): Promise<Config> {
+  var translationProgress = await getTranslationProgress();
+  return {
     title: 'Task',
     tagline: 'A task runner / simpler Make alternative written in Go ',
     url: 'https://taskfile.dev',
@@ -34,54 +44,21 @@ const config: Config = {
       locales: [
         'en',
         'es-ES',
-      'fr-FR',
-      'ja-JP',
+        'fr',
+        'ja',
         'pt-BR',
-      'ru-RU',
-      'tr-TR',
+        'ru',
+        'tr',
         'zh-Hans'
       ],
       localeConfigs: {
-      en: {
-        label: 'English',
-        direction: 'ltr',
-        htmlLang: 'en-US'
-      },
-      'es-ES': {
-        label: `Español (${translationProgress['es-ES'] || 0}%)`,
-        direction: 'ltr',
-        htmlLang: 'es-ES'
-      },
-      'fr-FR': {
-        label: `Français (${translationProgress['fr'] || 0}%)`,
-        direction: 'ltr',
-        htmlLang: 'fr-FR'
-      },
-      'ja-JP': {
-        label: `日本語 (${translationProgress['ja'] || 0}%)`,
-        direction: 'ltr',
-        htmlLang: 'ja-JP'
-      },
-      'pt-BR': {
-        label: `Português (${translationProgress['pt-BR'] || 0}%)`,
-        direction: 'ltr',
-        htmlLang: 'pt-BR'
-      },
-      'ru-RU': {
-        label: `Pусский (${translationProgress['ru'] || 0}%)`,
-        direction: 'ltr',
-        htmlLang: 'ru-RU'
-      },
-      'tr-TR': {
-        label: `Türkçe (${translationProgress['tr'] || 0}%)`,
-        direction: 'ltr',
-        htmlLang: 'tr-TR'
-      },
-      'zh-Hans': {
-        label: `简体中文 (${translationProgress['zh-CN'] || 0}%)`,
-        direction: 'ltr',
-        htmlLang: 'zh-Hans'
-      }
+        'es-ES': localeConfig('Español', 'es-ES', translationProgress),
+        'fr': localeConfig('Français', 'fr', translationProgress),
+        'ja': localeConfig('日本語', 'ja', translationProgress),
+        'pt-BR': localeConfig('Português', 'pt-BR', translationProgress),
+        'ru': localeConfig('Pусский', 'ru', translationProgress),
+        'tr': localeConfig('Türkçe', 'tr', translationProgress),
+        'zh-Hans': localeConfig('简体中文', 'zh-CN', translationProgress),
       }
     },
 
@@ -272,6 +249,5 @@ const config: Config = {
         indexName: 'taskfile'
       }
     } satisfies Preset.ThemeConfig,
+  };
 };
-
-export default config;

website/src/api/crowdin.js

@@ -1,46 +0,0 @@
-const crowdin = require('@crowdin/crowdin-api-client');
-const personalToken = process.env.CROWDIN_PERSONAL_TOKEN;
-const projectId = '574591';
-
-/**
- * Initialization of crowdin client
- * @return {object} crowdin client
- */
-const initClient = () => {
-  if (!personalToken) {
-    console.warn(
-      'No crowdin personal token, some features might not work as expected'
-    );
-    return null;
-  }
-
-  return new crowdin.default({
-    token: personalToken
-  });
-};
-
-/**
- * Get translation progress
- * @return {object} translation progress
- */
-export async function getTranslationProgress() {
-  let translationProgress = {};
-  const { translationStatusApi } = initClient() || {};
-
-  if (!translationStatusApi) {
-    return translationProgress;
-  }
-
-  await translationStatusApi
-    .getProjectProgress(projectId)
-    .then((res) => {
-      res.data.forEach((item) => {
-        translationProgress[item.data.languageId] = item.data.approvalProgress;
-      });
-    })
-    .catch((err) => {
-      console.error(err);
-    });
-
-  return translationProgress;
-}

website/src/api/crowdin.ts

@@ -0,0 +1,36 @@
+import crowdin, { Credentials, TranslationStatusModel, ResponseObject, LanguagesModel, Languages } from '@crowdin/crowdin-api-client';
+
+const projectId = 574591;
+const credentials: Credentials = {
+  token: process.env.CROWDIN_PERSONAL_TOKEN,
+};
+
+// This adds the language field to LanguageProgress which is missing in the original model
+export interface LanguageProgress extends TranslationStatusModel.LanguageProgress {
+  language: LanguagesModel.Language;
+}
+
+const initClient = () => {
+  if (credentials.token === '') {
+    console.warn(
+      'No crowdin personal token, some features might not work as expected'
+    );
+    return null;
+  }
+  return new crowdin(credentials);
+};
+
+export async function getTranslationProgress(): Promise<Map<string, LanguageProgress>> {
+  var progress = new Map<string, LanguageProgress>();
+  await initClient().translationStatusApi
+    .getProjectProgress(projectId)
+    .then((res) => {
+      res.data.forEach((item: ResponseObject<LanguageProgress>) => {
+        progress.set(item.data.language.id, item.data);
+      });
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+  return progress;
+}