Enable highlight-intrapage-link sidebar highlight in News (#1910)

Author: doup

sass/_vars.scss

@@ -349,6 +349,7 @@ $color-white: #fff;
   --todo-bg-color: rgba(191, 170, 64, 0.3);
   --todo-border-color: rgba(223, 191, 32, 0.5);
 
+  --tree-menu-active-color: var(--color-neutral-93);
   --tree-menu-chevron-filter: brightness(70%);
   --tree-menu-label-active-bg-color: #{rgba($color-neutral-93, 0.1)};
   --tree-menu-label-active-color: var(--color-neutral-93);
@@ -476,6 +477,7 @@ $color-white: #fff;
     --todo-bg-color: rgba(191, 170, 64, 0.3);
     --todo-border-color: rgba(223, 191, 32, 0.5);
 
+    --tree-menu-active-color: var(--color-black);
     --tree-menu-chevron-filter: invert(65%);
     --tree-menu-label-active-bg-color: var(--color-neutral-88);
     --tree-menu-label-active-color: var(--color-black);

sass/components/_on-this-page.scss

@@ -32,7 +32,7 @@
       color: var(--on-this-page-hover-color);
     }
 
-    &[data-active="true"] {
+    &[data-highlight-intrapage-link-active=true] {
       color: var(--on-this-page-active-color);
     }
   }

sass/components/_tree-menu.scss

@@ -57,6 +57,10 @@
         &, &:focus, &:active, &:hover, &:link, &:visited {
             color: var(--tree-menu-label-color);
         }
+
+        &[data-highlight-intrapage-link-active=true] {
+          color: var(--tree-menu-active-color);
+        }
     }
 
     &__toggle {

static/on-this-page.js static/highlight-intrapage-link.jsstatic/on-this-page.js renamed to static/highlight-intrapage-link.js

@@ -1,4 +1,6 @@
-//! in nav.on-this-page, sets data-active=true on the link to the header you're currently looking at
+//! For elements with `[data-highlight-intrapage-link]`, sets
+//! `data-highlight-intrapage-link-active=true` to the descendant `<a>` elements
+//! (for intra-page navigation) that link to the top-most visible heading.
 
 if(window.location.hash == ""){
   otp_set_active(document.querySelector("main h2") || document.querySelector("main h3"));
@@ -7,21 +9,26 @@ if(window.location.hash == ""){
 }
 
 /**
- * remember which elements are on screen. IntersectionObserver only sends us updates.
+ * Remember which elements are on screen. `IntersectionObserver` only sends us updates.
  * @type {Map<Element, boolean>}
  */
 let otp_state = new Map();
 
 /**
- * give data-active=true to the page nav link which points to the given id; set all others to false.
- * accepts an id string or a DOM node which it will automatically retrieve the id of
- * @param {string | HTMLElement} id_or_node 
+ * Set `data-highlight-intrapage-link-active=true` to the page links which point
+ * to the given id; set all others to `false`. Accepts an id string or a DOM
+ * node which it will automatically retrieve the id of.
  */
 function otp_set_active(id_or_node){
   let id = `#${id_or_node instanceof HTMLElement ? id_or_node.getAttribute("id") : id_or_node}`;
 
-  document.querySelectorAll(".on-this-page a").forEach(a => {
-    a.setAttribute("data-active", a.getAttribute("href") == id);
+  document.querySelectorAll("[data-highlight-intrapage-link] a").forEach(a => {
+    const href = a.getAttribute("href");
+
+    if (href?.includes('#')) {
+      const fragment = href.substring(href.indexOf('#'));
+      a.setAttribute("data-highlight-intrapage-link-active", String(id === fragment));
+    }
   });
 }
 

templates/docs.html

@@ -15,7 +15,7 @@
   {% endfor %}
 
   <script src="/optional-helpers.js"></script>
-  <script defer src="/on-this-page.js"></script>
+  <script defer src="/highlight-intrapage-link.js"></script>
 {% endblock head_extensions %}
 
 {% block mobile_page_menu %}

templates/macros/docs.html

@@ -107,7 +107,7 @@
   </ul>
 {% endmacro %}
 {% macro on_this_page(toc, class="") %}
-<nav aria-label="On This Page" class="on-this-page {{ class }}">
+<nav aria-label="On This Page" class="on-this-page {{ class }}" data-highlight-intrapage-link>
   {# screen readers will read this as 'Navigation: On This Page' #}
   <ul>
   {% for h1 in toc %}

templates/macros/news.html

@@ -33,7 +33,7 @@
 {% endmacro %}
 {% macro news_menu(toc, max_levels) %}
   {% if toc %}
-    <ul class="tree-menu">
+    <ul class="tree-menu" data-highlight-intrapage-link>
       {% for header in toc %}{{ self::news_menu_row(header=header, max_levels=max_levels, level=1) }}{% endfor %}
     </ul>
   {% endif %}

templates/news-page.html

@@ -4,6 +4,11 @@
 {% block page_name %}Post{% endblock page_name %}
 {% block mobile_page_menu %}{{ news_macros::news_menu(toc=page.toc, max_levels=1) }}{% endblock mobile_page_menu %}
 {% block page_menu %}{{ news_macros::news_menu(toc=page.toc, max_levels=2) }}{% endblock page_menu %}
+
+{% block head_extensions %}
+  <script defer src="/highlight-intrapage-link.js"></script>
+{% endblock head_extensions %}
+
 {% block page_content %}
   <h1 class="news-title">{{ page.title }}</h1>
   <h2 class="news-subtitle">