diff --git a/build.gradle b/build.gradle index a75f60f..7807642 100644 --- a/build.gradle +++ b/build.gradle @@ -48,5 +48,5 @@ build { } halo { - version = "2.17.0" + version = "2.20" } diff --git a/packages/search-widget/lit-localize.json b/packages/search-widget/lit-localize.json new file mode 100644 index 0000000..3cb1888 --- /dev/null +++ b/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/" + } +} \ No newline at end of file diff --git a/packages/search-widget/package.json b/packages/search-widget/package.json index cb32eb6..99679ec 100644 --- a/packages/search-widget/package.json +++ b/packages/search-widget/package.json @@ -23,6 +23,7 @@ "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" @@ -30,6 +31,7 @@ "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", diff --git a/packages/search-widget/src/constants/index.ts b/packages/search-widget/src/constants/index.ts index f025308..6ae1998 100644 --- a/packages/search-widget/src/constants/index.ts +++ b/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; \ No newline at end of file diff --git a/packages/search-widget/src/generated/locale-codes.ts b/packages/search-widget/src/generated/locale-codes.ts new file mode 100644 index 0000000..23dbf36 --- /dev/null +++ b/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; diff --git a/packages/search-widget/src/generated/locales/es.ts b/packages/search-widget/src/generated/locales/es.ts new file mode 100644 index 0000000..05e65b4 --- /dev/null +++ b/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`, + }; + \ No newline at end of file diff --git a/packages/search-widget/src/generated/locales/zh-CN.ts b/packages/search-widget/src/generated/locales/zh-CN.ts new file mode 100644 index 0000000..f3d472e --- /dev/null +++ b/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': `选择`, + }; + \ No newline at end of file diff --git a/packages/search-widget/src/generated/locales/zh-TW.ts b/packages/search-widget/src/generated/locales/zh-TW.ts new file mode 100644 index 0000000..65fef31 --- /dev/null +++ b/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': `選擇`, + }; + \ No newline at end of file diff --git a/packages/search-widget/src/index.ts b/packages/search-widget/src/index.ts index ab42f8a..2173eac 100644 --- a/packages/search-widget/src/index.ts +++ b/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 }; diff --git a/packages/search-widget/src/locale/index.ts b/packages/search-widget/src/locale/index.ts new file mode 100644 index 0000000..54c90da --- /dev/null +++ b/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; +} diff --git a/packages/search-widget/src/search-form.ts b/packages/search-widget/src/search-form.ts index f5fae63..6277a6f 100644 --- a/packages/search-widget/src/search-form.ts +++ b/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 { > - ${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`
${item.kbdIcons.map( @@ -127,7 +137,7 @@ export class SearchForm extends LitElement { renderEmpty() { return html`
- 没有搜索结果 + ${msg('No search results')}
`; } @@ -136,12 +146,14 @@ export class SearchForm extends LitElement {
${this.historyHits.length ? html`
-

搜索历史

+

+ ${msg('Recent')} +

- 清除历史 + ${msg('Clear')}