Anchor links on post headings

Author: alandefreitas

_layouts/post.html

@@ -55,6 +55,15 @@ <h2 class='text-l news-title no-border'>{{ page.title }}</h2>
         <div class='text-xxs content-text generated-content'>
           {{ content }}
         </div>
+        <script>
+          document.querySelectorAll('.generated-content h1[id], .generated-content h2[id], .generated-content h3[id], .generated-content h4[id]').forEach(function(heading) {
+            var link = document.createElement('a');
+            link.className = 'heading-anchor';
+            link.href = '#' + heading.id;
+            link.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg>';
+            heading.appendChild(link);
+          });
+        </script>
         {% if content contains 'class="mermaid"' %}
         <script src="{{ site.mermaid.src | default: 'https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js' }}"></script>
         <script>mermaid.initialize({startOnLoad: true});</script>

_sass/pages/post.scss

@@ -251,6 +251,26 @@
     line-height: 1.4;
   }
 
+  .heading-anchor {
+    opacity: 0;
+    margin-left: 0.4em;
+    color: #aab;
+    text-decoration: none;
+    transition: opacity 0.15s;
+    vertical-align: middle;
+  }
+
+  h1:hover .heading-anchor,
+  h2:hover .heading-anchor,
+  h3:hover .heading-anchor,
+  h4:hover .heading-anchor {
+    opacity: 1;
+  }
+
+  .heading-anchor:hover {
+    color: #557;
+  }
+
   .admonition {
     margin: 1.5rem 0;
     padding: 1rem 1.25rem;