site: simplify routes

site/entry/index.jsx

@@ -20,22 +20,12 @@ window['react-dom'] = ReactDOM;
 window.antd = antd;
 
 const ReactComponents = utils.generateContainer(reactComponents);
-const reactComponentsChildren = utils.generateChildren(reactComponents);
-
 const Practice = utils.generateContainer(practice);
-const practiceChildren = utils.generateChildren(practice);
-
 const Pattern = utils.generateContainer(pattern);
-const patternChildren = utils.generateChildren(pattern);
-
 const Spec = utils.generateContainer(spec);
-const specChildren = utils.generateChildren(spec);
-
 const Resource = utils.generateContainer(resource);
-const resourceChildren = utils.generateChildren(resource);
-
-const redirects = Object.keys(config.redirects).map((from) => {
-  return <Redirect from={from} to={config.redirects[from]} />;
+const redirects = Object.keys(config.redirects).map((from, index) => {
+  return <Redirect from={from} to={config.redirects[from]} index={index} />;
 });
 
 ReactDOM.render(
@@ -43,20 +33,30 @@ ReactDOM.render(
     <Route path="/" component={App}>
       <IndexRoute component={Home} />
       <Route path="components" component={ReactComponents}>
-        { reactComponentsChildren }
+        { utils.generateIndex(reactComponents) }
+        <Route path=":children"
+          component={utils.getChildrenWrapper(reactComponents)} />
       </Route>
       { redirects }
       <Route path="docs/practice" component={Practice}>
-        { practiceChildren }
+        { utils.generateIndex(practice) }
+        <Route path=":children"
+          component={utils.getChildrenWrapper(practice)} />
       </Route>
       <Route path="docs/pattern" component={Pattern}>
-        { patternChildren }
+        { utils.generateIndex(pattern) }
+        <Route path=":children"
+          component={utils.getChildrenWrapper(pattern)} />
       </Route>
       <Route path="docs/spec" component={Spec}>
-        { specChildren }
+        { utils.generateIndex(spec) }
+        <Route path=":children"
+          component={utils.getChildrenWrapper(spec)} />
       </Route>
       <Route path="docs/resource" component={Resource}>
-        { resourceChildren }
+        { utils.generateIndex(resource) }
+        <Route path=":children"
+          component={utils.getChildrenWrapper(resource)} />
       </Route>
     </Route>
   </Router>

site/entry/utils.js

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Route, IndexRedirect } from 'react-router';
+import { IndexRedirect } from 'react-router';
 import MainContent from '../component/MainContent';
 import Article from '../component/Article';
 import ComponentDoc from '../component/ComponentDoc';
 import demosList from '../../_site/data/demos-list';
+import { redirects } from '../website.config';
 
 function fileNameToPath(fileName) {
   const snippets = fileName.replace(/(\/index)?\.md$/i, '').split('/');
@@ -44,33 +45,29 @@ export function generateContainer(data) {
   };
 }
 
-function getPagesData(data) {
-  return Object.keys(data)
-    .map((key) => data[key]);
-}
-
-export function generateChildren(data) {
-  const pagesData = getPagesData(data);
-  const children = pagesData.map((pageData, index) => {
-    const meta = pageData.meta;
-    const hasDemos = demosList[meta.fileName];
-    const Wrapper = !hasDemos ?
-            (props) => <Article {...props} content={pageData} /> :
-            (props) => <ComponentDoc {...props} doc={pageData} />;
-    return (
-      <Route key={index}
-        path={fileNameToPath(meta.fileName)}
-        component={Wrapper} />
-    );
-  });
-
+export function generateIndex(data) {
   const menuItems = getMenuItems(data);
   const firstChild = menuItems.topLevel.topLevel.find((item) => {
     return item.disabled !== 'true';
   });
-  children.unshift(
+  return (
     <IndexRedirect key="index"
       to={fileNameToPath(firstChild.fileName)} />
   );
-  return children;
+}
+
+const pathToFile = {};
+Object.keys(redirects).forEach((key) => pathToFile[redirects[key]] = key);
+pathToFile['components/changelog'] = './CHANGELOG'; // TODO
+export function getChildrenWrapper(data) {
+  return function childrenWrapper(props) {
+    const trimedPathname = props.location.pathname.replace(/^\//, '');
+    const processedPathname = pathToFile[trimedPathname] || trimedPathname;
+    const doc = data[`${processedPathname}.md`] ||
+            data[`${processedPathname}/index.md`];
+    const hasDemos = demosList[doc.meta.fileName];
+    return !hasDemos ?
+      <Article {...props} content={doc} /> :
+      <ComponentDoc {...props} doc={doc} />;
+  };
 }