From 841ff3445cfcb79e5ae7c4e76aa127f31241f10a Mon Sep 17 00:00:00 2001
From: Leo <leocrossuk@gmail.com>
Date: Thu, 18 Jan 2024 18:24:03 +0000
Subject: [PATCH 1/4] proof of concept

---
 .gitignore                   |   3 +-
 assets/sass/_header.scss     |  28 +++++++
 assets/sass/main.scss        | 157 +++++++++++++++++++++++++++++++++++
 layouts/_default/baseof.html |  13 +++
 layouts/guides/single.html   |   6 +-
 layouts/modules/single.html  |   8 +-
 layouts/partials/head.html   |   4 +-
 layouts/partials/header.html |   5 ++
 static/search.js             |  98 ++++++++++++++++++++++
 9 files changed, 315 insertions(+), 7 deletions(-)
 create mode 100644 static/search.js

diff --git a/.gitignore b/.gitignore
index 90ba476d..2ff15f00 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,4 +7,5 @@
 /community-module-registry/
 /assets/images/modules/share-logos/*
 !/assets/images/modules/share-logos/.gitkeep
-/node_modules/
\ No newline at end of file
+/node_modules/
+/static/_pagefind/
diff --git a/assets/sass/_header.scss b/assets/sass/_header.scss
index 6649bda3..d3908ca3 100644
--- a/assets/sass/_header.scss
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index cdd2d9c9..bea91850 100644
--- a/assets/sass/main.scss
+++ b/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";
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index b81e74bd..33efcc4d 100644
--- a/layouts/_default/baseof.html
+++ b/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>
diff --git a/layouts/guides/single.html b/layouts/guides/single.html
index b66724fc..c858e936 100644
--- a/layouts/guides/single.html
+++ b/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">
diff --git a/layouts/modules/single.html b/layouts/modules/single.html
index 86e1885b..eb7a7333 100644
--- a/layouts/modules/single.html
+++ b/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>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index b8b61e94..8699fd22 100644
--- a/layouts/partials/head.html
+++ b/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 }}">
\ No newline at end of file
+<meta property="og:image" content="{{ $ogImage }}">
+
+<script src="/search.js" defer></script>
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index c0d69ab1..a86f89f2 100644
--- a/layouts/partials/header.html
+++ b/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">
diff --git a/static/search.js b/static/search.js
new file mode 100644
index 00000000..f5288bdf
--- /dev/null
+++ b/static/search.js
@@ -0,0 +1,98 @@
+const body = document.body;
+const siteSearchInput = document.getElementById("search-input");
+const siteSearchResults = document.getElementById("site-search-results");
+const siteSearchClose = document.getElementById("site-search-close");
+const siteSearchCloseCatcher = document.getElementById("site-search-close-catcher");
+const headerSearchToggle = document.getElementById("header-search-toggle");
+
+siteSearchClose.addEventListener("click", () => closeSearch());
+siteSearchCloseCatcher.addEventListener("click", () => closeSearch());
+headerSearchToggle.addEventListener("click", () => openSearch());
+window.addEventListener("keydown", (e) => {
+    if (e.ctrlKey && (e.key === "K" || e.key === "k")) {
+		e.preventDefault();
+		toggleSearch();
+	}
+});
+siteSearchInput.addEventListener("keyup", () => doSearch(siteSearchInput.value));
+
+let pagefind = null;
+async function initSearch() {
+    if (pagefind != null) return;
+    pagefind = await import("/_pagefind/pagefind.js");
+}
+initSearch();
+
+function openSearch() {
+    body.classList.add("show-site-search");
+    siteSearchInput.focus();
+}
+
+function closeSearch() {
+    body.classList.remove("show-site-search");
+    siteSearchInput.value = "";
+    siteSearchResults.innerHTML = "";
+    siteSearchInput.blur();
+}
+
+function toggleSearch() {
+    if (body.classList.contains("show-site-search")) {
+        closeSearch();
+    } else {
+        openSearch();
+    }
+}
+
+async function doSearch(searchTerm) {
+    const search = await pagefind.debouncedSearch(searchTerm);
+    if (search != null) {
+        const results = await Promise.all(search.results.map(r => r.data()));
+        console.log(results);
+        showResults(results);
+    }
+}
+
+function showResults(results) {
+    siteSearchResults.innerHTML = "";
+
+    const guides = results.filter(item => {
+        return item.filters?.type[0] == "Guide";
+    });
+
+    const modules = results.filter(item => {
+        return item.filters?.type[0] == "Module";
+    });
+
+    console.log(guides);
+
+    if (guides.length > 0) {
+        siteSearchResults.insertAdjacentHTML('beforeend', `<div class="search-filter-item"><span class="title">Guides</span><div class="results">${resultsHtml(guides)}</div></div>`);
+    }
+
+    if (modules.length > 0) {
+        siteSearchResults.insertAdjacentHTML('beforeend', `<div class="search-filter-item"><span class="title">Modules</span><div class="results">${resultsHtml(modules)}</div></div>`);
+    }
+    
+}
+
+function resultsHtml(results) {
+    let resultHtml = "";
+    results.forEach(element => {
+        const subresults = element.sub_results?.map(item => {
+            return `<div class="subresult-item">
+                <a href="${item.url}">
+                    <span class="title">${item.title}</span>
+                    <div class="excerpt">${item.excerpt}</div>
+                </a>
+            </div>`
+        });
+        resultHtml += `<div class="result-item">
+            <a href="${element.url}">
+                <span class="title">${element.meta.title}</span>
+                <div class="excerpt">${element.excerpt}</div>
+            </a>
+            <div class="subresults">${subresults?.join("")}</div>
+        </div>`;
+    });
+    return resultHtml;
+}
\ No newline at end of file

From 14d296012d191d0b4691e6dd45d396667685ef09 Mon Sep 17 00:00:00 2001
From: Leo <leocrossuk@gmail.com>
Date: Tue, 19 Mar 2024 13:34:02 +0000
Subject: [PATCH 2/4] Add search index to build script

---
 build.sh | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/build.sh b/build.sh
index ee5b6619..6b9975ca 100755
--- a/build.sh
+++ b/build.sh
@@ -83,4 +83,7 @@ then
    echo "Hugo failed with return code ${hugoReturnCode}"
 fi
 
+# Build search index
+npx pagefind --site="public" --output-subdir="static/_pagefind"
+
 exit $hugoReturnCode

From 04c6e370224efbaea5a36caf134a484063301308 Mon Sep 17 00:00:00 2001
From: Leo <leocrossuk@gmail.com>
Date: Tue, 19 Mar 2024 13:38:40 +0000
Subject: [PATCH 3/4] Update build.sh

---
 build.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build.sh b/build.sh
index 6b9975ca..1ac6b365 100755
--- a/build.sh
+++ b/build.sh
@@ -84,6 +84,6 @@ then
 fi
 
 # Build search index
-npx pagefind --site="public" --output-subdir="static/_pagefind"
+npx pagefind --site="public" --output-path="static/_pagefind"
 
 exit $hugoReturnCode

From 2c3e4a71fa3046dd5ba4b2f5dda45ba1de0d342f Mon Sep 17 00:00:00 2001
From: Leo <leocrossuk@gmail.com>
Date: Tue, 19 Mar 2024 13:47:55 +0000
Subject: [PATCH 4/4] Update build.sh

---
 build.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/build.sh b/build.sh
index 1ac6b365..f7105682 100755
--- a/build.sh
+++ b/build.sh
@@ -84,6 +84,6 @@ then
 fi
 
 # Build search index
-npx pagefind --site="public" --output-path="static/_pagefind"
+npx pagefind --site="public" --output-subdir="_pagefind"
 
 exit $hugoReturnCode