docs: render china mirror link before hydration (ant-design#44233)

* docs: render china mirror link before hydration * docs: fix pre render error * chore: hide first * chore: show china mirror link always
ammar-knowledge · Aug 16, 2023 · a92a883 · a92a883
1 parent 83e3b52
commit a92a883
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 14 deletions.
diff --git a/.dumi/theme/slots/Header/Navigation.tsx b/.dumi/theme/slots/Header/Navigation.tsx
@@ -30,7 +30,8 @@ const locales = {
 
 // ============================= Style =============================
 const useStyle = createStyles(({ token }) => {
-  const { antCls, iconCls, fontFamily, headerHeight, menuItemBorder, colorPrimary } = token;
+  const { antCls, iconCls, fontFamily, headerHeight, menuItemBorder, colorPrimary, colorText } =
+    token;
 
   return {
     nav: css`
@@ -56,6 +57,17 @@ const useStyle = createStyles(({ token }) => {
             left: 12px;
             border-width: ${menuItemBorder}px;
           }
+
+          a {
+            color: ${colorText};
+          }
+
+          a:before {
+            position: absolute;
+            inset: 0;
+            background-color: transparent;
+            content: "";
+          }
         }
 
         & ${antCls}-menu-submenu-title ${iconCls} {
@@ -97,7 +109,6 @@ const useStyle = createStyles(({ token }) => {
 
 export interface NavigationProps extends SharedProps {
   isMobile: boolean;
-  isClient: boolean;
   responsive: null | 'narrow' | 'crowded';
   directionText: string;
   onLangChange: () => void;
@@ -106,7 +117,6 @@ export interface NavigationProps extends SharedProps {
 
 export default ({
   isZhCN,
-  isClient,
   isMobile,
   responsive,
   directionText,
@@ -224,16 +234,21 @@ export default ({
       ),
       key: 'docs/resources',
     },
-    isZhCN &&
-    isClient &&
-    window.location.host !== 'ant-design.antgroup.com' &&
-    window.location.host !== 'ant-design.gitee.io'
+    isZhCN
       ? {
-          label: '国内镜像',
+          label: (
+            <a href="https://ant-design.antgroup.com" target="_blank" rel="noreferrer">
+              国内镜像
+            </a>
+          ),
           key: 'mirror',
           children: [
             {
-              label: <a href="https://ant-design.antgroup.com">官方镜像</a>,
+              label: (
+                <a href="https://ant-design.antgroup.com" target="_blank" rel="noreferrer">
+                  官方镜像
+                </a>
+              ),
               icon: (
                 <img
                   alt="logo"
@@ -245,7 +260,11 @@ export default ({
               key: 'antgroup',
             },
             {
-              label: <a href="https://ant-design.gitee.io">Gitee 镜像</a>,
+              label: (
+                <a href="https://ant-design.gitee.io" target="_blank" rel="noreferrer">
+                  Gitee 镜像
+                </a>
+              ),
               icon: (
                 <img
                   alt="gitee"

diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx
@@ -127,7 +127,6 @@ interface HeaderState {
 
 // ================================= Header =================================
 const Header: React.FC = () => {
-  const [isClient, setIsClient] = React.useState(false);
   const [, lang] = useLocale();
 
   const { pkg } = useSiteData();
@@ -166,7 +165,6 @@ const Header: React.FC = () => {
   }, [location]);
 
   useEffect(() => {
-    setIsClient(typeof window !== 'undefined');
     onWindowResize();
     window.addEventListener('resize', onWindowResize);
     pingTimer.current = ping((status) => {
@@ -273,7 +271,6 @@ const Header: React.FC = () => {
   const sharedProps: SharedProps = {
     isZhCN,
     isRTL,
-    isClient,
   };
 
   const navigationNode = (

diff --git a/.dumi/theme/slots/Header/interface.ts b/.dumi/theme/slots/Header/interface.ts
@@ -1,5 +1,4 @@
 export interface SharedProps {
   isZhCN: boolean;
   isRTL: boolean;
-  isClient: boolean;
 }