implement client side site search

see https://gist.github.com/eddiewebb/735feb48f50f0ddd65ae5606a1cb41ae

2 files changed, 30 insertions, 0 deletions

diff --git a/layouts/_default/index.json b/layouts/_default/index.json
new file mode 100644
index 0000000..c93f805
--- /dev/null
+++ b/layouts/_default/index.json
@@ -0,0 +1,5 @@
+{{- $.Scratch.Add "index" slice -}}
+{{- range .Site.RegularPages -}}
+    {{- $.Scratch.Add "index" (dict "title" .Title "tags" .Params.tags "categories" .Params.categories "contents" .Plain "permalink" .Permalink) -}}
+{{- end -}}
+{{- $.Scratch.Get "index" | jsonify -}}
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
new file mode 100644
index 0000000..3222588
--- /dev/null
+++ b/layouts/_default/search.html
@@ -0,0 +1,25 @@
+{{ define "content" }}
+<script src="/jquery-3.4.0.js"></script>
+<script src="/fuse.js"></script>
+<script src="/jquery.mark.js"></script>
+<script src="/search.js"></script>
+
+  <div class="my-auto" >
+    <form action="{{ "search" | absURL }}">
+      <input id="search-query" name="s"/>
+    </form>
+    <div id="search-results">
+     <h3>Matching pages</h3>
+    </div>
+  </div>
+
+<!-- this template is sucked in by search.js and appended to the search-results div above. So editing here will adjust style -->
+<script id="search-result-template" type="text/x-js-template">
+    <div id="summary-${key}">
+      <h4><a href="${link}">${title}</a></h4>
+      <p>${snippet}</p>
+      ${ isset tags }<p>Tags: ${tags}</p>${ end }
+      ${ isset categories }<p>Categories: ${categories}</p>${ end }
+    </div>
+</script>
+{{ end }}