add anchor links to all headlines

now behind each headline (h2, h3....) appears a small # character linking to this specific headline.

makes it easier to copy paste deeplinks to certain sections / headlines e.g. when you share a link in a forum.

Signed-off-by: Christoph Rueger <chrisrueger@gmail.com>

Author: chrisrueger

_includes/footer.htm

@@ -65,4 +65,24 @@
     },2000)
 }
 
+
+document.addEventListener('DOMContentLoaded', () => {
+  const headers = document.querySelectorAll('h1[id], h2[id], h3[id], h4[id]');
+
+  headers.forEach(header => {
+    const iconLink = document.createElement('a');
+    iconLink.href = `#${header.id}`;
+    iconLink.innerHTML = '#';
+    iconLink.className = 'header-link';
+
+    // Wrap the icon inside a span to control visibility with CSS
+    const wrapper = document.createElement('span');
+    wrapper.className = 'header-link-wrapper';
+    wrapper.appendChild(iconLink);
+
+    // Append the wrapper to the header
+    header.appendChild(wrapper);
+  });
+});
+
 </script>

css/style.scss

@@ -108,3 +108,18 @@ div[class*="language-"] button{
   padding: 5px;
 }
 
+.header-link-wrapper{
+  visibility: hidden;
+  margin-left: 2px;
+  padding-left: 2px;
+}
+/* Show the icon link on hover */
+h1:hover .header-link-wrapper,
+h2:hover .header-link-wrapper,
+h3:hover .header-link-wrapper,
+h4:hover .header-link-wrapper {
+  visibility: visible;
+}
+.header-link{
+  color:#ccc !important
+}