Enable on-this-page highlight in news

bevyengine · Dec 5, 2024 · 1e22335 · 1e22335
1 parent 289aea0
commit 1e22335
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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">