Search page

4 files changed, 131 insertions, 4 deletions

diff --git a/assets/js/search.js b/assets/js/search.js
new file mode 100644
index 0000000..2dd397a
--- /dev/null
+++ b/assets/js/search.js
@@ -0,0 +1,65 @@
+// Options for fuse.js
+let fuseOptions = {
+    includeMatches: true,
+    includeScore: true,
+    ignoreLocation: true,
+    minMatchCharLength: 3,
+    keys: [
+        { name: "title", weight: 0.8 },
+        { name: "contents", weight: 0.4 },
+        { name: "tags", weight: 0.5 },
+        { name: "categories", weight: 0.5 },
+    ],
+}
+
+function getUrlParameter(name) {
+    const urlParams = new URLSearchParams(location.search)
+    return urlParams.get(name)
+}
+
+let searchQuery = getUrlParameter("q")
+if (searchQuery) {
+    document.getElementById("search-query").value = searchQuery
+    executeSearch(searchQuery)
+} else {
+    document.getElementById("search-results").innerHTML = ""
+}
+
+function executeSearch(searchQuery) {
+    // Look for "index.json" in the same directory where this script is called.
+    fetch("index.json")
+        .then((response) => response.json())
+        .then(function (data) {
+            let fuse = new Fuse(data, fuseOptions)
+            let result = fuse.search(searchQuery)
+            // console.log("Results: ", result)
+            if (result.length > 0) {
+                populateResults(result)
+            } else {
+                document.getElementById("search-results").innerHTML =
+          "<p class=\"bg-washed-red pa3 dark-red f4 fw6 tc br2 b--light-red ba\">No matches found</p>"
+            }
+        })
+}
+
+function populateResults(result) {
+    result.forEach(function (value, key) {
+        // Lifted from https://stackoverflow.com/posts/3700369/revisions
+        var elem = document.createElement("textarea")
+        elem.innerHTML = value.item.contents
+        var decoded = elem.value
+
+        // Pull template from hugo template definition
+        let frag = document
+            .getElementById("search-result-template")
+            .content.cloneNode(true)
+        // Replace values
+        frag.querySelector(".search_summary").setAttribute("id", "summary-" + key)
+        frag.querySelector(".search_link")
+            .setAttribute("href", value.item.permalink)
+        frag.querySelector(".search_title").textContent = value.item.title
+        frag.querySelector(".search_snippet").textContent = decoded
+        frag.querySelector(".search_time").textContent = value.item.date
+        document.getElementById("search-results").appendChild(frag)
+    })
+}
diff --git a/layouts/404.html b/layouts/404.html
index c375edb..af1122f 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -5,14 +5,12 @@
   <div class="mw7 center ph1 mv4">
     <h1 class="f1 tc title baskerville">{{ .Title }}</h1>
 
-    <h2 class="lh-title f3 baskerville">
-      Perhaps you were looking for one of these?
-    </h2>
+    <p class="f4 baskerville">Perhaps you were looking for one of these?</p>
 
     {{ $query := where (where (where (where site.RegularPages.ByDate.Reverse "Title" "!=" "") "Kind" "in" (slice "page" "section")) "Params.private" "!=" true) "Permalink" "!=" "" }}
     {{ $count := len $query }}
     {{ if gt $count 0 }}
-      <h2 class="lh-title f2 baskerville">Pages recently edited</h2>
+      <h3 class="lh-title f3 baskerville">Pages recently edited</h3>
       <ul class="list ph5">
         {{ range first 10 $query }}
 
@@ -32,5 +30,11 @@
         {{ end }}
       </ul>
     {{ end }}
+    <a href="/search" class="link color-inherit dim">
+      <h3 class="lh-title f3 baskerville">
+        <i class="fas fa-magnifying-glass"></i>
+        Not there? Try using the search page.
+      </h3>
+    </a>
   </div>
 {{ end }}
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
new file mode 100644
index 0000000..bcbaad4
--- /dev/null
+++ b/layouts/_default/search.html
@@ -0,0 +1,45 @@
+{{ define "main" }}
+  <div class="mw7 center pa1">
+    <header>
+      <h2 class="baskerville f2 lh-title mv3 ph1">
+        {{ .Title }}
+      </h2>
+    </header>
+
+    <form action="{{ .Permalink }}">
+      <input
+        id="search-query"
+        name="q"
+        placeholder="search phrase"
+        class="near-black pa2 w-100"
+      />
+    </form>
+
+    <div id="search-results" class="mv2"></div>
+  </div>
+
+  <template id="search-result-template">
+    <article class="pv2 bt bb b--black-10 search_summary">
+      <a class="link dim near-black search_link" href="">
+        <time class="fr f6 lh-copy ph4 search_time"></time>
+        <h3 class="f3 baskerville mv1 lh-title search_title"></h3>
+        <div class="f5 lh-copy search_snippet"></div>
+      </a>
+    </article>
+  </template>
+  <script
+    src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/7.0.0/fuse.min.js"
+    integrity="sha512-GrJ4P9yra6dftp5O0eaKFKS4ch1FYn1xR/VCHQIMJO1LNqcKhjkAkAETHYoE81Ffh3BjCJMWA/AZSYP521jxFA=="
+    crossorigin="anonymous"
+    referrerpolicy="no-referrer"
+  ></script>
+
+  {{ with resources.Get "js/search.js" | resources.Minify | fingerprint }}
+    <script
+      src="{{ .RelPermalink }}"
+      integrity="{{ .Data.Integrity }}"
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+  {{ end }}
+{{ end }}
diff --git a/layouts/_default/search.json b/layouts/_default/search.json
new file mode 100644
index 0000000..16912cb
--- /dev/null
+++ b/layouts/_default/search.json
@@ -0,0 +1,13 @@
+
+{{ $dateFormat := .Site.Params.dateFormat | default "Jan 2, 2006" }}
+{{- $.Scratch.Add "index" slice -}}
+{{- range (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) -}}
+
+    {{- $.Scratch.Add "index" (dict "title" .Title
+                               "tags" .Params.tags
+                               "categories" .Params.categories
+                               "contents" (.Summary | plainify)
+                               "date"  (.Date.Format $dateFormat)
+                               "permalink" .Permalink) -}}
+{{- end -}}
+{{- $.Scratch.Get "index" | jsonify -}}