From c018f4967ab5896b1592fcf971287b8e01f61fdb Mon Sep 17 00:00:00 2001
From: Jimmy Cai <jimmehcai@gmail.com>
Date: Fri, 6 Nov 2020 11:49:30 +0100
Subject: [PATCH] feat(search): i18n support

---
 assets/ts/search.tsx                | 19 ++++++++++++++++---
 i18n/en.toml                        | 11 ++++++++++-
 i18n/zh-CN.toml                     | 11 ++++++++++-
 layouts/page/search.html            |  8 ++++++--
 layouts/partials/widget/search.html |  4 ++--
 5 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/assets/ts/search.tsx b/assets/ts/search.tsx
index 9539caa..8e4eb6f 100644
--- a/assets/ts/search.tsx
+++ b/assets/ts/search.tsx
@@ -39,12 +39,14 @@ class Search {
     private input: HTMLInputElement;
     private list: HTMLDivElement;
     private resultTitle: HTMLHeadElement;
+    private resultTitleTemplate: string;
 
-    constructor({ form, input, list, resultTitle }) {
+    constructor({ form, input, list, resultTitle, resultTitleTemplate }) {
         this.form = form;
         this.input = input;
         this.list = list;
         this.resultTitle = resultTitle;
+        this.resultTitleTemplate = resultTitleTemplate;
 
         this.handleQueryString();
         this.bindQueryStringChange();
@@ -136,7 +138,11 @@ class Search {
 
         const endTime = performance.now();
 
-        this.resultTitle.innerText = `${results.length} pages (${((endTime - startTime) / 1000).toPrecision(1)} seconds)`;
+        this.resultTitle.innerText = this.generateResultTitle(results.length, ((endTime - startTime) / 1000).toPrecision(1));
+    }
+
+    private generateResultTitle(resultLen, time) {
+        return this.resultTitleTemplate.replace("#PAGES_COUNT", resultLen).replace("#TIME_SECONDS", time);
     }
 
     public async getData() {
@@ -231,6 +237,12 @@ class Search {
     }
 }
 
+declare global {
+    interface Window {
+        searchResultTitleTemplate: string;
+    }
+}
+
 window.addEventListener('load', () => {
     setTimeout(function () {
         const searchForm = document.querySelector('.search-form') as HTMLFormElement,
@@ -242,7 +254,8 @@ window.addEventListener('load', () => {
             form: searchForm,
             input: searchInput,
             list: searchResultList,
-            resultTitle: searchResultTitle
+            resultTitle: searchResultTitle,
+            resultTitleTemplate: window.searchResultTitleTemplate
         });
     }, 0);
 })
diff --git a/i18n/en.toml b/i18n/en.toml
index f766971..7fb76fe 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -20,4 +20,13 @@
     other = "Not Found"
 
 [notFoundSubtitle]
-    other = "This page does not exist."
\ No newline at end of file
+    other = "This page does not exist."
+
+[searchTitle]
+    other = "Search"
+
+[searchPlaceholder]
+    other = "Type something..."
+
+[searchResultTitle]
+    other = "#PAGES_COUNT pages (#TIME_SECONDS seconds)"
\ No newline at end of file
diff --git a/i18n/zh-CN.toml b/i18n/zh-CN.toml
index a3f78cd..e589330 100644
--- a/i18n/zh-CN.toml
+++ b/i18n/zh-CN.toml
@@ -20,4 +20,13 @@
     other = "404 错误"
 
 [notFoundSubtitle]
-    other = "页面不存在"
\ No newline at end of file
+    other = "页面不存在"
+
+[searchTitle]
+    other = "搜索"
+
+[searchPlaceholder]
+    other = "输入关键词..."
+
+[searchResultTitle]
+    other = "#PAGES_COUNT 个结果 （用时 #TIME_SECONDS 秒）"
\ No newline at end of file
diff --git a/layouts/page/search.html b/layouts/page/search.html
index c6f0c0c..921fa94 100644
--- a/layouts/page/search.html
+++ b/layouts/page/search.html
@@ -7,8 +7,8 @@
 {{ define "main" }}
 <form action="{{ .Permalink }}" class="search-form"{{ with .OutputFormats.Get "json" -}} data-json="{{ .Permalink }}"{{- end }}>
     <p>
-        <label>Keyword</label>
-        <input name="keyword" placeholder="Type something..." />
+        <label>{{ T "searchTitle" }}</label>
+        <input name="keyword" placeholder="{{ T `searchPlaceholder` }}" />
     </p>
 
     <button title="Search">
@@ -19,6 +19,10 @@
 <h3 class="search-result--title"></h3>
 <div class="search-result--list article-list--compact"></div>
 
+<script>
+    window.searchResultTitleTemplate = "{{ T `searchResultTitle` }}"
+</script>
+
 {{- $opts := dict "minify" hugo.IsProduction "JSXFactory" "createElement" -}}
 {{- $searchScript := resources.Get "ts/search.tsx" | js.Build $opts -}}
 <script type="text/javascript" src="{{ $searchScript.RelPermalink }}" defer></script>
diff --git a/layouts/partials/widget/search.html b/layouts/partials/widget/search.html
index 6f0a2e4..fc6d525 100644
--- a/layouts/partials/widget/search.html
+++ b/layouts/partials/widget/search.html
@@ -1,7 +1,7 @@
 <form action="/search" class="search-form widget" {{ with .OutputFormats.Get "json" -}}data-json="{{ .Permalink }}" {{- end }}>
     <p>
-        <label>Search</label>
-        <input name="keyword" required placeholder="Type something..." />
+        <label>{{ T "searchTitle" }}</label>
+        <input name="keyword" required placeholder="{{ T `searchPlaceholder` }}" />
     
         <button title="Search">
             {{ partial "helper/icon" "search" }}