add footer & footer nav

Author: Fisherma

docs/changelog.md

@@ -0,0 +1,15 @@
+# 更新日志
+
+`ant-design-san` 严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。
+
+### 发布周期
+
+* 修订版本号：每周末会进行日常 bugfix 更新。（如果有紧急的 bugfix，则任何时候都可发布）
+* 次版本号：带有新特性的向下兼容的版本。
+* 主版本号：含有破坏性更新和新特性，不在发布周期内。
+
+### 0.2.0
+
+#### Features
+
+* 对外第一个版本，提供常用 61 个[组件](https://github.com/ecomfe/santd/blob/master/src/index.js)。

docs/introduce.md

@@ -65,7 +65,7 @@ import 'santd/dist/santd.css';
         plugins: [['import', {
             libraryName: 'santd',
             libraryDirectory: 'es',
-            style: 'css'
+            style: true
         }]]
     }
 }

site/src/index.js

@@ -13,7 +13,7 @@ import Content from './containers/Content';
 import Header from './containers/Header';
 import Navigator from './containers/Navigator';
 
-import {Notification, Col, Row, Affix} from 'santd';
+import {Notification, Col, Row, Affix, Icon} from 'santd';
 
 import routes from './lib/routes';
 import './style/index.less';
@@ -28,21 +28,58 @@ class Index extends Component {
                 <s-row>
                     <s-col xs="24" sm="24" md="24" lg="6" xl="5" xxl="4" class="main-menu">
                         <s-affix>
-                                <section class="main-menu-inner">
-                                    <doc-navigator
-                                        class="aside-container menu-site"
-                                        style="top: {{navigatorFixedTop}}px;"
-                                        routes="{{routes}}"
-                                        currentPath="{{currentPath}}"
-                                        on-redirect="handleRedirect"
-                                    />
-                                </section>
-                            </s-affix>
+                            <section class="main-menu-inner">
+                                <doc-navigator
+                                    class="aside-container menu-site"
+                                    style="top: {{navigatorFixedTop}}px;"
+                                    routes="{{routes}}"
+                                    currentPath="{{currentPath}}"
+                                    on-redirect="handleRedirect"
+                                />
+                            </section>
+                        </s-affix>
                     </s-col>
                     <s-col xs="24" sm="24" md="24" lg="18" xl="19" xxl="20">
                         <section class="main-container">
                             <doc-content content="{{content}}" />
                         </section>
+                        <section class="prev-next-nav">
+                            <a class="prev-page" href="#{{leftNav.key}}" s-if="leftNav"><s-icon type="left" /> {{leftNav.text || leftNav.name}}</a>
+                            <a class="next-page" href="#{{rightNav.key}}" s-if="rightNav">{{rightNav.text || rightNav.name}} <s-icon type="right" /></a>
+                        </section>
+                        <footer id="footer">
+                            <div class="footer-wrap">
+                                <s-row>
+                                    <s-col xs="24" sm="24" md="6">
+                                        <div class="footer-center">
+                                            <h2>相关资源</h2>
+                                            <div><a href="https://ant.design/docs/react/introduce-cn" target="_blank">Ant Design</a><span> - </span><span>React</span></div>
+                                            <div><a href="https://antdv.com/docs/vue/introduce-cn" target="_blank">Ant Design</a><span> - </span><span>Vue</span></div>
+                                            <div><a href="https://github.com/NG-ZORRO/ng-zorro-antd" target="_blank">Ant Design</a><span> - </span><span>Angular</span></div>
+                                            <div><a href="https://github.com/websemantics/awesome-ant-design" target="_blank">Awesome Ant Design</a></div>
+                                            <div><a href="https://baidu.github.io/san/">San</a></div>
+                                        </div>
+                                    </s-col>
+                                    <s-col xs="24" sm="24" md="6">
+                                        <div class="footer-center">
+                                            <h2>帮助</h2>
+                                            <div><a href="https://github.com/ecomfe/santd" target="_blank">GitHub</a></div>
+                                            <div><a href="#/docs/changelog">更新日志</a></div>
+                                        </div>
+                                    </s-col>
+                                    <s-col xs="24" sm="24" md="6">
+                                        <div class="footer-center">
+                                            <h2><img alt="" class="title-icon" src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg"><span>更多产品</span></h2>
+                                            <div><a href="https://yuque.com/" target="_blank "><i nz-icon="" nztheme="fill" nztype="yuque" style="margin-right: 4px; color: rgb(37, 184, 100);" class="anticon anticon-yuque"><svg viewBox="64 64 896 896" fill="currentColor" width="1em" height="1em" data-icon="yuque" aria-hidden="true"><path d="M854.6 370.6c-9.9-39.4 9.9-102.2 73.4-124.4l-67.9-3.6s-25.7-90-143.6-98c-117.9-8.1-195-3-195-3s87.4 55.6 52.4 154.7c-25.6 52.5-65.8 95.6-108.8 144.7-1.3 1.3-2.5 2.6-3.5 3.7C319.4 605 96 860 96 860c245.9 64.4 410.7-6.3 508.2-91.1 20.5-.2 35.9-.3 46.3-.3 135.8 0 250.6-117.6 245.9-248.4-3.2-89.9-31.9-110.2-41.8-149.6z"></path></svg></i> 语雀</a><span> - </span><span>知识创作与分享工具</span></div>
+                                            <div><a href="https://yunfengdie.com/" target="_blank "><span>云凤蝶</span></a><span> - </span><span>移动建站平台</span></div>
+                                            <div><a href="https://antv.alipay.com/" rel="noopener noreferrer" target="_blank">AntV</a><span> - </span><span>数据可视化</span></div>
+                                            <div><a href="https://eggjs.org/" rel="noopener noreferrer" target="_blank">Egg</a><span> - </span><span>企业级 Node 开发框架</span></div>
+                                            <div><a href="http://xtech.antfin.com/" target="_blank "><span>蚂蚁体验科技</span></a></div>
+                                        </div>
+                                    </s-col>
+                                </s-row>
+                            </div>
+                        </footer>
                     </s-col>
                 </s-row>
             </div>
@@ -55,9 +92,37 @@ class Index extends Component {
         'doc-navigator': Navigator,
         's-col': Col,
         's-row': Row,
-        's-affix': Affix
+        's-affix': Affix,
+        's-icon': Icon
     };
 
+    static computed = {
+        leftNav() {
+            const currentPath = this.data.get('currentPath');
+            const flattenRouter = this.data.get('flattenRouter') || [];
+            let leftNav;
+            flattenRouter.forEach((router, index) => {
+                if (router.key === currentPath) {
+                    leftNav = flattenRouter[index - 1];
+                }
+            });
+
+            return leftNav;
+        },
+        rightNav() {
+            const currentPath = this.data.get('currentPath');
+            const flattenRouter = this.data.get('flattenRouter') || [];
+            let rightNav;
+            flattenRouter.forEach((router, index) => {
+                if (router.key === currentPath) {
+                    rightNav = flattenRouter[index + 1];
+                }
+            });
+
+            return rightNav;
+        }
+    }
+
     initData() {
         return {
             routerMap: {},
@@ -67,19 +132,25 @@ class Index extends Component {
 
     inited() {
         let routerMap = {};
+        let flattenRouter = [];
         const routes = this.data.get('routes');
         routes.forEach(item => {
             routerMap[item.key] = {};
-            item.leaf && item.leaf.forEach(subItem => (
-                routerMap[item.key][subItem.path] = true
-            ));
-            item.list && item.list.forEach(listItem => (
-                listItem.leaf && listItem.leaf.forEach(subItem => (
-                    routerMap[item.key][subItem.path] = true
-                ))
-            ));
+            if (!item.list) {
+                flattenRouter.push(item);
+            }
+            item.leaf && item.leaf.forEach(subItem => {
+                routerMap[item.key][subItem.path] = true;
+            });
+            item.list && item.list.forEach(listItem => {
+                listItem.leaf && listItem.leaf.forEach(subItem => {
+                    flattenRouter.push(subItem);
+                    routerMap[item.key][subItem.path] = true;
+                });
+            });
         });
         this.data.set('routerMap', routerMap);
+        this.data.set('flattenRouter', flattenRouter);
     }
 
     attached() {

site/src/lib/routes.js

@@ -18,6 +18,11 @@ export default [
         path: 'theme',
         key: '/docs/theme'
     },
+    {
+        name: '更新日志',
+        path: 'changelog',
+        key: '/docs/changelog'
+    },
     {
         name: '国际化',
         path: 'i18n',

site/theme/static/footer.less

@@ -9,7 +9,7 @@ footer {
   position: relative;
   z-index: 9;
   color: rgba(255, 255, 255, 0.65);
-  .ant-row {
+  .santd-row {
     text-align: center;
     .footer-center {
       display: inline-block;
@@ -24,7 +24,7 @@ footer {
           width: 27px;
           margin-right: 16px;
         }
-        > .anticon {
+        > .santdicon {
           font-size: 16px;
           position: absolute;
           left: -22px;
@@ -39,7 +39,7 @@ footer {
   }
   .footer-wrap {
     position: relative;
-    padding: 86px @padding-space 93px @padding-space;
+    padding: 60px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.25);
   }
   .bottom-bar {
@@ -67,4 +67,7 @@ footer {
       color: rgba(255, 255, 255, 1);
     }
   }
+  svg {
+    display: inline-block;
+  }
 }

site/theme/static/page-nav.less

@@ -1,9 +1,6 @@
 .prev-next-nav {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: ~"calc(100% - 194px - 64px)";
   margin-left: 64px;
+  margin-right: 64px;
   font-size: 14px;
   border-top: 1px solid @site-border-color-split;
 
@@ -16,43 +13,9 @@
     text-decoration: none;
   }
 
-  > a.prev-page {
-    &:before {
-      font-family: 'anticon';
-      content: '\e61c';
-      font-size: 12px;
-      margin-right: 1em;
-      color: @site-text-color-secondary;
-      transition: all .3s;
-      position: relative;
-      left: 0;
-    }
-
-    &:hover:before {
-      color: @primary-color;
-      left: -3px;
-    }
-  }
-
   > .next-page {
     text-align: right;
     float: right;
-
-    &:after {
-      font-family: 'anticon';
-      content: '\e61b';
-      font-size: 12px;
-      margin-left: 1em;
-      color: @site-text-color-secondary;
-      transition: all .3s;
-      position: relative;
-      right: 0;
-    }
-
-    &:hover:after {
-      color: @primary-color;
-      right: -3px;
-    }
   }
 
   .chinese {