From 77cd493f058f398f552c27e41d39f7fa6323d6d8 Mon Sep 17 00:00:00 2001
From: Salma Alam-Naylor <whitep4nth3r@gmail.com>
Date: Fri, 8 Mar 2024 12:55:35 +0000
Subject: [PATCH] Make search box input and button static and not generated by
 JS

---
 package.json                      |  2 +-
 src/_client_scripts/app_search.js | 30 +++++++-----------------------
 src/blog/index.11ty.js            |  6 +++++-
 3 files changed, 13 insertions(+), 25 deletions(-)

diff --git a/package.json b/package.json
index 8a9a7b2..b97e02e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mk2-p4nth3rblog",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "My website and blog.",
   "scripts": {
     "watch:sass": "sass --watch ./src/_sass:src/_css",
diff --git a/src/_client_scripts/app_search.js b/src/_client_scripts/app_search.js
index 18d4d46..f602feb 100644
--- a/src/_client_scripts/app_search.js
+++ b/src/_client_scripts/app_search.js
@@ -33,23 +33,12 @@ function formatDateForDisplay(dateString) {
   )} ${date.getFullYear()}`;
 }
 
-// Create a render function
-const renderSearchBox = (renderOptions, isFirstRender) => {
-  const { query, refine, clear, isSearchStalled, widgetParams } = renderOptions;
+const activateSearchElements = (renderOptions, isFirstRender) => {
+  const { refine, clear } = renderOptions;
 
   if (isFirstRender) {
-    const label = document.createElement("label");
-    label.setAttribute("for", "search");
-    label.classList = "ais__label";
-    label.innerText = "Search posts";
-
-    const input = document.createElement("input");
-    input.setAttribute("id", "search");
-    input.classList = "ais__input";
-
-    const button = document.createElement("button");
-    button.classList = "ais__reset";
-    button.textContent = "Clear";
+    const input = document.querySelector("[data-search-input]");
+    const button = document.querySelector("[data-search-clear]");
 
     input.addEventListener("input", (event) => {
       refine(event.target.value);
@@ -58,13 +47,7 @@ const renderSearchBox = (renderOptions, isFirstRender) => {
     button.addEventListener("click", () => {
       clear();
     });
-
-    widgetParams.container.appendChild(label);
-    widgetParams.container.appendChild(input);
-    widgetParams.container.appendChild(button);
   }
-
-  widgetParams.container.querySelector("input").value = query;
 };
 
 function initSearch({ appId, apiKey, indexName, latestPost }) {
@@ -76,8 +59,9 @@ function initSearch({ appId, apiKey, indexName, latestPost }) {
   });
 
   // create custom widget
-  const customSearchBox =
-    instantsearch.connectors.connectSearchBox(renderSearchBox);
+  const customSearchBox = instantsearch.connectors.connectSearchBox(
+    activateSearchElements,
+  );
 
   search.addWidgets([
     customSearchBox({
diff --git a/src/blog/index.11ty.js b/src/blog/index.11ty.js
index 0ad6651..cee8f9f 100644
--- a/src/blog/index.11ty.js
+++ b/src/blog/index.11ty.js
@@ -53,7 +53,11 @@ exports.render = function (data) {
     <aside class="blog__searchAndCats">
       <div class="blog__searchBoxAndFilterToggle">
         <div id="autocomplete" class="ais">
-          <div id="searchbox" class="ais__searchbox"></div>
+          <div id="searchbox" class="ais__searchbox">
+            <label for="search" class="ais__label">Search posts</label>
+            <input id="search" data-search-input class="ais__input" type="text" />
+            <button class="ais__reset" data-search-clear type="button">Clear</button>
+          </div>
         </div>
         <!-- add aria stuff here -->
         <button type="button" class="blog__filterToggle" data-toggle>${FilterIcon()} Filters</button>