Added help navigation highlighting

Author: moozzi

app/assets/stylesheets/components/help.css

@@ -290,3 +290,9 @@
   transform: translateY(-1px);
   text-decoration: none;
 }
+
+.help-outline-link {
+  &.active {
+    font-weight: bold;
+  }
+}

app/javascript/controllers/help_outline_controller.js

@@ -0,0 +1,44 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["link"]
+
+  connect() {
+    this.observer = new IntersectionObserver(
+      this.onIntersect.bind(this),
+      {
+        rootMargin: "0px 0px -80% 0px",
+        threshold: 0
+      }
+    )
+
+    this.headings().forEach(heading => this.observer.observe(heading))
+  }
+
+  disconnect() {
+    this.observer.disconnect()
+  }
+
+  onIntersect(entries) {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        this.setActive(entry.target.id)
+      }
+    })
+  }
+
+  setActive(id) {
+    this.linkTargets.forEach(link => {
+      link.classList.toggle(
+        "active",
+        link.getAttribute("href") === `#${id}`
+      )
+    })
+  }
+
+  headings() {
+    return Array.from(
+      document.querySelectorAll(".help-content h1, .help-content h2, .help-content h3")
+    )
+  }
+}

app/views/layouts/help.html.slim

@@ -6,9 +6,11 @@
     - if @outline.present?
       .help-outline
         .help-outline-header On this page
-        nav.help-outline-nav
+        nav.help-outline-nav data-controller="help-outline"
           - @outline.each do |heading|
-            = link_to "##{heading[:id]}", class: "help-outline-link level-#{heading[:level]}" do
+            = link_to "##{heading[:id]}",
+		      class: "help-outline-link level-#{heading[:level]}",
+		      data: { help_outline_target: "link" } do
               = heading[:title]
 
     nav.help-nav