From 1e22335f8ec2a87657147dcb793760f09a674a9c Mon Sep 17 00:00:00 2001
From: doup <asier@illarra.com>
Date: Thu, 5 Dec 2024 23:16:45 +0100
Subject: [PATCH] Enable `on-this-page` highlight in news

---
 sass/components/_tree-menu.scss | 4 ++++
 static/on-this-page.js          | 3 ++-
 templates/macros/news.html      | 2 +-
 templates/news-page.html        | 5 +++++
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/sass/components/_tree-menu.scss b/sass/components/_tree-menu.scss
index d65333bf87..89a5737631 100644
--- a/sass/components/_tree-menu.scss
+++ b/sass/components/_tree-menu.scss
@@ -55,6 +55,10 @@
         &, &:focus, &:active, &:hover, &:link, &:visited {
             color: $color-white;
         }
+
+        &[data-active=true] {
+          color: $color-white;
+        }
     }
 
     &__toggle {
diff --git a/static/on-this-page.js b/static/on-this-page.js
index c4e3651f1d..0ae029231b 100644
--- a/static/on-this-page.js
+++ b/static/on-this-page.js
@@ -25,8 +25,9 @@ function otp_set_active(id_or_node){
     id = id_or_node;
   }
   id = "#" + id;
+  console.info(id);
   document.querySelectorAll(".on-this-page a").forEach(a => {
-    a.setAttribute("data-active", a.getAttribute("href") == id);
+    a.setAttribute("data-active", a.getAttribute("href").includes(id));
   });
 }
 
diff --git a/templates/macros/news.html b/templates/macros/news.html
index d9dee94957..a727e3cd53 100644
--- a/templates/macros/news.html
+++ b/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 on-this-page">
       {% for header in toc %}{{ self::news_menu_row(header=header, max_levels=max_levels, level=1) }}{% endfor %}
     </ul>
   {% endif %}
diff --git a/templates/news-page.html b/templates/news-page.html
index a5e47be23f..ed7f7183ca 100644
--- a/templates/news-page.html
+++ b/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="/on-this-page.js"></script>
+{% endblock head_extensions %}
+
 {% block page_content %}
   <h1 class="news-title">{{ page.title }}</h1>
   <h2 class="news-subtitle">