initial search filter feature

layouts/_default/baseof.html

@@ -27,5 +27,6 @@
     <script src="/js/sigil.js"></script>
     <script src="/js/colorCalculator.js"></script>
     <script src="/js/wompum.js"></script>
+    {{ block "scripts" . }}{{ end }}
   </body>
 </html>

layouts/index.html

@@ -1,4 +1,5 @@
 {{ define "main" }}
+{{ partial "search-interface.html" . }}
 <main class="flex gap-4 lg:gap-16 justify-around mt-8 max-w-screen-xl mx-auto px-4 lg:px-0">
   <ul class="flex flex-col gap-4 w-full">
     {{ partial "article-list.html" (dict "Pages" (where .Site.RegularPages "Section" "articles")) }}

layouts/index.json

@@ -0,0 +1,14 @@
+{{- $searchIndex := slice -}}
+{{- range where .Site.RegularPages "Type" "articles" -}}
+    {{- $searchIndex = $searchIndex | append (dict 
+        "title" .Title
+        "url" .Permalink
+        "summary" .Summary
+        "tags" .Params.tags
+        "narrator" .Params.narrator
+        "facilitator" .Params.facilitator
+        "date" (.Date.Format "2006-01-02")
+        "content" .Plain
+    ) -}}
+{{- end -}}
+{{- $searchIndex | jsonify -}}

layouts/partials/search-interface.html

@@ -0,0 +1,54 @@
+<div class="search-interface">
+  <form class="search-form" data-search-form>
+    <div class="search-input-group">
+      <input type="search" 
+             name="q" 
+             placeholder="Search interviews..." 
+             class="search-input"
+             data-search-input>
+      <button type="button" 
+              class="filter-toggle"
+              data-filter-toggle>
+        Filters
+      </button>
+    </div>
+    
+    <div class="filter-panel" data-filter-panel>
+      <div class="filter-groups">
+        <div class="filter-group">
+          <h3>Tags</h3>
+          <div data-filter-tags></div>
+        </div>
+        <div class="filter-group">
+          <h3>Narrators</h3>
+          <div data-filter-narrators></div>
+        </div>
+        <div class="filter-group">
+          <h3>Facilitators</h3>
+          <div data-filter-facilitators></div>
+        </div>
+        <div class="filter-group col-span-full">
+          <h3>Date Range</h3>
+          <div class="flex gap-2">
+            <input type="date" name="date-from" data-date-from>
+            <input type="date" name="date-to" data-date-to>
+          </div>
+        </div>
+        <div class="flex items-center gap-2">
+          <label>
+            <input type="checkbox" name="logic-mode" data-logic-mode>
+            Use OR logic for filters
+          </label>
+        </div>
+      </div>
+    </div>
+  </form>
+  
+  <div class="results-count" data-results-count></div>
+  <div class="results-list" data-results></div>
+</div>
+
+{{ define "scripts" }}
+<script src="https://cdn.jsdelivr.net/npm/fuse.js@7.0.0"></script>
+<script src="/js/search.js"></script>
+{{ end }}