Fix Home nav link active color (#1523)

config/settings.py

@@ -141,6 +141,7 @@ TEMPLATES = [
                 "django.contrib.auth.context_processors.auth",
                 "django.contrib.messages.context_processors.messages",
                 "core.context_processors.current_version",
+                "core.context_processors.active_nav_item",
                 "core.context_processors.debug",
             ],
             "loaders": [

core/context_processors.py

@@ -8,6 +8,25 @@ def current_version(request):
     return {"current_version": Version.objects.most_recent()}
 
 
+def active_nav_item(request):
+    """Custom context processor that adds the active nav item to the context"""
+    default_nav_item = "home"
+    path_map = {
+        "/doc/libs/": "libraries",  # special case - handle first
+        "/doc/": "learn",
+        "/docs/": "learn",
+        "/news/": "news",
+        "/community/": "community",
+        "/library/": "libraries",
+        "/libraries/": "libraries",
+        "/releases/": "releases",
+    }
+    for prefix, item in path_map.items():
+        if request.path.startswith(prefix):
+            return {"active_nav_item": item}
+    return {"active_nav_item": default_nav_item}
+
+
 def debug(request):
     """
     Adds settings.DEBUG to the context.

core/templatetags/active_link_tags.py

@@ -1,58 +0,0 @@
-from django import template
-from django.urls import NoReverseMatch, reverse
-from django.utils.encoding import escape_uri_path
-
-register = template.Library()
-
-
-@register.simple_tag(takes_context=True)
-def active_link(
-    context,
-    viewnames,
-    css_class=None,
-    inactive_class="",
-    strict=None,
-    url=None,
-    *args,
-    **kwargs
-):
-    """
-    Renders the given CSS class if the request path matches the path of the view.
-    :param context: The context where the tag was called. Used to access the r
-    equest object.
-    :param viewnames: The name of the view or views separated by ||
-    (include namespaces if any).
-    :param css_class: The CSS classes to render.
-    :param inactive_class: The CSS classes to render if the views is not active.
-    :param strict: If True, the tag will perform an exact match with the request
-    path.
-    :param url: Optional string reprenting a path. Useful for paths that can't be
-    reversed.
-    :return:
-    """
-    request = context.get("request")
-    if request is None:
-        # Can't work without the request object.
-        return ""
-    active = False
-    views = viewnames.split("||")
-
-    for viewname in views:
-        try:
-            path = reverse(viewname.strip(), args=args, kwargs=kwargs)
-        except NoReverseMatch:
-            continue
-        request_path = escape_uri_path(request.path)
-        if url and url in request_path:
-            active = True
-        elif strict:
-            active = request_path == path
-        else:
-            active = request_path.find(path) == 0
-        if active:
-            break
-
-    if active:
-        return css_class
-
-    return inactive_class

core/tests/test_context_processors.py

@@ -1,4 +1,7 @@
-from core.context_processors import current_version
+import pytest
+from django.test import RequestFactory
+
+from core.context_processors import current_version, active_nav_item
 
 
 def test_current_version_context(
@@ -10,3 +13,32 @@ def test_current_version_context(
     context = current_version(request)
     assert "current_version" in context
     assert context["current_version"] == version
+
+
+@pytest.mark.parametrize(
+    "path,expected_nav_item",
+    [
+        ("/", "home"),
+        ("/doc/libs/", "libraries"),  # Special case
+        ("/doc/", "learn"),
+        ("/doc/user-guide/index.html", "learn"),
+        ("/docs/", "learn"),
+        ("/news/", "news"),
+        ("/news/blogpost/", "news"),
+        ("/news/link/", "news"),
+        ("/news/news/", "news"),
+        ("/news/poll/", "news"),
+        ("/news/video/", "news"),
+        ("/news/entry/some-slug/", "news"),
+        ("/community/", "community"),
+        ("/library/", "libraries"),
+        ("/libraries/1.86.0/grid/", "libraries"),
+        ("/releases/1.85.0/", "releases"),
+        ("/documentation/", "home"),  # Should not match "/doc/"
+    ],
+)
+def test_active_nav_item(path, expected_nav_item):
+    """Test the active_nav_item context processor."""
+    request = RequestFactory().get(path)
+    context = active_nav_item(request)
+    assert context["active_nav_item"] == expected_nav_item

templates/includes/_header.html

@@ -1,5 +1,5 @@
 {% load static %}
-{% load account socialaccount active_link_tags %}
+{% load account socialaccount %}
 <style>
 @import url({% static 'css/fonts.css' %});
 :root {
@@ -374,7 +374,10 @@ html.dark {
     <!-- mobile navbar -->
     <div id="mobileNav" >
 {#      <a href="{% url 'home' %}" title="Boost Home" class="logo-link"><img style="width:1.3rem" src="{% static 'img/Boost_Symbol_Transparent.svg' %}" alt="Boost"></a>#}
-      <div id="selectedpage" onclick="openNav()" class=""><div id="pageName" class="capitalize">boost</div><div class="material-symbols-outlined">arrow_drop_down</div></div>
+      <div id="selectedpage" onclick="openNav()" class="">
+        <div id="pageName">{{ active_nav_item|title }}</div>
+        <div class="material-symbols-outlined">arrow_drop_down</div>
+      </div>
       <div id="pageselector" onmouseleave="closeNav()" class="hide boost-drop-shadow"  >
           <div class="mobile-menu-item"><a href="{% url 'home' %}" title="Home">Home</a></div>
           <div class="mobile-menu-item"><a href="{% url 'news' %}" title="News">News</a></div>
@@ -387,12 +390,12 @@ html.dark {
     <!-- desktop navbar -->
     <div id="desktopNav" class="left-menubar">
 {#        <a href="{% url 'home' %}" title="Boost Home" class="logo-link"><img style="width:1.3rem" src="{% static 'img/Boost_Symbol_Transparent.svg' %}" alt="Boost"></a>#}
-        <a href="{% url 'home' %}" title="Boost Home" class="active-link text-lg font-semibold">Home</a>
-        <a href="{% url 'news' %}" id="news" class="menu-link {% active_link 'news' css_class=' menu-link active-link' inactive_class='menu-link' %}">news</a>
-        <a href="{% url 'docs' %}" id="learn" class="menu-link {% active_link 'docs||docs-user-guide' css_class=' menu-link active-link' inactive_class='menu-link' %}">learn</a>
-        <a href="{% url 'community' %}" id="community" class="menu-link {% active_link 'community' css_class=' menu-link active-link' inactive_class='menu-link' %}">community</a>
-        <a href="{% url 'libraries' %}" id="libraries" class="menu-link {% active_link 'libraries||docs-libs-page' css_class=' menu-link active-link' inactive_class='menu-link' %}">libraries</a>
-        <a href="{% url 'releases-most-recent' %}" id="releases" class="menu-link {% active_link 'releases-most-recent' css_class=' menu-link active-link' inactive_class='menu-link' %}">releases</a>
+        <a href="{% url 'home' %}" title="Boost Home" class="menu-link {% if active_nav_item == 'home' %}active-link{% endif %}">Home</a>
+        <a href="{% url 'news' %}" id="news" class="menu-link {% if active_nav_item == 'news' %}active-link{% endif %}">news</a>
+        <a href="{% url 'docs' %}" id="learn" class="menu-link {% if active_nav_item == 'learn' %}active-link{% endif %}">learn</a>
+        <a href="{% url 'community' %}" id="community" class="menu-link {% if active_nav_item == 'community' %}active-link{% endif %}">community</a>
+        <a href="{% url 'libraries' %}" id="libraries" class="menu-link {% if active_nav_item == 'libraries' %}active-link{% endif %}">libraries</a>
+        <a href="{% url 'releases-most-recent' %}" id="releases" class="menu-link {% if active_nav_item == 'releases' %}active-link{% endif %}">releases</a>
     </div>
     <div class="right-menubar" x-data="{ 'searchOpen': false }">
         <span style="position: relative;" x-ref="desktopSearchArea">
@@ -475,46 +478,6 @@ html.dark {
           closeNav();
         }
       });
-      var url = window.location.pathname;
-      if (url != "srcdoc") {
-        var words = url.split("\/");
-        words[1] = words[1].replaceAll("\/", "");
-        var tabname = "Home"
-        var pagename = document.getElementById("pageName")
-        if (words[1].length != '') {
-          switch (words[1]) {
-            case 'doc':
-              if (words[2] == 'libs') {
-                tabname = "libraries"
-              } else {
-                tabname = "learn"
-              }
-              break;
-            case 'docs':
-              tabname = "learn"
-              break;
-            case 'community':
-              tabname = "community"
-              break;
-            case 'news':
-              tabname = "news"
-              break;
-            case 'libraries':
-              tabname = "libraries"
-              break;
-            case 'releases':
-              tabname = "releases"
-              break;
-            case 'accounts':
-              tabname= 'account'
-              break;
-          }
-          var activename = document.getElementById(tabname);
-          activename.classList.add('active-link');
-        }
-        pagename.innerText='';
-        pagename.appendChild(document.createTextNode(tabname));
-      }
       function openNav() {
         ps = document.getElementById("pageselector");
         ps.classList.remove('hide');