add [feature]: search (fuse.js)

data/assets.json

@@ -1,24 +1,27 @@
 {
   "comments": {
-    "js": "comments.b0a2b5b1.js"
+    "js": "comments.ecdd5e33.js"
   },
   "sidebar": {
-    "js": "sidebar.6c4c8f65.js"
+    "js": "sidebar.88cb8643.js"
   },
   "twemoji": {
-    "js": "twemoji.7a501675.js"
+    "js": "twemoji.c34d1cdf.js"
   },
   "details-polyfill": {
-    "js": "details-polyfill.f919551f.js"
-  },
-  "algolia_search": {
-    "js": "algolia_search.04805406.js"
+    "js": "details-polyfill.aab26f9f.js"
   },
   "lunr_search": {
-    "js": "lunr_search.d02471db.js"
+    "js": "lunr_search.15b5835f.js"
+  },
+  "fuse_search": {
+    "js": "fuse_search.cc21252e.js"
+  },
+  "algolia_search": {
+    "js": "algolia_search.499151b4.js"
   },
   "main": {
-    "css": "main.c696738b.css",
-    "js": "main.267dd47c.js"
+    "css": "main.809149b6.css",
+    "js": "main.68cb493a.js"
   }
 }

exampleSite/config.toml

@@ -104,7 +104,7 @@ username = "MunifTanjim"
 repository = "minimo"
 
 [params.search]
-client = "" # lunr / algolia
+client = "" # algolia / fuse / lunr
 
 [params.search.algolia]
 appId = ""

exampleSite/content/docs/search-fuse-js.md

@@ -0,0 +1,21 @@
+---
+date: 2018-07-06T01:00:00+06:00
+title: "Search: Fuse.js"
+authors: ["muniftanjim"]
+categories:
+  - features
+tags:
+  - search
+  - fuse.js
+slug: search-fuse-js
+toc: true
+---
+
+## Configure Fuse.js Search Client
+
+Select Lunr.js as the search client in your `config.toml` file:
+
+```toml
+[params.search]
+client = "fuse"
+```

exampleSite/content/docs/search-support.md

@@ -1,6 +1,6 @@
 ---
 date: 2018-07-05T20:00:00+06:00
-lastmod: 2018-07-05T23:30:00+06:00
+lastmod: 2018-07-06T01:00:00+06:00
 title: "Search Support"
 authors: ["muniftanjim"]
 categories:
@@ -14,6 +14,7 @@ toc: true
 Minimo supports the following clients for the search feature:
 
 - [Algolia](https://www.algolia.com)
+- [Fuse.js](http://fusejs.io)
 - [Lunr.js](https://lunrjs.com)
 
 Follow the following steps for enabling search in your site.
@@ -47,13 +48,14 @@ client = ""
 ```
 
 - `params.search` [`Map`]:
-  - `client` [`String`]: Name of the Search Client (_supported values:_ `algolia`,`lunr`)
+  - `client` [`String`]: Name of the Search Client (_supported values:_ `algolia`,`fuse`,`lunr`)
 
 ## Client Specific Steps
 
 The next steps are different for each search client:
 
 - [**Algolia**]({{< relref "docs/search-algolia.md" >}})
+- [**Fuse.js**]({{< relref "docs/search-fuse-js.md" >}})
 - [**Lunr.js**]({{< relref "docs/search-lunr-js.md" >}})
 
 After you complete those steps, you are good to go!

package.json

@@ -10,8 +10,7 @@
   "license": "MIT",
   "scripts": {
     "build": "NODE_ENV=production webpack",
-    "start":
-      "hugo server --source=exampleSite --themesDir=../.. --disableFastRender",
+    "start": "hugo server --source=exampleSite --themesDir=../.. --disableFastRender",
     "watch": "webpack --watch --progress --colors"
   },
   "devDependencies": {
@@ -35,6 +34,7 @@
   "dependencies": {
     "algoliasearch": "^3.29.0",
     "es6-docready": "^1.0.0",
+    "fuse.js": "^3.2.1",
     "lunr": "^2.3.0",
     "normalize.css": "^8.0.0",
     "twemoji": "^2.5.1"

src/scripts/search/fuse.js

@@ -0,0 +1,54 @@
+import Fuse from 'fuse.js'
+
+import {
+  appendResults,
+  getJSON,
+  getUrlSearchParam,
+  setSearchingIndicator
+} from './helpers'
+
+const doSearch = (term, fuse, resultsBlock) => {
+  setSearchingIndicator(resultsBlock)
+
+  let results = term
+    ? fuse
+        .search(term)
+        .map(result => ({ href: result.href, title: result.title }))
+    : []
+
+  appendResults(results, resultsBlock)
+}
+
+const options = {
+  shouldSort: true,
+  threshold: 0.5,
+  location: 0,
+  distance: 500,
+  maxPatternLength: 32,
+  minMatchCharLength: 1,
+  keys: [{ name: 'title', weight: 0.7 }, { name: 'content', weight: 0.3 }]
+}
+
+const searchInputBox = document.getElementById('search-term')
+const resultsBlock = document.getElementById('search-results')
+
+let term = getUrlSearchParam('q')
+searchInputBox.value = term
+searchInputBox.focus()
+
+setSearchingIndicator(resultsBlock)
+
+getJSON(`${window.location.pathname}index.json`, (err, list) => {
+  if (err) {
+    console.error(err)
+    return
+  }
+
+  let fuse = new Fuse(list, options)
+
+  doSearch(term, fuse, resultsBlock)
+
+  searchInputBox.addEventListener('input', e => {
+    doSearch(e.target.value, fuse, resultsBlock)
+  })
+})

src/scripts/search/helpers.js

@@ -29,3 +29,24 @@ export const getUrlSearchParam = name => {
       : decodeURIComponent(results[1].replace(/\+/g, ' '))
   }
 }
+
+export const getJSON = (url, callback) => {
+  let request = new XMLHttpRequest()
+
+  request.open('GET', url, true)
+
+  request.onload = () => {
+    if (request.status >= 200 && request.status < 400) {
+      let data = JSON.parse(request.responseText)
+      callback(null, data)
+    } else {
+      callback(new Error(request.statusText))
+    }
+  }
+
+  request.onerror = () => {
+    callback(new Error(`Failed to get JSON! ${request.statusText}`))
+  }
+
+  request.send()
+}

src/scripts/search/lunr.js

@@ -6,7 +6,7 @@ import {
   setSearchingIndicator
 } from './helpers'
 
-export const doSearch = (term, idx, pageTitles, resultsBlock) => {
+const doSearch = (term, idx, pageTitles, resultsBlock) => {
   setSearchingIndicator(resultsBlock)
 
   let results = term