Add initial search functionality to website

- Uses Pagefind: https://pagefind.app/docs/
ohsu-comp-bio · Sep 30, 2024 · 1a1ae94 · 1a1ae94
1 parent 2ec10d8
commit 1a1ae94
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/.github/workflows/hugo.yml b/.github/workflows/hugo.yml
@@ -59,6 +59,11 @@ jobs:
             --baseURL "${{ steps.pages.outputs.base_url }}/" \
             --source website \
             --destination public
+
+          # Run pagefind to add search functionality
+          # Reference: https://pagefind.app/docs/
+          npx -y pagefind --site public
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:

diff --git a/website/layouts/partials/head.html b/website/layouts/partials/head.html
@@ -28,6 +28,15 @@
   <script src="{{ .Site.BaseURL }}js/highlight.pack.js"></script>
   <script>hljs.initHighlightingOnLoad();</script>
 
+  <!-- Search Bar -->
+  <link href="/pagefind/pagefind-ui.css" rel="stylesheet">
+  <script src="/pagefind/pagefind-ui.js"></script>
+  <script>
+      window.addEventListener('DOMContentLoaded', (event) => {
+          new PagefindUI({ element: "#search", showSubResults: true });
+      });
+  </script>
+
 </head>
 <body>
 
@@ -48,3 +57,5 @@
       </div>
     </div>
   </div>
+
+<div id="search"></div>