From b484a5263e33170ebf88bdb52b79e13d50ab7ff4 Mon Sep 17 00:00:00 2001
From: Brian Hawthorne <hawthorne@amyris.com>
Date: Fri, 10 May 2024 19:41:54 -0400
Subject: [PATCH] Issue #607: proof of concept for site search with pagefind

---
 .gitignore                   |  3 ++
 layouts/index.html           |  2 ++
 layouts/partials/head.html   |  4 +++
 layouts/partials/navbar.html |  5 ++++
 layouts/partials/search.html | 56 ++++++++++++++++++++++++++++++++++++
 5 files changed, 70 insertions(+)
 create mode 100644 layouts/partials/search.html

diff --git a/.gitignore b/.gitignore
index a988bda2..e0d12fb7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,6 @@ resources
 # Auto-generated
 doc/content/shortcodes.md
 public
+
+# vim droppings
+.*.swp
diff --git a/layouts/index.html b/layouts/index.html
index b62c7aec..479b44b0 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,4 +1,6 @@
 {{ define "main" }}
+    {{ partial "search.html" . }}
+
     {{ if .Site.Params.hero }}
     {{ partial "hero.html" . }}
     {{ end }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index a6a20082..4d1a05c9 100644
--- a/layouts/partials/head.html
+++ b/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>
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 535571b4..06a79c54 100644
--- a/layouts/partials/navbar.html
+++ b/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>
diff --git a/layouts/partials/search.html b/layouts/partials/search.html
new file mode 100644
index 00000000..60ed7cc0
--- /dev/null
+++ b/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>
+