Change site struction

docs/download.md

@@ -1,6 +1,6 @@
 # 下载
 
-- category: React
+- category: top
 - order: 2
 
 ---
@@ -54,7 +54,7 @@ $ npm install antd@beta --save
 
 ## 开发工具
 
-Ant Design 提供了开发构建的命令行工具，可以安装到全局直接使用：
+我们提供了开发构建的命令行工具，可以安装到全局直接使用：
 
 ```bash
 $ npm install antd-bin -g

docs/getting-started.md

@@ -1,15 +1,15 @@
 # 快速上手
 
-- category: React
+- category: top
 - order: 1
 
 ---
 
-Ant Design 致力于提供给程序员愉悦的开发体验。
+Ant Design React 致力于提供给程序员愉悦的开发体验。
 
 ## 第一个例子
 
-Ant Design 封装了一套基于 React 实现的 UI 组件，可以用 React 的方式直接使用。
+我们封装了一套基于 React 实现的 UI 组件，可以用 React 的方式直接使用。
 
 下面有一个使用了 [日期选择](http://ant.design/components/datepicker) 组件的简单例子。
 
@@ -43,7 +43,7 @@ Ant Design 封装了一套基于 React 实现的 UI 组件，可以用 React 的
 ## 标准项目
 
 实际项目开发中，你会需要 CommonJS 、JSX 构建、打包部署等一系列工程化的需求。
-Ant Design 提供了一套 `npm` + `webpack` 的开发工具链来辅助开发，下面我们用一个简单的实例来说明。
+提供了一套 `npm` + `webpack` 的开发工具链来辅助开发，下面我们用一个简单的实例来说明。
 
 ### 1. 安装命令行工具
 
@@ -65,7 +65,7 @@ $ npm install
 
 ### 3. 使用组件
 
-编辑 `index.js`，使用 Ant Design 的组件：
+编辑 `index.js`，使用 Ant Design React 的组件：
 
 ```jsx
 import React from 'react';
@@ -140,11 +140,11 @@ $ npm run build
 
 入口文件会构建到 `dist` 目录中，你可以自由部署到不同环境中进行引用。
 
-> 上述例子用于帮助你理解 Ant Design 的使用流程，并非真实的开发过程，你可以根据自己的项目开发流程进行接入。
+> 上述例子用于帮助你理解 Ant Design React 的使用流程，并非真实的开发过程，你可以根据自己的项目开发流程进行接入。
 
 ## 兼容性
 
-Ant Design 支持所有的现代浏览器和 IE8+。
+Ant Design React 支持所有的现代浏览器和 IE8+。
 
 对于 IE8，需要提供 [es5-shim](http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills) 等 Polyfills 的支持。
 

docs/introduce.md

@@ -1,19 +1,17 @@
 # 介绍
 
-- category: React
+- category: top
 - order: 0
 
 ---
 
-一套企业级的 UI 设计语言和 React 实现。
-
-设计文档和组件实现均在紧密整理和开发中，部分页面可能不完善，预计 8 月份释出正式版本。
+这里是 Ant Design 的 React 实现，主要设计和服务于企业级后台产品。
 
 ![](https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg)
 
 ## 特性
 
-- 提炼自企业级后台产品的交互语言和视觉风格。
+- Designed as Ant Design.
 - 丰富实用的 React UI 组件。
 - 基于 React 的组件化开发模式。
 - 背靠 npm 生态圈。

site/templates/aside.html

@@ -2,11 +2,20 @@
 <aside class="aside-container">
   <ul>
   {%- for category in categories %}
-  {%- set items = resource.pages|find_category(category) %}
-    <li>
-      <h4>{{category}}</h4>
+    {%- if category.name === 'top' %}
+      {%- for item in category.pages %}
+      <li class="{%- if item.title === post.title %}current{%- endif %}">
+        <a href="{{permalink_url(item)}}" class="{%- if item.meta.disabled %}nav-link-disabled{%- endif %}">
+          {{item.title}}
+          <span class="chinese">{{item.meta.chinese}}</span>
+        </a>
+      </li>
+      {%- endfor %}
+    {%- else %}
+    <li open="open">
+      <h4>{{category.name}}</h4>
       <ul class="{%- if category === post.meta.category %}aside-list-show{%- endif %}">
-        {%- for item in items %}
+        {%- for item in category.pages %}
         <li class="{%- if item.title === post.title %}current{%- endif %}">
           <a href="{{permalink_url(item)}}" class="{%- if item.meta.disabled %}nav-link-disabled{%- endif %}">
             {{item.title}}
@@ -16,6 +25,7 @@
         {%- endfor %}
       </ul>
     </li>
+    {%- endif %}
   {%- endfor %}
   </ul>
 </aside>

site/templates/layout.html

@@ -93,7 +93,7 @@
             <a href="/">首页</a>
           </li>
           <li class="{%- if post.directory|rootDirectoryIn(['spec']) %}current{%- endif %}">
-            <a href="/spec/font">设计</a>
+            <a href="/spec/introduce">设计</a>
           </li>
           <li class="{%- if post.directory|rootDirectoryIn(['docs','components']) %}current{%- endif %}">
             <a href="/docs/introduce">React</a>

site/theme.js

@@ -61,28 +61,45 @@ module.exports = function(nico) {
         directories = ['docs', 'components'];
       }
       var cacheKey = directories.join('-');
-      var categories = Categories[cacheKey] || _.uniq(getAllPosts(posts).map(function(item) {
-        var itemDirectory = item.directory.split('/')[0];
-        if (directories.indexOf(itemDirectory) >= 0) {
-          return item.meta.category;
-        }
-      })).filter(function(n) {
-        return n != undefined;
-      });
-      // React 的分类排序
-      categories = categories.sort(function(a, b) {
-        var cats = ['React', 'Components'];
-        a = cats.indexOf(a);
-        b = cats.indexOf(b);
-        return a - b;
-      });
-      // 设计的分类排序
-      categories = categories.sort(function(a, b) {
-        var cats = ['文字', '色彩', '动画'];
-        a = cats.indexOf(a);
-        b = cats.indexOf(b);
-        return a - b;
-      })
+      var categories;
+      if (Categories[cacheKey]) {
+        categories = Categories[cacheKey];
+      } else {
+        categories = {};
+        _.uniq(getAllPosts(posts).forEach(function(item) {
+          var itemDirectory = item.directory.split('/')[0];
+          var cat = item.meta.category;
+          if (cat && directories.indexOf(itemDirectory) >= 0) {
+            categories[cat] = categories[cat] || [];
+            categories[cat].push(item);
+          }
+        }));
+        categories = Object.keys(categories).map(function(cat) {
+          var pages = categories[cat].sort(function(a, b) {
+            a = a.meta.order || 100;
+            b = b.meta.order || 100;
+            return parseInt(a, 10) - parseInt(b, 10);
+          });
+          return {
+            name: cat,
+            pages: pages
+          };
+        });
+        // React 的分类排序
+        categories = categories.sort(function(a, b) {
+          var cats = ['React', 'Components'];
+          a = cats.indexOf(a.name);
+          b = cats.indexOf(b.name);
+          return a - b;
+        });
+        // 设计的分类排序
+        categories = categories.sort(function(a, b) {
+          var cats = ['文字', '色彩', '动画'];
+          a = cats.indexOf(a.name);
+          b = cats.indexOf(b.name);
+          return a - b;
+        });
+      }
       Categories[cacheKey] = categories;
       return categories;
     },

spec/introduce.md

@@ -0,0 +1,11 @@
+# Ant Design
+
+- category: top
+- order: 0
+
+---
+
+Ant Design 是一个 UI 设计语言，是提炼和应用于企业级金融产品的一套交互语言和视觉体系。
+
+![](https://t.alipayobjects.com/images/rmsweb/T11aVgXc4eXXXXXXXX.svg)
+

static/style.css

@@ -338,22 +338,22 @@ a.nav-link-disabled {
   display: block;
   width: 50px;
   height: 50px;
-    margin: auto;
+  margin: auto;
   animation: loadTween 2S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
-    -webkit-animation: loadTween 2S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;;
+  -webkit-animation: loadTween 2S cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;;
 }
-.load-box span{
-    display: inline-block;
+.load-box span {
+  display: inline-block;
 }
-.load-box span>p{
-    float: left;
+.load-box span > p {
+  float: left;
 }
-.load-main-box .load-bar{
-    width: 0%;
-    height: 2px;
-    background: #6EB4E0;
-    transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-    -webkit-transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);;
+.load-main-box .load-bar {
+  width: 0%;
+  height: 2px;
+  background: #6EB4E0;
+  transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  -webkit-transition: width .3s cubic-bezier(0.785, 0.135, 0.15, 0.86);;
 }
 .load-out {
   -webkit-animation: alphaOut .5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
@@ -384,14 +384,14 @@ footer ul li {
   padding: 5px 2% 15px;
 }
 
-footer ul li>h2 {
+footer ul li > h2 {
   font-size: 1em;
   color: #5C6B77;
   margin: 10px auto 0;
   font-weight: normal;
 }
 
-footer ul li>h3,
+footer ul li > h3,
 footer h3 {
   font-size: 0.75em;
   color: #5C6B77;
@@ -425,7 +425,7 @@ footer ul li > a {
 }
 
 .aside-container li h4 {
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 600;
   padding: 10px 0 10px 46px;
   margin: 0;
@@ -436,13 +436,32 @@ footer ul li > a {
   position: relative;
   z-index: 1;
   background: #F9F9F9;
+  position: relative;
 }
 
-.aside-container li>ul.aside-list-show {
+.aside-container li h4:after {
+  position: absolute;
+  top: 11px;
+  right: 30px;
+  content: "\e600";
+  font-family: "anticon";
+  transform: scale(0.6);
+  font-size: 12px;
+  color: #5C6B76;
+  opacity: 0.4;
+  transform: scale(0.6) rotate(180deg);
+  transition: transform 0.3s ease;
+}
+
+.aside-container li[open=open] h4:after {
+  transform: scale(0.6) rotate(0deg);
+}
+
+.aside-container li > ul.aside-list-show {
   display: block;
 }
 
-.aside-container li>ul li {
+.aside-container li > ul li {
   border-left: 3px solid transparent;
 }
 
@@ -455,6 +474,17 @@ footer ul li > a {
   color: #5C6B76;
 }
 
+.aside-container > ul > li > a {
+  padding-left: 46px;
+  font-size: 14px;
+  font-weight: 600;
+  border-left: 3px solid transparent;
+}
+
+.aside-container > ul > li.current > a {
+  border-left: 0;
+}
+
 .aside-container .chinese {
   font-size: 12px;
   margin-left: 6px;