Feat: Add anchor links to blog post headings

google-labs-jules[bot] · google-labs-jules[bot] · commit a87b43333f55 · 2025-10-18T18:50:49.000Z
This commit introduces anchor links to all headings in the blog posts. This allows users to directly link to specific sections of a post, improving navigation and shareability.

The implementation uses a Hugo heading render hook to customize the HTML output of the headings. It also includes CSS to style the anchor links, making them visible only on hover to maintain a clean look.
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
@@ -72,3 +72,16 @@ body {
     line-height: 1.3;
   }
 }
+
+.anchor-heading {
+  position: relative;
+  .anchor-link {
+    position: absolute;
+    left: -1em;
+    opacity: 0;
+    text-decoration: none;
+  }
+  &:hover .anchor-link {
+    opacity: 1;
+  }
+}
diff --git a/layouts/_markup/render-heading.html b/layouts/_markup/render-heading.html
@@ -0,0 +1,4 @@
+<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="anchor-heading">
+  <a href="#{{ .Anchor | safeURL }}" class="anchor-link">#</a>
+  {{ .Text | safeHTML }}
+</h{{ .Level }}>
