feat: add i18n supports

build.gradle

@@ -48,5 +48,5 @@ build {
 }
 
 halo {
-    version = "2.17.0"
+    version = "2.20"
 }

packages/search-widget/lit-localize.json

@@ -0,0 +1,19 @@
+{
+    "$schema": "https://raw.githubusercontent.com/lit/lit/main/packages/localize-tools/config.schema.json",
+    "sourceLocale": "en",
+    "targetLocales": [
+        "es",
+        "zh-CN",
+        "zh-TW"
+    ],
+    "tsConfig": "./tsconfig.json",
+    "output": {
+        "mode": "runtime",
+        "outputDir": "./src/generated/locales",
+        "localeCodesModule": "./src/generated/locale-codes.ts"
+    },
+    "interchange": {
+        "format": "xliff",
+        "xliffDir": "./xliff/"
+    }
+}

packages/search-widget/package.json

@@ -23,13 +23,15 @@
     "prettier": "prettier \"**/*.{cjs,html,js,json,md,ts}\" --ignore-path ./.gitignore --write"
   },
   "dependencies": {
+    "@lit/localize": "^0.12.2",
     "lit": "^3.2.0",
     "lodash-es": "^4.17.21",
     "overlayscrollbars": "^2.10.0"
   },
   "devDependencies": {
     "@iconify/json": "^2.2.234",
     "@julr/unocss-preset-forms": "^0.1.0",
+    "@lit/localize-tools": "^0.8.0",
     "@types/lodash-es": "^4.17.12",
     "@unocss/eslint-config": "^0.61.9",
     "@unocss/reset": "^0.61.9",

packages/search-widget/src/constants/index.ts

@@ -1,17 +1,2 @@
 export const HISTORY_KEY = 'halo:search-widgets:history:hits';
-export const MAX_HISTORY_ITEMS = 50;
-
-export const SHORTCUT_HELP_LIST = [
-  {
-    text: '选择',
-    kbdIcons: ['i-lucide-arrow-up', 'i-lucide-arrow-down'],
-  },
-  {
-    text: '确认',
-    kbdIcons: ['i-lucide-corner-down-left'],
-  },
-  {
-    text: '关闭',
-    kbdIcons: ['i-mdi-keyboard-esc'],
-  },
-];
+export const MAX_HISTORY_ITEMS = 50;

packages/search-widget/src/generated/locale-codes.ts

@@ -0,0 +1,27 @@
+// Do not modify this file by hand!
+// Re-generate this file by running lit-localize.
+
+/**
+ * The locale code that templates in this source code are written in.
+ */
+export const sourceLocale = `en`;
+
+/**
+ * The other locale codes that this application is localized into. Sorted
+ * lexicographically.
+ */
+export const targetLocales = [
+  `es`,
+  `zh-CN`,
+  `zh-TW`,
+] as const;
+
+/**
+ * All valid project locale codes. Sorted lexicographically.
+ */
+export const allLocales = [
+  `en`,
+  `es`,
+  `zh-CN`,
+  `zh-TW`,
+] as const;

packages/search-widget/src/generated/locales/es.ts

@@ -0,0 +1,20 @@
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+
+
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      's5e8250fb85d64c23': `Cerrar`,
+'sa84142fc34654130': `Sin resultados de búsqueda`,
+'sad5f82f8364e5a1c': `Introducir palabras clave para buscar`,
+'sb4f1dffbb6be6302': `Borrar`,
+'sb85774dc5d18ff0f': `Confirmar`,
+'sbce70cbdb856635e': `Recientes`,
+'sfc63e31ac7c956ed': `Seleccionar`,
+    };
+

packages/search-widget/src/generated/locales/zh-CN.ts

@@ -0,0 +1,20 @@
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+
+
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      's5e8250fb85d64c23': `关闭`,
+'sa84142fc34654130': `没有搜索结果`,
+'sad5f82f8364e5a1c': `输入关键词以搜索`,
+'sb4f1dffbb6be6302': `清空`,
+'sb85774dc5d18ff0f': `确认`,
+'sbce70cbdb856635e': `最近搜索`,
+'sfc63e31ac7c956ed': `选择`,
+    };
+

packages/search-widget/src/generated/locales/zh-TW.ts

@@ -0,0 +1,20 @@
+
+    // Do not modify this file by hand!
+    // Re-generate this file by running lit-localize
+
+
+
+
+    /* eslint-disable no-irregular-whitespace */
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+
+    export const templates = {
+      's5e8250fb85d64c23': `關閉`,
+'sa84142fc34654130': `沒有搜尋結果`,
+'sad5f82f8364e5a1c': `輸入關鍵字以搜尋`,
+'sb4f1dffbb6be6302': `清空`,
+'sb85774dc5d18ff0f': `確認`,
+'sbce70cbdb856635e': `最近搜尋`,
+'sfc63e31ac7c956ed': `選擇`,
+    };
+

packages/search-widget/src/index.ts

@@ -1,4 +1,5 @@
 import { SearchForm } from './search-form';
 import { SearchModal } from './search-modal';
+import './locale';
 
 export { SearchForm, SearchModal };

packages/search-widget/src/locale/index.ts

@@ -0,0 +1,34 @@
+import { configureLocalization, LocaleModule } from '@lit/localize';
+import * as templates_es from '../generated/locales/es';
+import * as templates_zh_CN from '../generated/locales/zh-CN';
+import * as templates_zh_TW from '../generated/locales/zh-TW';
+import { allLocales, sourceLocale, targetLocales } from '../generated/locale-codes';
+
+const localizedTemplates = new Map([
+  ['es', templates_es],
+  ['zh-CN', templates_zh_CN],
+  ['zh-TW', templates_zh_TW],
+]);
+
+const { setLocale } = configureLocalization({
+  sourceLocale,
+  targetLocales,
+  loadLocale: async (locale) => localizedTemplates.get(locale) as LocaleModule,
+});
+
+setLocale(getLocale());
+
+function getLanguageFromCookie() {
+  const match = document.cookie.match(new RegExp('(^| )language=([^;]+)'));
+  const matchedLanguage = allLocales.find((locale) => locale === match?.[2]);
+  return matchedLanguage;
+}
+
+function getLanguageFromBrowser() {
+  const language = allLocales.find((locale) => locale === navigator.language);
+  return language;
+}
+
+export function getLocale() {
+  return getLanguageFromCookie() || getLanguageFromBrowser() || sourceLocale;
+}

packages/search-widget/src/search-form.ts

@@ -5,12 +5,9 @@ import { customElement, property, state } from 'lit/decorators.js';
 import { Ref, createRef, ref } from 'lit/directives/ref.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { DebouncedFunc, debounce, uniqBy } from 'lodash-es';
-import {
-  HISTORY_KEY,
-  MAX_HISTORY_ITEMS,
-  SHORTCUT_HELP_LIST,
-} from './constants';
+import { HISTORY_KEY, MAX_HISTORY_ITEMS } from './constants';
 import baseStyles from './styles/base';
+import { msg } from '@lit/localize';
 
 @customElement('search-form')
 export class SearchForm extends LitElement {
@@ -65,7 +62,7 @@ export class SearchForm extends LitElement {
           ></span>
           <input
             @input="${this.onInput}"
-            placeholder="输入关键词以搜索"
+            placeholder=${msg('Enter keywords to search')}
             autocomplete="off"
             spellcheck="false"
             ${ref(this.inputRef)}
@@ -87,7 +84,20 @@ export class SearchForm extends LitElement {
       <div
         class="border-t border-divider p-3 bg-base sticky bottom-0 space-x-5 flex justify-end"
       >
-        ${SHORTCUT_HELP_LIST.map(
+        ${[
+          {
+            text: html`${msg('Select')}`,
+            kbdIcons: ['i-lucide-arrow-up', 'i-lucide-arrow-down'],
+          },
+          {
+            text: html`${msg('Confirm')}`,
+            kbdIcons: ['i-lucide-corner-down-left'],
+          },
+          {
+            text: html`${msg('Close')}`,
+            kbdIcons: ['i-mdi-keyboard-esc'],
+          },
+        ].map(
           (item) => html`
             <div class="flex items-center space-x-1.5">
               ${item.kbdIcons.map(
@@ -127,7 +137,7 @@ export class SearchForm extends LitElement {
 
   renderEmpty() {
     return html`<div class="flex py-4 justify-center text-sm text-muted">
-      <span>没有搜索结果</span>
+      <span>${msg('No search results')}</span>
     </div>`;
   }
 
@@ -136,12 +146,14 @@ export class SearchForm extends LitElement {
       <div class="p-3">
         ${this.historyHits.length
           ? html`<div class="flex justify-between items-center">
-                <h3 class="text-sm font-medium text-primary">搜索历史</h3>
+                <h3 class="text-sm font-medium text-primary">
+                  ${msg('Recent')}
+                </h3>
                 <span
                   class="text-xs cursor-pointer text-muted hover:text-content"
                   @click=${this.handleClearHistory}
                 >
-                  清除历史
+                  ${msg('Clear')}
                 </span>
               </div>
               <ul class="mt-3 space-y-1.5" role="list">

packages/search-widget/xliff/es.xlf

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<file target-language="es" source-language="en" original="lit-localize-inputs" datatype="plaintext">
+<body>
+<trans-unit id="sfc63e31ac7c956ed">
+  <source>Select</source>
+  <target>Seleccionar</target>
+</trans-unit>
+<trans-unit id="sb85774dc5d18ff0f">
+  <source>Confirm</source>
+  <target>Confirmar</target>
+</trans-unit>
+<trans-unit id="s5e8250fb85d64c23">
+  <source>Close</source>
+  <target>Cerrar</target>
+</trans-unit>
+<trans-unit id="sad5f82f8364e5a1c">
+  <source>Enter keywords to search</source>
+  <target>Introducir palabras clave para buscar</target>
+</trans-unit>
+<trans-unit id="sa84142fc34654130">
+  <source>No search results</source>
+  <target>Sin resultados de búsqueda</target>
+</trans-unit>
+<trans-unit id="sbce70cbdb856635e">
+  <source>Recent</source>
+  <target>Recientes</target>
+</trans-unit>
+<trans-unit id="sb4f1dffbb6be6302">
+  <source>Clear</source>
+  <target>Borrar</target>
+</trans-unit>
+</body>
+</file>
+</xliff>

packages/search-widget/xliff/zh-CN.xlf

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<file target-language="zh-CN" source-language="en" original="lit-localize-inputs" datatype="plaintext">
+<body>
+<trans-unit id="sfc63e31ac7c956ed">
+  <source>Select</source>
+  <target>选择</target>
+</trans-unit>
+<trans-unit id="sb85774dc5d18ff0f">
+  <source>Confirm</source>
+  <target>确认</target>
+</trans-unit>
+<trans-unit id="s5e8250fb85d64c23">
+  <source>Close</source>
+  <target>关闭</target>
+</trans-unit>
+<trans-unit id="sad5f82f8364e5a1c">
+  <source>Enter keywords to search</source>
+  <target>输入关键词以搜索</target>
+</trans-unit>
+<trans-unit id="sa84142fc34654130">
+  <source>No search results</source>
+  <target>没有搜索结果</target>
+</trans-unit>
+<trans-unit id="sbce70cbdb856635e">
+  <source>Recent</source>
+  <target>最近搜索</target>
+</trans-unit>
+<trans-unit id="sb4f1dffbb6be6302">
+  <source>Clear</source>
+  <target>清空</target>
+</trans-unit>
+</body>
+</file>
+</xliff>

packages/search-widget/xliff/zh-TW.xlf

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
+<file target-language="zh-TW" source-language="en" original="lit-localize-inputs" datatype="plaintext">
+<body>
+<trans-unit id="sfc63e31ac7c956ed">
+  <source>Select</source>
+  <target>選擇</target>
+</trans-unit>
+<trans-unit id="sb85774dc5d18ff0f">
+  <source>Confirm</source>
+  <target>確認</target>
+</trans-unit>
+<trans-unit id="s5e8250fb85d64c23">
+  <source>Close</source>
+  <target>關閉</target>
+</trans-unit>
+<trans-unit id="sad5f82f8364e5a1c">
+  <source>Enter keywords to search</source>
+  <target>輸入關鍵字以搜尋</target>
+</trans-unit>
+<trans-unit id="sa84142fc34654130">
+  <source>No search results</source>
+  <target>沒有搜尋結果</target>
+</trans-unit>
+<trans-unit id="sbce70cbdb856635e">
+  <source>Recent</source>
+  <target>最近搜尋</target>
+</trans-unit>
+<trans-unit id="sb4f1dffbb6be6302">
+  <source>Clear</source>
+  <target>清空</target>
+</trans-unit>
+</body>
+</file>
+</xliff>