1 files changed, 55 insertions, 39 deletions
diff --git a/assets/js/search.js b/assets/js/search.js
index 2dd397a..2dc147e 100644
--- a/assets/js/search.js
+++ b/assets/js/search.js
@@ -12,54 +12,70 @@ let fuseOptions = {
     ],
 }
 
-function getUrlParameter(name) {
-    const urlParams = new URLSearchParams(location.search)
+function getUrlParameter(url, name) {
+    const urlParams = new URLSearchParams(url)
     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 search(query, data){
+    let fuse = new Fuse(data, fuseOptions)
+    return fuse.search(query)
 }
 
+function unescapeText(input) {
+    // Lifted from https://stackoverflow.com/posts/3700369/revisions
+    var elem = document.createElement("textarea")
+    elem.innerHTML = input
+    return elem.value
+}
+
+function resultEntry(data, key) {
+    // Pull template from hugo template definition
+    let frag = document
+        .getElementById("search-result-template")
+        .content.cloneNode(true)
+
+    // Replace values
+    let { title, permalink, contents, date } = data
+    frag.querySelector(".search_summary").setAttribute("id", "summary-" + key)
+    frag.querySelector(".search_link").setAttribute("href", permalink)
+    frag.querySelector(".search_title").textContent = title
+    frag.querySelector(".search_snippet").textContent = unescapeText(contents)
+    frag.querySelector(".search_time").textContent = date
+    return frag
+}
+
+
 function executeSearch(searchQuery) {
     // Look for "index.json" in the same directory where this script is called.
-    fetch("index.json")
+    return 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>"
-            }
-        })
+        .then((data) =>  search(searchQuery, data))
 }
 
-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
+function renderResults(results) {
+    let resultBox = document.getElementById("search-results")
+    resultBox.innerHTML = ""
+
+    // console.log("Results: ", results)
+    if (results.length > 0) {
+        results.forEach((value, key) => {
+            resultBox.appendChild(resultEntry(value.item, key))
+        })
+    } else {
+        resultBox.innerHTML =
+      "<p class=\"bg-washed-red pa3 dark-red f4 fw6 tc br2 b--light-red ba\">No matches found</p>"
+    }
+}
 
-        // 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)
-    })
+addEventListener("load", function (){
+    let searchQuery = getUrlParameter(location.search, "q")
+    if (searchQuery) {
+        document.getElementById("search-query").value = searchQuery
+        executeSearch(searchQuery).then(renderResults)
+    } else {
+        document.getElementById("search-results").innerHTML =
+    "<p class=\"pa3 f4 fw6 tc\">Please enter a word or phrase above</p>"
+    }
 }
+)