feat(website): add translation progress (#2113)

* feat(website): add translation progress

* feat(website): add French and Portuguese to language list

Co-authored-by: Lea Anthony <lea.anthony@gmail.com>

website/docusaurus.config.js

@@ -4,8 +4,11 @@
 const lightCodeTheme = require("prism-react-renderer/themes/github");
 const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 
-/** @type {import('@docusaurus/types').Config} */
-const config = {
+const { getTranslationProgress } = require("./src/api/crowdin.js");
+
+module.exports = async function configCreatorAsync() {
+  const translationProgress = await getTranslationProgress();
+  return {
     title: "Wails",
     tagline: "",
     url: "https://wails.io",
@@ -18,24 +21,24 @@ const config = {
 
     webpack: {
       jsLoader: (isServer) => ({
-      loader: require.resolve('swc-loader'),
+        loader: require.resolve("swc-loader"),
         options: {
           jsc: {
             parser: {
-            syntax: 'typescript',
+              syntax: "typescript",
               tsx: true,
             },
-          target: 'es2017',
+            target: "es2017",
           },
           module: {
-          type: isServer ? 'commonjs' : 'es6',
+            type: isServer ? "commonjs" : "es6",
           },
         },
       }),
     },
     i18n: {
       defaultLocale: "en",
-    locales: ["en", "zh-Hans", "ja"],
+      locales: ["en", "zh-Hans", "ja", "ru", "ko", "fr", "pt"],
       localeConfigs: {
         en: {
           label: "English",
@@ -43,25 +46,35 @@ const config = {
           htmlLang: "en-US",
         },
         "zh-Hans": {
-        label: "简体中文",
+          label: `简体中文 (${translationProgress["zh-CN"]}%)`,
           direction: "ltr",
           htmlLang: "zh-Hans",
         },
         ja: {
-        label: "日本語",
+          label: `日本語 (${translationProgress["ja"]}%)`,
           direction: "ltr",
           htmlLang: "ja-JP",
         },
         ru: {
-        label: "Русский",
+          label: `Русский (${translationProgress["ru"]}%)`,
           direction: "ltr",
           htmlLang: "ru-RU",
         },
         ko: {
-        label: "한국어",
+          label: `한국어 (${translationProgress["ko"]}%)`,
           direction: "ltr",
           htmlLang: "ko-KR",
         },
+        fr: {
+          label: `Français (${translationProgress["fr"]}%)`,
+          direction: "ltr",
+          htmlLang: "fr",
+        },
+        pt: {
+          label: `Português (${translationProgress["pt-PT"]}%)`,
+          direction: "ltr",
+          htmlLang: "pt-PT",
+        },
       },
     },
     plugins: [],
@@ -78,7 +91,8 @@ const config = {
           blog: {
             showReadingTime: true,
             // Please change this to your repo.
-          editUrl: "https://github.com/wailsapp/wails/edit/master/website/blog",
+            editUrl:
+              "https://github.com/wailsapp/wails/edit/master/website/blog",
           },
           theme: {
             customCss: [
@@ -257,5 +271,4 @@ const config = {
         },
       }),
   };
-
-module.exports = config;
+};

website/package.json

@@ -16,6 +16,7 @@
     "crowdin:sync": "docusaurus write-translations && crowdin upload && crowdin download"
   },
   "dependencies": {
+    "@crowdin/crowdin-api-client": "^1.19.2",
     "@docusaurus/core": "^2.1.0",
     "@docusaurus/preset-classic": "^2.1.0",
     "@docusaurus/theme-search-algolia": "^2.1.0",

website/src/api/crowdin.js

@@ -0,0 +1,22 @@
+const crowdin = require("@crowdin/crowdin-api-client");
+
+// initialization of crowdin client
+const { translationStatusApi } = new crowdin.default({
+  token: process.env.CROWDIN_PERSONAL_TOKEN,
+});
+
+async function getTranslationProgress() {
+  let translationProgress = {};
+
+  await translationStatusApi.getProjectProgress(531392).then((res) => {
+    for (const item of res.data) {
+      translationProgress[item.data.languageId] = item.data.approvalProgress;
+    }
+  });
+
+  return translationProgress;
+}
+
+module.exports = {
+  getTranslationProgress,
+};