Resolves issue #52 - Adding anchors to headings

Credit to @fabiosantoscode for his initial work on this fix

Author: mrkiffie

build.js

@@ -11,12 +11,14 @@ const markdown = require('metalsmith-markdown')
 const prism = require('metalsmith-prism')
 const stylus = require('metalsmith-stylus')
 const permalinks = require('metalsmith-permalinks')
+const marked = require('marked')
 const path = require('path')
 const fs = require('fs')
 const ncp = require('ncp')
 
 const filterStylusPartials = require('./scripts/plugins/filter-stylus-partials')
 const mapHandlebarsPartials = require('./scripts/plugins/map-handlebars-partials')
+const anchorMarkdownHeadings = require('./scripts/plugins/anchor-markdown-headings')
 const loadVersions = require('./scripts/load-versions')
 
 /** Build **/
@@ -25,6 +27,14 @@ const loadVersions = require('./scripts/load-versions')
 // for properties which are not present in the given language
 const DEFAULT_LANG = 'en'
 
+const renderer = new marked.Renderer()
+renderer.heading = anchorMarkdownHeadings
+
+const markedOptions = {
+  langPrefix: 'language-',
+  renderer: renderer
+}
+
 function i18nJSON (lang) {
   var defaultJSON = require(`./locale/${DEFAULT_LANG}/site.json`)
   var templateJSON = require(`./locale/${lang}/site.json`)
@@ -93,7 +103,7 @@ function buildlocale (source, locale) {
         refer: false
       }
     }))
-    .use(markdown({ langPrefix: 'language-' }))
+    .use(markdown(markedOptions))
     .use(prism())
     .use(filterStylusPartials())
     .use(stylus({

layouts/css/base.styl

@@ -85,6 +85,7 @@ pre
 @import 'page-modules/_in-the-news'
 @import 'page-modules/_download'
 @import 'page-modules/_scrollToTop'
+@import 'page-modules/_anchorLinks'
 
 .intro
     margin-top 140px

layouts/css/page-modules/_anchorLinks.styl

@@ -0,0 +1,19 @@
+// Anchor links for page headings
+.anchor
+    color #ccc
+    background none
+    padding 0 .25em
+
+    &:link
+    &:active
+    &:hover
+        color #ccc
+        background inherit
+
+
+h1, h2, h3, h4, h5, h6
+    &:hover > .anchor:before
+        content '#'
+
+.anchor:focus:before
+    content '#'

package.json

@@ -28,6 +28,7 @@
     "chokidar": "^1.0.5",
     "handlebars": "^3.0.0",
     "map-async": "~0.1.1",
+    "marked": "^0.3.5",
     "metalsmith": "^2.0.0",
     "metalsmith-collections": "^0.7.0",
     "metalsmith-feed": "0.0.6",

scripts/plugins/anchor-markdown-headings.js

@@ -0,0 +1,13 @@
+'use strict'
+
+module.exports = function anchorMarkdownHeadings (text, level, raw) {
+  var escapedText = raw
+    .replace(/(\[([^\]]+)\]\([^)]+\))/g, '$2')
+    .replace(/[^\w]+/g, '-')
+    .replace(/-{2,}/g, '-')
+    .replace(/(^-|-$)/g, '')
+    .toLowerCase()
+  return '<h' + level + '>' + text + '<a name="' +
+    escapedText + '" class="anchor" href="#' +
+    escapedText + '"></a></h' + level + '>'
+}

tests/scripts/anchor-mardown-headings.test.js

@@ -0,0 +1,57 @@
+'use strict'
+
+const test = require('tape')
+
+test('anchorMarkdownHeadings', (t) => {
+  const anchorMarkdownHeadings = require('../../scripts/plugins/anchor-markdown-headings')
+
+  t.test('correctly pharses markdown heading without links', (t) => {
+    const text = 'Simple title'
+    const level = 1
+    const raw = 'Simple title'
+    const output = anchorMarkdownHeadings(text, level, raw)
+    const expected = '<h1>Simple title<a name="simple-title" class="anchor" ' +
+      'href="#simple-title"></a></h1>'
+
+    t.equal(output, expected)
+    t.end()
+  })
+
+  t.test('correctly pharses markdown heading with a single link', (t) => {
+    const text = 'Title with <a href="#">link</a>'
+    const level = 3
+    const raw = 'Title with [link](#)'
+    const output = anchorMarkdownHeadings(text, level, raw)
+    const expected = '<h3>Title with <a href="#">link</a>' +
+      '<a name="title-with-link" class="anchor" href="#title-with-link"></a></h3>'
+
+    t.equal(output, expected)
+    t.end()
+  })
+
+  t.test('correctly pharses markdown heading with multiple links', (t) => {
+    const text = 'a <a href="b">b</a> c<a href="d">d</a>e'
+    const level = 2
+    const raw = 'a [b](b) c[d](d)e'
+    const output = anchorMarkdownHeadings(text, level, raw)
+    const expected = '<h2>a <a href="b">b</a> c<a href="d">d</a>e' +
+      '<a name="a-b-cde" class="anchor" href="#a-b-cde"></a></h2>'
+
+    t.equal(output, expected)
+    t.end()
+  })
+
+  t.test('makes pretty slugs', (t) => {
+    const text = '$$$ WIN BIG! $$$'
+    const level = 4
+    const raw = '$$$ WIN BIG! $$$'
+    const output = anchorMarkdownHeadings(text, level, raw)
+    const expected = '<h4>$$$ WIN BIG! $$$' +
+      '<a name="win-big" class="anchor" href="#win-big"></a></h4>'
+
+    t.equal(output, expected)
+    t.end()
+  })
+
+  t.end()
+})