search: be even more prepared for the transition from the Rails app

In the parent commit, we started supporting to load the client-side search via the `/search?search=<term>` URL into the interactive search box served from the Rails app version of the page. The trick to make this work was to exploit the fact that `/search` will resolve to a full HTML page in the Hugo/Pagefind version, including the client-side search code, which finds the search box, interprets its contents, and peforms the desired functionality. However, this still shows a quite ugly "full page" inside the search results <div>. Even worse: While the user typed less than three characters, this would show the warning (intended for users who turned off Javascript) that the search functionality is now client-side and requires Javascript. Of course, this all only matters as long as the cached versions of the Rails app site are served while transitioning to the Hugo/Pagefind version of the site. For the transition from a Rails app to a static website, let's detect the situation that we're running "in mixed mode" and replace the full search page with a small placeholder that is less annoying to the eye. Signed-off-by: Johannes Schindelin <[email protected]>
git · Sep 23, 2024 · 6635ab1 · 6635ab1
1 parent be57dbd
commit 6635ab1
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/content/search/_index.html b/content/search/_index.html
@@ -22,3 +22,11 @@
     </td>
   </tr>
 </tbody></table>
+<script>
+  if ($("#search-results").html().indexOf("<header>Search is now client-side only!</header>") > 0) {
+    // We seem to be running a client-side search started from the Rails-version of the page;
+    // This means that we loaded the _entire_ search page, <html> and all, into the div. Let's not
+    // show that while initializing and running the actual search...
+    $("#search-results").html("<header>Search results</header><table><tr><td>Initializing search &hellip;</td></tr></table>");
+  }
+</script>