#236, #171 Add section to search results

assets/_main.scss

@@ -194,6 +194,12 @@ ul.pagination {
 
     @include spin(1s);
   }
+
+  #book-search-results {
+    small {
+      opacity: .5;
+    }
+  }
 }
 
 .book-toc {

assets/search-data.js

@@ -1,6 +1,6 @@
 'use strict';
 
-(function() {
+(function () {
   const indexCfg = {{ with i18n "bookSearchConfig" }}
     {{ . }};
   {{ else }}
@@ -10,18 +10,21 @@
   indexCfg.doc = {
     id: 'id',
     field: ['title', 'content'],
-    store: ['title', 'href'],
+    store: ['title', 'href', 'section'],
   };
 
   const index = FlexSearch.create('balance', indexCfg);
   window.bookSearchIndex = index;
 
   {{ range $index, $page := where .Site.Pages "Kind" "in" (slice "page" "section") }}
+  {{ if $page.Content }}
   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 -}}
+  {{- end -}}
 })();

assets/search.js

@@ -3,7 +3,7 @@
 {{ $searchDataFile := printf "%s.search-data.js" .Language.Lang }}
 {{ $searchData := resources.Get "search-data.js" | resources.ExecuteAsTemplate $searchDataFile . | resources.Minify | resources.Fingerprint }}
 
-(function() {
+(function () {
   const input = document.querySelector('#book-search-input');
   const results = document.querySelector('#book-search-results');
 
@@ -47,7 +47,7 @@
     input.required = true;
 
     loadScript('{{ "flexsearch.min.js" | relURL }}');
-    loadScript('{{ $searchData.RelPermalink }}', function() {
+    loadScript('{{ $searchData.RelPermalink }}', function () {
       input.required = false;
       search();
     });
@@ -63,12 +63,13 @@
     }
 
     const searchHits = window.bookSearchIndex.search(input.value, 10);
-    searchHits.forEach(function(page) {
+    searchHits.forEach(function (page) {
-      const li = document.createElement('li'),
+      const li = element('<li><a href></a><small></small></li>');
-            a = li.appendChild(document.createElement('a'));
+      const a = li.querySelector('a'), small = li.querySelector('small');
 
       a.href = page.href;
       a.textContent = page.title;
+      small.textContent = page.section;
 
       results.appendChild(li);
     });
@@ -87,4 +88,14 @@
 
     document.head.appendChild(script);
   }
+
+  /**
+   * @param {String} content
+   * @returns {Node}
+   */
+  function element(content) {
+    const div = document.createElement('div');
+    div.innerHTML = content;
+    return div.firstChild;
+  }
 })();

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

@@ -1 +1 @@
-{"Target":"book.min.b3215d9d1d18d9051e7fbe8f256ff80e30f41d29073b86348e230d297b771002.css","MediaType":"text/css","Data":{"Integrity":"sha256-syFdnR0Y2QUef76PJW/4DjD0HSkHO4Y0jiMNKXt3EAI="}}
+{"Target":"book.min.f11f00e4d2659e7749c679f7a29960dab5462bcb609a767e0f2ea963159b9024.css","MediaType":"text/css","Data":{"Integrity":"sha256-8R8A5NJlnndJxnn3oplg2rVGK8tgmnZ+Dy6pYxWbkCQ="}}