feat(search): add sorting support

assets/search/engine.ts

@@ -3,6 +3,7 @@ import Form from './form';
 
 class Engine {
   private fuse: Fuse;
+  private pages;
 
   constructor(form: Form, callback: (data: FormData) => void) {
     const options = Object.assign(window.fuseOptions, {
@@ -21,6 +22,7 @@ class Engine {
       return response.json();
     }).then((response) => {
       const pages = response.pages;
+      this.pages = pages;
       const taxonomies = ['categories', 'authors', 'series', 'tags'];
       for (const i in taxonomies) {
         const datalist = document.querySelector(
@@ -42,7 +44,34 @@ class Engine {
     })
   }
 
+  sortByDate(a, b, asc = true): number {
+    if (!(a.idx in this.pages)) {
+      return 1;
+    }
+    if (!(b.idx in this.pages)) {
+      return -1;
+    }
+    return this.pages[a.idx].timestamp < this.pages[b.idx].timestamp ? (asc ? -1 : 1) : (asc ? 1 : -1)
+  }
+
+  sortByScore(a, b): number {
+    return a.score === b.score ? a.idx < b.idx ? -1 : 1 : a.score < b.score ? -1 : 1
+  }
+
   search(data: FormData) {
+    switch(data.get('sort')) {
+      case 'date asc':
+        this.fuse.options.sortFn = (a, b) => this.sortByDate(a, b)
+        break;
+      case 'date desc':
+        this.fuse.options.sortFn = (a, b): number => {
+          return this.sortByDate(a, b, false)
+        }
+        break;
+      default:
+        this.fuse.options.sortFn = this.sortByScore
+        break;
+    }
     return new Promise((resolve) => {
       // delay search for displaying the loading spinner.
       setTimeout(() => {

assets/search/form.ts

@@ -25,6 +25,10 @@ class Form {
     this.lang.addEventListener('change', () => {
       this.submit();
     });
+
+    form.querySelector('#sorting-select').addEventListener('change', () => {
+      this.submit();
+    })
   }
 
   private submit() {

i18n/en.toml

@@ -200,12 +200,21 @@ other = "Search"
 [search_advanced]
 other = "Advanced"
 
+[search_date]
+other = "Date"
+
 [search_missing_keywords]
 other = "Please enter search keywords"
 
 [search_no_results]
 other = "No results found"
 
+[search_score]
+other = "Score"
+
+[search_sorting]
+other = "Sorting"
+
 [search_stat]
 other = "Found {{ .Total }} results"
 

i18n/zh-cn.toml

@@ -190,12 +190,21 @@ other = "搜索"
 [search_advanced]
 other = "高级"
 
+[search_date]
+other = "日期"
+
 [search_missing_keywords]
 other = "请输入搜索关键词"
 
 [search_no_results]
 other = "找不到相关结果"
 
+[search_score]
+other = "评分"
+
+[search_sorting]
+other = "排序"
+
 [search_stat]
 other = "找到相关结果 {{ .Total }} 个"
 

i18n/zh-hans.toml

@@ -190,12 +190,21 @@ other = "搜索"
 [search_advanced]
 other = "高级"
 
+[search_date]
+other = "日期"
+
 [search_missing_keywords]
 other = "请输入搜索关键词"
 
 [search_no_results]
 other = "找不到相关结果"
 
+[search_score]
+other = "评分"
+
+[search_sorting]
+other = "排序"
+
 [search_stat]
 other = "找到相关结果 {{ .Total }} 个"
 

i18n/zh-hant.toml

@@ -190,12 +190,21 @@ other = "搜尋"
 [search_advanced]
 other = "高級"
 
+[search_date]
+other = "日期"
+
 [search_missing_keywords]
 other = "請輸入搜尋關鍵詞"
 
 [search_no_results]
 other = "找不到相關結果"
 
+[search_score]
+other = "評分"
+
+[search_sorting]
+other = "排序"
+
 [search_stat]
 other = "找到相關結果 {{ .Total }} 個"
 

i18n/zh-hk.toml

@@ -190,12 +190,21 @@ other = "搜索"
 [search_advanced]
 other = "高級"
 
+[search_date]
+other = "日期"
+
 [search_missing_keywords]
 other = "請輸入搜索關鍵詞"
 
 [search_no_results]
 other = "找不到相關結果"
 
+[search_score]
+other = "評分"
+
+[search_sorting]
+other = "排序"
+
 [search_stat]
 other = "找到相關結果 {{ .Total }} 個"
 

i18n/zh-tw.toml

@@ -190,12 +190,21 @@ other = "搜尋"
 [search_advanced]
 other = "高級"
 
+[search_date]
+other = "日期"
+
 [search_missing_keywords]
 other = "請輸入搜尋關鍵詞"
 
 [search_no_results]
 other = "找不到相關結果"
 
+[search_score]
+other = "評分"
+
+[search_sorting]
+other = "排序"
+
 [search_stat]
 other = "找到相關結果 {{ .Total }} 個"
 

layouts/partials/search/form.html

@@ -16,12 +16,23 @@
         </span>
     </div>
     <div class="row g-1 collapse" id="advanced-search">
-        <select class="form-select col-12 mb-2" aria-label="Language" name="lang" id="languages-select">
-            <option selected value="">{{ i18n "language" }}</option>
-            {{- range .Site.Languages -}}
-            <option value="{{ .Lang }}">{{ .LanguageName }}</option>
-            {{- end }}
-        </select>
+        <div class="form-floating col-6 mb-2">
+            <select class="form-select" aria-label="{{ i18n "language" }}" name="lang" id="languages-select">
+                <option selected value="">{{ i18n "all" }}</option>
+                {{- range .Site.Languages -}}
+                <option value="{{ .Lang }}">{{ .LanguageName }}</option>
+                {{- end }}
+            </select>
+            <label for="languages-select">{{ i18n "language" }}</label>
+        </div>
+        <div class="form-floating col-6 mb-2">
+            <select class="form-select" aria-label="{{ i18n "search_sorting" }}" name="sort" id="sorting-select">
+                <option selected value="">{{ i18n "search_score" }}</option>
+                <option value="date asc">{{ i18n "search_date"}} ↑</option>
+                <option value="date desc">{{ i18n "search_date"}} ↓</option>
+            </select>
+            <label for="sorting-select">{{ i18n "search_sorting" }}</label>
+        </div>
         <div class="form-floating col-6 col-lg-3">
             <input type="text" class="form-control form-control-sm" name="author" id="author-input" list="authors-list" placeholder="{{ i18n "authors" }}">
             <label for="author-input">{{ i18n "authors" }}</label>

layouts/partials/search/index.json

@@ -34,6 +34,7 @@
       "content" .Plain 
       "permalink" .Permalink 
       "date" $date 
+      "timestamp" .Date.Unix
       "img" $img 
       "smallImg" $smallImg
       "largeImg" $largeImg