From 3616e9b6fa092faa415eaa9b47c4bd5e9d2f958c Mon Sep 17 00:00:00 2001
From: Marie Katrine Ekeberg <mke@themkat.net>
Date: Thu, 15 Aug 2024 17:32:27 +0200
Subject: [PATCH] Add new custom local only JavaScript search to avoid google
 integration

---
 _includes/searchbox.html | 40 ++++++++++++++++++++++++++++++++++++++++
 _layouts/default.html    | 10 +---------
 2 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 _includes/searchbox.html

diff --git a/_includes/searchbox.html b/_includes/searchbox.html
new file mode 100644
index 00000000..764a561a
--- /dev/null
+++ b/_includes/searchbox.html
@@ -0,0 +1,40 @@
+<div class="search-box">
+    <h5>Search</h5>
+    <input list="search-completions" id="search-term">
+    
+    <!-- TODO: make even better by not hardcoding possible suggestions. Maybe tags or similar could work? Some type of combinations that make sense as well?
+         Now it is just a proof of concept to test the idea in production :P
+    -->
+    <datalist id="search-completions">
+        <option value="Linux" />
+        <option value="Emacs" />
+        <option value="Emacs packages" />
+        <option value="Kotlin books" />
+        <option value="Rust" />
+    </datalist>
+    
+    <button onclick="navigateToSearchPage()">&#x1f50d;</button>
+</div>
+
+<script>
+ function navigateToSearchPage() {
+     const term = document.getElementById('search-term').value;
+     
+     window.open(`{{  site.url }}/search.html?term=${term}`, '_self');
+ }
+ 
+ // add enter submission on input field
+ document.getElementById('search-term').addEventListener('keypress', (event) => {
+     if ('Enter' == event.key) {
+         navigateToSearchPage();
+     }
+ });
+
+ // TODO: can probably unify the code between here and search a bit
+ const siteUrl = new URL(document.URL);
+ const searchInput = siteUrl.searchParams.get('term');
+ if (null !== searchInput) {
+     const searchTerm = decodeURIComponent(searchInput);
+     document.getElementById('search-term').value = searchTerm;
+ }
+</script>
diff --git a/_layouts/default.html b/_layouts/default.html
index 710b6be8..78337601 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -128,15 +128,7 @@
         </div>
         
 		<div class="content">
-            {% if paginator.page  %}
-            <div class="searchfield" >
-                <h5>Search &#x1f50d;</h5>
-                <script async src="https://cse.google.com/cse.js?cx=83d805bca1b524717">
-                </script>
-                <div class="gcse-searchbox-only"></div>
-            </div>
-            {% endif %}
-
+            {% include searchbox.html %}
 			{{ content}}
 		</div>