Implement search, loading on demand

assets/_utils.scss

@@ -42,6 +42,10 @@
   text-align: center;
 }
 
+.hidden {
+  display: none;
+}
+
 @mixin fixed {
   position: fixed;
   top: 0;

assets/book.scss

@@ -138,22 +138,28 @@ ul.pagination {
 }
 
 .book-search {
-  border: 0;
-  border-bottom: $padding-1 solid $gray-200;
-  outline: none;
-  // padding: $padding-4 $padding-8 $padding-4 $padding-16+$padding-4;
-  padding: $padding-4 $padding-8 $padding-4 0;
-  margin-bottom: $padding-4;
-  width: 100%;
+  #book-search-input {
+    border: 0;
+    border-bottom: $padding-1 solid $gray-200;
+    outline: none;
+    padding: $padding-4 $padding-8 $padding-4 $padding-16 + $padding-4;
 
-  // background: url("svg/search.svg") left center no-repeat;
-  // background-size: $padding-16;
+    width: 85%;
+  
+    background: url("svg/search.svg") left center no-repeat;
+    background-size: $padding-16;
+  
+    &:focus {
+      border-bottom-color: $body-font-color;
+    }
+  }
 
-  &:focus {
-    border-bottom-color: $body-font-color;
+  #book-search-results li:last-child {
+    margin-bottom: $padding-16 * 2;
   }
 }
 
+
 .book-toc {
   flex: 0 0 $toc-width;
   font-size: $font-size-12;
@@ -196,7 +202,7 @@ ul.pagination {
 
 .book-posts {
   min-width: $body-min-width;
-  max-width: $sm-breakpoint;
+  max-width: $body-min-width * 2;
   flex-grow: 1;
   padding: $padding-16;
 

assets/search-data.js

@@ -0,0 +1,24 @@
+(function() {
+  const pages = [
+    {{ range $index, $page := .Site.Pages }}
+      {{- if and $index (gt $index 0) -}},{{- end }}
+      {
+        "idx": {{ $index }},
+        "href": "{{ $page.RelPermalink }}",
+        "title": "{{ partial "docs/title" $page }}",
+        "content": {{ $page.Plain | jsonify }}
+      }
+    {{- end -}}
+  ];
+
+  window.bookSearch = {
+    pages: pages,
+    idx: lunr(function() { 
+      this.ref('idx');
+      this.field('title');
+      this.field('content');
+
+      pages.forEach(this.add, this);
+    }),
+  }
+})();

assets/search.js

@@ -1,41 +1,53 @@
-addEventListener("load", function() {
-  let input = document.querySelector("#book-search");
-  let results = document.querySelector("#book-search-results");
+{{- $searchData := resources.Get "search-data.js" | resources.ExecuteAsTemplate "search-data.js" . | resources.Minify | resources.Fingerprint }}
 
-  Promise.all([
-    loadScript("{{ "lunr.min.js" | relURL }}"),
-    loadScript("{{ "index.json" | relURL }}")
-  ]).then(enableLunr);
+(function() {
+  const input = document.querySelector("#book-search-input");
+  const results = document.querySelector("#book-search-results");
+  const dummy = document.querySelector("#book-search-dummy");
 
-  function enableLunr() {
-    results.idx = lunr(function() { 
-      this.ref('href')
-      this.field('title')
-      this.field('content')
+  input.addEventListener("focus", init);
 
-      window.lunrData.forEach(function (page) {
-        this.add(page)
-      }, this)
+  function init() {
+    loadScript("{{ $searchData.RelPermalink }}", function() {
+      input.disabled = false;
+      input.addEventListener("keyup", search);
+      search();
     });
-    input.addEventListener("keyup", search);
+    input.removeEventListener("focus", init);
   }
 
   function search() {
+    while (results.firstChild) {
+      results.removeChild(results.firstChild);
+    }
+
     if (input.value) {
-      var hits = results.idx.search(`${input.value}*`);
-      results.innerHTML = JSON.stringify(hits);
-    } else {
-      results.innerHTML = '';
+      const hits = window.bookSearch.idx.search(`${input.value}*`);
+      hits.slice(0, 10).forEach(function(hit) {
+        const page = window.bookSearch.pages[hit.ref];
+        const li = dummy.querySelector("li").cloneNode(true),
+              a = li.querySelector("a");
+
+        a.href = page.href;
+        a.textContent = page.title;
+
+        results.appendChild(li);
+      });
     }
   }
 
-  function loadScript(src) {
-    return new Promise(function(resolve, reject) {
-      let script = document.createElement('script');
-      script.src = src;
-      script.onload = () => resolve(script);
-  
-      document.head.append(script);
-    });
+  function newLi(href, title) {
+    
+
+    return li;
   }
-});
+
+  function loadScript(src, callback) {
+    const script = document.createElement("script");
+    script.defer = true;
+    script.src = src;
+    script.onload = callback;
+
+    document.head.append(script);
+  }
+})();