Add Heading Links (css/js) (#268)

This adds a simple JS script (and css) to create and add links to
headings (on hover).

page-template.html

@@ -108,8 +108,23 @@
 					document.querySelector('.previous a').click()
 				}
 			}
-		})
+		});
+
+    // Add links to headings automatically
+    window.onload = (e) => {
+      document.querySelectorAll('h2, h3, h4, h5, h6').forEach( el => {
+        let a = document.createElement('a');
+        let slug = el.id !== ''
+          ? el.id
+          : el.innerText;
+        el.id = slug;
+        a.href = `#${slug}`;
+        a.innerText = ' 🔗';
+        el.appendChild( a );
+      });
+    };
 	</script>
 
+
 </body>
 </html>

source/css/screen.css

@@ -20,6 +20,16 @@ body {
   line-height: 1.8em;
 }
 
+/* Style heading link */
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+  visibility: hidden;
+  text-decoration: none;
+}
+
+h1:hover a, h2:hover a, h3:hover a, h4:hover a, h5:hover a, h6:hover a {
+  visibility: visible;
+}
+
 h1, h2, h3, h4 {
   font-weight: normal;
   padding-bottom: .3ex;