[Experiment] Add pagefind search

.gitignore

@@ -7,4 +7,5 @@
 /community-module-registry/
 /assets/images/modules/share-logos/*
 !/assets/images/modules/share-logos/.gitkeep
-/node_modules/
+/node_modules/
+/static/_pagefind/

assets/sass/_header.scss

@@ -309,4 +309,32 @@
             height: 12px;
         }
     }
+}
+
+#header-search-toggle {
+    border: 1px solid $fog;
+    border-radius: 4px;
+    background: none;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 7px 8px;
+    font-size: 14px;
+    line-height: 1;
+    color: $smoke;
+    cursor: text;
+    width: 100%;
+    max-width: 200px;
+
+    .shortcut {
+        font-size: 12px;
+        font-weight: 500;
+        margin-left: auto;
+    }
+
+    svg {
+        width: 16px;
+        height: 16px;
+        color: $eggplant;
+    }
 }

assets/sass/main.scss

@@ -20,6 +20,10 @@ body {
     @media (min-width: 500px) {
         font-size: rem(16px);
     }
+
+    &.show-site-search {
+        overflow: hidden;
+    }
 }
 
 .container {
@@ -167,6 +171,159 @@ a {
     }
 }
 
+#site-search {
+    display: none;
+    position: fixed;
+    left: 0;
+    top: 0;
+    background: rgba($eggplant, 0.5);
+    width: 100%;
+    height: 100vh;
+    padding: 16px;
+    z-index: 999;
+    align-items: flex-start;
+    justify-content: center;
+
+    body.show-site-search & {
+        display: flex;
+    }
+
+    .wrapper {
+        background: #fff;
+        width: 100%;
+        max-width: 800px;
+        overflow: hidden;
+        border-radius: 8px;
+        position: relative;
+        max-height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .controls {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px;
+        border-bottom: 1px solid $mist;
+
+        label {
+            padding: 8px;
+            display: flex;
+
+            svg {
+                width: 16px;
+                height: 16px;
+            }
+        }
+
+        input {
+            width: 100%;
+            height: 32px;
+            border: none;
+        }
+    }
+}
+
+#site-search-results {
+    padding: 16px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    .search-filter-item {
+        > .title {
+            font-size: 24px;
+            font-weight: 500;
+            color: $eggplant;
+            margin-bottom: 8px;
+            display: block;
+        }
+
+        .results {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+    }
+
+    .result-item {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        mark {
+            background-color: $violet;
+            color: #fff;
+        }
+
+        a {
+            text-decoration: none;
+            color: $smoke;
+            border: 1px solid $mist;
+            padding: 16px;
+            display: block;
+            border-radius: 8px;
+
+            &:hover,
+            &:focus {
+                background: $ghost;
+
+                .title {
+                    color: $pacific;
+                }
+            }
+        }
+
+        .title {
+            color: $eggplant;
+            font-size: 16px;
+            font-weight: 500;
+            margin-bottom: 8px;
+            display: block;
+        }
+
+        .excerpt {
+            font-size: 14px;
+        }
+
+        .subresults {
+            border-left: 1px solid $mist;
+            padding-left: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            display: none;
+        }
+    }    
+}
+
+#site-search-close-catcher {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: none;
+    border: none;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    margin: 0;
+}
+
+#site-search-close {
+    border: none;
+    display: flex;
+    background: none;
+    padding: 8px;
+    cursor: pointer;
+
+    svg {
+        width: 16px;
+        height: 16px;
+    }
+}
+
 @import "footer";
 @import "glide";
 @import "header";

build.sh

@@ -83,4 +83,7 @@ then
    echo "Hugo failed with return code ${hugoReturnCode}"
 fi
 
+# Build search index
+npx pagefind --site="public" --output-subdir="_pagefind"
+
 exit $hugoReturnCode

layouts/_default/baseof.html

@@ -29,6 +29,19 @@
         {{- partial "footer.html" . -}}
         {{- partial "svgs/sprite.html" -}}
         {{- block "footerScripts" . }}{{- end }}
+        <div id="site-search">
+            <button id="site-search-close-catcher"></button>
+            <div class="wrapper">
+                <div class="controls">
+                    <label for="search-input">
+                        <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
+                    </label>
+                    <input id="search-input" type="text" placeholder="Search">
+                    <button id="site-search-close">{{ partial "svgs/close" }}</button>
+                </div>
+                <div id="site-search-results"></div>
+            </div>
+        </div>
         <!-- Google Tag Manager (noscript) -->
             <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5LGVXVD" 
             height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

layouts/guides/single.html

@@ -3,11 +3,13 @@
 <link rel="stylesheet" href="{{ $style.RelPermalink }}">
 
 <script src="/js/highlight.min.js"></script>
+
+<meta data-pagefind-filter="type[content]" content="Guide">
 {{ end }}
 
 {{ define "main" }}
   <main>
-    <article>
+    <article data-pagefind-body>
       <header class="guide-header">
         <div class="container">
           <aside>
@@ -46,7 +48,7 @@ <h1>
       </header>
       <div class="guide-content longform-content">
         <div class="container">
-          <aside class="toc">
+          <aside class="toc" data-pagefind-ignore>
             {{ .TableOfContents }}
           </aside>
           <div class="content">

layouts/modules/single.html

@@ -3,6 +3,8 @@
     <link rel="stylesheet" href="{{ $style.RelPermalink }}">
 
     <script src="/js/highlight.min.js"></script>
+
+    <meta data-pagefind-filter="type[content]" content="Module">
 {{ end }}
 
 {{ define "main" }}
@@ -21,7 +23,7 @@
           </aside>
         </div>
       </div>
-      <div class="module">
+      <div class="module" data-pagefind-body>
         <div class="container">
           <header class="module-header">
             <div class="banner-wrapper">
@@ -101,7 +103,7 @@ <h2>Documentation</h2>
               {{end}} 
             </div>
             {{ if or .Params.officialPartner .Params.isOfficial }}
-              <div class="disclaimer">  
+              <div class="disclaimer" data-pagefind-ignore>  
                 <h2>
                   <svg class="icon-award" width="24" height="24" viewBox="0 0 30 30">
                     <use href="#icon-award"></use>
@@ -119,7 +121,7 @@ <h2>
             {{ end }}
 
             {{ if $communityDocs }}
-              <div class="disclaimer">  
+              <div class="disclaimer" data-pagefind-ignore>  
                 <h2>
                   <svg class="icon-community" height="24" viewBox="0 0 40 32">
                     <use href="#icon-community"></use>

layouts/partials/head.html

@@ -90,4 +90,6 @@
 <meta property="og:url" content="{{ .Permalink }}">
 <meta property="og:description" content="{{ $ogDescription }}">
 <meta property="og:type" content=website>
-<meta property="og:image" content="{{ $ogImage }}">
+<meta property="og:image" content="{{ $ogImage }}">
+
+<script src="/search.js" defer></script>

layouts/partials/header.html

@@ -21,6 +21,11 @@
             </svg>        
         </button>
     </div>
+    <button id="header-search-toggle">
+        <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512" fill="currentColor"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
+        <span>Search</span>
+        <span class="shortcut">Ctrl K</span>
+    </button>
     <nav>
         <ul class="menu">
             <li class="menu-item">