feat: Implement heading anchor links with interactive styling and add script for functionality

TODO.md

@@ -1,6 +1,6 @@
 ## UI / UX Polish
 
-- [ ] **Heading Anchor Links** — Add an interactive `#` link that appears when hovering over `<h2>` and `<h3>` tags to make linking to specific sections easier.
+- [x] **Heading Anchor Links** — Add an interactive `#` link that appears when hovering over `<h2>` and `<h3>` tags to make linking to specific sections easier.
 - [x] **Custom Terminal Scrollbars** — Style the browser's default scrollbar to match the dark terminal 
 
 - [ ] **Custom 404 Page** — Design an interactive terminal-style 404 page ("Command not found") that fits the pwnforfunandprofit theme.
@@ -8,12 +8,3 @@
 ## Features & Content
 
 - [ ] **Post Series Support** — Add a `series` front-matter field to automatically group related tutorials (e.g., "Buffer Overflows Part 1, 2, 3") and render a "Part N of X" navigation box.
-
-## Performance & SEO
-
-
-- [x] **Lazy Loading** — Ensure all `<img>` and `<iframe>` tags across the site use `loading="lazy"` to drastically improve initial page load times.
-- [x] **Asset Preloading** — Add `<link rel="preload">` tags in the `<head>` for critical assets like the primary font files to eliminate text rendering flashes (FOUT/FOIT).
-
-
-- [x] **Minify HTML & CSS** — Enable and configure Zola's built-in minification settings (`minify_html = true`) to shave off extra bytes in production.

sass/_article.scss

@@ -70,6 +70,31 @@
   color: var(--text-muted);
 }
 
+// Heading anchor links
+.post-body {
+  h2, h3 {
+    position: relative;
+
+    .heading-anchor {
+      display: inline-block;
+      margin-left: 0.5em;
+      color: var(--accent-color);
+      font-family: var(--font-mono);
+      font-weight: 400;
+      font-size: 0.75em;
+      opacity: 0;
+      text-decoration: none;
+      vertical-align: middle;
+      transition: opacity 0.15s ease;
+      user-select: none;
+    }
+
+    &:hover .heading-anchor {
+      opacity: 1;
+    }
+  }
+}
+
 .post-toc {
   background: var(--surface-color);
   border: 1px solid var(--border-color);

static/js/heading-anchors.js

@@ -0,0 +1,15 @@
+(function () {
+  'use strict';
+
+  document
+    .querySelectorAll('.post-body h2[id], .post-body h3[id]')
+    .forEach(function (heading) {
+      var a = document.createElement('a');
+      a.href = '#' + heading.id;
+      a.className = 'heading-anchor';
+      a.setAttribute('aria-label', 'Link to this section');
+      a.setAttribute('tabindex', '-1');
+      a.textContent = '#';
+      heading.appendChild(a);
+    });
+})();

templates/page.html

@@ -85,6 +85,9 @@
   <!-- Footnote backlinks -->
   <script defer src="{{ get_url(path="js/footnotes.js") }}"></script>
 
+  <!-- Heading anchor links -->
+  <script defer src="{{ get_url(path="js/heading-anchors.js") }}"></script>
+
   <!-- Sticky TOC active-section highlighting -->
   {% if page.toc %}
   <script defer src="{{ get_url(path="js/toc.js") }}"></script>