Render header anchors

Author: stefanv

assets/js/shortcuts.js

@@ -110,7 +110,8 @@ function setupShortcuts(shortcutDepth = 2) {
   if (shortcutsTarget) {
     const classElements = Array.from(document.querySelectorAll(classes));
     classElements.map((el) => {
-      const title = el.textContent;
+      // Get title but remove anchor character #
+      const title = el.textContent.replace(/#$/, "");
       const elId = el.id;
       // Gets the element type (e.g. h2, h3)
       const elType = el.tagName;

assets/theme-css/styles.css

@@ -369,6 +369,15 @@ pre {
   overflow: auto;
 }
 
+/* hide headerlinks until hovered over */
+a.headerlink {
+  visibility: hidden;
+}
+
+:is(h1, h2, h3, h4, h5, h6):hover > a.headerlink {
+  visibility: visible;
+}
+
 /* Local Variables: */
 /* css-indent-offset: 2 */
 /* End: */

layouts/_default/_markup/render-heading.html

@@ -0,0 +1 @@
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}<a class="headerlink" href="#{{ .Anchor | safeURL }}" title="Link to this heading">#</a></h{{ .Level }}>