Merge pull request #186 from IgnaceMaes/highlight-active-title

feat: highlight active title in "On This Page"

Author: mansona

addon/components/on-this-page.hbs

@@ -1,5 +1,5 @@
 {{#if @toc}}
-  <div class="on-this-page-wrapper">
+  <div class="on-this-page-wrapper" {{highlight-active-title @toc}}>
     <div class="on-this-page-wrapper-header">On this page</div>
     <hr>
     <ul>

addon/modifiers/highlight-active-title.js

@@ -0,0 +1,29 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier(function highlightActiveTitle(element, [toc]) {
+  const observer = new IntersectionObserver((tocSections) => {
+    tocSections.forEach((tocSection) => {
+      const tocId = tocSection.target.getAttribute('aria-labelledby');
+      const tocHeader = element.querySelector(`a[href="#${tocId}"]`);
+      if (tocSection.intersectionRatio > 0) {
+        tocHeader?.parentElement.classList.add('in-viewport');
+      } else {
+        tocHeader?.parentElement.classList.remove('in-viewport');
+      }
+    });
+  });
+
+  // Track all content sections by id
+  toc?.forEach((tocItem) => {
+    const tocSection = document.querySelector(
+      `section[aria-labelledby="${tocItem.id}"]`
+    );
+    if (tocSection) {
+      observer.observe(tocSection);
+    }
+  });
+
+  return () => {
+    observer.disconnect();
+  };
+});

addon/styles/on-this-page.css

@@ -25,6 +25,7 @@
 }
 
 main .on-this-page-wrapper a {
+  position: relative;
   text-decoration: none;
   color: var(--color-gray-600);
   background: none;
@@ -35,6 +36,28 @@ main .on-this-page-wrapper a {
   padding-left: var(--spacing-2);
 }
 
+main .on-this-page-wrapper .in-viewport a::before {
+  position: absolute;
+  top: 0;
+  left: -2px;
+  bottom: 0;
+  width: 4px;
+  content: '';
+  background-color: var(--color-brand);
+}
+
+main .on-this-page-wrapper .in-viewport ~ .in-viewport a::before {
+  content: unset;
+}
+
+main .on-this-page-wrapper .in-viewport a {
+  color: var(--color-gray-800);
+}
+
+main .on-this-page-wrapper .in-viewport ~ .in-viewport a {
+  color: var(--color-gray-600);
+}
+
 main .on-this-page-wrapper a:hover {
   color: var(--color-gray-800);
 }

app/modifiers/highlight-active-title.js

@@ -0,0 +1 @@
+export { default } from 'guidemaker-ember-template/modifiers/highlight-active-title';