Implement search, loading on demand

README.md

@@ -153,7 +153,8 @@ BookEditPath = 'edit/master/exampleSite/content'
 # - In blog posts
 BookDateFormat = 'Jan 2, 2006'
 
-# (Optional, default true) Enables or disables search function with lunr.js
+# (Optional, default true) Enables search function with lunr.js, 
+# Index is built on fly, therefore it might slowdown your website.
 BookSearch = true
 ```
 

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%;
   
-  &:focus {
-    border-bottom-color: $body-font-color;
+    background: url("svg/search.svg") left center no-repeat;
+    background-size: $padding-16;
+  
+    &: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);
+  function newLi(href, title) {
     
-      document.head.append(script);
-    });
+
+    return li;
   }
-});
+
+  function loadScript(src, callback) {
+    const script = document.createElement("script");
+    script.defer = true;
+    script.src = src;
+    script.onload = callback;
+
+    document.head.append(script);
+  }
+})();

exampleSite/config.toml

@@ -14,9 +14,6 @@ enableGitInfo = true
 # pygmentsStyle = 'monokailight'
 pygmentsCodeFences = true
 
-[outputs]
-  home = ["HTML", "JSON"]
-
 [params]
   # (Optional, default 6) Set how many table of contents levels to be showed on page.
   # Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/)
@@ -48,5 +45,6 @@ pygmentsCodeFences = true
   # - In blog posts
   BookDateFormat = 'Jan 2, 2006'
 
-  # (Optional, default true) Enables or disables search function with lunr.js
+  # (Optional, default true) Enables search function with lunr.js, 
+  # Index is built on fly, therefore it might slowdown your website.
   BookSearch = true

exampleSite/config.yaml

@@ -44,3 +44,7 @@ params:
   # - In git information
   # - In blog posts
   BookDateFormat: 'Jan 2, 2006'
+
+  # (Optional, default true) Enables search function with lunr.js, 
+  # Index is built on fly, therefore it might slowdown your website.
+  BookSearch: true

exampleSite/resources/_gen/assets/js/search-data.js_da973b2166501f614a67d55884e62fdb.json

@@ -0,0 +1 @@
+{"Target":"search-data.min.cab714d6cdc1fd81a6e2d8e454a03c6b8c74b4680118a20d06f2f4cc11365cdf.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-yrcU1s3B/YGm4tjkVKA8a4x0tGgBGKINBvL0zBE2XN8="}}

exampleSite/resources/_gen/assets/js/search.js_db9e329433ffca0798ed12c88043b3b3.content

@@ -1,6 +1,5 @@
-addEventListener("load",function(){let input=document.querySelector("#book-search");let results=document.querySelector("#book-search-results");Promise.all([loadScript("/example/lunr.min.js"),loadScript("/example/index.json")]).then(enableLunr);function enableLunr(){results.idx=lunr(function(){this.ref('href')
-this.field('title')
-this.field('content')
-window.lunrData.forEach(function(page){this.add(page)},this)});input.addEventListener("keyup",search);}
-function search(){if(input.value){var hits=results.idx.search(`${input.value}*`);results.innerHTML=JSON.stringify(hits);}else{results.innerHTML='';}}
-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(){const input=document.querySelector("#book-search-input");const results=document.querySelector("#book-search-results");const dummy=document.querySelector("#book-search-dummy");input.addEventListener("focus",init);function init(){loadScript("/example/search-data.min.cab714d6cdc1fd81a6e2d8e454a03c6b8c74b4680118a20d06f2f4cc11365cdf.js",function(){input.disabled=false;input.addEventListener("keyup",search);search();});input.removeEventListener("focus",init);}
+function search(){while(results.firstChild){results.removeChild(results.firstChild);}
+if(input.value){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 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);}})();

exampleSite/resources/_gen/assets/js/search.js_db9e329433ffca0798ed12c88043b3b3.json

@@ -1 +1 @@
-{"Target":"search.min.f37565c4baa28364f7b8e1e53c35bdb0ab92f2215165bd3f083f3f4f1ae78c71.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-83VlxLqig2T3uOHlPDW9sKuS8iFRZb0/CD8/TxrnjHE="}}
+{"Target":"search.min.5b3c1973db27e97251bca8f705d321f8de35004cd65d2aaf71ca544590ce6b9d.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-WzwZc9sn6XJRvKj3BdMh+N41AEzWXSqvccpURZDOa50="}}

exampleSite/resources/_gen/assets/scss/book.scss_48b060fe05b0a273d182ef83c0605941.json

@@ -1 +1 @@
-{"Target":"book.min.60422b170f7beee5a981f3288523ee2bf275a0b48eba3a8983a3736189b9027f.css","MediaType":"text/css","Data":{"Integrity":"sha256-YEIrFw977uWpgfMohSPuK/J1oLSOujqJg6NzYYm5An8="}}
+{"Target":"book.min.d43e03103ef0f496eb5dfc0fb35ee914237fdcac29cb9b8e2764dac6fdc45ba1.css","MediaType":"text/css","Data":{"Integrity":"sha256-1D4DED7w9JbrXfwPs17pFCN/3Kwpy5uOJ2Taxv3EW6E="}}

layouts/home.json

@@ -1,10 +0,0 @@
-window.lunrData = [
-{{ range $index, $page := .Site.Pages }}
-    {{- if and $index (gt $index 0) -}},{{- end }}
-    {
-        "href": "{{ $page.RelPermalink }}",
-        "title": "{{ htmlEscape $page.Title }}",
-        "content": {{ $page.Plain | jsonify }}
-    }
-{{- end -}}
-]

layouts/partials/docs/html-head.html

@@ -6,8 +6,11 @@
 {{- $styles := resources.Get "book.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
 <link rel="stylesheet" href="{{ $styles.RelPermalink }}">
 
-{{- $search := resources.Get "search.js" | resources.ExecuteAsTemplate "search.js" . | resources.Minify | resources.Fingerprint }}
-<script src="{{ $search.RelPermalink }}"></script>
+{{ if default true .Site.Params.BookSearch }}
+{{- $searchJS := resources.Get "search.js" | resources.ExecuteAsTemplate "search.js" . | resources.Minify | resources.Fingerprint }}
+<script defer src="{{ "lunr.min.js" | relURL }}"></script>
+<script defer src="{{ $searchJS.RelPermalink }}"></script>
+{{ end }}
 
 <!-- Favicon -->
 <link rel="icon" href="{{ "favicon.png" | relURL }}" type="image/x-icon">

layouts/partials/docs/search.html

@@ -1,2 +1,9 @@
-<input type="text" placeholder="Search" class="book-search" id="book-search" />
-<ul id="book-search-results"></ul>
+{{ if default true .Site.Params.BookSearch }}
+<div class="book-search">
+  <ul id="book-search-dummy" class="hidden">
+    <li><a href></a></li>
+  </ul>
+  <input type="text" placeholder="Search" id="book-search-input" />
+  <ul id="book-search-results"></ul>
+</div>
+{{ end }}