Issue scientific-python#607: proof of concept for site search with pa…

…gefind

.gitignore

@@ -6,3 +6,6 @@ resources
 # Auto-generated
 doc/content/shortcodes.md
 public
+
+# vim droppings
+.*.swp

layouts/index.html

@@ -1,4 +1,6 @@
 {{ define "main" }}
+    {{ partial "search.html" . }}
+
     {{ if .Site.Params.hero }}
     {{ partial "hero.html" . }}
     {{ end }}

layouts/partials/head.html

@@ -12,3 +12,7 @@
     </script>
 {{ end }}
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans">
+
+<!-- Support site search -->
+<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
+<script src="/pagefind/pagefind-ui.js"></script>

layouts/partials/navbar.html

@@ -25,6 +25,10 @@
     <div id="navbar-menu" class="navbar-menu">
 
       <div class="navbar-end">
+        <button class="search-button">
+          <i class="fa-solid fa-magnifying-glass fa-lg" title="Search (Ctrl+k)"></i>
+        </button>
+
         {{- range $navbar }}
         {{- if .sublinks }}
         <div class="navbar-item has-dropdown">
@@ -50,6 +54,7 @@
         {{- if .IsTranslated }}
         {{ partial "translation.html" . }}
         {{- end }}
+
       </div>
     </div>
   </div>

layouts/partials/search.html

@@ -0,0 +1,56 @@
+<style>
+  .search-button {
+      border-radius: 20px;
+      padding: 8px;
+      margin-right: 15px;
+      cursor: pointer;
+  }
+  .search-container {
+      padding: 10px 15px;
+  }
+</style>
+<div class="search-container" style="display: none"></div>
+<script>
+  let getElem = (className) => document.getElementsByClassName(className)[0];
+
+  window.addEventListener('DOMContentLoaded', (evt) => {
+    new PagefindUI({
+        element: ".search-container",
+        autofocus: true,
+        showSubResults: true,
+    });
+
+    let searchContainer = getElem('search-container');
+    let searchInput = getElem('pagefind-ui__search-input');
+
+    let showSearch = () => {
+      searchContainer.style.display  ='block';
+      searchInput.focus();
+    }
+
+    let hideSearch = () => {
+      searchContainer.style.display  ='none';
+      searchInput.blur();
+    }
+
+    let toggleSearch = (evt) => {
+      if (searchContainer.style.display === 'none') {
+        showSearch();
+      } else {
+        hideSearch();
+      }
+    };
+
+    window.addEventListener('keydown', (evt) => {
+        if (evt.key === 'Escape') {
+          hideSearch();
+        }
+        if (evt.key === 'k' && evt.ctrlKey) {
+            toggleSearch();
+        }
+    });
+
+   getElem('search-button').addEventListener('click', toggleSearch);
+  });
+</script>
+