site: refactor home & 404 with bisheng

bisheng.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  source: ['./components', './docs'],
+  theme: './site/theme',
+  webpackConfig(config) {
+    config.resolve.alias = {
+      antd: process.cwd(),
+    };
+
+    config.babel.plugins.push([
+      require.resolve('babel-plugin-antd'),
+      {
+        style: true,
+        libraryName: 'antd',
+        libDir: 'components',
+      },
+    ]);
+
+    return config;
+  },
+};

package.json

@@ -75,6 +75,7 @@
     "babel-eslint": "^6.0.2",
     "babel-jest": "^12.0.2",
     "babel-plugin-antd": "^0.4.0",
+    "bisheng": "^0.2.0",
     "dom-scroll-into-view": "^1.1.0",
     "enquire.js": "^2.1.1",
     "es6-shim": "^0.35.0",
@@ -103,6 +104,7 @@
     "react": "^15.0.0",
     "react-addons-test-utils": "^15.0.0",
     "react-copy-to-clipboard": "^4.0.1",
+    "react-document-title": "^2.0.1",
     "react-dom": "^15.0.0",
     "react-github-button": "^0.1.1",
     "react-intl": "^2.0.1",
@@ -117,7 +119,7 @@
     "dist": "antd-tools run dist",
     "compile": "antd-tools run compile",
     "clean": "antd-tools run clean",
-    "start": "antd-tools run start",
+    "start": "bisheng",
     "site": "antd-tools run site",
     "pre-deploy": "cp CNAME _site && rsync -R components/*/demo/*.json _site",
     "deploy": "antd-tools run update-self && antd-tools run deploy",

site/component/App.jsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import Header from './Header';
-import Footer from './Footer';
-
-export default function App(props) {
-  return (
-    <div className="page-wrapper">
-      <Header {...props} />
-      {props.children}
-      <Footer />
-    </div>
-  );
-}

site/website.config.js → site/theme/index.js

@@ -21,4 +21,7 @@ export default {
     '0.11.x': 'http://011x.ant.design/',
     '0.12.x': 'http://012x.ant.design/',
   },
+  routes: {
+    '/': './template/Home/index',
+  },
 };

site/component/Header/index.less → site/theme/static/header.less

@@ -90,22 +90,22 @@
 
 .component-select {
   &.ant-select-dropdown {
-  	border: 0;
-  	border-radius: 0;
-  	box-shadow: 0 0 8px rgba(0,0,0,0.25);
-  	font-size: 14px;
+        border: 0;
+        border-radius: 0;
+        box-shadow: 0 0 8px rgba(0,0,0,0.25);
+        font-size: 14px;
   }
   .ant-select-dropdown-menu {
-  	max-height: 200px;
+        max-height: 200px;
   }
   .ant-select-dropdown-menu-item {
-  	border-radius: 0 !important;
+        border-radius: 0 !important;
   }
   .ant-component-decs {
-  	font-size: 12px;
-  	position: absolute;
-  	top: 9px;
-  	color: #aaa;
-  	right: 16px;
+        font-size: 12px;
+        position: absolute;
+        top: 9px;
+        color: #aaa;
+        right: 16px;
   }
 }

site/theme/static/style.js

@@ -0,0 +1,6 @@
+import './common.less';
+import './header.less';
+import './footer.less';
+import './home.less';
+
+import './not-found.less';

site/component/Home/index.jsx → site/theme/template/Home/index.jsx

@@ -1,21 +1,14 @@
 import React from 'react';
+import DocumentTitle from 'react-document-title';
+import Layout from '../Layout';
 import Link from './Link';
 import Banner from './Banner';
 import Page1 from './Page1';
 import Page2 from './Page2';
 import Page3 from './Page3';
 import Page4 from './Page4';
-import './index.less';
-
-import * as utils from '../utils';
 
 export default class Home extends React.Component {
-  componentDidMount() {
-    this.componentDidUpdate();
-  }
-  componentDidUpdate() {
-    utils.setTitle('Ant Design - 一个 UI 设计语言');
-  }
   // To store style which is only for Home and has conflicts with others.
   getStyle() {
     return `
@@ -94,15 +87,19 @@ export default class Home extends React.Component {
 
   render() {
     return (
-      <div className="main-wrapper">
-        <Link />
-        <Banner />
-        <Page1 />
-        <Page2 />
-        <Page3 />
-        <Page4 />
-        <style dangerouslySetInnerHTML={{ __html: this.getStyle() }} />
-      </div>
+      <DocumentTitle title="Ant Design - 一个 UI 设计语言">
+        <Layout {...this.props}>
+          <div className="main-wrapper">
+            <Link />
+            <Banner />
+            <Page1 />
+            <Page2 />
+            <Page3 />
+            <Page4 />
+            <style dangerouslySetInnerHTML={{ __html: this.getStyle() }} />
+          </div>
+        </Layout>
+      </DocumentTitle>
     );
   }
 }

site/component/Footer/index.jsx → site/theme/template/Layout/Footer.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Select, Modal } from 'antd';
-import { version as antdVersion } from '../../../package.json';
-import { docVersions } from '../../website.config';
+import { version as antdVersion } from '../../../../package.json';
+import { docVersions } from '../../';
 const Option = Select.Option;
 
 function isLocalStorageNameSupported() {

site/component/Header/index.jsx → site/theme/template/Layout/Header.jsx

@@ -7,9 +7,6 @@ import classNames from 'classnames';
 import { Select, Menu, Row, Col, Icon, Button } from 'antd';
 const Option = Select.Option;
 
-import './index.less';
-
-import componentsList from '../../../_data/react-components';
 export default class Header extends React.Component {
   static contextTypes = {
     router: React.PropTypes.object.isRequired,
@@ -87,10 +84,13 @@ export default class Header extends React.Component {
   }
 
   render() {
-    const routes = this.props.routes;
-    let activeMenuItem = routes[1].path || 'home';
+    const { routes, data } = this.props;
+    let activeMenuItem = (routes[1] && routes[1].path) || 'home';
     activeMenuItem = activeMenuItem === 'components' ? 'docs/react' : activeMenuItem;
 
+    const componentsList = Object.keys(data.components)
+            .map((component) => data.components[component].index)
+            .filter(item => item);
     const locale = this.context.intl.locale;
     const options = Object.keys(componentsList)
             .map((key) => {
@@ -98,11 +98,12 @@ export default class Header extends React.Component {
               return value.localized ? value[locale] : value;
             })
             .filter(({ meta }) => {
-              return /^component/.test(meta.fileName);
+              return /^components/.test(meta.filename);
             })
             .map(({ meta }) => {
-              const pathSnippet = meta.fileName.split('/')[1];
+              const pathSnippet = meta.filename.split('/')[1];
               const url = `/components/${pathSnippet}`;
+
               return (
                 <Option value={url} key={url} data-label={`${(meta.title || meta.english).toLowerCase()} ${meta.subtitle || meta.chinese}`}>
                   <strong>{meta.title || meta.english}</strong>

site/theme/template/Layout/index.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { addLocaleData, IntlProvider } from 'react-intl';
+import Header from './Header';
+import Footer from './Footer';
+import enLocale from '../../en-US.js';
+import cnLocale from '../../zh-CN.js';
+import '../../static/style';
+
+const isZhCN = (typeof localStorage !== 'undefined' && localStorage.getItem('locale') !== 'en-US');
+  // (typeof localStorage !== 'undefined' && localStorage.getItem('locale') === 'zh-CN') ||
+  // (navigator.language === 'zh-CN');
+
+const appLocale = isZhCN ? cnLocale : enLocale;
+addLocaleData(appLocale.data);
+
+export default (props) => {
+  return (
+    <IntlProvider locale={appLocale.locale} messages={appLocale.messages}>
+      <div className="page-wrapper">
+        <Header {...props} />
+        {props.children}
+        <Footer />
+      </div>
+    </IntlProvider>
+  );
+};

site/component/NotFound/index.jsx → site/theme/template/NotFound.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Link } from 'react-router';
-import './index.less';
 
 export default function NotFound() {
   return (