feat: add the taxonomies filter

assets/search/js/engine.ts

@@ -73,6 +73,10 @@ class Engine {
             keys.push('content')
         }
 
+        for (const taxonomy in params.taxonomies) {
+            keys.push(taxonomy)
+        }
+
         return keys
     }
 
@@ -88,8 +92,8 @@ class Engine {
      * @param {string} sorting language.
      * @returns {Promise<Record<string, unknown>>}
      */
-    search(query: string, sorting = '', lang = '', years: Array<string> = []): Promise<Record<string, unknown>> {
-        const pattern = this.pattern(query, lang, years)
+    search(query: string, sorting = '', lang = '', years: Array<string> = [], taxonomies: Record<string, Array<string>> = {}): Promise<Record<string, unknown>> {
+        const pattern = this.pattern(query, lang, years, taxonomies)
         const start = (new Date()).getTime()
         return new Promise((resolve) => {
             setTimeout(() => {
@@ -121,7 +125,7 @@ class Engine {
      * @param {string} query 
      * @param {string} lang 
      */
-    private pattern(query: string, lang: string, years: Array<string> = []): string | Record<string, unknown> {
+    private pattern(query: string, lang: string, years: Array<string> = [], taxonomies: Record<string, Array<string>> = {}): string | Record<string, unknown> {
         if (lang === '') {
             return query
         }
@@ -158,6 +162,22 @@ class Engine {
             })
         }
 
+        for (const taxonomy in taxonomies) {
+            if (taxonomies[taxonomy].length === 0) {
+                continue
+            }
+
+            const taxonomyConditions: Array<Record<string, string>> = []
+            for (const name of taxonomies[taxonomy]) {
+                taxonomyConditions.push({
+                    [taxonomy]: `="${name}"`,
+                })
+            }
+            p.push({
+                "$and": taxonomyConditions
+            })
+        }
+
         return {
             "$and": p
         }

assets/search/js/form.ts

@@ -45,6 +45,7 @@ export default class Form {
       ${this.renderLanguage()}
       ${this.renderSorting()}
       ${this.renderYears()}
+      ${this.renderTaxonomies()}
       <button class="search-panel-action search-expand-toggle${params.expand_results_meta ? ' active' : ''}">
         <span class="search-panel-action-icon">${params.icons['expand']}</span>
         <span class="search-panel-action-label">${i18n.translate('expand')}</span>
@@ -121,6 +122,28 @@ export default class Form {
       </div>`
     }
 
+    private renderTaxonomies(): string {
+        let v = ''
+        for (const name in params.taxonomies) {
+            v += this.renderTaxonomy(name, params.taxonomies[name])
+        }
+        return v
+    }
+
+    private renderTaxonomy(name: string, items: Array<string>): string {
+        let v = ''
+        for (const name of items) {
+            v += `<li class="search-dropdown-item" data-value="${name}">${name}</li>`
+        }
+
+        return `<div class="search-dropdown search-panel-action search-taxonomies search-taxonomies-${name}" multiple>
+        <button class="search-dropdown-toggle" type="button" aria-expanded="false">
+          ${params.icons['taxonomies']} <span class="search-dropdown-label">${i18n.translate("taxonomy_" + name, null, name)}</span>
+        </button>
+        <ul class="search-dropdown-menu">${v}</ul>
+      </div>`
+    }
+
     private initialized = false
 
     // Initialize the form after rendering.
@@ -165,6 +188,12 @@ export default class Form {
             this.submit()
         })
 
+        this.ele.querySelectorAll('.search-taxonomies').forEach((el) => {
+            el.addEventListener('change', () => {
+                this.submit()
+            })
+        })
+
         engine.init().then(() => {
             this.input.removeAttribute('disabled')
         }).catch((err) => {
@@ -220,7 +249,8 @@ export default class Form {
         const sorting = this.getSorting()
         const lang = this.getLanguage()
         const years = this.getYears()
-        engine.search(query, sorting, lang, years).then(({ results, time }) => {
+        const taxonomies = this.getTaxonomies()
+        engine.search(query, sorting, lang, years, taxonomies).then(({ results, time }) => {
             this.renderer.render(query, results, time)
         }).finally(() => {
             this.spinner.hide()
@@ -267,5 +297,19 @@ export default class Form {
         })
         return v
     }
+
+    getTaxonomies(): Record<string, Array<string>> {
+        const v = {}
+
+        for (const taxonomy in params.taxonomies) {
+            const terms: Array<string> = []
+            document.querySelectorAll(`.search-taxonomies-${taxonomy} .search-dropdown-item.active`).forEach((item) => {
+                terms.push(item.getAttribute('data-value') ?? '')
+            })
+            v[taxonomy] = terms
+        }
+
+        return v
+    }
 }
 

assets/search/js/renderer.ts

@@ -64,8 +64,10 @@ export default class Renderer {
     taxonomies(page) {
         let v = ''
 
-        for (const i in page.taxonomies) {
-            v += `<span class="search-result-taxonomy">${page.taxonomies[i]}</span> `
+        for (const key of params.taxonomyKeys) {
+            for (const name of page[key]) {
+                v += `<span class="search-result-taxonomy">${name}</span>`
+            }
         }
 
         return v

assets/search/scss/_dropdown.scss

@@ -26,6 +26,8 @@
     border: 1px solid var(--search-border-color);
     border-radius: 0.25rem;
     margin: 1.5rem 0 0;
+    max-height: 30vh;
+    overflow: auto;
     padding: 0.5rem 0;
 }
 

assets/search/scss/_result.scss

@@ -58,7 +58,7 @@
     }
 
     span {
-        margin-right: 0.125rem;
+        margin-right: 0.25rem;
 
         &span:not(:last-child) {
             &::after {

assets/search/scss/form/index.scss

@@ -74,11 +74,14 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex-wrap: wrap;
     margin-top: 0.25rem;
 }
 
 .search-panel {
     display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 0.5rem;
 }
 
 .search-panel-action {

data/search/i18n/de.toml

@@ -26,6 +26,18 @@ other = "Älteste"
 [sort_by_date_desc]
 other = "Neueste"
 
+[taxonomy_authors]
+other = "Authors"
+
+[taxonomy_categories]
+other = "Categories"
+
+[taxonomy_series]
+other = "Series"
+
+[taxonomy_tags]
+other = "Tags"
+
 [to_close]
 other = "Schließen"
 

data/search/i18n/en.toml

@@ -26,6 +26,18 @@ other = "Oldest"
 [sort_by_date_desc]
 other = "Newest"
 
+[taxonomy_authors]
+other = "Authors"
+
+[taxonomy_categories]
+other = "Categories"
+
+[taxonomy_series]
+other = "Series"
+
+[taxonomy_tags]
+other = "Tags"
+
 [to_close]
 other = "to close"
 

data/search/i18n/nl.toml

@@ -26,6 +26,18 @@ other = "Oudste"
 [sort_by_date_desc]
 other = "Nieuwste"
 
+[taxonomy_authors]
+other = "Authors"
+
+[taxonomy_categories]
+other = "Categories"
+
+[taxonomy_series]
+other = "Series"
+
+[taxonomy_tags]
+other = "Tags"
+
 [to_close]
 other = "sluiten"
 

data/search/i18n/zh-hans.toml

@@ -26,6 +26,18 @@ other = "最旧的"
 [sort_by_date_desc]
 other = "最新的"
 
+[taxonomy_authors]
+other = "作者"
+
+[taxonomy_categories]
+other = "分类"
+
+[taxonomy_series]
+other = "专栏"
+
+[taxonomy_tags]
+other = "标签"
+
 [to_close]
 other = "关闭"
 

data/search/i18n/zh-hant.toml

@@ -26,6 +26,18 @@ other = "最舊的"
 [sort_by_date_desc]
 other = "最新的"
 
+[taxonomy_authors]
+other = "作者"
+
+[taxonomy_categories]
+other = "分類"
+
+[taxonomy_series]
+other = "專欄"
+
+[taxonomy_tags]
+other = "標籤"
+
 [to_close]
 other = "關閉"
 

exampleSite/config/_default/config.toml

@@ -31,3 +31,4 @@ LanguageDirection = 'rtl'
 # distance = 10000
 # min_match_char_length = 3
 # lazy_loading = false
+# filter_taxonomies = false

go.mod

@@ -4,6 +4,6 @@ go 1.18
 
 require (
 	github.com/hugomods/fuse-js v0.1.0 // indirect
-	github.com/hugomods/i18n-js v0.1.0 // indirect
+	github.com/hugomods/i18n-js v0.2.0 // indirect
 	github.com/hugomods/icons/vendors/bootstrap v0.5.0 // indirect
 )

go.sum

@@ -1,7 +1,7 @@
 github.com/hugomods/fuse-js v0.1.0 h1:CmWHBZANvjOP44RDNQNLntqlLf9GLqeM29jekxTNcPE=
 github.com/hugomods/fuse-js v0.1.0/go.mod h1:srCqvtBQR02HS/abTraDU4oINv1D3PljNPdexdoHhpo=
-github.com/hugomods/i18n-js v0.1.0 h1:gJmJVObN8rvtMEwBW/z9Wiitown5ZT91092UaAO+UIE=
-github.com/hugomods/i18n-js v0.1.0/go.mod h1:eJfxjgI2CQsNA1/ReIVvr5127DftUKcbHd2A2SQmDvU=
+github.com/hugomods/i18n-js v0.2.0 h1:pZKidtnEm5l8KqlVsL/7xAbSDM/aLLAvFeQwNjl+W00=
+github.com/hugomods/i18n-js v0.2.0/go.mod h1:eJfxjgI2CQsNA1/ReIVvr5127DftUKcbHd2A2SQmDvU=
 github.com/hugomods/icons v0.6.0 h1:G6RU93okhPPRDh/jqcew9gwkcYpSpg0rCBv4S6yUAFw=
 github.com/hugomods/icons/vendors/bootstrap v0.5.0 h1:CHEGk677heq2kJZa7XsGHRc3Hwizl9NFkmNw146OVm0=
 github.com/hugomods/icons/vendors/bootstrap v0.5.0/go.mod h1:kfC17VWV+tNi6PGF4AY7CJBBa1/HEgWxCYq2kNOdcdI=

hugo.toml

@@ -48,3 +48,4 @@ index_all_pages = true
 index_content = false
 expand_results_meta = false
 lazy_loading = true
+filter_taxonomies = true

layouts/partials/search/assets/js-resource.html

@@ -14,6 +14,26 @@
   {{- end }}
   {{- $years = sort $years }}
 {{- end }}
+{{/* taxonomies. */}}
+{{- $taxonomies := newScratch }}
+{{- if default true site.Params.search.filter_taxonomies }}
+  {{- $allTaxonomies := newScratch }}
+  {{- range .Site.Sites }}
+    {{- range $name, $taxonomy := .Taxonomies }}
+      {{- range $taxonomy }}
+        {{- $allTaxonomies.Add $name (slice .Page.Title) }}
+      {{- end }}
+    {{- end }}
+  {{- end }}
+  {{/* remove duplicate taxonomies. */}}
+  {{- range $name, $v := $allTaxonomies.Values }}
+    {{- $taxonomies.Set $name ($v | uniq) }}
+  {{- end }}
+{{- end }}
+{{- $taxonomyKeys := slice }}
+{{- range $name, $v := .Site.Taxonomies }}
+  {{- $taxonomyKeys = $taxonomyKeys | append $name }}
+{{- end }}
 {{/* i18n messages. */}}
 {{- $i18n := newScratch }}
 {{- range $lang, $messages := .Site.Data.search.i18n }}
@@ -34,6 +54,7 @@
   "sort" (partial "icons/icon" (dict "vendor" "bootstrap" "name" "sort-down" "width" "1rem" "height" "1rem"))
   "expand" (partial "icons/icon" (dict "vendor" "bootstrap" "name" "chevron-expand" "width" "1rem" "height" "1rem"))
   "year" (partial "icons/icon" (dict "vendor" "bootstrap" "name" "calendar-check" "width" "1rem" "height" "1rem"))
+  "taxonomies" (partial "icons/icon" (dict "vendor" "bootstrap" "name" "tags" "width" "1rem" "height" "1rem"))
 }}
 {{/* Include the following icons when necessary. */}}
 {{- if default true .Site.Params.search.index_all_pages }}
@@ -58,7 +79,9 @@
   "i18n" $i18n.Values
   "defaultLang" $defaultLang
   "langs" $langs.Values
-  "years" $years)
+  "years" $years
+  "taxonomies" $taxonomies.Values
+  "taxonomyKeys" $taxonomyKeys)
 }}
 {{- $options := dict
   "targetPath" "js/search.js"

layouts/partials/search/index.json.html

@@ -23,7 +23,7 @@
   {{/* Taxonomies */}}
   {{- range $name, $taxonomy := $.Site.Taxonomies -}}
     {{- range $page.GetTerms $name -}}
-      {{- $item.Add "taxonomies" (slice .Title) -}}
+      {{- $item.Add $name (slice .Title) }}
     {{- end -}}
   {{- end -}}
   {{- $items = $items | append $item.Values -}}