From bd6ee2535628fa6213d6c6812c9070fac3bb68a1 Mon Sep 17 00:00:00 2001
From: shuai <lishuailing@sifou.com>
Date: Mon, 6 Jan 2025 14:08:18 +0800
Subject: [PATCH 1/3] fix: navbar support locales nav

---
 docusaurus.config.js                   |  6 ++++++
 src/theme/NavbarItem/NavbarNavLink.tsx | 13 +++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 7e47091117..9dec0d5a0d 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -109,6 +109,9 @@ const config = {
           {
             label: 'Plugins',
             to: '/plugins',
+            tos: {
+              'zh-CN': 'https://test.com'
+            }
           },
           {
             label: 'Blog',
@@ -130,6 +133,9 @@ const config = {
               {
                 label: 'Q&A Community',
                 to: 'https://meta.answer.dev',
+                tos: {
+                  'zh-CN': 'https://baidu.com',
+                }
               },
               {
                 label: 'Team',
diff --git a/src/theme/NavbarItem/NavbarNavLink.tsx b/src/theme/NavbarItem/NavbarNavLink.tsx
index 8e22a938f0..20b08c1be9 100644
--- a/src/theme/NavbarItem/NavbarNavLink.tsx
+++ b/src/theme/NavbarItem/NavbarNavLink.tsx
@@ -12,10 +12,16 @@ import isInternalUrl from '@docusaurus/isInternalUrl';
 import {isRegexpStringMatch} from '@docusaurus/theme-common';
 import IconExternalLink from '@theme/Icon/ExternalLink';
 import type {Props} from '@theme/NavbarItem/NavbarNavLink';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+interface SProps extends Props {
+  tos: Record<string, any>
+}
 
 export default function NavbarNavLink({
   activeBasePath,
   activeBaseRegex,
+  tos,
   to,
   href,
   label,
@@ -23,10 +29,13 @@ export default function NavbarNavLink({
   isDropdownLink,
   prependBaseUrlToHref,
   ...props
-}: Props): JSX.Element {
+}: SProps): JSX.Element {
   // TODO all this seems hacky
   // {to: 'version'} should probably be forbidden, in favor of {to: '/version'}
-  const toUrl = useBaseUrl(to);
+  const { i18n: { currentLocale } } = useDocusaurusContext();
+  // If to is a string, we assume it's a path that needs localization
+  const aliasTo = tos?.[currentLocale] || to;
+  const toUrl = useBaseUrl(aliasTo);
   const activeBaseUrl = useBaseUrl(activeBasePath);
   const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
   const isExternalLink = label && href && !isInternalUrl(href);

From 43547eda6b06ba1f0e3bbbf411b566d6b4c9413e Mon Sep 17 00:00:00 2001
From: shuai <lishuailing@sifou.com>
Date: Mon, 6 Jan 2025 14:12:51 +0800
Subject: [PATCH 2/3] fix: delete test data

---
 docusaurus.config.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/docusaurus.config.js b/docusaurus.config.js
index 9dec0d5a0d..7e47091117 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -109,9 +109,6 @@ const config = {
           {
             label: 'Plugins',
             to: '/plugins',
-            tos: {
-              'zh-CN': 'https://test.com'
-            }
           },
           {
             label: 'Blog',
@@ -133,9 +130,6 @@ const config = {
               {
                 label: 'Q&A Community',
                 to: 'https://meta.answer.dev',
-                tos: {
-                  'zh-CN': 'https://baidu.com',
-                }
               },
               {
                 label: 'Team',

From a69b9ccc8f0f556f568f42e2613842a56d7eaf0d Mon Sep 17 00:00:00 2001
From: shuai <lishuailing@sifou.com>
Date: Mon, 13 Jan 2025 14:26:35 +0800
Subject: [PATCH 3/3] feat: default matches browser language  #285

---
 plugins/blog-plugin.js                        |  3 -
 .../blog/BlogCategoryPostsPage/index.tsx      |  1 -
 src/components/blog/BlogDetailPage/index.tsx  |  1 -
 src/components/blog/BlogHome/index.tsx        |  1 -
 src/theme/DocSidebarItem/Category/index.tsx   |  3 -
 src/theme/Layout/BrowserLanguage.tsx          | 57 +++++++++++++++++++
 src/theme/Layout/index.tsx                    |  3 +-
 src/theme/NavbarItem/NavbarNavLink.tsx        |  8 +++
 8 files changed, 67 insertions(+), 10 deletions(-)
 create mode 100644 src/theme/Layout/BrowserLanguage.tsx

diff --git a/plugins/blog-plugin.js b/plugins/blog-plugin.js
index fcd05dd90b..59689bc830 100644
--- a/plugins/blog-plugin.js
+++ b/plugins/blog-plugin.js
@@ -149,8 +149,6 @@ async function blogPluginExtended(...pluginArgs) {
 
       const { createData, addRoute } = actions;
 
-      // console.log('blogPosts', blogPosts[0]);
-
       const removeDraftPosts = allBlogPosts.filter((post) => !post.metadata.frontMatter?.draft);
 
       // Fecommend posts list
@@ -264,7 +262,6 @@ async function blogPluginExtended(...pluginArgs) {
           permalink: generateCategoryPath(category.label),
         };
 
-        // console.log('categoryProp', categoryProp);
         const categoryPropPath = await createData(
           `${utils.docuHash(categoryProp.label)}.json`,
           JSON.stringify(categoryProp, null, 2),
diff --git a/src/components/blog/BlogCategoryPostsPage/index.tsx b/src/components/blog/BlogCategoryPostsPage/index.tsx
index 0c312f3515..3b8ab793cd 100644
--- a/src/components/blog/BlogCategoryPostsPage/index.tsx
+++ b/src/components/blog/BlogCategoryPostsPage/index.tsx
@@ -21,7 +21,6 @@ interface IProps extends Props {
 }
 const Index = (props: IProps) => {
   const { category, categoriyList, items, listMetadata, } = props
-  // console.log('...props', props);
   return (
     <HtmlClassNameProvider
       className={clsx(
diff --git a/src/components/blog/BlogDetailPage/index.tsx b/src/components/blog/BlogDetailPage/index.tsx
index f40da2d19a..5c8ba88825 100644
--- a/src/components/blog/BlogDetailPage/index.tsx
+++ b/src/components/blog/BlogDetailPage/index.tsx
@@ -21,7 +21,6 @@ import BlogPostItem from '../BlogPostItem';
 function BlogPostPageContent({relatedList, sidebar, children}) {
   const {metadata, toc} = useBlogPost();
 
-  // console.log('BlogPostPageContent', toc);
   const { frontMatter} = metadata;
   const {
     hide_table_of_contents: hideTableOfContents,
diff --git a/src/components/blog/BlogHome/index.tsx b/src/components/blog/BlogHome/index.tsx
index 036ddf222c..9508032c0b 100644
--- a/src/components/blog/BlogHome/index.tsx
+++ b/src/components/blog/BlogHome/index.tsx
@@ -33,7 +33,6 @@ interface HomeProps {
 }
 
 export function Home({ featuredPosts, categoyList, metadata, blogList }: HomeProps): JSX.Element {
-  // console.log('metadata', metadata);
   return (
     <HtmlClassNameProvider
       className={clsx(
diff --git a/src/theme/DocSidebarItem/Category/index.tsx b/src/theme/DocSidebarItem/Category/index.tsx
index a8cfd2df14..0da5f3933e 100644
--- a/src/theme/DocSidebarItem/Category/index.tsx
+++ b/src/theme/DocSidebarItem/Category/index.tsx
@@ -80,7 +80,6 @@ function CollapseButton({
   categoryLabel: string;
   onClick: ComponentProps<'button'>['onClick'];
 }) {
-  // console.log('categoryLabel', categoryLabel);
   return (
     <button
       aria-label={
@@ -157,8 +156,6 @@ export default function DocSidebarItemCategory({
     }
   }, [collapsible, expandedItem, index, setCollapsed, autoCollapseCategories]);
 
-  console.log('collapsed', item);
-
   return (
     <li
       className={clsx(
diff --git a/src/theme/Layout/BrowserLanguage.tsx b/src/theme/Layout/BrowserLanguage.tsx
new file mode 100644
index 0000000000..631bc987eb
--- /dev/null
+++ b/src/theme/Layout/BrowserLanguage.tsx
@@ -0,0 +1,57 @@
+import React, {useEffect} from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+const LANGUAGE_PREFERENCE_KEY = '_lang_browser_';
+
+export default function BrowserLanguageRedirect() {
+  const {
+    siteConfig: {
+      i18n: {defaultLocale, locales},
+    },
+  } = useDocusaurusContext();
+
+  useEffect(() => {
+    window.addEventListener('languagechange', () => {
+      localStorage.setItem(LANGUAGE_PREFERENCE_KEY, navigator.language);
+    })
+
+    const currentPath = window.location.pathname;
+    const storageLocale = localStorage.getItem('_lang_user_') || localStorage.getItem(LANGUAGE_PREFERENCE_KEY);
+    const storageLocaleIsDefault = storageLocale === defaultLocale;
+
+    if (storageLocale) {
+      if (storageLocaleIsDefault) {
+        if (currentPath === '/') return;
+        return;
+      } else {
+        if (currentPath.startsWith(`/${storageLocale}`)) {
+          return;
+        } else {
+          window.location.pathname = `/${storageLocale}${currentPath}`;
+          return;
+        }
+      }
+    } else {
+      const browserLanguage = navigator.language.toLowerCase();
+      const matchedLocale = locales.find(locale =>
+        browserLanguage === locale.toLowerCase() ||
+        browserLanguage.startsWith(locale.toLowerCase() + '-')
+      );
+      if (matchedLocale) {
+        localStorage.setItem(LANGUAGE_PREFERENCE_KEY, matchedLocale);
+        window.location.pathname = `/${matchedLocale}${currentPath}`;
+      } else {
+        window.location.pathname = currentPath;
+      }
+    }
+
+    // remove the event listener
+    return () => {
+      window.removeEventListener('languagechange', () => {
+        localStorage.setItem(LANGUAGE_PREFERENCE_KEY, navigator.language);
+      })
+    }
+  }, []);
+
+  return null;
+}
diff --git a/src/theme/Layout/index.tsx b/src/theme/Layout/index.tsx
index e310f20f86..ad7de5c107 100644
--- a/src/theme/Layout/index.tsx
+++ b/src/theme/Layout/index.tsx
@@ -23,6 +23,7 @@ import LayoutProvider from '@theme/Layout/Provider';
 import ErrorPageContent from '@theme/ErrorPageContent';
 import type {Props} from '@theme/Layout';
 import mixpanel from 'mixpanel-browser';
+import BrowserLanguage from './BrowserLanguage';
 
 import styles from './styles.module.css';
 
@@ -45,7 +46,6 @@ export default function Layout(props: Props): JSX.Element {
   }, [])
 
   useEffect(() => {
-    // console.log('Layout.tsx: location.pathname: ', location);
     mixpanel.track_pageview();
   }, [location]);
 
@@ -58,6 +58,7 @@ export default function Layout(props: Props): JSX.Element {
       <AnnouncementBar />
 
       <Navbar />
+      <BrowserLanguage />
 
       <div
         id={SkipToContentFallbackId}
diff --git a/src/theme/NavbarItem/NavbarNavLink.tsx b/src/theme/NavbarItem/NavbarNavLink.tsx
index 20b08c1be9..70d0ba0c97 100644
--- a/src/theme/NavbarItem/NavbarNavLink.tsx
+++ b/src/theme/NavbarItem/NavbarNavLink.tsx
@@ -40,6 +40,12 @@ export default function NavbarNavLink({
   const normalizedHref = useBaseUrl(href, {forcePrependBaseUrl: true});
   const isExternalLink = label && href && !isInternalUrl(href);
 
+  const clickLink = (e) => {
+     if (e.target?.lang) {
+       localStorage.setItem('_lang_user_', e.target.lang);
+     }
+  }
+
   // Link content is set through html XOR label
   const linkContentProps = html
     ? {dangerouslySetInnerHTML: {__html: html}}
@@ -62,6 +68,7 @@ export default function NavbarNavLink({
         href={prependBaseUrlToHref ? normalizedHref : href}
         {...props}
         {...linkContentProps}
+        onClick={clickLink}
       />
     );
   }
@@ -78,6 +85,7 @@ export default function NavbarNavLink({
       })}
       {...props}
       {...linkContentProps}
+      onClick={clickLink}
     />
   );
 }