Feature/anchor (#6)

chiaweilee · web-flow · commit daf2039ea84e · 2019-07-17T00:37:00.000+08:00
* feat: anchor(todo)

* fix: typo

* fix: rename

* fix: hash

* feat:  string hash

* feat: anchor style

* feat: anchor style

* feat: anchor

* feat: issue

* feat: highlight

* feat: babel
diff --git a/.umirc.js b/.umirc.js
@@ -7,6 +7,10 @@ export default {
       `${__dirname}/lib`,
       {
         wrapper: 'div',
+        className: 'markdown-body',
+        style: {
+          padding: '30px',
+        },
       },
     ],
   ],
diff --git a/README.md b/README.md
@@ -29,7 +29,8 @@ export default {
 
 option | intro | type |  default  
 -|-|-|-
-wrapper | HTMLElementTagName |string | section |
+anchor | Auto Anchor `^0.2.0` | string[], falsy to disable | ['h1', 'h2', 'h3'] |
+wrapper | HTMLElementTagName | string | section |
 className | React className | string | |
 style | React style | object | |
 html | markdown-it option | boolean | true |
@@ -43,13 +44,29 @@ highlight | markdown-it option | function | highlight.js |
 
 e.g, `index.md` will cover `index.jsx`.
 
-## Stylize
+## Anchor
+
+![Example](https://raw.githubusercontent.com/chiaweilee/umi-plugin-md/master/Screenshot%202019-07-16%20at%2022.56.20.png)
+
+#### Anchor Stylize
+
+```css
+// global.css
+@import "~umi-plugin-md/anchor.css";
+```
+
+Or, write yourself.
+
+tips: we do not support `scroll to anchor on did mount` this moment.
+
+## Markdown Stylize
 
 [github-markdown-css](https://www.npmjs.com/package/github-markdown-css)
 
 ```css
 // global.css
 @import "~github-markdown-css/github-markdown.css";
+@import "~highlight.js/styles/github.css";
 ```
 
 ```js
diff --git a/Screenshot 2019-07-16 at 22.56.20.png b/Screenshot 2019-07-16 at 22.56.20.png
diff --git a/anchor.less b/anchor.less
@@ -0,0 +1,29 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  .anchor {
+    display: none;
+    position: absolute;
+    transform: translateX(-100%);
+    font-family: serif;
+    margin: 0 !important;
+    padding: 0 !important;
+    line-height: inherit !important;
+    &:after {
+      content: '#';
+    }
+  }
+}
+
+h1:hover,
+h2:hover,
+h3:hover,
+h4:hover,
+h5:hover {
+  .anchor {
+    display: block;
+    position: absolute;
+  }
+}
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "umi-plugin-md",
-  "version": "0.1.0-beta.1",
+  "version": "0.2.0",
   "description": "Markdown(*.md) component plugin for umi.",
   "scripts": {
     "prepublishOnly": "npm run build",
@@ -10,21 +10,26 @@
     "prestart": "npm run build",
     "start": "umi dev",
     "test": "umi test --coverage",
-    "build": "npm run build:babel",
+    "build": "npm run build:babel && npm run build:less",
     "build:babel": "npx babel src --out-dir lib --extensions \".ts\"",
+    "build:less": "lessc anchor.less anchor.css",
     "precommit": "lint-staged"
   },
   "main": "lib/index.js",
   "files": [
-    "lib"
+    "lib",
+    "anchor.css"
   ],
   "dependencies": {
     "@babel/core": "^7.3.4",
     "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "cheerio": "^1.0.0-rc.3",
+    "github-markdown-css": "^3.0.1",
     "highlight.js": "^9.15.8",
     "loader-utils": "^1.2.3",
     "lodash": "^4.17.14",
     "markdown-it": "^8.4.2",
+    "shorthash": "^0.0.2",
     "umi-utils": "^1.5.1",
     "xss": "^1.0.6"
   },
@@ -50,6 +55,7 @@
     "eslint-plugin-react": "^7.14.2",
     "husky": "^0.14.3",
     "jest": "^24.8.0",
+    "lessc": "^1.0.2",
     "lint-staged": "^7.2.2",
     "np": "^3.0.4",
     "prettier": "^1.18.2",
diff --git a/src/global.less b/src/global.less
@@ -0,0 +1,3 @@
+@import "~github-markdown-css/github-markdown.css";
+@import "~highlight.js/styles/github.css";
+@import "../anchor";
diff --git a/src/index.ts b/src/index.ts
@@ -1,6 +1,6 @@
 import { IApi } from 'umi-plugin-types';
-import getRouteConfigFromDir from './getRouteConfigFromDir';
-import mergeRoute from './mergeRoute';
+import getRouteConfigFromDir from './lib/getRouteConfigFromDir';
+import mergeRoute from './lib/mergeRoute';
 
 const path = require('path');
 const loader = path.join(__dirname, './loader');
@@ -9,6 +9,7 @@ export interface IOption {
   wrapper?: string;
   className?: string;
   style?: object;
+  anchor?: string[] | boolean;
 }
 
 interface ExIApi extends IApi {
diff --git a/src/lib/buildWrapper.ts b/src/lib/buildWrapper.ts
@@ -0,0 +1,21 @@
+const isPlainObject = require('lodash/isPlainObject');
+
+interface Ext {
+  className?: string;
+  style?: object;
+}
+
+export default function(source: string, wrapper: string, extend: Ext): string {
+  let extendString = '';
+
+  if (typeof extend.className === 'string') {
+    extendString += ' className="'.concat(extend.className, '"');
+  }
+
+  if (isPlainObject(extend.style)) {
+    // @ts-ignore
+    extendString += ' style={'.concat(JSON.stringify(extend.style), '}');
+  }
+
+  return `<${wrapper.concat(extendString)}>${source}</${wrapper}>`;
+}
diff --git a/src/lib/getRouteConfigFromDir.ts b/src/lib/getRouteConfigFromDir.ts
diff --git a/src/lib/loadContent.ts b/src/lib/loadContent.ts
@@ -0,0 +1,27 @@
+import markdown from './markdown';
+import replaceArchor from './replaceArchor';
+import buildWrapper from './buildWrapper';
+
+function replaceJSX(source: string): string {
+  return source.replace(/([{}])/g, "{'$1'}");
+}
+
+interface Opt {
+  markdown: object;
+  anchor: string[] | boolean;
+  wrapper: string;
+  className: string;
+  style: object;
+}
+
+export default function(source: string, options: Opt): string {
+  source = markdown(source, options.markdown);
+  source = replaceArchor(source, options.anchor);
+  source = replaceJSX(source);
+  source = buildWrapper(source, options.wrapper, {
+    className: options.className,
+    style: options.style,
+  });
+
+  return source;
+}
diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts
@@ -0,0 +1,18 @@
+import renderHighlight from './renderHighlight';
+
+export default function(source: string, options = {} as object): string {
+  return require('markdown-it')(
+    'default',
+    Object.assign(
+      {
+        html: true,
+        xhtmlOut: true,
+        breaks: true,
+        linkify: true,
+        typographer: true,
+        highlight: renderHighlight,
+      },
+      options,
+    ),
+  ).render(source);
+}
diff --git a/src/lib/mergeRoute.ts b/src/lib/mergeRoute.ts
@@ -8,13 +8,17 @@ interface Routes {
 }
 
 export default function mergeRoute(source: Routes[], target: Routes[]): Routes[] {
-  if (!Array.isArray(source)) { source = []; }
-  if (!Array.isArray(target)) { target = []; }
+  if (!Array.isArray(source)) {
+    source = [];
+  }
+  if (!Array.isArray(target)) {
+    target = [];
+  }
 
   forEach(source, s => {
     const max = target.length;
     every(target, (t, i) => {
-      if ((t.path === s.path)) {
+      if (t.path === s.path) {
         target[i] = s;
         if (Array.isArray(t.routes) || Array.isArray(s.routes)) {
           // @ts-ignore
diff --git a/src/lib/renderHighlight.ts b/src/lib/renderHighlight.ts
@@ -0,0 +1,8 @@
+const highlight = require('highlight.js');
+
+export default function(source: string, lang): string {
+  if (!(lang && highlight.getLanguage(lang))) {
+    return '';
+  }
+  return highlight.highlight(lang, source, true).value;
+}
diff --git a/src/lib/replaceArchor.ts b/src/lib/replaceArchor.ts
@@ -0,0 +1,22 @@
+import selfClose from './selfClose';
+
+const cheerio = require('cheerio');
+const sh = require('shorthash');
+
+export default function(html: string, anchor: string[] | boolean): string {
+  if (!html || !Array.isArray(anchor)) {
+    return html;
+  }
+
+  const $ = cheerio.load(html);
+
+  anchor.forEach(_ => {
+    $(_).each(function() {
+      const hash = sh.unique($(this).text());
+      $(this).attr('id', hash);
+      $(this).prepend(`<a class="anchor" href="#${hash}" />`);
+    });
+  });
+
+  return selfClose($.html());
+}
diff --git a/src/lib/selfClose.ts b/src/lib/selfClose.ts
@@ -0,0 +1,23 @@
+const tags = [
+  'area',
+  'base',
+  'br',
+  'col',
+  'command',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'keygen',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+];
+
+export default function(html: string): string {
+  const reg = new RegExp(`<s*(${tags.join('|')})s*>`, 'g');
+  return html.replace(reg, '<$1 />');
+}
diff --git a/src/loader.ts b/src/loader.ts
@@ -1,39 +1,11 @@
 import { IOption } from './index';
-
-const highlight = require('highlight.js');
-
-const renderHighlight = function(source: string, lang): string {
-  if (!(lang && highlight.getLanguage(lang))) {
-    return '';
-  }
-  return highlight.highlight(lang, source, true).value;
-};
-
-const markdown = function(source: string, options = {} as object): string {
-  return require('markdown-it')(
-    'default',
-    Object.assign(
-      {
-        html: true,
-        xhtmlOut: true,
-        breaks: true,
-        linkify: true,
-        typographer: true,
-        highlight: renderHighlight,
-      },
-      options,
-    ),
-  ).render(source);
-};
-
-const replace = function(source: string): string {
-  return source.replace(/([{}])/g, "{'$1'}");
-};
+import loadContent from './lib/loadContent';
 
 export default function loader(source: string) {
   const opts: IOption = {
     // default opts
     wrapper: 'section',
+    anchor: ['h1', 'h2', 'h3'],
   };
 
   if (this) {
@@ -44,16 +16,23 @@ export default function loader(source: string) {
     Object.assign(opts, require('loader-utils').getOptions(this));
   }
 
-  const { wrapper, className, style, ...options } = opts;
-
-  const code: string = require('xss')(replace(markdown(source, options)));
+  const { anchor, wrapper, className, style, ...options } = opts;
+  const rawHtml = loadContent(source, {
+    markdown: options,
+    anchor,
+    wrapper,
+    className,
+    style,
+  });
 
   const component = `import React from 'react';
   export default function() {
-    return (<${opts.wrapper} className="${className}" style={${style}}>${code}</${wrapper}>);
+    return (${rawHtml});
   }`;
 
-  return require('@babel/core').transform(component, {
+  return require('@babel/core').transformSync(component, {
     plugins: ['@babel/plugin-transform-react-jsx'],
+    babelrc: false,
+    configFile: false,
   }).code;
 }
diff --git a/src/pages/index.md b/src/pages/index.md
diff --git a/src/pages/issue.md b/src/pages/issue.md
diff --git a/src/patch.ts b/src/patch.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+@import "~github-markdown-css/github-markdown.css";`
	`2`	`+@import "~highlight.js/styles/github.css";`
	`3`	`+@import "../anchor";`