Add the search shortcut

assets/js/search/index.ts

@@ -0,0 +1,40 @@
+import { default as params } from '@params';
+
+(() => {
+    'use strict'
+
+    const shortcut = params?.search?.shortcut === undefined ?
+        ['/'] : 
+        params.search.shortcut
+
+    const keys = {}
+
+    const press = (e: KeyboardEvent) => {
+        if (e.type === 'keydown') {
+            keys[e.key] = 1
+        } else {
+            delete keys[e.key]   
+        }
+    }
+
+    const isPressed = (expectedKeys: Array<string>): boolean => {
+        for (let key of expectedKeys) {
+            if (!(key in keys)) {
+                return false
+            }
+        }
+
+        return true
+    }
+
+    if (shortcut.length > 0) {
+        document.addEventListener('keydown', (e) => {
+            press(e)
+            if (isPressed(shortcut)) {
+                (document.querySelector('input.search-input') as HTMLInputElement)?.focus()
+                e.preventDefault()
+            }
+        })
+        document.addEventListener('keyup', press)
+    }
+})()

assets/main/js/index.ts

@@ -14,6 +14,7 @@ import TableWrapper from 'js/table-wrapper';
 import TOC from 'js/toc';
 import components from './components';
 import 'js/slide';
+import 'js/search';
 
 (new ActionsPanel()).run();
 (new Scroller()).run();

assets/main/scss/_top-app-bar.scss

@@ -70,7 +70,7 @@ $header-caret-width: 0.35em;
     }
 
     .search-input {
-      padding-left: 2.25rem;
+      padding-left: 2rem;
     }
   }
 

exampleSite/config/_default/params.toml

@@ -171,6 +171,7 @@ categoryId = "MDE4OkRpc2N1c3Npb25DYXRlZ29yeTMyODkzODg2"
 indexPaginate = 100 # The number of pages per index file. Default to 1000.
 # indexPreload = false # Do not preload index files.
 # maxResults = 50
+# shortcut = ["Control", "/"]
 # Fuse.js options, the following options are available. See https://fusejs.io/api/options.html.
 [search.fuse]
 # ignoreLocation = true

exampleSite/content/docs/layouts/search/index.md

@@ -50,6 +50,7 @@ title = "Search"
 | `search.indexPaginate` | Integer | `1000` | Index file pagination.
 | `search.maxResults` | Number | `100` | The max number of search results.
 | `search.resultContentCharactersCount` | Integer | `240` | The maximum characters count of result content for displaying.
+| `search.shortcut` | Array | `["/"]` | The search shortcut, i.e. `["Control", "/"]`, disable it by a empty array `[]`.
 | `search.fuse` | Object | - | [Fuse.js options](https://fusejs.io/api/options.html).
 | `search.fuse.ignoreLocation` | Boolean | `true` |
 | `search.fuse.location` | Integer | - |

exampleSite/content/docs/layouts/search/index.zh-hans.md

@@ -49,6 +49,7 @@ title = "Search"
 | `search.paginate` | Integer | `10` | 分页。
 | `search.indexPaginate` | Integer | `1000` | Index file pagination.
 | `search.maxResults` | Number | `100` | 至多返回的搜索结果数目。
+| `search.shortcut` | Array | `["/"]` | 搜索快捷键，比如 `["Control", "/"]`，空数组 `[]` 则禁用。
 | `search.resultContentCharactersCount` | Integer | `240` | 搜索结果内容最大字符数。
 | `search.fuse` | Object | - | [Fuse.js 参数](https://fusejs.io/api/options.html)
 | `search.fuse.ignoreLocation` | Boolean | `true` |

exampleSite/content/docs/layouts/search/index.zh-hant.md

@@ -49,6 +49,7 @@ title = "Search"
 | `search.paginate` | Integer | `10` | 分頁。
 | `search.indexPaginate` | Integer | `1000` | Index file pagination.
 | `search.maxResults` | Number | `100` | 至多返回的搜索結果數目。
+| `search.shortcut` | Array | `["/"]` | 搜索快捷鍵，比如 `["Control", "/"]`，空數組 `[]` 則禁用。
 | `search.resultContentCharactersCount` | Integer | `240` | 搜尋結果內容最大字符數。
 | `search.fuse` | Object | - | [Fuse.js 引數](https://fusejs.io/api/options.html)
 | `search.fuse.ignoreLocation` | Boolean | `true` |

i18n/en.toml

@@ -236,6 +236,9 @@ other = "Advanced"
 [search_date]
 other = "Date"
 
+[search_input_placeholder]
+other = "Type to search"
+
 [search_missing_keywords]
 other = "Please enter search keywords"
 
@@ -245,6 +248,9 @@ other = "No results found"
 [search_score]
 other = "Score"
 
+[search_shortcut]
+other = "{{ .Shortcut }} to search"
+
 [search_sorting]
 other = "Sorting"
 

i18n/zh-cn.toml

@@ -226,6 +226,9 @@ other = "高级"
 [search_date]
 other = "日期"
 
+[search_input_placeholder]
+other = "请输入关键词"
+
 [search_missing_keywords]
 other = "请输入搜索关键词"
 
@@ -235,6 +238,9 @@ other = "找不到相关结果"
 [search_score]
 other = "评分"
 
+[search_shortcut]
+other = "按 {{ .Shortcut }} 搜索"
+
 [search_sorting]
 other = "排序"
 

i18n/zh-hans.toml

@@ -226,6 +226,9 @@ other = "高级"
 [search_date]
 other = "日期"
 
+[search_input_placeholder]
+other = "请输入关键词"
+
 [search_missing_keywords]
 other = "请输入搜索关键词"
 
@@ -235,6 +238,9 @@ other = "找不到相关结果"
 [search_score]
 other = "评分"
 
+[search_shortcut]
+other = "按 {{ .Shortcut }} 搜索"
+
 [search_sorting]
 other = "排序"
 

i18n/zh-hant.toml

@@ -226,6 +226,9 @@ other = "高級"
 [search_date]
 other = "日期"
 
+[search_input_placeholder]
+other = "請輸入關鍵詞"
+
 [search_missing_keywords]
 other = "請輸入搜尋關鍵詞"
 
@@ -235,6 +238,9 @@ other = "找不到相關結果"
 [search_score]
 other = "評分"
 
+[search_shortcut]
+other = "按 {{ .Shortcut }} 搜索"
+
 [search_sorting]
 other = "排序"
 

i18n/zh-hk.toml

@@ -226,6 +226,9 @@ other = "高級"
 [search_date]
 other = "日期"
 
+[search_input_placeholder]
+other = "請輸入關鍵詞"
+
 [search_missing_keywords]
 other = "請輸入搜索關鍵詞"
 
@@ -235,6 +238,9 @@ other = "找不到相關結果"
 [search_score]
 other = "評分"
 
+[search_shortcut]
+other = "按 {{ .Shortcut }} 搜索"
+
 [search_sorting]
 other = "排序"
 

i18n/zh-tw.toml

@@ -226,6 +226,9 @@ other = "高級"
 [search_date]
 other = "日期"
 
+[search_input_placeholder]
+other = "請輸入關鍵詞"
+
 [search_missing_keywords]
 other = "請輸入搜尋關鍵詞"
 
@@ -235,6 +238,9 @@ other = "找不到相關結果"
 [search_score]
 other = "評分"
 
+[search_shortcut]
+other = "按 {{ .Shortcut }} 搜索"
+
 [search_sorting]
 other = "排序"
 

layouts/partials/functions/search-input-placeholder.html

@@ -0,0 +1,9 @@
+{{- $placeholder := "search_input_placeholder" | i18n }}
+{{- $shortcut := slice "/" }}
+{{- if isset site.Params.search "shortcut" }}
+  {{- $shortcut = cond (gt (len site.Params.search.shortcut) 0) site.Params.search.shortcut slice }}
+{{- end }}
+{{- with $shortcut }}
+  {{- $placeholder = i18n "search_shortcut" (dict "Shortcut" (delimit . "+")) }}
+{{- end }}
+{{- return $placeholder -}}

layouts/partials/header/search-bar.html

@@ -1,13 +1,20 @@
 {{- if .Site.Params.searchBar }}
   {{- $page := .Site.GetPage "/search" }}
   {{- if ne $page.RelPermalink .RelPermalink -}}
+    {{- $placeholder := partialCached "functions/search-input-placeholder" . . }}
     <hr class="d-xxl-none">
     <form class="search-bar ms-auto my-1" action="{{ with $page }}{{ .RelPermalink }}{{ end }}" novalidate>
       <div class="input-group input-group-sm align-items-center">
-        <span class="btn btn-search disabled position-absolute left-0 border-0">
+        <span class="btn btn-search disabled position-absolute left-0 border-0 px-1">
           <i class="fas fa-fw fa-search fa-lg"></i>
         </span>
-        <input class="py-2 form-control border-white rounded search-input bg-body" name="q" type="search" aria-label="Search" required>
+        <input
+          class="my-1 form-control border-white rounded search-input bg-body"
+          name="q"
+          type="search"
+          placeholder="{{ $placeholder }}"
+          aria-label="Search"
+          required>
       </div>
     </form>
   {{- end }}

layouts/partials/search/form.html

@@ -1,6 +1,7 @@
 <form id="searchForm" class="col-12 search-form mb-3" novalidate>
     <div class="input-group input-group-lg align-items-center">
-        <input class="form-control rounded border-primary pe-5" name="q" type="search" aria-label="{{ i18n "search" }}" placeholder="{{ i18n "search" }}">
+        {{- $placeholder := partialCached "functions/search-input-placeholder" . . }}
+        <input class="form-control search-input rounded border-primary pe-5" name="q" type="search" aria-label="{{ i18n "search" }}" placeholder="{{ $placeholder }}">
         <button class="btn btn-sm btn-search position-absolute end-0 border-0 border-start border-secondary p-2" type="submit">
             <i class="fas fa-fw fa-search text-primary"></i>
         </button>