JS script to transform h2 in anchor links in blog posts.

ivelum · Dec 19, 2024 · 4d7589d · 4d7589d
1 parent 30c6644
commit 4d7589d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
@@ -3,6 +3,9 @@
 {{ end }}
 
 {{- define "main" }}
+  <script type="module">
+    import '/js/prettify.js';
+  </script>
   <div class="page article">
     <div class="article--back">
       <a class="article--back-link" href="/blog/">

diff --git a/static/js/prettify.js b/static/js/prettify.js
@@ -0,0 +1,16 @@
+'use strict';
+
+function activateAnchors() {
+  var article = document.querySelector('article');
+  if (!article) {
+    return;
+  }
+  document.querySelectorAll('h2').forEach(function (h) {
+    var id = h.id;
+    if (id) {
+      h.innerHTML = '<a href="#' + id + '" class="anchor">' + h.innerHTML + '</a>';
+    }
+  });
+}
+
+activateAnchors();