fix: Show highlight for H4 elements and improve scrollport detection

assets/js/highlightHeadline.js

@@ -5,15 +5,12 @@ function isAsideActive() {
 }
 
 function initHighlightHeadline() {
-
-    // In this site's layout, the table of contents (.content_with_heading) is an element that appears before any other content at the same hierarchy level
-    const headings = Array.from(document.querySelectorAll('.content_with_heading :is(h1, h2, h3, h4)'));
+    const headings = Array.from(document.querySelectorAll('.o-single__highlight :is(h1, h2, h3)'));
     const windowPath = window.location.pathname;
     if (headings.length === 0) {
-        return; // No headings? No business here
+        return;
     }
 
-    // A few helper functions (.o-aside__toc is the top-level ordered list)
     const markTocItemActive = (a) => {return a.setAttribute('data-current', '');}
     const markTocItemInactive = (a) => {return a.removeAttribute('data-current');};
     const getTocLinkFromHeading = (h) => {return document.querySelector(`.o-aside__toc a[href="${windowPath}#${encodeURIComponent(h.id).replace(/%\w\w/g, match => match.toLowerCase())}"]`);}
@@ -29,11 +26,10 @@ function initHighlightHeadline() {
         const observer = new IntersectionObserver(
             (entries) => {
 				if (!isAsideActive()) {
-					return; // Exit if .o-aside is not active
+					return;
 				}
 
                 entries.forEach((entry) => {
-                    // Keep track of visible headings
                     if (entry.isIntersecting) {
                         visibleHeadings.add(entry.target);
                     } else {
@@ -44,11 +40,10 @@ function initHighlightHeadline() {
                 // Sort visible (intersecting) headings by inverted order of appearance, then grab the first item (i.e. last visible heading)
                 const lastVisible = Array.from(visibleHeadings.values()).sort((a, b) => headings.indexOf(b) - headings.indexOf(a))[0];
                 if (!lastVisible) {
-                    return; // If nothing is visible, weird — TOC are opt-in — but let's skip this logic
+                    return;
                 }
 
                 headings.forEach((heading) => {
-
                     // If it's the last visible item, mark it to make it stand out, else, revert to the default style
                     // Find the link in the TOC list matching the heading in this list of heading elements
                     const tocLink = getTocLinkFromHeading(heading);
@@ -64,9 +59,7 @@ function initHighlightHeadline() {
                 });
             },
             {
-                //? docHeight: Extend the detection above the heading so it's always considered as intersecting if above the scrollport
-                //? -33%: The element won't be considered as intersecting until it has gone _above_ the bottom third of the scrollport
-                rootMargin: `${docHeight}px 0px -80% 0px`,
+                rootMargin: `${docHeight}px 0px -90% 0px`,
                 threshold: 1, // Only considered intersecting if all the pixels are inside the intersection area
             }
         );
@@ -76,11 +69,6 @@ function initHighlightHeadline() {
         return observer;
     }
 
-    // On page load...
-	// Let us don't do this
-	/*
-	markTocItemActive(getTocLinkFromHeading(headings[0])); // Mark the first item as active (even if the heading appears a bit further down)
-	*/
     currentObserver = beginObservation(height); // Start the intersection observer
 
     // On resize, replace the observer with a new one matching the updated body height, if different

layouts/country/single.html

@@ -4,7 +4,7 @@
 <article class="o-single o-single--with-sidemenu">
     {{ partial "sidemenu" . }}
     <div class="o-single__content-wrapper" data-pagefind-body>
-        <div class="o-single__container content_with_heading">
+        <div class="o-single__container o-single__highlight">
             <div class="o-single__content-header">
                 <div class="o-single__content-header-title">
                     {{ partial "flag" (dict "country" .File.ContentBaseName "pagefind" true) }}

layouts/news/single.html

@@ -31,7 +31,7 @@ <h3 id="o-related__title">{{ T "news-other" }}</h3>
                 }}
             </div>
         </aside>
-        <div class="o-single__container content_with_heading" data-pagefind-body>
+        <div class="o-single__container" data-pagefind-body>
             <div class="o-single__content-header">
                 <h1 data-pagefind-meta="title">{{ .Title }}</h1>
                 {{ partial "updateDate.html" . }}

layouts/operator/single.html

@@ -2,7 +2,7 @@
     <article class="o-single o-single--with-sidemenu">
         {{ partial "sidemenu" . }}
         <div class="o-single__content-wrapper" data-pagefind-body>
-            <div class="o-single__container content_with_heading">
+            <div class="o-single__container o-single__highlight">
                 <div class="o-single__content-header">
                     <div class="o-single__content-header-title">
                         {{ partial "operator-logo" (dict "operator" .File.ContentBaseName "pagefind" true)}}