feat(umi-plugin): support to read frontmatter (#4)

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

@@ -28,9 +28,12 @@
     "@babel/traverse": "^7.7.2",
     "@babel/types": "^7.7.2",
     "@mapbox/rehype-prism": "^0.3.1",
+    "js-yaml": "^3.13.1",
     "rehype-stringify": "^6.0.0",
+    "remark-frontmatter": "^1.3.2",
     "remark-parse": "^7.0.1",
     "remark-rehype": "^5.0.0",
+    "umi-plugin-react": "^1.13.1",
     "umi-types": "^0.5.4",
     "unified": "^8.4.1",
     "unist-util-visit": "^2.0.0"

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

@@ -1,12 +1,31 @@
+import path from 'path';
 import { IApi } from 'umi-types';
 import getRouteConfig from './routes/getRouteConfig';
 
 export default function (api: IApi) {
+  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 childRoutes = result[0].routes;
+
+    // insert TitleWrapper for routes
+    childRoutes.forEach((item) => {
+      // see also: https://github.com/umijs/umi/blob/master/packages/umi-plugin-react/src/plugins/title/index.js#L37
+      if (item.title && (!item.routes || !item.routes.length)) {
+        item.Routes = [
+          ...(item.Routes || []),
+          path.relative(api.paths.cwd, path.join(api.paths.absTmpDirPath, './TitleWrapper.jsx')),
+        ];
+      }
+    });
 
     // append umi NotFound component to routes
-    result[0].routes.push(...routes.filter(({ path }) => !path));
+    childRoutes.push(...routes.filter(({ path }) => !path));
 
     return result;
   });

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

@@ -29,15 +29,21 @@ export default (paths: IApi['paths'], routes: IRoute[]) => {
     }.jsx`;
     const distFilePath = path.join(distPath, filename);
     let componentContent = fs.readFileSync(cPath).toString();
+    let result;
 
     switch (cPathParsed.ext) {
       case '.md':
-        // todo: handle YAML config
-        componentContent = transformer.markdown(componentContent, cPathParsed.dir).content;
+        result = transformer.markdown(componentContent, cPathParsed.dir);
+        componentContent = result.content;
         break;
       default:
     }
 
+    // dynamic title support
+    if (result && result.config.frontmatter.title) {
+      route.title = result.config.frontmatter.title;
+    }
+
     // distribute component to temp dir
     fs.writeFileSync(distFilePath, componentContent);
 

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

@@ -2,18 +2,26 @@ import remark from './remark';
 
 export interface TransformResult {
   content: string;
-  config: { [key: string]: any };
+  config: {
+    frontmatter: { [key: string]: any };
+    [key: string]: any;
+  };
 }
 
 export default {
   markdown(raw: string, dir: string): TransformResult {
+    const result = remark(raw, dir);
+
     return {
       content: `export default function () {
         return (
-          <div>${remark(raw, dir)}</div>
+          <div>${result.contents}</div>
         )
       }`,
-      config: {},
+      config: {
+        frontmatter: {},
+        ...result.data as TransformResult['config'],
+      },
     };
   }
 }

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

@@ -1,17 +1,21 @@
 import unified from 'unified';
 import stringify from 'rehype-stringify';
+import frontmatter from 'remark-frontmatter';
 import prism from '@mapbox/rehype-prism';
 import parse from './parse';
 import rehype from './rehype';
+import yaml from './yaml';
 import jsx from './jsx';
 
 export default (raw: string, dir: string) => {
   const processor = unified()
     .use(parse)
+    .use(frontmatter)
+    .use(yaml)
     .use(rehype, { dir })
     .use(stringify, { allowDangerousHTML: true })
     .use(prism)
     .use(jsx);
 
-  return processor.processSync(raw).contents as string;
+  return processor.processSync(raw);
 };

packages/umi-plugin-father-doc/src/transformer/remark/yaml.ts

@@ -0,0 +1,12 @@
+import yaml from 'js-yaml';
+import visit from 'unist-util-visit';
+
+export default () => (ast, vFile) => {
+  visit(ast, 'yaml', (node) => {
+    // save frontmatter to data
+    vFile.data.frontmatter = Object.assign(
+      vFile.data.frontmatter || {},
+      yaml.safeLoad(node.value),
+    );
+  });
+}