add a language switcher

Author: hide212131

docusaurus.config.ts

@@ -41,7 +41,15 @@ const config: Config = {
   // may want to replace "en" with "zh-Hans".
   i18n: {
     defaultLocale: 'ja',
-    locales: ['ja'],
+    locales: ['ja', 'en'],
+    localeConfigs: {
+      en: {
+        label: 'English',
+      },
+      ja: {
+        label: '日本語',        
+      },
+    },
   },
 
   presets: [
@@ -136,6 +144,10 @@ const config: Config = {
           label: 'JDL Studio',
           position: 'right',
         },
+        {
+          type: 'localeDropdown',
+          position: 'right',
+        },        
       ],
     },
     prism: {
@@ -178,6 +190,13 @@ const config: Config = {
       }),
     },
   ],
+
+  scripts: [
+    {
+      src: '/redirect.js',
+      async: true,
+    },
+  ],
 };
 
 export default config;

redirects.config.ts

@@ -201,7 +201,7 @@ const redirectsPlugin = [
       {
         from: '/tips.html',
         to: '/tips/',
-      },
+      },    
     ],
   },
 ];

src/redirect.ts

@@ -0,0 +1,9 @@
+// https://docusaurus.io/docs/api/docusaurus-config#i18n
+// workaround for 'baseUrl—customization of base URL is a work-in-progress.'
+export default function onRouteUpdate({ location }) {
+  const prefix = '/jp/en/';
+  if (location.pathname.startsWith(prefix)) {
+    const newPath = location.pathname.replace(prefix, '/');
+    window.location.replace(newPath);
+  }
+}

src/theme/Navbar/Layout/index.tsx

@@ -10,6 +10,7 @@ import NavbarMobileSidebar from '@theme/Navbar/MobileSidebar';
 import type { Props } from '@theme/Navbar/Layout';
 
 import styles from './styles.module.scss';
+import onRouteUpdate from '../../../redirect';
 
 function NavbarBackdrop(props: ComponentProps<'div'>) {
   return (
@@ -22,6 +23,11 @@ function NavbarBackdrop(props: ComponentProps<'div'>) {
 }
 
 export default function NavbarLayout({ children }: Props): JSX.Element {
+
+  React.useEffect(() => {
+    onRouteUpdate({ location: window.location });
+  }, []);
+
   const {
     navbar: { hideOnScroll, style },
   } = useThemeConfig();