chore(rebuild): start parsing anchors

@montogeek started this work, I just rebased on the latest `rebuild` and cleaned things
up slightly. I also renamed the misspelled enhancer utility.

Author: skipjack

package.json

@@ -84,6 +84,7 @@
     "prismjs": "^1.9.0",
     "raw-loader": "^0.5.1",
     "redirect-webpack-plugin": "^0.1.1",
+    "remark": "^9.0.0",
     "remark-autolink-headings": "^5.0.0",
     "remark-loader": "^0.3.0",
     "remark-mermaid": "^0.2.0",
@@ -116,7 +117,11 @@
     "react-hot-loader": "^4.0.0-beta.12",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
+    "remark-parse": "^5.0.0",
+    "remark-slug": "^5.0.0",
     "tool-list": "^0.11.0",
+    "unified": "^6.1.6",
+    "unist-util-visit": "^1.3.0",
     "webpack.vote": "^0.1.2",
     "whatwg-fetch": "^2.0.3"
   }

src/utilities/remark-anchors.js

@@ -0,0 +1,31 @@
+var remark = require('remark');
+var slug = require('remark-slug');
+var visit = require('unist-util-visit');
+
+module.exports = function getAnchors(content) {
+  let anchors = [];
+
+  remark()
+    .use(slug)
+    .use(pl)
+    .process(content, (err, file) => {
+      if (err) {
+        throw err;
+      }
+    });
+
+  function pl() {
+    return function transformer(ast) {
+      visit(ast, 'heading', visitor);
+    };
+
+    function visitor(node) {
+      anchors.push({
+        title: node.children[0].value,
+        id: node.data.id
+      });
+    }
+  }
+
+  return anchors;
+};

src/utilities/treePluginEnhacer.js renamed to src/utilities/tree-plugin-enhancer.js

@@ -1,5 +1,6 @@
 const fs = require('fs');
 const FrontMatter = require('front-matter');
+const RemarkAnchors = require('./remark-anchors');
 
 module.exports = function(item, options) {
   item.url = item.path
@@ -19,6 +20,6 @@ module.exports = function(item, options) {
     let { attributes } = FrontMatter(content);
 
     Object.assign(item, attributes);
-    item.anchors = []; // TODO: Add actual anchors
+    item.anchors = RemarkAnchors(content);
   }
 }

webpack.common.js

@@ -5,7 +5,7 @@ const CleanPlugin = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const DirectoryTreePlugin = require('directory-tree-webpack-plugin');
-const treePluginEnhacer = require('./src/utilities/treePluginEnhacer.js');
+const TreeEnhancer = require('./src/utilities/tree-plugin-enhancer.js');
 
 module.exports = (env = {}) => ({
   devtool: 'source-map',
@@ -35,6 +35,7 @@ module.exports = (env = {}) => ({
           options: {
             plugins: [
               // TODO: Add necessary remark plugins
+              require('remark-slug'),
               require('remark-autolink-headings'),
               require('remark-mermaid')
             ]
@@ -109,7 +110,7 @@ module.exports = (env = {}) => ({
       dir: 'src/content',
       path: 'src/_content.json',
       extensions: /\.md/,
-      enhance: treePluginEnhacer,
+      enhance: TreeEnhancer,
       filter: item => item.name !== 'images',
       sort: (a, b) => {
         let group1 = (a.group || '').toLowerCase();