add anchors to headers w/ smooth scroll

layouts/_default/_markup/render-heading.html

@@ -0,0 +1 @@
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ .Level }}>

layouts/partials/footer.html

@@ -7,3 +7,4 @@
     <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>
   </div>
 </footer>
+<script src="/prettify.js"></script>

static/main.css

@@ -1,3 +1,7 @@
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   -webkit-font-smoothing: antialiased;
   color: rgb(36, 36, 36);
@@ -28,11 +32,29 @@ article > h1 {
   margin: 0.67em 0;
 }
 
+article > h2 {
+  margin: -0.83em 0 0.83em;
+  padding: 0.83em 0 0;
+}
+
 a {
   color: inherit;
   cursor: pointer;
 }
 
+a.anchor {
+  text-decoration: none;
+}
+
+a.anchor:hover {
+  text-decoration: underline;
+}
+
+a.anchor:hover:after {
+  color: #c0c0c0;
+  content: ' ¶';
+}
+
 p, ul, ol {
   margin: 0 0 2em;
 }

static/prettify.js

@@ -0,0 +1,20 @@
+'use strict';
+
+function activateAnchors() {
+  var article = document.querySelector('article');
+  if (!article) {
+    return;
+  }
+  var headings = document.querySelectorAll('h2').forEach(function (h) {
+    var id = h.id;
+    if (id) {
+      var a = document.createElement('a');
+      a.href = '#' + id;
+      a.className = 'anchor';
+      a.text = h.innerHTML;
+      h.innerHTML = a.outerHTML;
+    }
+  });
+}
+
+activateAnchors();