feat: add optional page description to search (#550)

Add optional page description to the search result list. The feature can be enabled by `geekdocSearchShowDescription=true` and is disabled by default. The max length of the description is set to `55` and will be truncated automatically if the limit is exceeded.

src/js/groupBy.js

@@ -1,31 +0,0 @@
-/**
- * Part of [Canivete](http://canivete.leofavre.com/#deepgroupby)
- *
- * Groups the contents of an array by one or more iteratees.
- * Unlike Lodash [`groupBy()`](https://lodash.com/docs/4.17.4#groupBy),
- * this function can create nested groups, but cannot receive
- * strings for iteratees.
- */
-
-export const groupBy = (e, ...t) => {
-    let r = e.map((e) => t.map((t) => t(e))),
-      a = {}
-    return (
-      r.forEach((t, r) => {
-        let l = (_simpleAt(a, t) || []).concat([e[r]])
-        _simpleSet(a, t, l)
-      }),
-      a
-    )
-  },
-  _isPlainObject = (e) => null != e && "object" == typeof e && e.constructor == Object,
-  _parsePath = (e) => (Array.isArray(e) ? e : `${e}`.split(".")),
-  _simpleAt = (e, t) =>
-    _parsePath(t).reduce((e, t) => (null != e && e.hasOwnProperty(t) ? e[t] : void 0), e),
-  _simpleSet = (e, t, r) =>
-    _parsePath(t).reduce((e, t, a, l) => {
-      let s = a === l.length - 1
-      return (
-        (e.hasOwnProperty(t) && (s || _isPlainObject(e[t]))) || (e[t] = {}), s ? (e[t] = r) : e[t]
-      )
-    }, e)

src/js/search.js

@@ -1,4 +1,5 @@
-const { groupBy } = require("./groupBy")
+const groupBy = require("lodash/groupBy")
+const truncate = require("lodash/truncate")
 const { FlexSearch } = require("flexsearch/dist/flexsearch.compact")
 const { Validator } = require("@cfworker/json-schema")
 
@@ -19,6 +20,9 @@ document.addEventListener("DOMContentLoaded", function (event) {
       },
       showParent: {
         type: "boolean"
+      },
+      showDescription: {
+        type: "boolean"
       }
     },
     additionalProperties: false
@@ -58,8 +62,8 @@ function init(input, searchConfig) {
 
   indexCfg.document = {
     key: "id",
-    index: ["title", "content"],
-    store: ["title", "href", "parent"]
+    index: ["title", "content", "description"],
+    store: ["title", "href", "parent", "description"]
   }
 
   const index = new FlexSearch.Document(indexCfg)
@@ -75,7 +79,7 @@ function init(input, searchConfig) {
 function search(input, results, searchConfig) {
   const searchCfg = {
     enrich: true,
-    limit: 10
+    limit: 5
   }
 
   while (results.firstChild) {
@@ -106,8 +110,12 @@ function search(input, results, searchConfig) {
         title = item.appendChild(document.createElement("span")),
         subList = item.appendChild(document.createElement("ul"))
 
+      if (!section) {
+        title.remove()
+      }
+      title.classList.add("gdoc-search__section")
       title.textContent = section
-      createLinks(searchHits[section], subList)
+      createLinks(searchHits[section], subList, searchConfig.showDescription)
 
       items.push(item)
     }
@@ -117,7 +125,7 @@ function search(input, results, searchConfig) {
       subList = item.appendChild(document.createElement("ul"))
 
     title.textContent = "Results"
-    createLinks(searchHits, subList)
+    createLinks(searchHits, subList, searchConfig.showDescription)
 
     items.push(item)
   }
@@ -133,20 +141,28 @@ function search(input, results, searchConfig) {
  * @param {HTMLElement} target Element to which the links should be attatched
  * @returns {Array} If target is not specified, returns an array of built links
  */
-function createLinks(pages, target) {
+function createLinks(pages, target, showDesc) {
   const items = []
 
   for (const page of pages) {
     const item = document.createElement("li"),
-      entry = item.appendChild(document.createElement("span")),
-      a = entry.appendChild(document.createElement("a"))
-
-    entry.classList.add("flex")
+      a = item.appendChild(document.createElement("a")),
+      entry = a.appendChild(document.createElement("span"))
 
     a.href = page.href
-    a.textContent = page.title
+    entry.classList.add("gdoc-search__entry--title")
+    entry.textContent = page.title
     a.classList.add("gdoc-search__entry")
 
+    if (showDesc === true) {
+      const desc = a.appendChild(document.createElement("span"))
+      desc.classList.add("gdoc-search__entry--description")
+      desc.textContent = truncate(page.description, {
+        length: 55,
+        separator: " "
+      })
+    }
+
     if (target) {
       target.appendChild(item)
       continue