Add hover links for headings

Author: iBug

_includes/head/custom.html

@@ -15,4 +15,5 @@
 </script>
 {% endif %}
 <script type="text/javascript" async src="/assets/js/love.js"></script>
+<script type="text/javascript" async src="/assets/js/auto-heading-links.js"></script>
 <!-- Minimal Mistakes layout: {{ page.layout }} -->

assets/css/main.scss

@@ -100,3 +100,33 @@ body.landing {
 		}
 	}
 }
+
+section.page__content {
+	h2, h3, h4, h5, h6 {
+		.header-link {
+			position: relative;
+			left: 0.5em;
+			opacity: 0;
+			font-size: 0.8em;
+			-webkit-transition: opacity 0.2s ease-in-out 0.1s;
+			-moz-transition: opacity 0.2s ease-in-out 0.1s;
+			-o-transition: opacity 0.2s ease-in-out 0.1s;
+			transition: opacity 0.2s ease-in-out 0.1s;
+		}
+
+		&:hover .header-link {
+			opacity: 1;
+		}
+	}
+}
+
+.sr-only { // Screen reader only
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	border: 0;
+}

assets/js/auto-heading-links.js

@@ -0,0 +1,31 @@
+var anchorForId = function (id) {
+  var anchor = document.createElement("a");
+  anchor.className = "header-link";
+  anchor.href      = "#" + id;
+  anchor.innerHTML = "<span class=\"sr-only\">Permalink</span><i class=\"fa fa-link\"></i>";
+  anchor.title = "Permalink";
+  return anchor;
+};
+
+var linkifyAnchors = function (level, containingElement) {
+  var headers = containingElement.getElementsByTagName("h" + level);
+  for (var h = 0; h < headers.length; h++) {
+    var header = headers[h];
+
+    if (typeof header.id !== "undefined" && header.id !== "") {
+      header.appendChild(anchorForId(header.id));
+    }
+  }
+};
+
+document.onreadystatechange = function () {
+  if (this.readyState === "complete") {
+    var contentBlock = document.getElementsByClassName("page__content")[0];
+    if (!contentBlock) {
+      return;
+    }
+    for (var level = 1; level <= 6; level++) {
+      linkifyAnchors(level, contentBlock);
+    }
+  }
+};