perf(antdsite): add a switch for prefetching.

YvesCoding · Aug 11, 2019 · c5dd49f · c5dd49f
1 parent 4bae484
commit c5dd49f
Show file tree

Hide file tree

Showing 14 changed files with 89 additions and 50 deletions.
diff --git a/packages/antdsite/__default__/default-config.js b/packages/antdsite/__default__/default-config.js
@@ -8,6 +8,7 @@ module.exports = {
   head: [],
   footer: null,
   useCNDForLargeFiles: true,
+  prefetch: true,
   largeFileList: [
     {
       name: 'moment',

diff --git a/packages/antdsite/src/default-theme/components/MyLink/index.tsx b/packages/antdsite/src/default-theme/components/MyLink/index.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Link } from 'gatsby';
+import { Link as RouterLink } from '@reach/router';
+import { PageContext } from 'antdsite/src/templates/PageContext';
+import { resolvePathWithBase } from '../utils';
+
+const MyLink: React.SFC<any> = ({
+  children,
+  to,
+  prefetch,
+  ...rest
+}: {
+  children: React.ReactNode;
+  to: string;
+  prefetch: boolean;
+}) => {
+  return (
+    <PageContext.Consumer>
+      {({ webConfig: { base, prefetch: globalPrefetch } }) => {
+        if (!prefetch || !globalPrefetch) {
+          return (
+            <RouterLink to={resolvePathWithBase(to, base)} {...rest}>
+              {children}
+            </RouterLink>
+          );
+        }
+        return (
+          <Link to={to} {...rest}>
+            {children}
+          </Link>
+        );
+      }}
+    </PageContext.Consumer>
+  );
+};
+
+MyLink.defaultProps = {
+  prefetch: true
+};
+
+export default MyLink;
diff --git a/packages/antdsite/src/default-theme/components/content/index.tsx b/packages/antdsite/src/default-theme/components/content/index.tsx
@@ -1,17 +1,12 @@
 import React from 'react';
 import Article from './Article';
-import { PageContext } from 'antdsite';
 
 export default class Content extends React.PureComponent {
-  static contextType = PageContext;
-
   render() {
     return (
-      <>
-        <div className="main-container">
-          <Article />
-        </div>
-      </>
+      <div className="main-container">
+        <Article />
+      </div>
     );
   }
 }
diff --git a/packages/antdsite/src/default-theme/components/home/Banner.jsx b/packages/antdsite/src/default-theme/components/home/Banner.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import GitHubButton from 'react-github-button-fix-iebug';
 import { Button } from 'antd';
-import { Link } from 'gatsby';
+import Link from '../MyLink';
 import { PageContext } from 'antdsite';
 import * as utils from '../utils';
 
@@ -21,7 +21,7 @@ function Banner(props) {
             {(frontmatter.heroImage || currentLocaleWebConfig.logo) && (
               <div className="banner-logo">
                 <img
-                  src={utils.withBasePath(
+                  src={utils.resolvePathWithBase(
                     frontmatter.heroImage || currentLocaleWebConfig.logo,
                     currentLocaleWebConfig.base
                   )}

diff --git a/packages/antdsite/src/default-theme/components/menu/index.tsx b/packages/antdsite/src/default-theme/components/menu/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { PageInfo } from '../utils';
 import MobileMenu from 'rc-drawer';
 import { Badge, Col, Menu, Icon, Affix } from 'antd';
-import { Link } from 'gatsby';
+import Link from '../MyLink';
 
 const { SubMenu } = Menu;
 

diff --git a/packages/antdsite/src/default-theme/components/search-box/index.tsx b/packages/antdsite/src/default-theme/components/search-box/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { List, Input, Icon, Breadcrumb } from 'antd';
 import { PageInfo } from '../utils';
 import { OneToc } from '../../../templates';
-import { Link } from 'gatsby';
+import Link from '../MyLink';
 
 type filterDatas = {
   title: string;
@@ -48,7 +48,7 @@ export default class Search extends React.Component<SearchProps, SearchState> {
     this.state = {
       isSearchListShow: false,
       query: '',
-      filterDatas: [],
+      filterDatas: []
     };
   }
 
@@ -59,7 +59,7 @@ export default class Search extends React.Component<SearchProps, SearchState> {
 
     this.setState(() => {
       return {
-        isSearchListShow: false,
+        isSearchListShow: false
       };
     });
   };
@@ -68,7 +68,7 @@ export default class Search extends React.Component<SearchProps, SearchState> {
     this.setState(
       {
         isSearchListShow: true,
-        query: e.currentTarget.value,
+        query: e.currentTarget.value
       },
       () => {
         this.search();
@@ -94,8 +94,8 @@ export default class Search extends React.Component<SearchProps, SearchState> {
           {
             url: currentItem.slug,
             title: hightlightRes(currentItem.title),
-            important: currentItem.important,
-          },
+            important: currentItem.important
+          }
         ]);
       } else if (currentItem.toc && currentItem.toc.items.length) {
         let tocs = flattenToc(currentItem.toc.items);
@@ -105,12 +105,12 @@ export default class Search extends React.Component<SearchProps, SearchState> {
             results.push([
               {
                 title: currentItem.title,
-                important: currentItem.important,
+                important: currentItem.important
               },
               {
                 url: currentItem.slug + t.url,
-                title: hightlightRes(t.title),
-              },
+                title: hightlightRes(t.title)
+              }
             ]);
           }
         }
@@ -129,7 +129,7 @@ export default class Search extends React.Component<SearchProps, SearchState> {
     }
 
     this.setState({
-      filterDatas: results,
+      filterDatas: results
     });
   };
 
@@ -178,7 +178,7 @@ export default class Search extends React.Component<SearchProps, SearchState> {
                               <Breadcrumb.Item key={index}>
                                 <span
                                   dangerouslySetInnerHTML={{
-                                    __html: item.title,
+                                    __html: item.title
                                   }}
                                 ></span>
                               </Breadcrumb.Item>

diff --git a/packages/antdsite/src/default-theme/components/utils.ts b/packages/antdsite/src/default-theme/components/utils.ts
@@ -115,7 +115,7 @@ export function resolvePage(pages: Edges, rawPath: string, base: string): PageIn
   };
 }
 
-export function withBasePath(path: string, base: string) {
+export function resolvePathWithBase(path: string, base: string) {
   if (!base.endsWith('/')) {
     base += '/';
   }
@@ -165,18 +165,6 @@ function resolvePath(relative: string, base: string, append: string = '') {
   return stack.join('/');
 }
 
-export function resolvePathWithBase(path: string, base: string) {
-  if (base.endsWith('/')) {
-    base = base.slice(0, base.length - 1);
-  }
-
-  if (!path.startsWith('/')) {
-    path = '/' + path;
-  }
-
-  return base + path;
-}
-
 export interface PageInfo extends IGraphqlFrontmatterData {
   slug?: string;
   collapsable?: boolean;

diff --git a/packages/antdsite/src/default-theme/layout/header.tsx b/packages/antdsite/src/default-theme/layout/header.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-one-expression-per-line */
 import React from 'react';
-import { Link } from 'gatsby';
+import Link from '../components/MyLink';
 import * as utils from '../components/utils';
 import { Row, Col, Icon, Input, Menu, Button, Popover, Dropdown, Affix, Badge } from 'antd';
 import { PageContext } from 'antdsite';
@@ -163,7 +163,7 @@ class Header extends React.Component<HeaderProps, HeaderState> {
           <Row>
             <Col xxl={4} xl={5} lg={8} md={8} sm={24} xs={24}>
               <Link id="site-logo" to={currentLocate || base}>
-                {logo && <img src={utils.withBasePath(logo, base)} alt={title + '-logo'} />}
+                {logo && <img src={utils.resolvePathWithBase(logo, base)} alt={title + '-logo'} />}
                 <span className="left-top-title">{title}</span>
               </Link>
             </Col>

diff --git a/packages/antdsite/src/default-theme/layout/main-content.tsx b/packages/antdsite/src/default-theme/layout/main-content.tsx
@@ -39,10 +39,6 @@ export default class MainContent extends React.PureComponent<MainContentProps, M
     this.setContentHeight();
   }
 
-  getContentWidth = (isEnableMenu: boolean, originWidth: number) => {
-    return isEnableMenu ? originWidth : 24;
-  };
-
   setContentHeight = () => {
     const { prev, next } = this.state;
     // header and footer height is 64px and
@@ -67,7 +63,6 @@ export default class MainContent extends React.PureComponent<MainContentProps, M
     const { prev, next, contentHeight } = this.state;
     const { currentPageSidebarItems: menuList, slug } = this.context;
     const enableMenu = !!(menuList && menuList.length);
-    const getContentWidth = this.getContentWidth.bind(null, enableMenu);
 
     return (
       <Row className="main-wrapper">
@@ -81,9 +76,9 @@ export default class MainContent extends React.PureComponent<MainContentProps, M
         ) : null}
 
         <Col
-          xxl={getContentWidth(20)}
-          xl={getContentWidth(19)}
-          lg={getContentWidth(18)}
+          xxl={enableMenu ? 20 : 24}
+          xl={enableMenu ? 19 : 24}
+          lg={enableMenu ? 18 : 24}
           md={24}
           sm={24}
           xs={24}
@@ -93,7 +88,13 @@ export default class MainContent extends React.PureComponent<MainContentProps, M
               minHeight: contentHeight
             }}
           >
-            {isWebsiteHome ? <HomePage /> : <Content />}
+            {isWebsiteHome ? (
+              <HomePage />
+            ) : (
+              <div>
+                <Content />
+              </div>
+            )}
           </div>
           <PrevAndNext prev={prev} next={next} />
           {footer}

diff --git a/packages/antdsite/src/templates/PageContext.ts b/packages/antdsite/src/templates/PageContext.ts
@@ -1,6 +1,15 @@
 import React from 'react';
 
-export const PageContext = React.createContext({
+export const PageContext = React.createContext<{
+  webConfig: any;
+  slug: string;
+  currentLocaleWebConfig: any;
+  currentPageSidebarItems: any;
+  allPagesSidebarItems: any;
+  currentPageInfo: any;
+  currentPageContent: any;
+  isWebsiteHome: boolean;
+}>({
   webConfig: {},
   slug: '',
   currentLocaleWebConfig: {},

diff --git a/packages/docs/.antdsite/config.js b/packages/docs/.antdsite/config.js
@@ -16,6 +16,7 @@ module.exports = {
   head: [['link', { rel: 'icon', href: `/favicon.png` }]],
   footer:
     'MIT Licensed | Copyright © 2019-present <a target="_blank" href="https://github.com/wangyi7099">Yi(Yves) Wang</a>',
+  prefetch: false,
   themeConfig: {
     repo: 'YvesCoding/antdsite',
     docsRelativeDir: 'packages/docs',
@@ -28,7 +29,7 @@ module.exports = {
         nav: [
           {
             text: 'Guide',
-            link: '/guide/'
+            link: '/guide/introduction'
           },
           {
             text: 'Config',
@@ -58,7 +59,7 @@ module.exports = {
         nav: [
           {
             text: '指南',
-            link: '/zh/guide/'
+            link: '/zh/guide/introduction'
           },
           {
             text: '配置',

diff --git a/packages/docs/docs/default-theme-config/README.MD b/packages/docs/docs/default-theme-config/README.MD
@@ -27,6 +27,8 @@ features:
 
 Any additional content after the `YAML front matter` will be parsed as normal markdown and rendered after the features section.
 
+import {Alert} from 'antd';
+
 <Alert message="Warning" description={<p>showStar only supports <strong>GitHub</strong></p>} type="warning" showIcon />
 
 ## Navbar

diff --git a/packages/docs/docs/zh/default-theme-config/README.MD b/packages/docs/docs/zh/default-theme-config/README.MD
@@ -27,6 +27,7 @@ features:
 
 任何 `YAML front matter` 之后额外的内容将会以普通的 markdown 被渲染，并插入到 `features` 的后面。
 
+import {Alert} from 'antd';
 <Alert message="警告" description={<p>showStar 只支持 <strong>GitHub</strong></p>} type="warning" showIcon />
 
 ## 导航栏

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -8,7 +8,7 @@
     "clean": "gatsby clean"
   },
   "dependencies": {
-    "antdsite": "^0.4.1",
+    "antdsite": "^0.4.2",
     "gatsby": "^2.13.39",
     "gatsby-plugin-netlify": "^2.0.0",
     "react": "^16.8.0",