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.

assets/search/config.json

@@ -3,5 +3,6 @@
 {
   "dataFile": {{ $searchData.RelPermalink | jsonify }},
   "indexConfig": {{ .Site.Params.GeekdocSearchConfig | jsonify }},
-  "showParent": {{ if .Site.Params.GeekdocSearchShowParent }}true{{ else }}false{{ end }}
+  "showParent": {{ if .Site.Params.GeekdocSearchShowParent }}true{{ else }}false{{ end }},
+  "showDescription": {{ if .Site.Params.GeekdocSearchshowDescription }}true{{ else }}false{{ end }}
 }

assets/search/data.json

@@ -6,7 +6,8 @@
       "href": "{{ $page.RelPermalink }}",
       "title": {{ (partial "utils/title" $page) | jsonify }},
       "parent": {{ with $page.Parent }}{{ (partial "utils/title" .) | jsonify }}{{ else }}""{{ end }},
-      "content": {{ $page.Plain | jsonify }}
+      "content": {{ $page.Plain | jsonify }},
+      "description": {{ $page.Summary | plainify | jsonify }}
     }
   {{ end }}
 ]

exampleSite/config/_default/params.yaml

@@ -14,6 +14,7 @@ geekdocEditPath: edit/main/exampleSite
 
 geekdocSearch: true
 geekdocSearchShowParent: true
+geekdocSearchShowDescription: true
 
 geekdocLegalNotice: https://thegeeklab.de/legal-notice/#contact-information
 geekdocPrivacyPolicy: https://thegeeklab.de/legal-notice/#privacy-policy

layouts/partials/search.html

@@ -5,13 +5,12 @@
       type="text"
       id="gdoc-search-input"
       class="gdoc-search__input"
-      placeholder="{{ i18n "form_placeholder_search" }}"
+      placeholder="{{ i18n "form_placeholder_search" }}..."
       aria-label="{{ i18n "form_placeholder_search" }}"
       maxlength="64"
       data-site-base-url="{{ .Site.BaseURL }}"
       data-site-lang="{{ .Site.Language.Lang }}"
     />
-    <div class="gdoc-search__spinner spinner hidden"></div>
     <ul id="gdoc-search-results" class="gdoc-search__list"></ul>
   </div>
 {{ end }}

package-lock.json

@@ -13,6 +13,7 @@
         "clipboard": "2.0.11",
         "flexsearch": "0.7.31",
         "katex": "0.16.3",
+        "lodash": "4.17.21",
         "mermaid": "9.2.2",
         "store2": "2.14.2"
       },

package.json

@@ -35,6 +35,7 @@
     "clipboard": "2.0.11",
     "flexsearch": "0.7.31",
     "katex": "0.16.3",
+    "lodash": "4.17.21",
     "mermaid": "9.2.2",
     "store2": "2.14.2"
   },

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"],
+    index: ["title", "content", "description"],
-    store: ["title", "href", "parent"]
+    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 = item.appendChild(document.createElement("a")),
-      a = entry.appendChild(document.createElement("a"))
+      entry = a.appendChild(document.createElement("span"))
-
-    entry.classList.add("flex")
 
     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

src/sass/_base.scss

@@ -228,7 +228,6 @@ svg.gdoc-icon {
 
 .gdoc-nav {
   flex: 0 0 $menu-width;
-  font-size: $font-size-14;
 
   nav {
     width: $menu-width;
@@ -329,7 +328,6 @@ svg.gdoc-icon {
 }
 
 .gdoc-nav__entry,
-.gdoc-search__entry,
 .gdoc-language__entry {
   flex: 1;
   color: var(--body-font-color);
@@ -349,10 +347,10 @@ svg.gdoc-icon {
 .gdoc-language__list {
   background: var(--body-background);
   border-radius: $border-radius;
-  box-shadow: 0 1px 3px 0 var(--accent-color), 0 1px 2px 0 var(--accent-color-lite);
+  box-shadow: 0 1px 3px 0 var(--accent-color-dark), 0 1px 2px 0 var(--accent-color);
   position: absolute;
   margin: 0;
-  padding: $padding-8 !important;
+  padding: $padding-8 $padding-4 !important;
   list-style: none;
   top: calc(100% + #{$padding-8});
   z-index: 2;
@@ -576,8 +574,8 @@ svg.gdoc-icon {
     position: absolute;
     left: $padding-8;
     color: var(--control-icons);
-    width: $font-size-16;
+    width: $font-size-20;
-    height: $font-size-16;
+    height: $font-size-20;
   }
 
   &::after {
@@ -591,33 +589,19 @@ svg.gdoc-icon {
     padding: $padding-8;
     padding-left: $padding-32;
 
-    border: $border-1 solid var(--accent-color);
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+    border: 1px solid transparent;
     border-radius: $border-radius;
 
     background: var(--accent-color-lite);
     color: var(--body-font-color);
 
-    &:required + &__spinner {
+    &:focus {
-      display: block;
+      outline: none !important;
+      border: 1px solid var(--accent-color);
     }
   }
 
-  &__spinner {
-    position: absolute;
-    margin: $padding-8;
-    right: 0;
-    top: 0;
-
-    width: $padding-16;
-    height: $padding-16;
-
-    border: $border-1 solid transparent;
-    border-top-color: var(--body-font-color);
-    border-radius: 50%;
-
-    @include spin(1s);
-  }
-
   &__list {
     visibility: hidden;
     left: 0;
@@ -625,20 +609,15 @@ svg.gdoc-icon {
 
     ul {
       list-style: none;
-      margin-top: $padding-8;
       padding-left: 0;
     }
 
-    li {
-      margin: $padding-4 0;
-    }
-
     > li > span {
       font-weight: bold;
     }
 
     > li + li {
-      margin-top: $padding-8;
+      margin-top: $padding-4;
     }
 
     svg.gdoc-icon {
@@ -646,6 +625,40 @@ svg.gdoc-icon {
     }
   }
 
+  &__section {
+    display: flex;
+    flex-direction: column;
+    padding: $padding-4 !important;
+  }
+
+  &__entry {
+    display: flex;
+    flex-direction: column;
+    color: var(--body-font-color);
+    padding: $padding-4 !important;
+    border-radius: $border-radius;
+
+    &:hover,
+    &.is-active {
+      background: var(--accent-color-lite);
+      text-decoration: none;
+
+      .gdoc-search__entry--title {
+        text-decoration-style: dashed !important;
+        text-decoration: underline;
+      }
+    }
+
+    &:visited {
+      color: var(--body-font-color);
+    }
+
+    &--description {
+      font-size: $font-size-14;
+      font-style: italic;
+    }
+  }
+
   &:focus-within &__list.has-hits,
   &__list.has-hits:active {
     visibility: visible;

src/sass/_color_mode.scss

@@ -13,6 +13,7 @@
   --link-color: #{$link-color};
   --link-color-visited: #{$link-color-visited};
 
+  --accent-color-dark: #{$gray-300};
   --accent-color: #{$gray-200};
   --accent-color-lite: #{$gray-100};
 
@@ -58,6 +59,7 @@
   --link-color: #{$link-color-dark};
   --link-color-visited: #{$link-color-visited-dark};
 
+  --accent-color-dark: #{darken($body-background-dark, 6)};
   --accent-color: #{darken($body-background-dark, 4)};
   --accent-color-lite: #{darken($body-background-dark, 2)};
 

src/sass/_defaults.scss

@@ -5,6 +5,7 @@ $padding-8: 0.5rem !default;
 $padding-16: 1rem !default;
 $padding-24: 1.5rem !default;
 $padding-32: 2rem !default;
+$padding-48: 3rem !default;
 $padding-64: 4rem !default;
 $padding-96: 6rem !default;
 
@@ -47,13 +48,13 @@ $body-font-color: $gray-800 !default;
 $body-font-weight: normal !default;
 $body-min-width: 20rem !default;
 
-$code-font-color: rgba(95, 95, 95, 1) !default;
+$code-font-color: rgba(70, 70, 70, 1) !default;
 $code-font-color-dark: rgba(185, 185, 185, 1) !default;
 
 $body-background-dark: $gray-800 !default;
 $body-font-color-dark: $gray-100 !default;
 
-$container-max-width: 80rem !default;
+$container-max-width: 82rem !default;
 
 $main-color: rgba(65, 134, 201, 1) !default;
 $second-color: rgba(47, 51, 62, 1) !default;
@@ -63,11 +64,11 @@ $body-background-dark: mix(invert($body-background, 75%), $second-color) !defaul
 $link-color-dark: rgba(110, 168, 212, 1) !default;
 $link-color-visited-dark: rgba(186, 142, 240) !default;
 
-$code-background: lighten($gray-200, 4) !default;
+$code-background: $gray-100 !default;
 $code-background-dark: darken($body-background-dark, 2) !default;
 
 $header-height: 3.5rem !default;
-$menu-width: 16rem !default;
+$menu-width: 18rem !default;
 
 $sm-breakpoint: $menu-width + $body-min-width + 3rem !default;
 

src/sass/_utils.scss

@@ -89,12 +89,3 @@
   display: inline-block;
   min-width: 4rem;
 }
-
-@mixin spin($duration) {
-  animation: spin $duration ease infinite;
-  @keyframes spin {
-    100% {
-      transform: rotate(360deg);
-    }
-  }
-}