fix: fetch search data as JSON rather than JS (#43)

Fixes #42
thegeeklab · Jan 5, 2021 · d34fb09 · d34fb09
1 parent 34234c2
commit d34fb09
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 42 deletions.
diff --git a/assets/js/search-data.js b/assets/js/search-data.js
diff --git a/assets/js/search.js b/assets/js/search.js
@@ -1,29 +1,38 @@
 'use strict';
 
-{{ $searchDataFile := printf "js/%s.search-data.js" .Language.Lang }}
-{{ $searchData := resources.Get "js/search-data.js" | resources.ExecuteAsTemplate $searchDataFile . | resources.Minify | resources.Fingerprint }}
+{{ $searchDataFile := printf "%s.search-data.json" .Language.Lang }}
+{{ $searchData := resources.Get "search-data.json" | resources.ExecuteAsTemplate $searchDataFile . | resources.Minify }}
 
 (function() {
   const input = document.querySelector('#gdoc-search-input');
   const results = document.querySelector('#gdoc-search-results');
-  let showParent = false
-
-  {{ if .Site.Params.GeekdocSearchShowParent }}
-    showParent = true
-  {{ end }}
+  let showParent = {{ if .Site.Params.GeekdocSearchShowParent }}true{{ else }}false{{ end }}
 
   input.addEventListener('focus', init);
   input.addEventListener('keyup', search);
 
   function init() {
     input.removeEventListener('focus', init); // init once
-    input.required = true;
 
     loadScript('{{ index .Site.Data.assets "js/groupBy.min.js" | relURL }}');
-    loadScript('{{ index .Site.Data.assets "js/flexsearch.min.js" | relURL }}');
-    loadScript('{{ $searchData.RelPermalink }}', function() {
-      input.required = false;
-      search();
+    loadScript('{{ index .Site.Data.assets "js/flexsearch.min.js" | relURL }}', function() {
+      const indexCfg = {{ with .Scratch.Get "geekdocSearchConfig" }}{{ . | jsonify}}{{ else }}{}{{ end }};
+      const dataUrl = "{{ $searchData.RelPermalink }}"
+
+      indexCfg.doc = {
+        id: 'id',
+        field: ['title', 'content'],
+        store: ['title', 'href', 'parent'],
+      };
+
+      const index = FlexSearch.create(indexCfg);
+      window.geekdocSearchIndex = index;
+
+      getJson(dataUrl, function(data) {
+        data.forEach(obj => {
+          window.geekdocSearchIndex.add(obj);
+        });
+      });
     });
   }
 
@@ -43,13 +52,13 @@
 
     results.classList.add("has-hits");
 
-    if (showParent) {
+    if (showParent === true) {
       searchHits = groupBy(searchHits, hit => hit.parent);
     }
 
     const items = [];
 
-    if (showParent) {
+    if (showParent === true) {
       for (const section in searchHits) {
         const item = document.createElement('li'),
               title = item.appendChild(document.createElement('span')),
@@ -107,6 +116,23 @@
     return items;
   }
 
+  function fetchErrors(response) {
+    if (!response.ok) {
+        throw Error(response.statusText);
+    }
+    return response;
+  }
+
+  function getJson(src, callback) {
+    fetch(src)
+    .then(fetchErrors)
+    .then(response => response.json())
+    .then(json => callback(json))
+    .catch(function(error) {
+      console.log(error);
+    });
+  }
+
   function loadScript(src, callback) {
     let script = document.createElement('script');
     script.defer = true;

diff --git a/assets/search-data.json b/assets/search-data.json
@@ -0,0 +1,12 @@
+[
+  {{ range $index, $page := .Site.Pages }}
+    {{ if ne $index 0 }},{{ end }}
+    {
+      "id": {{ $index }},
+      "href": "{{ $page.RelPermalink }}",
+      "title": {{ (partial "title" $page) | jsonify }},
+      "parent": {{ with $page.Parent }}{{ (partial "title" .) | jsonify }}{{ else }}""{{ end }},
+      "content": {{ $page.Plain | jsonify }}
+    }
+  {{ end }}
+]