chore: update UI

components/affix/index.md

@@ -2,6 +2,7 @@
 
 - category: Components
 - chinese: 固钉
+- type: 其它
 
 ---
 

components/queue-anim/index.md

@@ -2,6 +2,7 @@
 
 - category: Components
 - chinese: 进出场动画
+- type: 其它
 
 ---
 

components/spin/index.md

@@ -2,6 +2,7 @@
 
 - category: Components
 - chinese: 加载中
+- type: 其它
 
 ---
 

docs/practice/cases.md

@@ -74,9 +74,6 @@ AntV 将数据图形小组近几年在探索数据可视化过程中取得的成
 .toc {
   display: none;
 }
-.outside-link.internal {
-  display: none;
-}
 </style>
 
 <script>

site/common/styles/common.less

@@ -29,4 +29,15 @@
   margin-left: 6px;
   font-weight: normal;
   opacity: .67;
+}
+
+.outside-link:after {
+  content: '\E669';
+  font-family: 'anticon';
+  margin-left: 5px;
+  font-size: 12px;
+}
+
+.outside-link.internal {
+  display: none;
 }

site/component/MainContent/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router';
 import { Row, Col, Menu } from '../../../';
+import config from '../../website.config';
 const SubMenu = Menu.SubMenu;
 
 function dashed(name) {
@@ -39,13 +40,38 @@ export default class MainContent extends React.Component {
     );
   }
 
+  isNotTopLevel(level) {
+    return level !== 'topLevel';
+  }
+
+  generateSubMenuItems(obj) {
+    const topLevel = (obj.topLevel || []).map(this.generateMenuItem);
+    const itemGroups = Object.keys(obj).filter(this.isNotTopLevel)
+            .sort((a, b) => {
+              return config.typeOrder[a] - config.typeOrder[b];
+            })
+            .map((type, index) => {
+              const groupItems = obj[type].map(this.generateMenuItem);
+
+              return (
+                <Menu.ItemGroup title={type} key={index}>
+                  { groupItems }
+                </Menu.ItemGroup>
+              );
+            });
+    return [...topLevel, ...itemGroups];
+  }
+
   getMenuItems() {
     const props = this.props;
     const menuItems = props.menuItems;
-    const topLevel = menuItems.topLevel.map(this.generateMenuItem);
-    const subMenu = Object.keys(menuItems).filter((category) => category !== 'topLevel')
+    const topLevel = this.generateSubMenuItems(menuItems.topLevel);
+    const subMenu = Object.keys(menuItems).filter(this.isNotTopLevel)
+            .sort((a, b) => {
+              return config.categoryOrder[a] - config.categoryOrder[b];
+            })
             .map((category) => {
-              const subMenuItems = menuItems[category].map(this.generateMenuItem);
+              const subMenuItems = this.generateSubMenuItems(menuItems[category]);
 
               return (
                 <SubMenu title={<h4>{category}</h4>} key={category}>

site/component/utils.js

@@ -7,6 +7,12 @@ function isHeading(type) {
   return /h[1-6]/i.test(type);
 }
 
+function mdLangToHljsLang(lang) {
+  return lang.toLowerCase() === 'jsx' ?
+    'javascript' :
+    lang;
+}
+
 export function objectToComponent(object, index) {
   if (object === null) return;
 
@@ -26,13 +32,26 @@ export function objectToComponent(object, index) {
 
   if (object.type === 'html') {
     return React.createElement('div', {
+      className: 'markdown',
       key: index,
       dangerouslySetInnerHTML: { __html: children }
     });
   }
 
+  if (isHeading(object.type)) {
+    return React.createElement(object.type, {
+      key: index,
+    }, [
+      object.children,
+      <a className="anchor" key="anchor">#</a>,
+    ]);
+  }
+
   if (object.type === 'code') {
-    const highlightedCode = hljs.highlight('javascript', children).value;
+    const highlightedCode = hljs.highlight(
+      mdLangToHljsLang(object.props.lang),
+      children
+    ).value;
     return (
       <div className="highlight" key={index}>
         <pre>
@@ -43,21 +62,13 @@ export function objectToComponent(object, index) {
     );
   }
 
-  if (isHeading(object.type)) {
-    return React.createElement(object.type, {
-      key: index,
-    }, [
-      object.children,
-      <a className="anchor" key="anchor">#</a>,
-    ]);
-  }
-
   if (typeof children === 'string') {
     return React.createElement(object.type, {
       key: index,
       dangerouslySetInnerHTML: { __html: children }
     });
   }
+
   return React.createElement(
     object.type, { key: index },
     children && children.map(objectToComponent) // `hr` has no children

site/entry/utils.js

@@ -19,10 +19,15 @@ function getMenuItems(data) {
   }).forEach((meta) => {
     const category = meta.category || 'topLevel';
     if (!menuItems[category]) {
-      menuItems[category] = [];
+      menuItems[category] = {};
     }
 
-    menuItems[category].push(meta);
+    const type = meta.type || 'topLevel';
+    if (!menuItems[category][type]) {
+      menuItems[category][type] = [];
+    }
+
+    menuItems[category][type].push(meta);
   });
 
   return menuItems;
@@ -56,7 +61,7 @@ export function generateChildren(data) {
         component={Wrapper} />
     );
   });
-  const firstChild = menuItems.topLevel.find((item) => {
+  const firstChild = menuItems.topLevel.topLevel.find((item) => {
     return item.disabled !== 'true';
   });
   children.unshift(

site/website.config.js

@@ -0,0 +1,15 @@
+export default {
+  categoryOrder: {
+    组件: 0,
+
+    基础: 0,
+    动画: 1,
+  },
+  typeOrder: {
+    基本: 0,
+    表单: 1,
+    展示: 2,
+    导航: 3,
+    其它: 4,
+  },
+};