Refactor search, prepare for pre-built indexing

assets/search-data.js

@@ -1,32 +0,0 @@
-'use strict';
-
-(function () {
-  const indexCfg = {{ with i18n "bookSearchConfig" }}
-    {{ . }};
-  {{ else }}
-   {};
-  {{ end }}
-
-  indexCfg.doc = {
-    id: 'id',
-    field: ['title', 'content'],
-    store: ['title', 'href', 'section'],
-  };
-
-  const index = FlexSearch.create('balance', indexCfg);
-  window.bookSearchIndex = index;
-
-  {{- $pages := where .Site.Pages "Kind" "in" (slice "page" "section") -}}
-  {{- $pages = where $pages "Params.booksearchexclude" "!=" true -}}
-  {{- $pages = where $pages "Content" "not in" (slice nil "") -}}
-
-  {{ range $index, $page := $pages }}
-  index.add({
-    'id': {{ $index }},
-    'href': '{{ $page.RelPermalink }}',
-    'title': {{ (partial "docs/title" $page) | jsonify }},
-    'section': {{ (partial "docs/title" $page.Parent) | jsonify }},
-    'content': {{ $page.Plain | jsonify }}
-  });
-  {{- end -}}
-})();

assets/search-data.json

@@ -0,0 +1,15 @@
+[
+{{- $pages := where .Site.Pages "Kind" "in" (slice "page" "section") -}}
+{{- $pages = where $pages "Params.booksearchexclude" "!=" true -}}
+{{- $pages = where $pages "Content" "not in" (slice nil "") -}}
+
+{{ range $index, $page := $pages }}
+{{ if gt $index 0}},{{end}} {
+    "id": {{ $index }},
+    "href": "{{ $page.RelPermalink }}",
+    "title": {{ (partial "docs/title" $page) | jsonify }},
+    "section": {{ (partial "docs/title" $page.Parent) | jsonify }},
+    "content": {{ $page.Plain | jsonify }}
+}
+{{- end -}}
+]

assets/search.js

@@ -1,9 +1,19 @@
 'use strict';
 
-{{ $searchDataFile := printf "%s.search-data.js" .Language.Lang }}
+{{ $searchDataFile := printf "%s.search-data.json" .Language.Lang }}
-{{ $searchData := resources.Get "search-data.js" | resources.ExecuteAsTemplate $searchDataFile . | resources.Minify | resources.Fingerprint }}
+{{ $searchData := resources.Get "search-data.json" | resources.ExecuteAsTemplate $searchDataFile . | resources.Minify | resources.Fingerprint }}
+{{ $searchConfig := i18n "bookSearchConfig" | default "{}" }}
 
 (function () {
+  const searchDataURL = '{{ $searchData.RelPermalink }}';
+  const indexConfig = Object.assign({{ $searchConfig }}, {
+    doc: {
+      id: 'id',
+      field: ['title', 'content'],
+      store: ['title', 'href', 'section']
+    }
+  });
+
   const input = document.querySelector('#book-search-input');
   const results = document.querySelector('#book-search-results');
 
@@ -46,11 +56,14 @@
     input.removeEventListener('focus', init); // init once
     input.required = true;
 
-    loadScript('{{ "flexsearch.min.js" | relURL }}');
+    fetch(searchDataURL)
-    loadScript('{{ $searchData.RelPermalink }}', function () {
+      .then(pages => pages.json())
-      input.required = false;
+      .then(pages => {
-      search();
+        window.bookSearchIndex = FlexSearch.create('balance', indexConfig);
-    });
+        window.bookSearchIndex.add(pages);
+      })
+      .then(() => input.required = false)
+      .then(search);
   }
 
   function search() {
@@ -74,19 +87,6 @@
       results.appendChild(li);
     });
   }
-
-  /**
-   * @param {String} src 
-   * @param {Function} callback 
-   */
-  function loadScript(src, callback) {
-    const script = document.createElement('script');
-    script.defer = true;
-    script.async = false;
-    script.src = src;
-    script.onload = callback;
-
-    document.head.appendChild(script);
   }
 
   /**

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

@@ -1 +1 @@
-{"Target":"book.min.88999ddd76b75d2f982298d6a6ebd4b60f2068f6f112c9439a998f77b12ded54.css","MediaType":"text/css","Data":{"Integrity":"sha256-iJmd3Xa3XS+YIpjWpuvUtg8gaPbxEslDmpmPd7Et7VQ="}}
+{"Target":"book.min.e246e6a45b940b6ff71d8216783f10a80d910290a7c364c8bfd5d305d8545d62.css","MediaType":"text/css","Data":{"Integrity":"sha256-4kbmpFuUC2/3HYIWeD8QqA2RApCnw2TIv9XTBdhUXWI="}}

layouts/partials/docs/html-head.html

@@ -12,22 +12,23 @@
 <link rel="icon" href="{{ "favicon.png" | relURL }}" type="image/x-icon">
 
 {{- range .Translations }}
-<link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}" title="{{ partial "docs/title" . }}">
+  <link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}" title="{{ partial "docs/title" . }}">
-{{ end -}}
+{{- end -}}
 
 <!-- Theme stylesheet, you can customize scss by creating `assets/custom.scss` in your website -->
 {{- $styles := resources.Get "book.scss" | resources.ExecuteAsTemplate "book.scss" . | resources.ToCSS | resources.Minify | resources.Fingerprint }}
 <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}">
 
-{{- if default true .Site.Params.BookSearch }}
+{{- if default true .Site.Params.BookSearch -}}
-{{- $searchJSFile := printf "%s.search.js" .Language.Lang }}
+  {{- $searchJSFile := printf "%s.search.js" .Language.Lang }}
-{{- $searchJS := resources.Get "search.js" | resources.ExecuteAsTemplate $searchJSFile . | resources.Minify | resources.Fingerprint }}
+  {{- $searchJS := resources.Get "search.js" | resources.ExecuteAsTemplate $searchJSFile . | resources.Minify | resources.Fingerprint }}
-<script defer src="{{ $searchJS.RelPermalink }}" integrity="{{ $searchJS.Data.Integrity }}"></script>
+  <script defer src="{{ "flexsearch.min.js" | relURL }}"></script>
+  <script defer src="{{ $searchJS.RelPermalink }}" integrity="{{ $searchJS.Data.Integrity }}"></script>
 {{ end -}}
 
-{{- if .Site.Params.BookServiceWorker }}
+{{- if .Site.Params.BookServiceWorker -}}
-{{- $swJS := resources.Get "sw-register.js" | resources.ExecuteAsTemplate "sw.js" . | resources.Minify | resources.Fingerprint }}
+  {{- $swJS := resources.Get "sw-register.js" | resources.ExecuteAsTemplate "sw.js" . | resources.Minify | resources.Fingerprint }}
-<script defer src="{{ $swJS.RelPermalink }}" integrity="{{ $swJS.Data.Integrity }}"></script>
+  <script defer src="{{ $swJS.RelPermalink }}" integrity="{{ $swJS.Data.Integrity }}"></script>
 {{ end -}}
 
 {{- template "_internal/google_analytics_async.html" . -}}