feat(umi-plugin): support to render side menu in layout (#10)

packages/umi-plugin-father-doc/package.json

@@ -43,5 +43,8 @@
     "unist-util-visit": "^2.0.1",
     "unist-util-visit-parents": "^3.0.1"
   },
+  "devDependencies": {
+    "@types/history": "^4.7.3"
+  },
   "license": "MIT"
 }

packages/umi-plugin-father-doc/src/index.ts

@@ -1,16 +1,19 @@
 import path from 'path';
 import { IApi } from 'umi-types';
 import getRouteConfig from './routes/getRouteConfig';
+import getMenuFromRoutes from'./routes/getMenuFromRoutes';
 
 export default function (api: IApi) {
+  const routeConfig = getRouteConfig(api.paths);
+
   api.registerPlugin({
     id: require.resolve('umi-plugin-react'),
     apply: require('umi-plugin-react').default,
     opts: { title: 'father-doc' },
   });
 
   api.modifyRoutes((routes) => {
-    const result = getRouteConfig(api.paths);
+    const result = routeConfig;
     const childRoutes = result[0].routes;
 
     // insert TitleWrapper for routes
@@ -30,16 +33,33 @@ export default function (api: IApi) {
     return result;
   });
 
+  // exclude .md file for url-loader
   api.modifyDefaultConfig(config => ({
     ...config,
-    urlLoaderExcludes: [/.md$/],
+    urlLoaderExcludes: [/\.md$/],
   }));
 
+  // configure loader for .md file
   api.chainWebpackConfig(config => {
     config.module
       .rule('md')
       .test(/\.md$/)
       .use('father-doc')
-      .loader(require.resolve('./loader'))
+      .loader(require.resolve('./loader'));
+  });
+
+  // pass menu props for layout component
+  api.modifyRouteComponent((module, { component }) => {
+    let ret = module;
+
+    if (/\/layout\.[tj]sx?$/.test(component)) {
+      ret = `props => React.createElement(${
+        module
+      }, { menu: { items: ${
+        JSON.stringify(getMenuFromRoutes(routeConfig[0].routes)).replace(/\"/g, '\'')
+      } }, ...props })`;
+    }
+
+    return ret;
   });
 }

packages/umi-plugin-father-doc/src/routes/getRouteConfig.ts

@@ -7,7 +7,7 @@ import getRouteConfigFromDir from './getRouteConfigFromDir';
 export default (paths: IApi['paths']): IRoute[] => {
   const config = [{
     path: '/',
-    component: path.join(__dirname, '../../src/fixtures/layout.jsx'),
+    component: path.join(__dirname, '../themes/default/layout.js'),
     routes: [],
   }];
   const docsPath = path.join(paths.cwd, 'docs');

packages/umi-plugin-father-doc/src/fixtures/layout.less → packages/umi-plugin-father-doc/src/themes/default/layout.less

@@ -1,20 +1,30 @@
 @import 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism.css';
 @import 'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/3.0.1/github-markdown.min.css';
 
+@menu-width: 300px;
+
 body {
   margin: 0;
 }
 
 :global {
-  #root {
-    margin: 0 auto;
-    max-width: 800px;
-    min-height: 100vh;
-    padding: 20px 40px;
-    background-color: #fff;
-  }
-
   .markdown-body .anchor .octicon {
     font-size: 20px;
   }
 }
+
+.wrapper {
+  min-height: 100vh;
+  padding-left: @menu-width + 32px;
+  padding-right: 32px;
+
+  .menu {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: @menu-width;
+    border-right: 1px solid #eee;
+    box-sizing: border-box;
+  }
+}

packages/umi-plugin-father-doc/src/themes/default/layout.tsx

@@ -0,0 +1,44 @@
+// Todo: fix definition files cannot be identified problem
+/// <reference path="../types/global.d.ts" />
+/// <reference path="../types/typings.d.ts" />
+
+import React, { Component, MouseEvent } from 'react';
+import { IMenuItem } from '../../routes/getMenuFromRoutes';
+import styles from './layout.less';
+
+export interface ILayoutProps {
+  menu: {
+    items: IMenuItem[];
+  };
+}
+
+export default class Layout extends Component<ILayoutProps> {
+  handleMenuItemClick = (e: MouseEvent, path: string) => {
+    window.g_history.push(path);
+    e.preventDefault();
+  }
+
+  render () {
+    const { children, menu } = this.props;
+
+    return (
+      <div className={styles.wrapper}>
+        <div className={styles.menu}>
+          <ul>
+            {menu.items.map((item) => (
+              <li>
+                <a
+                  href={item.path}
+                  onClick={e => this.handleMenuItemClick(e, item.path)}
+                >
+                  {item.title}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
+        {children}
+      </div>
+    );
+  }
+}

packages/umi-plugin-father-doc/src/themes/typings/global.d.ts

@@ -0,0 +1,7 @@
+import { History } from 'history';
+
+declare global {
+  interface Window {
+    g_history: History;
+  }
+}

packages/umi-plugin-father-doc/src/themes/typings/typings.d.ts

@@ -0,0 +1 @@
+declare module '*.less';