site: lazy load for site

package.json

@@ -77,7 +77,7 @@
     "babel-eslint": "^6.0.2",
     "babel-jest": "^12.0.2",
     "babel-plugin-antd": "^0.4.0",
-    "bisheng": "^0.5.0",
+    "bisheng": "^0.7.0",
     "bisheng-plugin-description": "^0.1.1",
     "bisheng-plugin-react": "^0.1.0",
     "bisheng-plugin-toc": "0.2.0",

site/bisheng.config.js

@@ -7,6 +7,7 @@ module.exports = {
     './docs',
     'CHANGELOG.md', // TODO: fix it in bisheng
   ],
+  lazyLoad: true,
   theme: './site/theme',
   htmlTemplate: './site/theme/static/template.html',
   plugins: [

site/theme/template/Content/MainContent.jsx

@@ -81,26 +81,8 @@ export default class MainContent extends React.Component {
     return [...topLevel, ...itemGroups];
   }
 
-  getModuleData() {
-    const props = this.props;
-
-    let moduleData;
-    if (/(docs\/react\/)|(components\/)|(changelog)/i.test(props.location.pathname)) {
-      moduleData = {
-        ...props.data.docs.react,
-        ...props.data.components,
-        changelog: props.data.CHANGELOG,
-      };
-    } else {
-      moduleData = props.utils.get(props.data, props.location.pathname.split('/').slice(0, 2));
-    }
-
-    return moduleData;
-  }
-
   getMenuItems() {
-    const moduleData = this.getModuleData();
-
+    const moduleData = this.props.moduleData;
     const menuItems = utils.getMenuItems(moduleData, this.context.intl.locale);
     const topLevel = this.generateSubMenuItems(menuItems.topLevel);
     const subMenu = Object.keys(menuItems).filter(this.isNotTopLevel)
@@ -152,11 +134,12 @@ export default class MainContent extends React.Component {
     const { prev, next } = this.getFooterNav(menuItems, activeMenuItem);
 
     const locale = this.context.intl.locale;
-    const moduleData = this.getModuleData();
-    const pageData = /changelog/i.test(props.location.pathname) ?
-            props.data.CHANGELOG :
-            (props.pageData.index || props.pageData);
-    const localizedPageData = pageData[locale] || pageData;
+    const moduleData = this.props.moduleData;
+    const localizedPageData = moduleData.filter((page) => {
+      return page.meta.filename.toLowerCase()
+        .startsWith(props.location.pathname);
+    })[0];
+
     return (
       <div className="main-wrapper">
         <Row>
@@ -170,8 +153,8 @@ export default class MainContent extends React.Component {
           </Col>
           <Col lg={20} md={18} sm={24} xs={24} className="main-container">
             {
-              props.pageData.demo ?
-                <ComponentDoc {...props} doc={localizedPageData} demos={props.pageData.demo} /> :
+              props.utils.get(props, 'pageData.demo') ?
+                <ComponentDoc {...props} doc={localizedPageData} demos={props.demos} /> :
                 <Article {...props} content={localizedPageData} />
             }
           </Col>

site/theme/template/Content/index.jsx

@@ -1,6 +1,44 @@
 import React from 'react';
 import Layout from '../Layout';
 import MainContent from './MainContent';
+import Promise from 'bluebird';
+import * as utils from '../utils';
+
+export function collect(nextProps, callback) {
+  const componentsList = utils.collectDocs(nextProps.data.components);
+
+  const pathname = nextProps.location.pathname;
+  let moduleDocs;
+  if (/(docs\/react\/)|(components\/)|(changelog)/i.test(pathname)) {
+    moduleDocs = [
+      ...utils.collectDocs(nextProps.data.docs.react),
+      ...componentsList,
+      /* eslint-disable new-cap */
+      nextProps.data.CHANGELOG(),
+      /* eslint-enable new-cap */
+    ];
+  } else {
+    moduleDocs = utils.collectDocs(
+      nextProps.utils.get(nextProps.data, pathname.split('/').slice(0, 2))
+    );
+  }
+
+  const demos = nextProps.utils.get(nextProps.data, [...pathname.split('/'), 'demo']);
+
+  const promises = [Promise.all(componentsList), Promise.all(moduleDocs)];
+  if (demos) {
+    promises.push(Promise.all(
+      Object.keys(demos).map((key) => demos[key]())
+    ));
+  }
+  Promise.all(promises)
+    .then((list) => callback(null, {
+      ...nextProps,
+      components: list[0],
+      moduleData: list[1],
+      demos: list[2],
+    }));
+}
 
 export default (props) => {
   return (

site/theme/template/Home/index.jsx

@@ -7,6 +7,14 @@ import Page1 from './Page1';
 import Page2 from './Page2';
 import Page3 from './Page3';
 import Page4 from './Page4';
+import Promise from 'bluebird';
+import * as utils from '../utils';
+
+export function collect(nextProps, callback) {
+  const componentsList = utils.collectDocs(nextProps.data.components);
+  Promise.all(componentsList)
+    .then((list) => callback(null, { ...nextProps, components: list }));
+}
 
 export default class Home extends React.Component {
   componentWillMount() {

site/theme/template/Layout/Header.jsx

@@ -84,30 +84,12 @@ export default class Header extends React.Component {
   }
 
   render() {
-    const { routes, data } = this.props;
+    const { routes, components } = this.props;
     const route = routes[0].path.replace(/^\//, '');
     let activeMenuItem = route.slice(0, route.indexOf(':') - 1) || 'home';
     activeMenuItem = activeMenuItem === 'components' ? 'docs/react' : activeMenuItem;
 
-    const locale = this.context.intl.locale;
-    const componentsList = Object.keys(data.components)
-            .map((component) => {
-              const index = data.components[component].index;
-              if (index.meta) {
-                return index;
-              }
-              return index[locale];
-            })
-            .filter(item => item);
-
-    const options = Object.keys(componentsList)
-            .map((key) => {
-              const value = componentsList[key];
-              return value.localized ? value[locale] : value;
-            })
-            .filter(({ meta }) => {
-              return /^components/.test(meta.filename);
-            })
+    const options = components
             .map(({ meta }) => {
               const pathSnippet = meta.filename.split('/')[1];
               const url = `/components/${pathSnippet}`;

site/theme/template/utils.jsx

@@ -1,14 +1,21 @@
-export function getMenuItems(data, locale) {
-  const menuMeta = Object.keys(data)
-          .map((key) => data[key])
-          .map((item) => {
-            const file = item.index || item;
-            if (file.meta) {
-              return file.meta;
+export function collectDocs(docs) {
+  // locale copy from layout
+  const locale = (typeof localStorage !== 'undefined' && localStorage.getItem('locale') !== 'en-US') ?
+        'zh-CN' : 'en-US';
+  const docsList = Object.keys(docs)
+          .map((key) => docs[key])
+          .map((value) => {
+            if (typeof value !== 'function') {
+              return value[locale] || value.index[locale] || value.index;
             }
-            return file[locale].meta;
-          });
+            return value;
+          })
+          .map((fn) => fn());
+  return docsList;
+}
 
+export function getMenuItems(data) {
+  const menuMeta = data.map((item) => item.meta);
   const menuItems = {};
   menuMeta.sort((a, b) => {
     return parseInt(a.order, 10) - parseInt(b.order, 10);