[apisix-website] branch master updated: fix: link behavior (#1406)

[gu...@apache.org]

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

guoqi 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 c298d12d9ec fix: link behavior (#1406)
c298d12d9ec is described below

commit c298d12d9ecd0791f264736bc598f6c758767e87
Author: Young <is...@outlook.com>
AuthorDate: Mon Nov 14 12:34:02 2022 +0800

    fix: link behavior (#1406)
---
 doc/src/theme/DocPage/index.tsx | 33 ++++++++++++++++++++++++---------
 package.json                    |  2 +-
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/doc/src/theme/DocPage/index.tsx b/doc/src/theme/DocPage/index.tsx
index a21d9ce464f..e40820fd2f1 100644
--- a/doc/src/theme/DocPage/index.tsx
+++ b/doc/src/theme/DocPage/index.tsx
@@ -8,7 +8,9 @@
  */
 
 import type { ReactNode } from 'react';
-import React, { useState, useCallback, useEffect } from 'react';
+import React, {
+  useState, useCallback, useEffect,
+} from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { MDXProvider } from '@mdx-js/react';
 import renderRoutes from '@docusaurus/renderRoutes';
@@ -28,6 +30,7 @@ import { ThemeClassNames, docVersionSearchTag } from '@docusaurus/theme-common';
 import Head from '@docusaurus/Head';
 import type { ImageProps } from 'rc-image';
 import { LazyLoadImage } from 'react-lazy-load-image-component';
+import Link from '@docusaurus/Link';
 import NotFound from '../NotFound';
 
 import styles from './styles.module.css';
@@ -53,8 +56,18 @@ const navbarLinkMap = {
 
 const navbarLinkKeys = Object.keys(navbarLinkMap);
 
-const components = {
+const components = (currentPage: string) => ({
   ...MDXComponents,
+  a: (props) => {
+    const { children, ...others } = props;
+    const inCurrent = props.href?.includes(currentPage) || props.href?.startsWith('#');
+
+    return (
+      <Link {...others} {...{ target: inCurrent ? null : '_blank' }}>
+        {children as any}
+      </Link>
+    );
+  },
   img: (props: ImageProps) => (
     <LazyLoadImage
       effect="blur"
@@ -76,7 +89,7 @@ const components = {
       {...(props as any)}
     />
   ),
-};
+});
 
 const DocPageContent = ({
   currentDocRoute,
@@ -89,6 +102,11 @@ const DocPageContent = ({
 
   const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
   const [hiddenSidebar, setHiddenSidebar] = useState(false);
+  const pathArr = currentDocRoute.path.split('/').slice(2, 4);
+  const currentPage = pathArr.reduce(
+    (res, cur) => (navbarLinkKeys.includes(cur) ? cur : res),
+    '',
+  );
 
   useEffect(() => {
     const childrenCount = document.querySelector('.navbar__items--right').childElementCount;
@@ -97,11 +115,6 @@ const DocPageContent = ({
     ] as HTMLDivElement;
     el.style.display = window.innerWidth > 745 ? 'block' : 'none';
 
-    const pathArr = currentDocRoute.path.split('/').slice(2, 4);
-    const currentPage = pathArr.reduce(
-      (res, cur) => (navbarLinkKeys.includes(cur) ? cur : res),
-      '',
-    );
     const navbarLink = document.querySelectorAll('.navbar__link')[0] as HTMLAnchorElement;
     navbarLink.innerText = navbarLinkMap[currentPage];
 
@@ -197,7 +210,9 @@ const DocPageContent = ({
               [styles.docItemWrapperEnhanced]: hiddenSidebarContainer,
             })}
           >
-            <MDXProvider components={components}>{children}</MDXProvider>
+            <MDXProvider components={() => components(currentPage)}>
+              {children}
+            </MDXProvider>
           </div>
         </main>
       </div>
diff --git a/package.json b/package.json
index 28ea710a5cc..d1fb3a76afa 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,7 @@
     "serve:blog:zh": "yarn workspace blog docusaurus serve zh",
     "serve:blog:en": "yarn workspace blog docusaurus serve en",
     "build:website:preview:serve": "yarn build:website:preview && yarn serve:website",
-    "build:doc:preview:serve": "yarn build:doc:previw && yarn serve:doc",
+    "build:doc:preview:serve": "yarn build:doc:preview && yarn serve:doc",
     "build:blog:zh:preview:serve": "yarn build:blog:zh:preview && yarn serve:blog:zh",
     "build:blog:en:preview:serve": "yarn build:blog:en:preview && yarn serve:blog:en",
     "prepare": "husky install",