help: Highlight current article on the server side.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

templates/zerver/documentation_main.html

@@ -12,16 +12,9 @@
         <div class="content">
             {% if not page_is_policy_center %}
             <h1><a href="https://zulip.com" class="no-underline">Zulip homepage</a></h1>
-            <h1><a href="{{ doc_root }}" class="no-underline">{{ doc_root_title }} home</a></h1>
             {% endif %}
 
-            {% if page_is_policy_center %}
-            {{ render_markdown_path(sidebar_index) }}
-            {% elif page_is_help_center %}
-            {{ render_markdown_path(sidebar_index) }}
-            {% else %}
-            {{ render_markdown_path(sidebar_index, context=api_url_context) }}
-            {% endif %}
+            {{ sidebar_html }}
 
             {% if not page_is_policy_center %}
             <h1 class="home-link"><a href="/" class="no-underline">Back to Zulip</a></h1>

web/src/portico/help.js

@@ -76,29 +76,6 @@ function add_copy_to_clipboard_element($codehilite) {
     });
 }
 
-function highlight_current_article() {
-    $(".help .sidebar a").removeClass("highlighted");
-    $(".help .sidebar a").attr("tabindex", "0");
-    const path = window.location.pathname;
-
-    if (!path) {
-        return;
-    }
-
-    const hash = window.location.hash;
-    let $article = $(`.help .sidebar a[href="${CSS.escape(path + hash)}"]`);
-    if (!$article.length) {
-        // If there isn't an entry in the left sidebar that matches
-        // the full URL+hash pair, instead highlight an entry in the
-        // left sidebar that just matches the URL part.
-        $article = $(`.help .sidebar a[href="${CSS.escape(path)}"]`);
-    }
-    // Highlight current article link and the heading of the same
-    $article.closest("ul").css("display", "block");
-    $article.addClass("highlighted");
-    $article.attr("tabindex", "-1");
-}
-
 function render_code_sections() {
     $(".code-section").each(function () {
         activate_correct_tab($(this));
@@ -110,8 +87,6 @@ function render_code_sections() {
         add_copy_to_clipboard_element($(this));
     });
 
-    highlight_current_article();
-
     common.adjust_mac_kbd_tags(".markdown kbd");
 
     $("table").each(function () {

zerver/views/documentation.py

@@ -9,6 +9,9 @@ from django.conf import settings
 from django.http import HttpRequest, HttpResponse, HttpResponseNotFound
 from django.template import loader
 from django.views.generic import TemplateView
+from lxml import html
+from lxml.etree import Element, SubElement, XPath, _Element
+from markupsafe import Markup
 
 from zerver.context_processors import zulip_default_context
 from zerver.decorator import add_google_analytics_context
@@ -65,6 +68,9 @@ class ApiURLView(TemplateView):
         return context
 
 
+sidebar_links = XPath("//a[@href=$url]")
+
+
 class MarkdownDirectoryView(ApiURLView):
     path_template = ""
     policies_view = False
@@ -215,7 +221,6 @@ class MarkdownDirectoryView(ApiURLView):
             )
             context["PAGE_DESCRIPTION"] = request_notes.placeholder_open_graph_description
 
-        context["sidebar_index"] = sidebar_index
         # An "article" might require the api_url_context to be rendered
         api_url_context: Dict[str, Any] = {}
         add_api_url_context(api_url_context, self.request)
@@ -223,6 +228,28 @@ class MarkdownDirectoryView(ApiURLView):
         context["api_url_context"] = api_url_context
         if endpoint_name and endpoint_method:
             context["api_url_context"]["API_ENDPOINT_NAME"] = endpoint_name + ":" + endpoint_method
+
+        sidebar_html = render_markdown_path(sidebar_index)
+        tree = html.fragment_fromstring(sidebar_html, create_parent=True)
+        if not context.get("page_is_policy_center", False):
+            home_h1 = Element("h1")
+            home_link = SubElement(home_h1, "a")
+            home_link.attrib["class"] = "no-underline"
+            home_link.attrib["href"] = context["doc_root"]
+            home_link.text = context["doc_root_title"] + " home"
+            tree.insert(0, home_h1)
+        url = context["doc_root"] + article
+        # Highlight current article link
+        links = sidebar_links(tree, url=url)
+        assert isinstance(links, list)
+        for a in links:
+            assert isinstance(a, _Element)
+            old_class = a.attrib.get("class", "")
+            assert isinstance(old_class, str)
+            a.attrib["class"] = old_class + " highlighted"
+        sidebar_html = "".join(html.tostring(child, encoding="unicode") for child in tree)
+        context["sidebar_html"] = Markup(sidebar_html)
+
         add_google_analytics_context(context)
         return context