Merge pull request #53 from storybooks/52-clickable-anchors

Added clickable anchors to docs

components/Docs/Content/style.css

@@ -94,3 +94,17 @@
   background-color: #f7f7f7;
   padding: 10px 12px;
 }
+
+#docs-content .markdown .header-anchor {
+  display: none;
+  line-height: 1px;
+}
+
+#docs-content .markdown h1:hover .header-anchor,
+#docs-content .markdown h2:hover .header-anchor,
+#docs-content .markdown h3:hover .header-anchor,
+#docs-content .markdown h4:hover .header-anchor,
+#docs-content .markdown h5:hover .header-anchor,
+#docs-content .markdown h6:hover .header-anchor {
+  display: inline;
+}

gatsby-browser.js

@@ -0,0 +1,7 @@
+exports.onRouteUpdate = location => {
+  if (location.hash) {
+    setTimeout(() => {
+      document.querySelector(`${location.hash}`).scrollIntoView();
+    }, 0);
+  }
+};

loaders/markdown-loader/index.js

@@ -0,0 +1,59 @@
+// see also: https://github.com/gatsbyjs/gatsby-starter-kitchen-sink/blob/master/loaders/markdown-loader/index.js
+
+const frontMatter = require('front-matter');
+const markdownIt = require('markdown-it');
+const hljs = require('highlight.js');
+const objectAssign = require('object-assign');
+const path = require('path');
+const loaderUtils = require('loader-utils');
+
+const highlight = (str, lang) => {
+  if (lang !== null && hljs.getLanguage(lang)) {
+    try {
+      return hljs.highlight(lang, str).value;
+    } catch (_error) {
+      console.error(_error);
+    }
+  }
+  try {
+    return hljs.highlightAuto(str).value;
+  } catch (_error) {
+    console.error(_error);
+  }
+  return '';
+};
+
+const md = (linkPrefix, shouldPrefix) =>
+  markdownIt({
+    html: true,
+    linkify: true,
+    typographer: true,
+    highlight,
+    replaceLink: link => {
+      if (shouldPrefix && path.isAbsolute(link)) {
+        return linkPrefix + link;
+      }
+      return link;
+    },
+  })
+    .use(require('markdown-it-replace-link'))
+    .use(require('markdown-it-anchor'), {
+      permalink: true,
+      permalinkSymbol: '🔗',
+    });
+
+module.exports = function(content) {
+  this.cacheable();
+
+  const query = loaderUtils.parseQuery(this.query);
+  const linkPrefix = query.config.linkPrefix || '';
+  const shouldPrefix = query.shouldPrefix;
+
+  const meta = frontMatter(content);
+  const body = md(linkPrefix, shouldPrefix).render(meta.body);
+  const result = objectAssign({}, meta.attributes, {
+    body,
+  });
+  this.value = result;
+  return `module.exports = ${JSON.stringify(result)}`;
+};

package.json

@@ -39,6 +39,7 @@
     "eslint-plugin-jest": "^20.0.0",
     "eslint-plugin-prettier": "^2.0.1",
     "gh-pages": "^0.12.0",
+    "markdown-it-anchor": "^4.0.0",
     "markdownlint-cli": "^0.3.1",
     "prettier": "^1.3.0",
     "remark-cli": "^3.0.1",