feat: markdown anchors

client/themes/default/scss/app.scss

@@ -3,6 +3,26 @@
 .contents {
   color: mc('grey', '800');
 
+  h1, h2, h3, h4, h5, h6 {
+    position: relative;
+
+    &:hover {
+      .toc-anchor {
+        display: block;
+      }
+    }
+
+    .toc-anchor {
+      display: none;
+      position: absolute;
+      right: 1rem;
+      bottom: .5rem;
+      font-size: 1.25rem;
+      text-decoration: none;
+      color: mc('grey', '500');
+    }
+  }
+
   h1 {
     padding-left: 24px;
     color: mc('blue', '800');

package.json

@@ -147,6 +147,7 @@
     "semver": "5.5.1",
     "serve-favicon": "2.5.0",
     "sqlite3": "4.0.2",
+    "uslug": "1.0.4",
     "uuid": "3.3.2",
     "validator": "10.7.1",
     "validator-as-promised": "1.0.2",

server/modules/rendering/markdown-core/renderer.js

@@ -1,5 +1,7 @@
 const md = require('markdown-it')
+const mdAnchor = require('markdown-it-anchor')
 const _ = require('lodash')
+const uslug = require('uslug')
 
 const quoteStyles = {
   Chinese: '””‘’',
@@ -29,6 +31,14 @@ module.exports = {
       }
     })
 
+    mkdown.use(mdAnchor, {
+      slugify: s => uslug(s),
+      permalink: true,
+      permalinkClass: 'toc-anchor',
+      permalinkSymbol: '¶',
+      permalinkBefore: true
+    })
+
     for (let child of this.children) {
       const renderer = require(`../${_.kebabCase(child.key)}/renderer.js`)
       renderer.init(mkdown, child.config)