Improve changelog page style

CHANGELOG.md

@@ -1,6 +1,12 @@
 ---
 order: 3
 chinese: 更新日志
+toc: false
+timeline: true
+---
+
+你也可以查看 GitHub 上的 [发布日志](https://github.com/ant-design/ant-design/releases)。
+
 ---
 
 ## 0.12.14
@@ -347,8 +353,6 @@ chinese: 更新日志
 
 > [0.11 升级指南](http://ant.design/docs/react/upgrade-notes#0-10-gt-0-11)
 
----
-
 ## 0.10.5
 
 `2016-01-04`

site/common/styles/markdown.less

@@ -67,9 +67,9 @@
   padding-left: 4px;
 }
 
-.markdown > ul li p,
-.markdown > ol li p {
-  margin: 0.6em 0;
+.markdown > ul li > p,
+.markdown > ol li > p {
+  margin: 0.2em 0;
 }
 
 .markdown ol > li {
@@ -244,3 +244,27 @@
     height: 80px;
   }
 }
+
+// For Changelog
+.markdown {
+  ul.ant-timeline {
+    li.ant-timeline-item {
+      list-style: none;
+      margin: 0;
+      padding: 0 0 30px 0;
+      .ant-timeline-item-content {
+        font-size: 14px;
+        padding-left: 32px;
+        position: relative;
+        top: -15px;
+        > h2 {
+          margin-top: 0;
+          padding-top: 0.5px;
+        }
+      }
+    }
+    li.ant-timeline-item:first-child {
+      margin-top: 40px;
+    }
+  }
+}

site/component/Article/index.jsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { Children, cloneElement } from 'react';
 import { Link } from 'react-router';
 import * as utils from '../utils';
 import { getTagName, getChildren } from 'jsonml.js/lib/utils';
+import { Timeline } from 'antd';
 
 export default class Article extends React.Component {
   componentDidMount() {
@@ -11,7 +12,25 @@ export default class Article extends React.Component {
     const { chinese, english } = this.props.content.meta;
     utils.setTitle(`${chinese || english} - Ant Design`);
   }
-
+  getTimelineFromArticle(article) {
+    const { content } = this.props;
+    const { meta } = content;
+    if (!meta.timeline) {
+      return article;
+    }
+    const timelineItems = [];
+    let temp = [];
+    Children.forEach(article.props.children, (child, i) => {
+      if (child.type === 'h2' && temp.length > 0) {
+        timelineItems.push(<Timeline.Item key={i}>{temp}</Timeline.Item>);
+        temp = [];
+      }
+      temp.push(child);
+    });
+    return cloneElement(article, {
+      children: <Timeline>{timelineItems}</Timeline>,
+    });
+  }
   render() {
     const { content, location } = this.props;
     const jumper = content.description.filter((node) => {
@@ -31,7 +50,7 @@ export default class Article extends React.Component {
     return (
       <article className="markdown">
         <h1>
-          { meta.chinese || meta.english }
+          {meta.english} {meta.chinese}
           {
             !meta.subtitle ? null :
               <span className="subtitle">{ meta.subtitle }</span>
@@ -45,15 +64,15 @@ export default class Article extends React.Component {
             )
         }
         {
-          jumper.length > 0 ?
+          (jumper.length > 0 && meta.toc !== false) ?
             <section className="toc"><ul>{ jumper }</ul></section> :
             null
         }
         {
-          utils.jsonmlToComponent(
+          this.getTimelineFromArticle(utils.jsonmlToComponent(
             location.pathname,
             ['section', { className: 'markdown' }].concat(description)
-          )
+          ))
         }
       </article>
     );

site/component/ComponentDoc/index.jsx

@@ -81,7 +81,7 @@ export default class ComponentDoc extends React.Component {
           </ul>
         </Affix>
         <section className="markdown">
-          <h1>{meta.chinese || meta.english}</h1>
+          <h1>{meta.english} {meta.chinese}</h1>
           {
             utils.jsonmlToComponent(
               location.pathname,