Merge 6f05c2c78e into 3c9ba4a06d

README.md

@@ -79,18 +79,6 @@ We use a highly customized [Docsy](https://www.docsy.dev/) theme for our generat
 Awesome. If you're looking at making design-related changes to the spec site, please coordinate with us in
 [#matrix-docs:matrix.org](https://matrix.to/#/#matrix-docs:matrix.org) before opening a PR.
 
-## Page search
-
-The spec uses [Pagefind](https://pagefind.app/) to provide a page search widget. To test this locally, you'll need to generate the
-search index _after_ building the static site.
-
-```
-hugo build && npx -y pagefind --site public && hugo serve
-```
-
-Note that while `hugo serve` supports hot reloading, changes made to the site content won't reflect in the search index without
-rebuilding it.
-
 ## Building the specification
 
 If for some reason you're not a CI/CD system and want to render a static version of the spec for yourself, follow the above

assets/js/offline-search.js

@@ -37,11 +37,14 @@ search backend.
     });
 
     //
-    // Set up search input handler.
+    // Register handler
     //
 
     $searchInput.on("change", (event) => {
       render($(event.target));
+
+      // Hide keyboard on mobile browser
+      $searchInput.blur();
     });
 
     // Prevent reloading page by enter key on sidebar search.
@@ -50,12 +53,12 @@ search backend.
     });
 
     //
-    // Callback for searching and rendering the results.
+    // Pagefind
     //
 
     const render = async ($targetSearchInput) => {
       //
-      // Dispose any existing popover.
+      // Dispose existing popover
       //
 
       {
@@ -66,7 +69,7 @@ search backend.
       }
 
       //
-      // Kick off the search and collect the results.
+      // Search
       //
 
       const searchQuery = $targetSearchInput.val();
@@ -74,63 +77,34 @@ search backend.
         return;
       }
 
-      // Show the results popover with a spinner while we're busy.
-      const $spinner = $("<div>")
-        .addClass("spinner-container")
-        .append($("<div>")
-          .addClass("spinner-border")
-          .attr("role", "status")
-          .append($("<div>")
-            .addClass("visually-hidden")
-            .text("Loading...")))
-        .append($("<p>")
-          .text("Loading..."));
-      const popover = new bootstrap.Popover($targetSearchInput, {
-        content: $spinner[0],
-        html: true,
-        customClass: "td-offline-search-results",
-        placement: "bottom",
-      });
-      popover.show();
-
-      // Kick off the search.
       const search = await pagefind.debouncedSearch(searchQuery);
       if (search === null) {
         // A more recent search call has been made, nothing to do.
         return;
       }
-
-      // Load all result details. We may want to switch to a paged UI in future for better performance.
-      const results = await Promise.all(search.results.slice(0, 100).map(r => r.data()));
+      const results = await Promise.all(search.results.slice(0, 20).map(r => r.data()));
 
       //
-      // Construct the search results html.
+      // Make result html
       //
 
       const $html = $("<div>");
 
-      // Add the header and close button.
-      $html.append($("<div>")
-        .css({
-          display: "flex",
-          justifyContent: "space-between",
-          marginBottom: "1em",
-        })
-        .append($("<span>")
-          .text("Search results")
-          .css({ fontWeight: "bold" }))
-        .append($("<span>")
-          .addClass("td-offline-search-results__close-button")
-          .attr("role", "button")
-          .attr("aria-label", "Close")
-          .on("click", () => {
-            $targetSearchInput.val("");
-            $targetSearchInput.trigger("change");
+      $html.append(
+        $("<div>")
+          .css({
+            display: "flex",
+            justifyContent: "space-between",
+            marginBottom: "1em",
           })
-        )
+          .append(
+            $("<span>").text("Search results").css({ fontWeight: "bold" })
+          )
+          .append(
+            $("<span>").addClass("td-offline-search-results__close-button")
+          )
       );
 
-      // Add the main search results body.
       const $searchResultBody = $("<div>").css({
         maxHeight: `calc(100vh - ${
           $targetSearchInput.offset().top - $(window).scrollTop() + 180
@@ -145,17 +119,16 @@ search backend.
         );
       } else {
         results.forEach((r, index_r) => {
-          // Add the main result's page title.
-          $searchResultBody.append($("<div>")
-            .append($("<a>")
+          // Add the main result"s page title.
+          $searchResultBody.append(
+            $("<a>")
+              .addClass("d-block")
               .css({
                 fontSize: "1.2rem",
               })
               .attr("href", r.url)
-              .text(r.meta.title))
-            .append($("<span>")
-              .addClass("text-body-secondary")
-              .text(` – ${r.sub_results.length} ${resultsString(r.sub_results.length)}`)));
+              .text(r.meta.title)
+          );
           
           // Render the first 3 subresults per page and wrap the rest
           // in a collapsed container.
@@ -163,10 +136,10 @@ search backend.
           let $wrapper = null;
 
           r.sub_results.forEach((s, index_s) => {
+            
+
             if (index_s === LIMIT) {
-              const num_hidden_results = r.sub_results.length - index_s;
               const wrapper_id = `collapssible-subresults-${index_r}`;
-              const $action = $("<span>").text("▶ Show");
               const $expander = $("<a>")
                 .attr("data-bs-toggle", "collapse")
                 .attr("data-bs-target", `#${wrapper_id}`)
@@ -174,20 +147,19 @@ search backend.
                 .attr("role", "button")
                 .attr("aria-expanded", "false")
                 .attr("aria-controls", wrapper_id)
-                .append($action)
-                .append($("<span>").text(` ${num_hidden_results} more ${resultsString(num_hidden_results)} from ${r.meta.title}`));
+                .css("margin-left", "0.5rem")
+                .text(`${r.sub_results.length - index_s} more result(s) from ${r.meta.title}`);
 
               $searchResultBody.append($("<p>").append($expander));
               $wrapper = $("<div>")
-                .addClass("collapse td-offline-search-results__subresults")
-                .attr("id", wrapper_id)
-                .on("hide.bs.collapse", _ => $action.text("▶ Show"))
-                .on("show.bs.collapse", _ => $action.text("▼ Hide"));
+                .addClass("collapse")
+                .attr("id", wrapper_id);
               $searchResultBody.append($wrapper);
             }
 
             const $entry = $("<div>")
-              .css("margin-top", "0.5rem");
+              .css("margin-top", "0.5rem")
+              .css("margin-left", "0.5rem");
 
             $entry.append(
               $("<a>")
@@ -207,24 +179,20 @@ search backend.
         });
       }
 
-      // Finally, show the search results.
-      //
-      // Ideally we would just call setContent but there appears to be a bug in Bootstrap
-      // that causes the popover to be hidden when setContent is called after the popover
-      // has been shown. To work around this, we use the hack from [1] to inject the HTML
-      // content manually.
-      //
-      // [1]: https://github.com/twbs/bootstrap/issues/37206#issuecomment-1259541205
-      $(popover.tip.querySelector('.popover-body')).html($html[0]);
-      popover.update();
+      $targetSearchInput.one("shown.bs.popover", () => {
+        $(".td-offline-search-results__close-button").on("click", () => {
+          $targetSearchInput.val("");
+          $targetSearchInput.trigger("change");
+        });
+      });
+
+      const popover = new bootstrap.Popover($targetSearchInput, {
+        content: $html[0],
+        html: true,
+        customClass: "td-offline-search-results",
+        placement: "bottom",
+      });
+      popover.show();
     };
   });
 })(jQuery);
-
-//
-// Helpers
-//
-
-const resultsString = (n) => {
-  return n > 1 ? "results" : "result";
-};

assets/scss/_styles_project.scss

@@ -664,16 +664,5 @@ dd {
 
 /* Style for the page search widget */
 .td-offline-search-results {
-  width: 100%;
   max-width: 460px;
 }
-
-.td-offline-search-results .td-offline-search-results__subresults.collapse.show {
-  // Prevent the first child margin from collapsing upward when Bootstrap
-  // finishes the collapse animation, which otherwise causes a small jump.
-  display: flow-root;
-}
-
-.td-offline-search-results .spinner-container {
-  text-align: center;
-}

config/_default/hugo.toml

@@ -152,9 +152,8 @@ sidebar_menu_compact = true
   [server.headers.values]
     # `style-src 'unsafe-inline'` is needed to correctly render the maths in the Olm spec:
     # https://github.com/KaTeX/KaTeX/issues/4096
-    # `script-src 'unsafe-eval'` is needed because Pagefind relies on it to load its Wasm:
-    # https://github.com/Pagefind/pagefind/blob/main/docs/content/docs/hosting.md
-    Content-Security-Policy = "default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval'; img-src 'self' data:; connect-src 'self'; font-src 'self' data:; media-src 'self'; child-src 'self'; form-action 'self'; object-src 'self'"
+    # TODO: Figure out CSP to allow loading the Pagefind Wasm
+    #Content-Security-Policy = "default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self'; img-src 'self' data:; connect-src 'self'; font-src 'self' data:; media-src 'self'; child-src 'self'; form-action 'self'; object-src 'self'"
     X-XSS-Protection = "1; mode=block"
     X-Content-Type-Options = "nosniff"
     # Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"