Update the index page to save the search in the query parameters.

src/main/blog/handlers.cljs

@@ -7,10 +7,12 @@
   [client]
   (fn [req res]
     (let [channel (chan)
-          id (.-id (.-params req))]
+          search (.-search (.-query req))]
       (go
         (try
-          (let [articles (<! (db/get-articles-briefly client channel))]
+          (let [articles (if (nil? search)
+                           (<! (db/get-articles-briefly client channel))
+                           (<! (db/search-articles-briefly client search channel)))]
             (res/status 200)
             (.render res "index"
                      (-> {:articles articles

views/index.hbs

@@ -5,3 +5,5 @@
 
   {{> articles_briefly }}
 </main>
+
+{{> search_articles_update_param_script }}

views/partials/search_articles.hbs

@@ -1,4 +1,4 @@
-<form class="max-w-md mx-auto" method="POST">
+<div class="max-w-md mx-auto">
     <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
     <div class="relative">
         <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
@@ -14,6 +14,6 @@
                hx-target="#articles"
                hx-swap="outerHTML"
                class="block w-full p-4 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-               placeholder="Search articles by title or content" required />
+               placeholder="Search articles by title or content" />
+    </div>
 </div>
-</form>

views/partials/search_articles_update_param_script.hbs

@@ -0,0 +1,9 @@
+<script>
+  function updateURLSearchParameter() {
+    let search = htmx.find('#search')
+    let qp = new URLSearchParams();
+    qp.set('search', search.value);
+    history.replaceState(null, null, "?"+qp.toString());
+  }
+  document.querySelector('#search').addEventListener('input', updateURLSearchParameter);
+</script>