feat(site) Anchors on sidebar

Author: montogeek

md.js

@@ -0,0 +1,31 @@
+var markdown = require('remark');
+var slug = require('remark-slug');
+var visit = require('unist-util-visit');
+
+module.exports = function getAnchors(content) {
+  let anchors = [];
+
+  markdown()
+    .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;
+};

package.json

@@ -114,7 +114,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/components/Page/Page.jsx

@@ -71,7 +71,7 @@ class Page extends React.Component {
     if ( this.props.content instanceof Promise ) {
       this.props.content
         .then(content => this.setState({
-          content
+          content: content.default
         }))
         .catch(error => this.setState({
           content: 'Error loading content.'

src/components/Sidebar/Sidebar.jsx

@@ -15,6 +15,8 @@ export default class Sidebar extends Component {
     let { fixed, availableHeight, maxWidth } = this.state;
     let group;
 
+    console.log(pages);
+
     return (
       <nav
         className={ `sidebar ${className}` }

webpack.common.js

@@ -2,6 +2,7 @@ const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const FrontMatter = require('front-matter');
+const getAnchors = require('./md');
 const CleanPlugin = require('clean-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
@@ -35,7 +36,9 @@ module.exports = (env = {}) => ({
           options: {
             plugins: [
               // TODO: Add necessary remark plugins
+              require('remark-slug'),
               require('remark-autolink-headings'),
+              require('remark-html'),
               require('remark-mermaid')
             ]
           }
@@ -121,7 +124,7 @@ module.exports = (env = {}) => ({
           let content = fs.readFileSync(item.path, 'utf8')
           let { attributes } = FrontMatter(content)
           Object.assign(item, attributes)
-          item.anchors = [] // TODO: Add actual anchors
+          item.anchors = getAnchors(content)
 
         } else {
           // TODO: Add directory (section) attributes and index url (if necessary)