Start work on search feature with lunr

README.md

@@ -1,7 +1,7 @@
 # Hugo Book Theme
 
 [![Build Status](https://travis-ci.org/alex-shpak/hugo-book.svg?branch=master)](https://travis-ci.org/alex-shpak/hugo-book)
-[![Hugo](https://img.shields.io/badge/hugo-0.48-blue.svg)](https://gohugo.io)
+[![Hugo](https://img.shields.io/badge/hugo-0.55-blue.svg)](https://gohugo.io)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
 
 ### [Hugo](https://gohugo.io) documentation theme as simple as plain book
@@ -26,7 +26,7 @@
 
 ## Requirements
 
-- Hugo 0.48 or higher
+- Hugo 0.55 or higher
 - Hugo extended version, read more [here](https://gohugo.io/news/0.48-relnotes/)
 
 ## Installation
@@ -139,10 +139,6 @@ BookSection = 'docs'
 # (Optional) This value is duplicate of $link-color for making active link highlight in menu bundle mode
 # BookMenuBundleActiveLinkColor = '\#004ed0'
 
-# (Optional, default false) Include JS scripts in pages. Disabled by default.
-# - Keep side menu on same scroll position during navigation
-BookEnableJS = true
-
 # Set source repository location.
 # Used for 'Last Modified' and 'Edit this page' links.
 BookRepo = 'https://github.com/alex-shpak/hugo-book'
@@ -156,6 +152,9 @@ BookEditPath = 'edit/master/exampleSite/content'
 # - In git information
 # - In blog posts
 BookDateFormat = 'Jan 2, 2006'
+
+# (Optional, default true) Enables or disables search function with lunr.js
+BookSearch = true
 ```
 
 ### Page Configuration

assets/book.scss

@@ -137,6 +137,23 @@ ul.pagination {
   display: none;
 }
 
+.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%;
+
+  // background: url("svg/search.svg") left center no-repeat;
+  // background-size: $padding-16;
+
+  &:focus {
+    border-bottom-color: $body-font-color;
+  }
+}
+
 .book-toc {
   flex: 0 0 $toc-width;
   font-size: $font-size-12;
@@ -211,6 +228,7 @@ aside nav,
 @media screen and (max-width: $sm-breakpoint) {
   .book-menu {
     margin-left: -$menu-width;
+    font-size: $font-size-base;
   }
 
   .book-header {

assets/search.js

@@ -0,0 +1,41 @@
+addEventListener("load", function() {
+  let input = document.querySelector("#book-search");
+  let results = document.querySelector("#book-search-results");
+
+  Promise.all([
+    loadScript("{{ "lunr.min.js" | relURL }}"),
+    loadScript("{{ "index.json" | relURL }}")
+  ]).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);
+    });
+  }
+});

exampleSite/config.toml

@@ -14,6 +14,9 @@ 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/)
@@ -28,13 +31,9 @@ pygmentsCodeFences = true
   # You can also set value to '*' to render all sections to menu
   BookSection = 'docs'
 
-  # This value is duplicate of $link-color for making active link highlight in menu bundle mode
+  # (Optional) This value is duplicate of $link-color for making active link highlight in menu bundle mode
   # BookMenuBundleActiveLinkColor = '\#004ed0'
 
-  # Include JS scripts in pages. Disabled by default.
-  # - Keep side menu on same scroll position during navigation
-  BookEnableJS = true
-
   # Set source repository location.
   # Used for 'Last Modified' and 'Edit this page' links.
   BookRepo = 'https://github.com/alex-shpak/hugo-book'
@@ -48,3 +47,6 @@ pygmentsCodeFences = true
   # - In git information
   # - In blog posts
   BookDateFormat = 'Jan 2, 2006'
+
+  # (Optional, default true) Enables or disables search function with lunr.js
+  BookSearch = true

exampleSite/config.yaml

@@ -28,12 +28,8 @@ params:
   # You can also set value to '*' to render all sections to menu
   BookSection: docs
 
-  # This value is duplicate of $link-color for making active link highlight in menu bundle mode
-  # BookMenuBundleActiveLinkColor: \#004ed0
-
-  # Include JS scripts in pages. Disabled by default.
-  # - Keep side menu on same scroll position during navigation
-  BookEnableJS: true
+  # (Optional) This value is duplicate of $link-color for making active link highlight in menu bundle mode
+  # BookMenuBundleActiveLinkColor: "\#004ed0"
 
   # Set source repository location.
   # Used for 'Last Modified' and 'Edit this page' links.

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

@@ -0,0 +1,6 @@
+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);});}});

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

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

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

@@ -1 +1 @@
-{"Target":"book.min.f4161f5e2de53a2e927f51df1611323a2a12cccb2681f23cb6fc3517852e8643.css","MediaType":"text/css","Data":{"Integrity":"sha256-9BYfXi3lOi6Sf1HfFhEyOioSzMsmgfI8tvw1F4UuhkM="}}
+{"Target":"book.min.60422b170f7beee5a981f3288523ee2bf275a0b48eba3a8983a3736189b9027f.css","MediaType":"text/css","Data":{"Integrity":"sha256-YEIrFw977uWpgfMohSPuK/J1oLSOujqJg6NzYYm5An8="}}

layouts/404.html

@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-{{- partial "docs/shared" -}}
 <html lang="{{ .Site.Language.Lang }}">
 
 <head>

layouts/docs/baseof.html

@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-{{- partial "docs/shared" -}}
 <html lang="{{ .Site.Language.Lang }}">
 
 <head>

layouts/home.html

@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-{{- partial "docs/shared" -}}
 <html lang="{{ .Site.Language.Lang }}">
 
 <head>

layouts/home.json

@@ -0,0 +1,10 @@
+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

@@ -1,11 +1,14 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>{{- template "title" . }} | {{ .Site.Title -}}</title>
+<title>{{ partial "docs/title" . }} | {{ .Site.Title -}}</title>
 
-<!-- Theme stylesheet, you can customize scss by creatig `assets/custom.scss` in your website -->
-{{ $styles := resources.Get "book.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
+<!-- Theme stylesheet, you can customize scss by creating `assets/custom.scss` in your website -->
+{{- $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>
+
 <!-- Favicon -->
 <link rel="icon" href="{{ "favicon.png" | relURL }}" type="image/x-icon">
 

layouts/partials/docs/menu-bundle.html

@@ -2,3 +2,18 @@
 {{ with .Site.GetPage .Site.Params.BookMenuBundle }}
   {{- .Content -}}
 {{ end }}
+
+{{ define "hrefhack" }}
+  {{ $attrEq := "$=" }}
+  {{ $attrVal := .RelPermalink }}
+  {{ if eq .RelPermalink "/" }}
+    {{ $attrEq = "=" }}
+    {{ $attrVal = .Permalink }}
+  {{ end }}
+
+  <style>
+  nav ul a[href{{ $attrEq }}"{{ $attrVal }}"] {
+      color: {{ default "#004ed0" .Site.Params.BookMenuBundleActiveLinkColor }};
+  }
+  </style>
+{{ end }}

layouts/partials/docs/menu-filetree.html

@@ -27,7 +27,7 @@
     {{ if .Content }}
       {{ template "book-page-link" (dict "Page" . "CurrentPage" $.CurrentPage) }}
     {{ else }}
-      <span>{{ template "title" . }}</span>
+      <span>{{ partial "docs/title" . }}</span>
     {{ end }}
 
     {{ template "book-section-children" (dict "Section" . "CurrentPage" $.CurrentPage) }}
@@ -53,7 +53,7 @@
 {{ define "book-page-link" }}
 {{ with .Page }}
   <a href="{{ .RelPermalink }}" {{ if eq $.CurrentPage .Permalink }} class="active"{{ end }}>
-    {{ template "title" . }}
+      {{ partial "docs/title" . }}
   </a>
 {{ end }}
 {{ end }}

layouts/partials/docs/menu.html

@@ -1,5 +1,6 @@
 <nav>
 {{ partial "docs/brand" . }}
+{{ partial "docs/search" . }}
 {{ partial "docs/inject/menu-before" . }}
 
 {{ if .Site.Params.BookMenuBundle }}
@@ -11,6 +12,13 @@
 {{ partial "docs/inject/menu-after" . }}
 </nav>
 
-{{ if .Site.Params.BookEnableJS }}
-  {{ template "jsmenu" . }}
-{{ end }}
+<!-- Restore menu position as soon as possible to avoid flickering -->
+<script>
+(function() {
+  var menu = document.querySelector("aside.book-menu nav");
+  addEventListener("beforeunload", function(event) {
+    localStorage.setItem("menu.scrollTop", menu.scrollTop);
+  });
+  menu.scrollTop = localStorage.getItem("menu.scrollTop");
+})();
+</script>

layouts/partials/docs/mobile-header.html

@@ -1,6 +1,6 @@
-<header class="align-center justify-between book-header">
+<header class="flex align-center justify-between book-header">
   <label for="menu-control">
     <img src="{{ "svg/menu.svg" | relURL }}" alt="Menu" />
   </label>
-  <strong>{{- template "title" . }}</strong>
+  <strong>{{ partial "docs/title" . }}</strong>
 </header>

layouts/partials/docs/search.html

@@ -0,0 +1,2 @@
+<input type="text" placeholder="Search" class="book-search" id="book-search" />
+<ul id="book-search-results"></ul>

layouts/partials/docs/shared.html

@@ -1,40 +0,0 @@
-{{/*These templates contains some more complex logic and shared between partials*/}}
-{{ define "title" }}
-  {{ if and .IsSection .File }}
-    {{ $sections := split (trim .File.Dir "/") "/" }}
-    {{ $title := index ($sections | last 1) 0 | humanize | title }}
-    {{ default $title .Title }}
-  {{ else if and .IsPage .File }}
-    {{ $title := .File.BaseFileName | humanize | title }}
-    {{ default $title .Title }}
-  {{ else }}
-    {{ .Title }}
-  {{ end }}
-{{ end }}
-
-{{ define "hrefhack" }}
-  {{ $attrEq := "$=" }}
-  {{ $attrVal := .RelPermalink }}
-  {{ if eq .RelPermalink "/" }}
-    {{ $attrEq = "=" }}
-    {{ $attrVal = .Permalink }}
-  {{ end }}
-
-  <style>
-  nav ul a[href{{ $attrEq }}"{{ $attrVal }}"] {
-      color: {{ default "#004ed0" .Site.Params.BookMenuBundleActiveLinkColor }};
-  }
-  </style>
-{{ end }}
-
-{{ define "jsmenu" }}
-<script>
-(function() {
-  var menu = document.querySelector('aside.book-menu nav')
-  addEventListener('beforeunload', function(event) {
-    localStorage.setItem('menu.scrollTop', menu.scrollTop)
-  });
-  menu.scrollTop = localStorage.getItem('menu.scrollTop')
-})()
-</script>
-{{ end }}

layouts/partials/docs/title.html

@@ -0,0 +1,9 @@
+{{ $title := .Title }}
+{{ if and .IsSection .File }}
+  {{ $sections := split (trim .File.Dir "/") "/" }}
+  {{ $title = index ($sections | last 1) 0 | humanize | title }}
+{{ else if and .IsPage .File }}
+  {{ $title = .File.BaseFileName | humanize | title }}
+{{ end }}
+
+{{ return $title }}

layouts/posts/baseof.html

@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-{{- partial "docs/shared" -}}
 <html lang="{{ .Site.Language.Lang }}">
 
 <head>

static/svg/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

theme.toml

@@ -8,7 +8,7 @@ description = "Hugo documentation theme as simple as plain book"
 homepage = "https://github.com/alex-shpak/hugo-book"
 tags = ["responsive", "clean", "documentation", "docs", "flexbox"]
 features = []
-min_version = "0.48"
+min_version = "0.55"
 
 [author]
   name = "Alex Shpak"