Merge pull request #60 from easyops-cn/steve/translations

weareoutman · web-flow · commit 74f3fa52e69c · 2021-03-06T17:21:14.000+08:00
feat: support translations in plugin options
diff --git a/README.md b/README.md
@@ -92,6 +92,25 @@ yarn add nodejieba
 | highlightSearchTermsOnTargetPage | boolean            | `false`   | Highlight search terms on target page.                                                                                                       |
 | searchResultLimits               | number             | `8`       | Limit the search results.                                                                                                                    |
 | searchResultContextMaxLength     | number             | `50`      | Set the max length of characters of each search result to show.                                                                              |
+| translations                     | TranslationMap     | -         | Set translations of this plugin, see [docs below](#translations).                                                                                           |
+
+### Translations
+
+To make this plugin localized, pass a `translations` option which defaults to:
+
+```json
+{
+  "search_placeholder": "Search",
+  "see_all_results": "See all results",
+  "no_results": "No results.",
+  "search_results_for": "Search results for \"{{ keyword }}\"",
+  "search_the_documentation": "Search the documentation",
+  "count_documents_found": "{{ count }} document found",
+  // `*_plural` can be omitted if it is the same as singular.
+  "count_documents_found_plural": "{{ count }} documents found",
+  "no_documents_were_found": "No documents were found"
+}
+```
 
 ## Custom Styles
 
diff --git a/src/client/theme/SearchBar/EmptyTemplate.spec.ts b/src/client/theme/SearchBar/EmptyTemplate.spec.ts
@@ -1,5 +1,7 @@
 import { EmptyTemplate } from "./EmptyTemplate";
 
+jest.mock("../../utils/proxiedGenerated");
+
 describe("EmptyTemplate", () => {
   const OLD_ENV = process.env;
 
diff --git a/src/client/theme/SearchBar/EmptyTemplate.ts b/src/client/theme/SearchBar/EmptyTemplate.ts
@@ -1,9 +1,10 @@
+import { translations } from "../../utils/proxiedGenerated";
 import { iconNoResults } from "./icons";
 import styles from "./SearchBar.module.css";
 
 export function EmptyTemplate(): string {
   if (process.env.NODE_ENV === "production") {
-    return `<span class="${styles.noResults}"><span class="${styles.noResultsIcon}">${iconNoResults}</span><span>No results.</span></span>`;
+    return `<span class="${styles.noResults}"><span class="${styles.noResultsIcon}">${iconNoResults}</span><span>${translations.no_results}</span></span>`;
   }
   return `<span class="${styles.noResults}">⚠️ The search index is only available when you run docusaurus build!</span>`;
 }
diff --git a/src/client/theme/SearchBar/SearchBar.tsx b/src/client/theme/SearchBar/SearchBar.tsx
@@ -15,7 +15,7 @@ import { SearchSourceFactory } from "../../utils/SearchSourceFactory";
 import { SuggestionTemplate } from "./SuggestionTemplate";
 import { EmptyTemplate } from "./EmptyTemplate";
 import { SearchResult } from "../../../shared/interfaces";
-import { searchResultLimits, Mark } from "../../utils/proxiedGenerated";
+import { searchResultLimits, Mark, translations } from "../../utils/proxiedGenerated";
 import LoadingRing from "../LoadingRing/LoadingRing";
 
 import styles from "./SearchBar.module.css";
@@ -96,7 +96,7 @@ export default function SearchBar({
               const a = document.createElement("a");
               const url = `${baseUrl}search?q=${encodeURIComponent(query)}`;
               a.href = url;
-              a.textContent = "See all results";
+              a.textContent = translations.see_all_results;
               a.addEventListener("click", (e) => {
                 if (!e.ctrlKey && !e.metaKey) {
                   e.preventDefault();
@@ -191,7 +191,7 @@ export default function SearchBar({
       })}
     >
       <input
-        placeholder="Search"
+        placeholder={translations.search_placeholder}
         aria-label="Search"
         className="navbar__search-input"
         onMouseEnter={onInputMouseEnter}
diff --git a/src/client/theme/SearchPage/SearchPage.tsx b/src/client/theme/SearchPage/SearchPage.tsx
@@ -12,6 +12,8 @@ import { highlight } from "../../utils/highlight";
 import { highlightStemmed } from "../../utils/highlightStemmed";
 import { getStemmedPositions } from "../../utils/getStemmedPositions";
 import LoadingRing from "../LoadingRing/LoadingRing";
+import { translations } from "../../utils/proxiedGenerated";
+import { simpleTemplate } from "../../utils/simpleTemplate";
 
 import styles from "./SearchPage.module.css";
 
@@ -29,8 +31,8 @@ export default function SearchPage(): React.ReactElement {
   const pageTitle = useMemo(
     () =>
       searchQuery
-        ? `Search results for "${searchQuery}"`
-        : "Search the documentation",
+        ? simpleTemplate(translations.search_results_for, { keyword: searchQuery })
+        : translations.search_the_documentation,
     [searchQuery]
   );
 
@@ -106,11 +108,19 @@ export default function SearchPage(): React.ReactElement {
         {searchResults &&
           (searchResults.length > 0 ? (
             <p>
-              {searchResults.length} document
-              {searchResults.length === 1 ? "" : "s"} found
+              {
+                simpleTemplate(
+                  searchResults.length === 1
+                  ? translations.count_documents_found
+                  : translations.count_documents_found_plural,
+                  {
+                    count: searchResults.length
+                  }
+                )
+              }
             </p>
           ) : process.env.NODE_ENV === "production" ? (
-            <p>No documents were found</p>
+            <p>{translations.no_documents_were_found}</p>
           ) : (
             <p>
               ⚠️ The search index is only available when you run docusaurus
diff --git a/src/client/utils/__mocks__/proxiedGenerated.ts b/src/client/utils/__mocks__/proxiedGenerated.ts
@@ -3,6 +3,16 @@ export let removeDefaultStopWordFilter = false;
 export const indexHash = "abc";
 export const searchResultLimits = 8;
 export const searchResultContextMaxLength = 50;
+export const translations = {
+  "search_placeholder": "Search",
+  "see_all_results": "See all results",
+  "no_results": "No results.",
+  "search_results_for": "Search results for \"{{ keyword }}\"",
+  "search_the_documentation": "Search the documentation",
+  "count_documents_found": "{{ count }} document found",
+  "count_documents_found_plural": "{{ count }} documents found",
+  "no_documents_were_found": "No documents were found"
+}
 
 export function __setLanguage(value: string[]): void {
   language = value;
diff --git a/src/client/utils/simpleTemplate.spec.ts b/src/client/utils/simpleTemplate.spec.ts
@@ -0,0 +1,22 @@
+import { simpleTemplate } from "./simpleTemplate";
+
+describe("simpleTemplate", () => {
+  test.each<[string, Record<string, unknown>, string]>([
+    [
+      "search for '{{ keyword }}'",
+      {
+        keyword: "any"
+      },
+      "search for 'any'"
+    ],
+    [
+      "{{ count }} documents found",
+      {
+        count: 2
+      },
+      "2 documents found"
+    ],
+  ])("simpleTemplate(%j, $j) should return %j", (template, params, result) => {
+    expect(simpleTemplate(template, params)).toBe(result);
+  });
+});
diff --git a/src/client/utils/simpleTemplate.ts b/src/client/utils/simpleTemplate.ts
@@ -0,0 +1,8 @@
+export function simpleTemplate(template: string, params: Record<string, unknown>): string {
+  return template.replace(/\{\{\s*(\w+)\s*\}\}/g, (raw, keyword) => {
+    if (Object.prototype.hasOwnProperty.call(params, keyword)) {
+      return String(params[keyword]);
+    }
+    return raw;
+  });
+}
diff --git a/src/declarations.ts b/src/declarations.ts
@@ -1,3 +1,5 @@
+// import { TranslationMap } from "./shared/interfaces";
+
 declare module "@docusaurus/router" {
   export const useHistory: () => {
     push: (url: string) => void;
@@ -20,9 +22,21 @@ declare module "*/generated.js" {
   export const indexHash: string | undefined;
   export const searchResultLimits: number;
   export const searchResultContextMaxLength: number;
+  export const translations: Required<TranslationMap>;
   // These below are for mocking only.
   export const __setLanguage: (value: string[]) => void;
   export const __setRemoveDefaultStopWordFilter: (value: boolean) => void;
 }
 
 declare module "@docusaurus/Head";
+
+declare interface TranslationMap {
+  search_placeholder?: string;
+  see_all_results?: string;
+  no_results?: string;
+  search_results_for?: string;
+  search_the_documentation?: string;
+  count_documents_found?: string;
+  count_documents_found_plural?: string;
+  no_documents_were_found?: string;
+}
diff --git a/src/server/utils/generate.spec.ts b/src/server/utils/generate.spec.ts
@@ -25,6 +25,7 @@ describe("generate", () => {
         'export const indexHash = "abc";',
         "export const searchResultLimits = 8;",
         "export const searchResultContextMaxLength = 50;",
+        'export const translations = {"hello":"hola"};',
       ],
     ],
     [
@@ -41,6 +42,7 @@ describe("generate", () => {
         'export const indexHash = "abc";',
         "export const searchResultLimits = 8;",
         "export const searchResultContextMaxLength = 50;",
+        'export const translations = {"hello":"hola"};',
       ],
     ],
     [
@@ -59,6 +61,7 @@ describe("generate", () => {
         'export const indexHash = "abc";',
         "export const searchResultLimits = 8;",
         "export const searchResultContextMaxLength = 50;",
+        'export const translations = {"hello":"hola"};',
       ],
     ],
     [
@@ -80,6 +83,7 @@ describe("generate", () => {
         'export const indexHash = "abc";',
         "export const searchResultLimits = 8;",
         "export const searchResultContextMaxLength = 50;",
+        'export const translations = {"hello":"hola"};',
       ],
     ],
     [
@@ -99,6 +103,7 @@ describe("generate", () => {
         'export const indexHash = "abc";',
         "export const searchResultLimits = 8;",
         "export const searchResultContextMaxLength = 50;",
+        'export const translations = {"hello":"hola"};',
       ],
     ],
     [
@@ -121,6 +126,7 @@ describe("generate", () => {
         'export const indexHash = "abc";',
         "export const searchResultLimits = 8;",
         "export const searchResultContextMaxLength = 50;",
+        'export const translations = {"hello":"hola"};',
       ],
     ],
   ])("generate({ language: %j }, dir) should work", (language, contents) => {
@@ -130,6 +136,9 @@ describe("generate", () => {
         removeDefaultStopWordFilter: false,
         searchResultLimits: 8,
         searchResultContextMaxLength: 50,
+        translations: {
+          "hello": "hola"
+        },
       } as ProcessedPluginOptions,
       "/tmp"
     );
@@ -151,6 +160,9 @@ describe("generate", () => {
         highlightSearchTermsOnTargetPage: true,
         searchResultLimits: 8,
         searchResultContextMaxLength: 50,
+        translations: {
+          "hello": "hola"
+        }
       } as ProcessedPluginOptions,
       "/tmp"
     );
diff --git a/src/server/utils/generate.ts b/src/server/utils/generate.ts
@@ -10,6 +10,7 @@ export function generate(config: ProcessedPluginOptions, dir: string): void {
     highlightSearchTermsOnTargetPage,
     searchResultLimits,
     searchResultContextMaxLength,
+    translations,
   } = config;
   const indexHash = getIndexHash(config);
   const contents: string[] = [
@@ -72,6 +73,9 @@ export function generate(config: ProcessedPluginOptions, dir: string): void {
       searchResultContextMaxLength
     )};`
   );
+  contents.push(
+    `export const translations = ${JSON.stringify(translations)};`
+  );
 
   fs.writeFileSync(path.join(dir, "generated.js"), contents.join("\n"));
 }
diff --git a/src/server/utils/validateOptions.spec.ts b/src/server/utils/validateOptions.spec.ts
diff --git a/src/server/utils/validateOptions.ts b/src/server/utils/validateOptions.ts
diff --git a/src/shared/interfaces.ts b/src/shared/interfaces.ts

Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,10 @@`
	`1`	`+import { translations } from "../../utils/proxiedGenerated";`
`1`	`2`	`import { iconNoResults } from "./icons";`
`2`	`3`	`import styles from "./SearchBar.module.css";`
`3`	`4`
`4`	`5`	`export function EmptyTemplate(): string {`
`5`	`6`	`if (process.env.NODE_ENV === "production") {`
`6`		- return `<span class="${styles.noResults}"><span class="${styles.noResultsIcon}">${iconNoResults}</span><span>No results.</span></span>`;
	`7`	+ return `<span class="${styles.noResults}"><span class="${styles.noResultsIcon}">${iconNoResults}</span><span>${translations.no_results}</span></span>`;
`7`	`8`	`}`
`8`	`9`	return `<span class="${styles.noResults}">⚠️ The search index is only available when you run docusaurus build!</span>`;
`9`	`10`	`}`