docs: Set <title> to article title.

Previously the title for all pages of the user and API documentation was
just "Zulip", which does not only bad for UX but also for accessibility.

We were already extracting the title from the Markdown for the og:title
tag, so we just need to set the <title> tag.

Since our documentation fetches pages with Ajax if you have JavaScript
enabled, we also need to save the titles in the article cache.

Part of #15948.

static/js/portico/help.js

@@ -73,7 +73,7 @@ function scrollToHash(simplebar) {
     }
 }
 
-const html_map = new Map();
+const cache = new Map();
 const loading = {
     name: null,
 };
@@ -83,23 +83,26 @@ const markdownSB = new SimpleBar($(".markdown")[0]);
 const fetch_page = function (path, callback) {
     $.get(path, (res) => {
         const $html = $(res).find(".markdown .content");
+        const title = $(res).filter("title").text();
 
-        callback($html.html().trim());
+        callback({html: $html.html().trim(), title});
         render_code_sections();
     });
 };
 
-const update_page = function (html_map, path) {
+const update_page = function (cache, path) {
-    if (html_map.has(path)) {
+    if (cache.has(path)) {
-        $(".markdown .content").html(html_map.get(path));
+        $(".markdown .content").html(cache.get(path).html);
+        document.title = cache.get(path).title;
         render_code_sections();
         scrollToHash(markdownSB);
     } else {
         loading.name = path;
-        fetch_page(path, (res) => {
+        fetch_page(path, (article) => {
-            html_map.set(path, res);
+            cache.set(path, article);
-            $(".markdown .content").html(res);
+            $(".markdown .content").html(article.html);
             loading.name = null;
+            document.title = article.title;
             scrollToHash(markdownSB);
         });
     }
@@ -124,7 +127,7 @@ $(".sidebar a").on("click", function (e) {
 
     history.pushState({}, "", path);
 
-    update_page(html_map, path);
+    update_page(cache, path);
 
     $(".sidebar").removeClass("show");
 
@@ -166,7 +169,7 @@ scrollToHash(markdownSB);
 
 window.addEventListener("popstate", () => {
     const path = window.location.pathname;
-    update_page(html_map, path);
+    update_page(cache, path);
 });
 
 $("body").addClass("noscroll");

templates/zerver/documentation_main.html

@@ -2,6 +2,9 @@
 {% set entrypoint = "help" %}
 
 {# Zulip User and API Documentation. #}
+{% block title %}
+<title>{{ OPEN_GRAPH_TITLE }}</title>
+{% endblock %}
 
 {% block portico_content %}
 <div class="app help terms-page inline-block{% if page_is_help_center %} help-center{% endif %}{% if page_is_api_center %} api-center{% endif %}">