feat: default matches browser language #285

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),

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(

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,

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(

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(

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;
+}

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}

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}
     />
   );
 }