Add generated anchors for h2 headings

_js/behaviors/anchors.js

@@ -0,0 +1,44 @@
+import onmount from 'onmount'
+import prepend from 'dom101/prepend'
+
+const DEFAULTS = {
+  // select elements to put anchor on
+  rule: 'h2[id]',
+  // class name for anchor
+  cls: 'local-anchor',
+  // text of anchor
+  text: '#',
+  // append before or after innerText?
+  shouldAppend: false,
+}
+
+/*
+ * Behavior: Add local anchors
+ */
+
+onmount('[data-js-anchors]', function () {
+  const data = JSON.parse(this.getAttribute('data-js-anchors') || '{}')
+  const rules = Array.isArray(data) 
+    ? (data.length ? data : [DEFAULTS])
+    : [Object.assign({}, DEFAULTS, data)]
+
+  for (const { rule, cls, text, shouldAppend } of rules) {
+    for (const el of this.querySelectorAll(rule)) {
+      if (!el.hasAttribute('id')) {
+        continue
+      }
+
+      const id = el.getAttribute('id')
+      const anchor = document.createElement('a')
+      anchor.setAttribute('href', `#${id}`)
+      anchor.setAttribute('class', cls)
+      anchor.innerText = String(text || DEFAULTS.text)
+
+      if (shouldAppend) {
+        el.appendChild(anchor)
+      } else {
+        prepend(el, anchor)
+      }
+    }
+  }
+})

_layouts/2017/sheet.html

@@ -52,7 +52,7 @@
     </div>
   {% endif %}
 
-  <main class='post-content MarkdownBody' data-js-main-body role='main'>
+  <main class='post-content MarkdownBody' data-js-main-body data-js-anchors role='main'>
     {{ content }}
   </main>
 </div>

_sass/2017/markdown/headings.scss

@@ -9,6 +9,10 @@
   font-weight: 200;
   font-family: $heading-font;
   margin-top: 0;
+
+  &:target {
+    color: $base-a;
+  }
 }
 
 .MarkdownBody h3 {

_sass/2017/markdown/local-anchor.scss

@@ -0,0 +1,29 @@
+.local-anchor {
+  & {
+    margin-left: -.9em;
+    margin-right: .1em;
+    padding: 0 .1em;
+  }
+
+  // Decoration
+  .MarkdownBody &,
+  .MarkdownBody &:visited {
+    color: $base-mute;
+    text-decoration: inherit;
+    opacity: .5;
+  }
+
+  .MarkdownBody &:target,
+  .MarkdownBody :target > & {
+    color: $base-a;
+    opacity: 1;
+  }
+
+  .MarkdownBody &:hover,
+  .MarkdownBody &:focus {
+    color: white;
+    background: $base-a;
+    opacity: 1;
+    text-decoration: inherit;
+  }
+}

_sass/2017/style.scss

@@ -14,6 +14,7 @@
 @import './markdown/a-em';
 @import './markdown/code';
 @import './markdown/headings';
+@import './markdown/local-anchor';
 @import './markdown/p';
 @import './markdown/table';
 @import './markdown/ul';