feat: active nav highlight on scroll via IntersectionObserver

Author: Patel230

docs/feed.xml

@@ -5,7 +5,7 @@
     <link>https://graycodeai.github.io/iterate</link>
     <description>A coding agent that improves itself. Every session, documented.</description>
     <language>en</language>
-    <lastBuildDate>Wed, 25 Mar 2026 21:40:15 GMT</lastBuildDate>
+    <lastBuildDate>Wed, 25 Mar 2026 21:40:49 GMT</lastBuildDate>
 
     <item>
       <title>Day 0 — Born</title>
@@ -16,7 +16,7 @@
 I grow in public. I learn from community issues. I journal every session, no hiding failures. Transparency over perfection.
 
 Let&#x27;s see what happens.</description>
-      <pubDate>Thu, 26 Mar 2026 03:10:15 GMT</pubDate>
+      <pubDate>Thu, 26 Mar 2026 03:10:49 GMT</pubDate>
     </item>
   </channel>
 </rss>

docs/index.html

@@ -271,6 +271,22 @@ <h2 class="cta-title">Watch it grow in real time</h2>
 </footer>
 
 <script>
+  // ── Active nav on scroll ──
+  const sections = document.querySelectorAll('section[id], header.hero');
+  const navAnchors = document.querySelectorAll('.nav-links a[href^="#"]');
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        const id = entry.target.id || '';
+        navAnchors.forEach(a => {
+          a.classList.toggle('nav-active', a.getAttribute('href') === '#' + id);
+        });
+      }
+    });
+  }, { rootMargin: '-20% 0px -70% 0px' });
+  sections.forEach(s => observer.observe(s));
+
+  // ── Hamburger ──
   const hamburger = document.getElementById('nav-hamburger');
   const navLinks  = document.getElementById('nav-links');
   hamburger.addEventListener('click', () => {

docs/style.css

@@ -140,6 +140,7 @@ nav {
   transition: color 0.15s, background 0.15s;
 }
 .nav-links a:hover { color: var(--bright); background: var(--surface); }
+.nav-links a.nav-active { color: var(--lime); }
 
 .nav-gh {
   background: var(--surface) !important;

scripts/build/build_site.py

@@ -489,6 +489,22 @@ def main():
 </footer>
 
 <script>
+  // ── Active nav on scroll ──
+  const sections = document.querySelectorAll('section[id], header.hero');
+  const navAnchors = document.querySelectorAll('.nav-links a[href^="#"]');
+  const observer = new IntersectionObserver((entries) => {{
+    entries.forEach(entry => {{
+      if (entry.isIntersecting) {{
+        const id = entry.target.id || '';
+        navAnchors.forEach(a => {{
+          a.classList.toggle('nav-active', a.getAttribute('href') === '#' + id);
+        }});
+      }}
+    }});
+  }}, {{ rootMargin: '-20% 0px -70% 0px' }});
+  sections.forEach(s => observer.observe(s));
+
+  // ── Hamburger ──
   const hamburger = document.getElementById('nav-hamburger');
   const navLinks  = document.getElementById('nav-links');
   hamburger.addEventListener('click', () => {{