Use Pagefind's UI for the full search

It is much nicer that way, as it offers filters and sorting and stuff.

This requires a bit of CSS to make the look & feel consistent with the
rest of the site.

Co-authored-by: Toon Claes <[email protected]>
Signed-off-by: Johannes Schindelin <[email protected]>

Author: dscho

assets/js/application.js

@@ -306,35 +306,26 @@ var Search = {
   },
 
   displayFullSearchResults: function() {
-    const searchResultsElements = document.getElementsByClassName('full-search-results');
-    if (!searchResultsElements || searchResultsElements.length !== 1) return;
+    if (!$("#search-div").length) return;
+
+    const language = this.getQueryValue('language');
+
+    const ui = new PagefindUI({
+      element: "#search-div",
+      showSubResults: true,
+      showImages: false,
+      language,
+      processResult: function (result) {
+        result.url = result.url.replace(/\.html$/, "")
+	return result
+      },
+    });
 
     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…';
-
-    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('');
-
-      searchResultsElements[0].innerHTML = list || '<li>No results found</li>';
-    })
+    if (searchTerm) {
+      $("#search-div input").val(searchTerm)
+      ui.triggerSearch(searchTerm);
+    }
   }
 }
 

assets/sass/forms.scss

@@ -39,7 +39,7 @@ form#search {
   width: 262px;
   padding-left: 32px;
   @include background-image-2x($baseurl + "images/icons/search", 17px, 17px, 10px 50%);
-  background-color: #fcfcfa !important;
+  background-color: $main-bg !important;
   border: solid 1px #ceccc5;
   @include border-radius(20px);
   @include box-shadow(inset 0 1px 4px #ddd);

assets/sass/layout.scss

@@ -40,7 +40,7 @@ aside {
 #main {
   padding: 22px;
   margin-bottom: 35px;
-  background-color: #fcfcfa;
+  background-color: $main-bg;
   border: solid 1px #e2e0d8;
   @include border-radius(5px);
 

assets/sass/normalize.scss

@@ -41,8 +41,7 @@ hgroup,
 main,
 menu,
 nav,
-section,
-summary {
+section {
   display: block;
 }
 

assets/sass/search.scss

@@ -143,3 +143,43 @@ ol.full-search-results {
     margin-top: 4px;
   }
 }
+
+// Search results page
+#search-div {
+  border: solid 1px $base-border-color;
+  background: $main-bg;
+  padding: 22px;
+  @include border-radius(5px);
+
+  ol {
+    background-color: $callout-color;
+    @include border-radius(3px);
+    padding: 8px 14px 4px;
+    margin: 0 0 1.4em;
+    list-style: none;
+  }
+
+
+  .pagefind-ui__result-inner > .pagefind-ui__result-title {
+    font-size: 16px;
+    line-height: $base-line-height * 2;
+    font-weight: bold;
+  }
+
+  .pagefind-ui__result-tags {
+    list-style: none;
+    color: $light-font-color;
+    margin-bottom: 1.4em;
+    margin-left: 0;
+  }
+}
+
+button {
+  border-color: $link-color;
+  color: $link-color;
+  background: $callout-color;
+  font-weight: bold;
+  @include border-radius(3px);
+  outline: none;
+  padding: 0 0.5em;
+}

assets/sass/variables.scss

@@ -32,3 +32,4 @@ $base-border-color:  #d8d7cf;
 $callout-color:      #e9e8e0;
 
 $black-3 : #333333;
+$main-bg: #fcfcfa;

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>

layouts/partials/footer.html

@@ -14,6 +14,6 @@
 <script src="/js/jquery-1.7.1.min.js"></script>
 <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 }}
 {{ $js := resources.Get "js/application.js" | resources.ExecuteAsTemplate "js/application.js" . | resources.Minify }}
 <script src="{{ $js.RelPermalink }}"></script>

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>