From 8a641d9789fea957b87107e0d5ffd27e4afe3274 Mon Sep 17 00:00:00 2001
From: Bart Brosens <bart.brosens@sigasi.com>
Date: Tue, 12 Mar 2024 21:45:16 +0100
Subject: [PATCH] Prepare for pagefind

---
 layouts/404.html                |  27 +++++--
 layouts/partials/main-menu.html |   9 +--
 layouts/partials/top-line.html  |   9 +--
 layouts/search/single.html      | 121 +++-----------------------------
 4 files changed, 38 insertions(+), 128 deletions(-)

diff --git a/layouts/404.html b/layouts/404.html
index 64ec790..66ccb4a 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -1,10 +1,27 @@
 {{ define "main" }}
 <div class="uk-container uk-text-center">
-    <div class="uk-card uk-card-default uk-card-body">
-        <img data-src="/img/http_error_404.svg" date-width data-height uk-img>
-    </div>
-    <div class="uk-margin-bottom">
-        Expected something different? Feel free to ask for <a href="https://www.sigasi.com/support/">support</a>.
+    <div uk-grid>
+        <div class="uk-width-3-4@m">
+            <div class="uk-margin-top">
+                Expected something different? Try to search here.<br>
+                Or feel free to ask for <a href="https://www.sigasi.com/support/">support</a> if you can't find it.
+            </div>
+            <div class="uk-padding">
+                <link href="/pagefind/pagefind-ui.css" rel="stylesheet">
+                <script src="/pagefind/pagefind-ui.js" type="text/javascript"></script>
+                <div id="search"></div>
+                <script>
+                    window.addEventListener('DOMContentLoaded', (event) => {
+                        new PagefindUI({ element: "#search", showSubResults: false });
+                    });
+                </script>
+            </div>
+        </div>
+        <div class="uk-width-1-4@m">
+            <div class="uk-card uk-card-default uk-card-body">
+                <img data-src="/img/http_error_404.svg" date-width data-height uk-img>
+            </div>
+        </div>
     </div>
 </div>
 {{ end }}
diff --git a/layouts/partials/main-menu.html b/layouts/partials/main-menu.html
index f12271f..4d4bd31 100644
--- a/layouts/partials/main-menu.html
+++ b/layouts/partials/main-menu.html
@@ -19,12 +19,9 @@
                 {{ end }}
             </ul>
             <div class="uk-navbar-item uk-nav-center">
-                <form class="uk-search uk-search-navbar" action="/search/" method="get">
-                    <div class="uk-inline">
-                        <span class="uk-form-icon uk-form-icon-flip" data-uk-icon="icon: search"></span>
-                        <input class="uk-input uk-text-large" type="text" placeholder="Search" name="search">
-                    </div>
-                </form>
+                <div class="uk-inline">
+                    <a href="/search/" uk-icon="icon: search"></a>
+                </div>
             </div>
         </div>
     </div>
diff --git a/layouts/partials/top-line.html b/layouts/partials/top-line.html
index e92fce4..8c0f83a 100644
--- a/layouts/partials/top-line.html
+++ b/layouts/partials/top-line.html
@@ -3,12 +3,9 @@
         <div class="uk-container">
             <nav data-uk-navbar class="sg-navbar-top">
                 <div class="uk-navbar-left">
-                    <form action="/search/" method="get">
-                        <div class="uk-inline">
-                            <span class="uk-form-icon uk-form-icon-flip" data-uk-icon="icon: search"></span>
-                            <input class="uk-input uk-form-small uk-form-width-medium" type="text" placeholder="Search" name="search">
-                        </div>
-                    </form>
+                    <div class="uk-inline">
+                        <a href="/search/" uk-icon="icon: search"></a>
+                    </div>
                 </div>
                 <div class="uk-navbar-right">
                     <ul class="uk-navbar-nav">
diff --git a/layouts/search/single.html b/layouts/search/single.html
index 36d4c3b..f746939 100644
--- a/layouts/search/single.html
+++ b/layouts/search/single.html
@@ -1,113 +1,12 @@
 {{ define "main" }}
-<div class="uk-container">
-    <div id="sg-search-result" class="uk-hidden uk-padding-small uk-padding-remove-top uk-margin-top"
-         data-uk-grid="masonry: true">
-    </div>
-    <div id="sg-searching" class="uk-hidden uk-text-center uk-padding-large">
-        <span class="uk-margin-small-right" data-uk-spinner="ratio: 5"></span>
-    </div>
-    <div id="sg-next-result" class="uk-hidden uk-margin uk-text-center">
-        <button id="sg-next-result-btn" class="uk-button uk-button-primary uk-border-rounded">More results</button>
-    </div>
-    <div id="sg-no-search" class="uk-hidden uk-padding-large">
-        <h3 id="sg-no-results" class="uk-hidden">No results</h3>
-        <h2>Use the form below to search for Sigasi content.</h2>
-        <form action="/search/" method="get">
-            <div class="uk-inline">
-                <span class="uk-form-icon uk-form-icon-flip" data-uk-icon="icon: search"></span>
-                <input class="uk-input uk-form-small uk-form-width-medium" type="text" placeholder="Search"
-                       name="search">
-            </div>
-        </form>
-    </div>
+<div class="uk-container uk-text-center uk-padding">
+    <link href="/pagefind/pagefind-ui.css" rel="stylesheet">
+    <script src="/pagefind/pagefind-ui.js" type="text/javascript"></script>
+    <div id="search"></div>
+    <script>
+        window.addEventListener('DOMContentLoaded', (event) => {
+            new PagefindUI({ element: "#search", showSubResults: false });
+        });
+    </script>
 </div>
-<script type="text/javascript">
-    window.sigasi = window.sigasi || {}
-    window.sigasi.offset = 0;
-
-    function createCard(title, href, summary) {
-        let card = document.createElement("div");
-        card.classList.add("uk-card", "uk-card-default", "uk-width-1-3@m", "uk-card-small", "uk-card-body", "uk-card-hover");
-        let link = document.createElement("a");
-        link.href = href;
-        card.appendChild(link)
-        let header = document.createElement("h3");
-        header.classList.add("uk-card-title");
-        header.innerText = title;
-        link.appendChild(header)
-        let paragraph = document.createElement("p");
-        paragraph.classList.add("uk-card-default");
-        link.appendChild(paragraph);
-        paragraph.innerText = summary;
-        return card;
-    }
-
-    function showSearchForm(showNoResults){
-        if (showNoResults){
-            document.getElementById("sg-no-results").classList.remove("uk-hidden");
-        }
-        document.getElementById("sg-no-search").classList.remove("uk-hidden");
-
-    }
-
-    function bingSearch(term) {
-        const customConfigId = "3140052572";
-        const subscriptionKey = "a61fd757bdb3442f90215b7b9b399cae";
-        const url = 'https://api.bing.microsoft.com/v7.0/custom/search?' +
-            'q=' + term +
-            '&customconfig=' + customConfigId +
-            '&count=15' +
-            '&offset=' + window.sigasi.offset;
-        const searchBtnContainer = document.getElementById('sg-next-result');
-        let spinner = document.getElementById("sg-searching");
-        window.sigasi.offset += 15;
-        spinner.classList.remove('uk-hidden');
-        searchBtnContainer.classList.add('uk-hidden')
-
-        const Http = new XMLHttpRequest();
-        Http.open("GET", url);
-        Http.setRequestHeader('Ocp-Apim-Subscription-Key', subscriptionKey);
-        Http.send();
-        Http.onreadystatechange = function(){
-            if (Http.readyState === 4) {
-                let searchResultContainer = document.getElementById("sg-search-result");
-                try {
-                    console.log(Http.responseText)
-                    let searchResult = JSON.parse(Http.responseText);
-                    if (searchResult.webPages) {
-                        let i;
-                        for (i = 0; i < searchResult.webPages.value.length; i++) {
-                            let result = searchResult.webPages.value[i]
-                            searchResultContainer.appendChild(createCard(result.name, result.url, result.snippet));
-                        }
-                        searchResultContainer.classList.remove("uk-hidden");
-                        if (searchResult.webPages.totalEstimatedMatches < window.sigasi.offset) {
-                            searchBtnContainer.classList.add('uk-hidden');
-                        } else {
-                            searchBtnContainer.classList.remove('uk-hidden');
-                        }
-                    } else {
-                        showSearchForm(true);
-                    }
-                    spinner.classList.add('uk-hidden');
-                } catch (e) {
-                    console.error(e)
-                }
-            }
-        }
-    }
-
-    const searchTerm = new RegExp('[\?&]search=([^&#]*)').exec(window.location.href);
-    if (searchTerm) {
-        bingSearch(searchTerm);
-        let searchBtn = document.getElementById("sg-next-result-btn");
-        searchBtn.classList.remove('uk-hidden');
-        searchBtn.onclick = function () {
-            bingSearch(searchTerm)
-        };
-    } else {
-        showSearchForm(false);
-    }
-
-</script>
-{{ end }}
\ No newline at end of file
+{{ end }}