[apisix-website] branch master updated: feat: redirect blog pages when switching languages (#1007)

[yi...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

yilinzeng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/apisix-website.git


The following commit(s) were added to refs/heads/master by this push:
     new 3c1f741bfaa feat: redirect blog pages when switching languages (#1007)
3c1f741bfaa is described below

commit 3c1f741bfaaa5644c9b22f3c270caf1ee223a3a0
Author: SkyeYoung <is...@outlook.com>
AuthorDate: Thu Apr 7 10:43:08 2022 +0800

    feat: redirect blog pages when switching languages (#1007)
---
 website/docusaurus.config.js                   |  5 ++-
 website/src/clientModules/amend-lang-switch.js | 47 ++++++++++++++++++++++++++
 website/src/clientModules/lang-redirect.js     | 20 ++++++++---
 3 files changed, 66 insertions(+), 6 deletions(-)

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index b6a6af9be7e..f1494236b44 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -440,5 +440,8 @@ module.exports = {
    * See ssrTemplate -> jsDelivr
   */
   ssrTemplate,
-  clientModules: [require.resolve('./src/clientModules/lang-redirect.js')],
+  clientModules: [
+    require.resolve('./src/clientModules/lang-redirect.js'),
+    require.resolve('./src/clientModules/amend-lang-switch.js'),
+  ],
 };
diff --git a/website/src/clientModules/amend-lang-switch.js b/website/src/clientModules/amend-lang-switch.js
new file mode 100644
index 00000000000..12d2c82ad08
--- /dev/null
+++ b/website/src/clientModules/amend-lang-switch.js
@@ -0,0 +1,47 @@
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+(() => {
+  // dev mode
+  if (process.env.NODE_ENV === 'development') return;
+  // not in browser
+  if (!ExecutionEnvironment.canUseDOM) return;
+
+  function amendLangSwitch() {
+    const lct = window.location;
+    const pathArr = lct.pathname.split('/');
+
+    const dropdowns = document.querySelectorAll('div.navbar__items > div.dropdown.dropdown--right');
+    const langDropdown = dropdowns[dropdowns.length - 1];
+    const barOption = langDropdown.querySelector('a');
+
+    if (pathArr.includes('blog') && !barOption.textContent.endsWith('Blog')) {
+      barOption.textContent += ' Blog';
+      const optionList = langDropdown.querySelectorAll('li > a');
+      optionList.forEach((item) => {
+      // eslint-disable-next-line no-param-reassign
+        item.textContent += ' Blog';
+      });
+    }
+  }
+
+  // because of SPA, if the location changed (in site, no redirect),
+  // the above click event will also be cleared
+  // doc https://docusaurus.io/docs/docusaurus-core#redirect=
+  // and https://reactrouter.com/docs/en/v6/getting-started/concepts#history=
+  // were browsed, but not fix the problem
+  // now, the solution is observing the head.title
+  // the code inspired by https://stackoverflow.com/a/29540461
+  function rebindWhenTitleChanged() {
+    new MutationObserver(amendLangSwitch)
+      .observe(document.querySelector('#__docusaurus'), {
+        subtree: true,
+        characterData: true,
+        childList: true,
+      });
+  }
+
+  window.addEventListener('load', () => {
+    amendLangSwitch();
+    rebindWhenTitleChanged();
+  });
+})();
diff --git a/website/src/clientModules/lang-redirect.js b/website/src/clientModules/lang-redirect.js
index f51d3acba56..d3a8e400b2f 100644
--- a/website/src/clientModules/lang-redirect.js
+++ b/website/src/clientModules/lang-redirect.js
@@ -79,7 +79,14 @@ import config from '../../docusaurus.config';
       }
       // all ''
       if (pathArr.at(-1) === pathArr.at(-2)) pathArr.pop();
-      lct.replace(lct.origin + pathArr.join('/'));
+
+      // blog page: redirect to index
+      if (pathArr.includes('blog')) {
+        lct.replace(lct.origin + pathArr.slice(0, pathArr.indexOf('blog') + 1).join('/'));
+      } else {
+        // other pages
+        lct.replace(lct.origin + pathArr.join('/'));
+      }
     }
   }
 
@@ -91,8 +98,8 @@ import config from '../../docusaurus.config';
         'click',
         (e) => {
           e.preventDefault();
-
-          const lang = localeLabelMap[e.target.textContent] || defaultLang;
+          const targetLang = e.target.getAttribute('href').split('/')[1];
+          const lang = langArr.includes(targetLang) ? targetLang : defaultLang;
           if (localStorage.getItem(storeKey) !== lang) {
             localStorage.setItem(storeKey, lang);
           }
@@ -110,15 +117,18 @@ import config from '../../docusaurus.config';
   // now, the solution is observing the head.title
   // the code inspired by https://stackoverflow.com/a/29540461
   function rebindWhenTitleChanged() {
+    const lct = window.location;
+    const pathArr = lct.pathname.split('/');
+    const ele = document.querySelector(pathArr.includes('blog') ? '#__docusaurus' : 'title');
     new MutationObserver(bindEventToLangSwitch)
-      .observe(document.querySelector('title'), {
+      .observe(ele, {
         subtree: true,
         characterData: true,
         childList: true,
       });
   }
 
+  redirect();
   bindEventToLangSwitch();
   rebindWhenTitleChanged();
-  redirect();
 })();