chore: normalize build procedure

docs/pattern/advanced-search.md

@@ -1,6 +1,5 @@
 # Advanced Search
 
-- category: 6
 - order: 6
 - chinese: 高级搜索
 

docs/pattern/classic.md

@@ -1,6 +1,5 @@
 # Classic
 
-- category: 0
 - order: 0
 - disabled: true
 - chinese: 典型页面

docs/pattern/complex-table.md

@@ -1,6 +1,5 @@
 # Complex Table
 
-- category: 5
 - order: 5
 - chinese: 表格：复杂数据
 

docs/pattern/form.md

@@ -1,6 +1,5 @@
 # Form
 
-- category: 2
 - order: 2
 - chinese: 表单
 

docs/pattern/list.md

@@ -1,6 +1,5 @@
 # List
 
-- category: 3
 - order: 3
 - chinese: 列表
 

docs/pattern/navigation.md

@@ -1,6 +1,5 @@
 # Navigation
 
-- category: 1
 - order: 1
 - chinese: 导航
 

docs/pattern/table.md

@@ -1,6 +1,5 @@
 # Table
 
-- category: 4
 - order: 4
 - chinese: 表格
 

docs/practice/bussiness.md

@@ -1,6 +1,5 @@
 # Business
 
-- category: 1
 - order: 1
 - disabled: true
 - chinese: 业务组件

docs/practice/cases.md

@@ -1,6 +1,5 @@
 # Cases
 
-- category: 0
 - order: 0
 - chinese: 实践案例
 

docs/resource/download.md

@@ -1,7 +1,6 @@
 # Download
 
 - order: 0
-- category: 0
 - chinese: 资源下载
 
 ---

docs/resource/github.md

@@ -1,7 +1,6 @@
 # GitHub
 
-- order: 3
-- category: 3
+- order: 2
 - link: //github.com/ant-design/ant-design
 
 ---

docs/resource/reference.md

@@ -1,7 +1,6 @@
 # Reference
 
 - order: 1
-- category: 1
 - chinese: 文献素材
 
 ---

docs/spec/colors.md

@@ -1,7 +1,8 @@
-# 色彩
+# Colors
 
 - category: 基础
 - order: 2
+- chinese: 色彩
 
 ---
 

docs/spec/easing.md

@@ -1,7 +1,8 @@
-# 自然运动
+# Easing
 
 - category: 动画
 - order: 0
+- chinese: 自然运动
 
 ---
 

docs/spec/introduce.md

@@ -1,6 +1,5 @@
 # Ant Design
 
-- category: 0
 - order: 0
 
 ---

docs/spec/layout/index.md

@@ -1,9 +1,10 @@
-# 常用布局
+# Layout
 
 - template: component
 - category: 基础
 - order: 4
 - cols: 1
+- chinese: 常用布局
 
 ---
 

docs/spec/motion.md

@@ -1,7 +1,8 @@
-# 组件动画
+# Motion
 
 - category: 动画
 - order: 2
+- chinese: 组件动画
 
 ---
 

docs/spec/page-transition.md

@@ -1,7 +1,8 @@
-# 互动转换
+# Page Transition
 
 - category: 动画
 - order: 1
+- chinese: 互动转换
 
 ---
 

docs/spec/typography.md

@@ -1,7 +1,8 @@
-# 排版
+# Typography
 
 - category: 基础
 - order: 1
+- chinese: 排版
 
 ---
 

scripts/build-common.js

@@ -7,7 +7,10 @@ const utils = require('./utils');
 const isMeta = R.complement(R.propEq('type', 'hr'));
 const getMeta = R.prop('meta');
 const getOrder = R.compose(parseInt, R.path(['meta', 'order']));
-const getMenuItems = R.map(getMeta);
+const getMenuItems = R.compose(
+  R.groupBy(R.compose(R.defaultTo('topLevel'), R.prop('category'))),
+  R.map(getMeta)
+);
 const sortByOrder = R.sortBy(getOrder);
 const parse = function parse(fileName) {
   const fileContent = utils.parseFileContent(fileName);
@@ -16,8 +19,8 @@ const parse = function parse(fileName) {
 
   return { meta, description };
 };
-module.exports = function buildCommon(inputPath, outputPath) {
-  const mds = utils.findMDFile(inputPath);
+module.exports = function buildCommon(inputDir, outputFile) {
+  const mds = utils.findMDFile(inputDir, true);
   const parsed = sortByOrder(R.map(parse, mds));
 
   const result = {
@@ -27,5 +30,5 @@ module.exports = function buildCommon(inputPath, outputPath) {
 
   const content = 'module.exports = ' +
           JSON.stringify(result, null, 2) + ';';
-  fs.writeFile(outputPath, content);
+  fs.writeFile(outputFile, content);
 };

scripts/build-website.js

@@ -40,28 +40,7 @@ buildDocsList([installPath], './_site/data/install.js');
 const upgradeNotesPath = './docs/react/upgrade-notes.md';
 buildDocsList([upgradeNotesPath], './_site/data/upgrade-notes.js');
 
-const specIntroPath =
-        './docs/spec/introduce.md'
-buildDocsList([specIntroPath], './_site/data/specIntro.js');
-
-const fontPath =
-        './docs/spec/font.md'
-buildDocsList([fontPath], './_site/data/font.js');
-
-const typographyPath =
-        './docs/spec/typography.md'
-buildDocsList([typographyPath], './_site/data/typography.js');
-
-const easingPath =
-        './docs/spec/easing.md'
-buildDocsList([easingPath], './_site/data/easing.js');
-const pageTransitionPath =
-        './docs/spec/page-transition.md'
-buildDocsList([pageTransitionPath], './_site/data/page-transition.js');
-const motionPath =
-        './docs/spec/motion.md'
-buildDocsList([motionPath], './_site/data/motion.js');
-
 buildCommon('./docs/practice', './_site/data/practice.js');
 buildCommon('./docs/pattern', './_site/data/pattern.js');
+buildCommon('./docs/spec', './_site/data/spec.js');
 buildCommon('./docs/resource', './_site/data/resource.js');

scripts/utils.js

@@ -5,7 +5,7 @@ const path = require('path');
 const R = require('ramda');
 
 const isMDFile = R.compose(R.equals('.md'), path.extname);
-exports.findMDFile = function findMDFile(dirPath) {
+exports.findMDFile = function findMDFile(dirPath, shallow) {
   let mds = [];
 
   R.forEach((fileName) => {
@@ -15,7 +15,12 @@ exports.findMDFile = function findMDFile(dirPath) {
       mds.push(filePath);
     }
     if (stat.isDirectory()) {
-      mds = mds.concat(findMDFile(filePath));
+      const indexFile = path.join(filePath, 'index.md');
+      if (shallow && fs.statSync(indexFile).isFile()) {
+        mds.push(indexFile);
+      } else {
+        mds = mds.concat(findMDFile(filePath));
+      }
     }
   }, fs.readdirSync(dirPath));
 

site/component/Article/index.jsx

@@ -35,7 +35,7 @@ export default class Article extends React.Component {
 
     return (
       <article className="markdown">
-        <h1>{ content.meta.chinese }</h1>
+        <h1>{ content.meta.chinese || content.meta.english }</h1>
         {
           jumper.length > 0 ?
             <section className="toc"><ul>{ jumper }</ul></section> :

site/component/MainContent/index.jsx

@@ -2,33 +2,55 @@ import React from 'react';
 import { Link } from 'react-router';
 import { Row, Col, Menu } from '../../../';
 import * as utils from '../utils';
+const SubMenu = Menu.SubMenu;
 
 function dashed(name) {
   return name.toLowerCase().trim().replace(/\s+/g, '-');
 }
 
 export default class MainContent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.generateMenuItem = this.generateMenuItem.bind(this);
+  }
+
+  generateMenuItem(item) {
+    const key = dashed(item.english);
+    const text = item.chinese || item.english;
+    const disabled = item.disabled === 'true';
+
+    const child = !item.link ?
+            <Link to={`/${this.props.category}/${key}`} disabled={disabled}>
+              { text }
+            </Link> :
+            <a href={item.link} target="_blank" disabled={disabled}>
+              { text }
+            </a>;
+
+    return (
+        <Menu.Item key={key} disabled={disabled}>
+        { child }
+      </Menu.Item>
+    );
+  }
+
   getMenuItems() {
     const props = this.props;
-    return props.menuItems.map((item) => {
-      const key = dashed(item.english);
-      const text = item.chinese || item.english;
-      const disabled = item.disabled === 'true';
+    const menuItems = props.menuItems;
+    const topLevel = menuItems.topLevel.map(this.generateMenuItem);
+    const subMenu = Object.keys(menuItems).filter((category) => category !== 'topLevel')
+            .map((category) => {
+              const subMenuItems = menuItems[category].map(this.generateMenuItem);
 
-      const child = !item.link ?
-              <Link to={`/${props.category}/${key}`} disabled={disabled}>
-                { text }
-              </Link> :
-              <a href={item.link} target="_blank" disabled={disabled}>
-                { text }
-              </a>;
+              return (
+                <SubMenu title={<h4>{category}</h4>} key={category}>
+                  { subMenuItems }
+                </SubMenu>
+              );
+            });
 
-      return (
-        <Menu.Item key={key} disabled={disabled}>
-          { child }
-        </Menu.Item>
-      );
-    });
+    return [...topLevel, ...subMenu];
   }
 
   render() {
@@ -39,7 +61,9 @@ export default class MainContent extends React.Component {
     return (
       <Row className="main-wrapper">
         <Col span="4">
-          <Menu mode="inline" selectedKeys={[activeMenuItem]} className="sidebar">
+          <Menu className="sidebar" mode="inline"
+            defaultOpenKeys={Object.keys(this.props.menuItems)}
+            selectedKeys={[activeMenuItem]}>
             { menuItems }
           </Menu>
         </Col>

site/component/Spec/index.jsx

@@ -1,80 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router';
-import { Row, Col, Menu } from '../../../';
-import * as utils from '../utils';
-const SubMenu = Menu.SubMenu;
-
-export default class Spec extends React.Component {
-  getMenuItems() {
-    return [
-      <Menu.Item key="introduce">
-        <Link to="/spec/introduce">
-          Ant Design
-        </Link>
-      </Menu.Item>,
-      <SubMenu key="basic" title={<h4>基础</h4>}>
-        <Menu.Item key="font">
-          <Link to="/spec/font">
-            字体
-          </Link>
-        </Menu.Item>
-        <Menu.Item key="typography">
-          <Link to="/spec/typography">
-            排版
-          </Link>
-        </Menu.Item>
-        <Menu.Item key="colors">
-          <Link to="/spec/color">
-            色彩
-          </Link>
-        </Menu.Item>
-        <Menu.Item key="layout">
-          <Link to="/spec/layout">
-            常用布局
-          </Link>
-        </Menu.Item>
-      </SubMenu>,
-      <SubMenu key="animation" title={<h4>动画</h4>}>
-        <Menu.Item key="easing">
-          <Link to="/spec/easing">
-            自然运动
-          </Link>
-        </Menu.Item>
-        <Menu.Item key="page-transition">
-          <Link to="/spec/page-transition">
-            互动转换
-          </Link>
-        </Menu.Item>
-        <Menu.Item key="motion">
-          <Link to="/spec/motion">
-            组件动画
-          </Link>
-        </Menu.Item>
-      </SubMenu>,
-    ];
-  }
-
-  render() {
-    const activeMenuItem = utils.getActiveMenuItem(this.props, 'introduce');
-    const menuItems = this.getMenuItems();
-    const { prev, next } = utils.getFooterNav(menuItems, activeMenuItem);
-
-    return (
-      <Row className="main-wrapper">
-        <Col span="4">
-          <Menu mode="inline" defaultOpenKeys={['basic', 'animation']}
-            selectedKeys={[activeMenuItem]}>
-            { menuItems }
-          </Menu>
-        </Col>
-        <Col span="20" className="main-container">
-          { this.props.children }
-          <section className="prev-next-nav">
-            { !!prev ? React.cloneElement(prev.props.children, { className: 'prev-page' }) : null }
-            { !!next ? React.cloneElement(next.props.children, { className: 'next-page' }) : null }
-          </section>
-        </Col>
-      </Row>
-    );
-  }
-}

site/entry/index.jsx

@@ -16,17 +16,10 @@ import ReactComponents from '../component/ReactComponents';
 import ComponentDoc from '../component/ComponentDoc';
 import componentDocsList from '../../_site/data/component-docs-list';
 import demosList from '../../_site/data/demos-list';
-import Spec from '../component/Spec';
-import specIntro from '../../_site/data/specIntro';
-import font from '../../_site/data/font';
-import typography from '../../_site/data/typography';
-import easing from '../../_site/data/easing';
-import pageTransition from '../../_site/data/page-transition';
-import motion from '../../_site/data/motion';
 
-import MainContent from '../component/MainContent';
 import practice from '../../_site/data/practice';
 import pattern from '../../_site/data/pattern';
+import spec from '../../_site/data/spec';
 import resource from '../../_site/data/resource';
 
 const Introduce = () => <Article content={introduce[0]} />;
@@ -43,58 +36,44 @@ const demosListChildren = componentDocsList.map((componentDoc) => {
   return <Route path={key} component={ComponentDocWrapper} key={key} />;
 });
 
-const SpecIntro = () => <Article content={specIntro[0]} />;
-const Font = () => <Article content={font[0]} />;
-const Typography = () => <Article content={typography[0]} />;
-const Easing = () => <Article content={easing[0]} />;
-const PageTransition = () => <Article content={pageTransition[0]} />;
-const Motion = () => <Article content={motion[0]} />;
-
-const Practice = (props) => {
-  return <MainContent {...props} category="practice" menuItems={practice.menuItems} />;
-};
-
+const Practice = utils.generateContainer('practice', practice.menuItems);
 const practiceChildren = utils.generateChildren(practice.pagesData);
 
-const Pattern = (props) => {
-  return <MainContent {...props} category="pattern" menuItems={pattern.menuItems} />;
-};
+const Pattern = utils.generateContainer('pattern', pattern.menuItems);
 const patternChildren = utils.generateChildren(pattern.pagesData);
 
-const Resource = (props) => {
-  return <MainContent {...props} category="resource" menuItems={resource.menuItems} />;
-};
+const Spec = utils.generateContainer('spec', spec.menuItems);
+const specChildren = utils.generateChildren(spec.pagesData);
+
+const Resource = utils.generateContainer('resource', resource.menuItems);
 const resourceChildren = utils.generateChildren(resource.pagesData);
 
-ReactDOM.render(<Router history={hashHistory}>
-  <Route path="/" component={App}>
-    <IndexRoute component={Home} />
-    <Route path="components" component={ReactComponents}>
-      <IndexRoute component={Introduce} />
-      <Route path="introduce" component={Introduce} />
-      <Route path="getting-started" component={GettingStarted} />
-      <Route path="install" component={Install} />
-      <Route path="upgrade-notes" component={UpgradeNotes} />
-      <Route path="changelog" component={Changelog} />
-      {demosListChildren}
+ReactDOM.render(
+  <Router history={hashHistory}>
+    <Route path="/" component={App}>
+      <IndexRoute component={Home} />
+      <Route path="components" component={ReactComponents}>
+        <IndexRoute component={Introduce} />
+        <Route path="introduce" component={Introduce} />
+        <Route path="getting-started" component={GettingStarted} />
+        <Route path="install" component={Install} />
+        <Route path="upgrade-notes" component={UpgradeNotes} />
+        <Route path="changelog" component={Changelog} />
+        { demosListChildren }
+      </Route>
+      <Route path="practice" component={Practice}>
+        { practiceChildren }
+      </Route>
+      <Route path="pattern" component={Pattern}>
+        { patternChildren }
+      </Route>
+      <Route path="spec" component={Spec}>
+        { specChildren }
+      </Route>
+      <Route path="resource" component={Resource}>
+        { resourceChildren }
+      </Route>
     </Route>
-    <Route path="spec" component={Spec}>
-      <IndexRoute component={SpecIntro} />
-      <Route path="introduce" component={SpecIntro} />
-      <Route path="font" component={Font} />
-      <Route path="typography" component={Typography} />
-      <Route path="easing" component={Easing} />
-      <Route path="page-transition" component={PageTransition} />
-      <Route path="motion" component={Motion} />
-    </Route>
-    <Route path="practice" component={Practice}>
-      { practiceChildren }
-    </Route>
-    <Route path="pattern" component={Pattern}>
-      { patternChildren }
-    </Route>
-    <Route path="resource" component={Resource}>
-      { resourceChildren }
-    </Route>
-  </Route>
-</Router>, document.getElementById('react-content'));
+  </Router>
+  , document.getElementById('react-content')
+);

site/entry/utils.js

@@ -1,11 +1,21 @@
 import React from 'react';
 import { Route, IndexRedirect } from 'react-router';
+import MainContent from '../component/MainContent';
 import Article from '../component/Article';
 
 function dashed(name) {
   return name.toLowerCase().trim().replace(/\s+/g, '-');
 }
 
+export function generateContainer(category, menuItems) {
+  return (props) => {
+    return (
+      <MainContent {...props}
+        category={category} menuItems={menuItems} />
+    );
+  };
+}
+
 export function generateChildren(pagesData) {
   const children = pagesData.map((pageData, index) => {
     const ArticleWrapper = () => <Article content={pageData} />;