Use Pagefind's UI for the full search

It is much nicer that way, as it offers filters and sorting and stuff. Signed-off-by: Johannes Schindelin <johannes.schindelin@gmx.de>
git · Sep 11, 2024 · 2a357df · 2a357df
1 parent a688de3
commit 2a357df
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 30 deletions.
diff --git a/content/search/results.html b/content/search/results.html
@@ -4,7 +4,4 @@
   - "/search/results"
 ---
 
-<div id="main">
-  <h1>Search results for <strong id="search-term">…</strong></h1>
-  <ol class="full-search-results"></ol>
-</div>
+<div id="search-div"></div>
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -48,6 +48,7 @@ <h1>Redirecting&hellip;</h1>
 
   <link href='/favicon.ico' rel='shortcut icon' type='image/x-icon'>
 
+  {{ if eq $section "search" }}<link href="{{ relURL "pagefind/pagefind-ui.css" }}" rel="stylesheet">{{ end }}
   {{ $style := resources.Get "sass/application.scss" | resources.ExecuteAsTemplate "application.scss" . | css.Sass | resources.Minify }}
   <link rel="stylesheet" href="{{ $style.RelPermalink }}">
   <script src="/js/modernizr.js"></script>

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -15,4 +15,5 @@
 <script src="/js/jquery-ui-1.8.18.custom.min.js"></script>
 <script src="/js/jquery.defaultvalue.js"></script>
 <script src="/js/session.min.js"></script>
+{{ if eq (.Scratch.Get "section") "search" }}<script src="/pagefind/pagefind-ui.js"></script>{{ end }}
 <script src="/js/application.js"></script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -13,9 +13,12 @@
     var tagline = taglines[Math.floor(Math.random() * taglines.length)];
     document.getElementById('tagline').innerHTML = '--' + tagline;
   </script>
+
+  {{ if ne (.Scratch.Get "section") "search" }}
   <form id="search" action="/search/results">
     <input id="search-text" name="search" placeholder="Type / to search entire site…" autocomplete="off" type="text" />
   </form>
   <div id="search-results"></div>
+  {{ end }}
 
 </header>
diff --git a/static/js/application.js b/static/js/application.js
@@ -306,35 +306,21 @@ var Search = {
   },
 
   displayFullSearchResults: function() {
-    const searchResultsElements = document.getElementsByClassName('full-search-results');
-    if (!searchResultsElements || searchResultsElements.length !== 1) return;
+    if (!$("#search-div").length) return;
 
-    const searchTerm = this.getQueryValue('search');
-    if (!searchTerm) return;
-
-    const searchTermElement = document.getElementById('search-term');
-    if (searchTermElement) searchTermElement.innerHTML = searchTerm;
-
-    const searchTextElement = document.getElementById('search-text');
-    if (searchTextElement) searchTextElement.value = searchTerm;
-
-    searchResultsElements[0].innerHTML = 'Searching&hellip;';
+    const language = this.getQueryValue('language');
 
-    this.initializeSearchIndex(async () => {
-      const results = await Search.pagefind.search(searchTerm);
-      if (!results || !results.results || !results.results.length) return;
-
-      const list = (await Promise.all(results.results.map(async e => {
-        const result = await e.data();
-        const href = result.url;
-        return `
-          <li><h3><a href="${href}">${result.meta.title}</a></h3>
-          <a class="url" href="${href}">${href}</a>
-          <p>${result.excerpt}</p></li>`;
-      }))).join('');
+    new PagefindUI({
+      element: "#search-div",
+      showSubResults: true,
+      language
+    });
 
-      searchResultsElements[0].innerHTML = list || '<li>No results found</li>';
-    })
+    const searchTerm = this.getQueryValue('search');
+    if (searchTerm) {
+      // TODO: figure out how to use `trigger()` instead of `[0].dispatchEvent()`
+      $("#search-div input").val(searchTerm)[0].dispatchEvent(new Event("input"))
+    }
   }
 }