From 1cff8399eae4b47c699bbf267eb6ae2566684f5a Mon Sep 17 00:00:00 2001
From: andwati <andwatiian@gmail.com>
Date: Wed, 18 Mar 2026 23:47:11 +0300
Subject: [PATCH] feat: Implement heading anchor links with interactive styling
 and add script for functionality

---
 TODO.md                      | 11 +----------
 sass/_article.scss           | 25 +++++++++++++++++++++++++
 static/js/heading-anchors.js | 15 +++++++++++++++
 templates/page.html          |  3 +++
 4 files changed, 44 insertions(+), 10 deletions(-)
 create mode 100644 static/js/heading-anchors.js

diff --git a/TODO.md b/TODO.md
index af86217..731e122 100644
--- a/TODO.md
+++ b/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.
diff --git a/sass/_article.scss b/sass/_article.scss
index f318a77..fad9db6 100644
--- a/sass/_article.scss
+++ b/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);
diff --git a/static/js/heading-anchors.js b/static/js/heading-anchors.js
new file mode 100644
index 0000000..d650d12
--- /dev/null
+++ b/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);
+    });
+})();
diff --git a/templates/page.html b/templates/page.html
index d8728fd..18ffc32 100644
--- a/templates/page.html
+++ b/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>