feat: add i18n supports (#168)

添加界面的 i18n 支持。

/kind feature

Fixes #167 

```release-note
添加界面的 i18n 支持。
```

Author: ruibaby

build.gradle

@@ -41,6 +41,6 @@ build {
 }
 
 halo {
-    version = "2.18.0"
+    version = "2.20"
     debug = true
 }

packages/comment-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/comment-widget/package.json

@@ -36,13 +36,15 @@
     "@emoji-mart/data": "^1.1.2",
     "@halo-dev/api-client": "^2.14.0",
     "@lit/context": "^1.1.0",
+    "@lit/localize": "^0.12.2",
     "dayjs": "^1.11.10",
     "emoji-mart": "^5.5.2",
     "javascript-time-ago": "^2.5.9",
     "lit": "^3.1.2",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
+    "@lit/localize-tools": "^0.8.0",
     "@types/lodash-es": "^4.17.12",
     "lit-analyzer": "^2.0.3"
   }

packages/comment-widget/src/base-comment-item.ts

@@ -4,6 +4,7 @@ import { property } from 'lit/decorators.js';
 import { formatDate, timeAgo } from './utils/date';
 import baseStyles from './styles/base';
 import varStyles from './styles/var';
+import { msg } from '@lit/localize';
 
 export class BaseCommentItem extends LitElement {
   @property({ type: String })
@@ -45,7 +46,7 @@ export class BaseCommentItem extends LitElement {
           <div class="item__meta-info" title=${formatDate(this.creationTime)}>
             ${timeAgo(this.creationTime)}
           </div>
-          ${!this.approved ? html`<div class="item__meta-info">审核中</div>` : ''}
+          ${!this.approved ? html`<div class="item__meta-info">${msg('Reviewing')}</div>` : ''}
         </div>
 
         <div class="item__content">

packages/comment-widget/src/base-form.ts

@@ -19,6 +19,7 @@ import './icons/icon-loading';
 import { ToastManager } from './lit-toast';
 import baseStyles from './styles/base';
 import varStyles from './styles/var';
+import { msg } from '@lit/localize';
 
 export class BaseForm extends LitElement {
   @consume({ context: baseUrlContext })
@@ -99,7 +100,7 @@ export class BaseForm extends LitElement {
     const response = await fetch(`/apis/api.commentwidget.halo.run/v1alpha1/captcha/-/generate`);
 
     if (!response.ok) {
-      this.toastManager?.error('获取验证码失败');
+      this.toastManager?.error(msg('Failed to obtain verification code'));
       return;
     }
 
@@ -111,7 +112,13 @@ export class BaseForm extends LitElement {
   }
 
   async handleLogout() {
-    if (window.confirm('点击确定将跳转至退出登录页面，请确保正在编辑的内容已保存。')) {
+    if (
+      window.confirm(
+        msg(
+          'Click OK to jump to the logout page, Please make sure the content being edited has been saved.'
+        )
+      )
+    ) {
       try {
         window.location.href = '/logout';
       } catch (error) {
@@ -125,7 +132,7 @@ export class BaseForm extends LitElement {
       ${this.currentUser?.spec.avatar ? html`<img src=${this.currentUser.spec.avatar} />` : ''}
       <span> ${this.currentUser?.spec.displayName || this.currentUser?.metadata.name} </span>
       <button @click=${this.handleLogout} type="button" class="form__button--logout">
-        退出登录
+        ${msg('Logout')}
       </button>
     </div>`;
   }
@@ -169,7 +176,7 @@ export class BaseForm extends LitElement {
         <textarea
           class="form__editor"
           ${ref(this.textareaRef)}
-          placeholder="编写评论"
+          placeholder=${msg('Write a comment')}
           rows="4"
           name="content"
           required
@@ -182,23 +189,23 @@ export class BaseForm extends LitElement {
                 name="displayName"
                 value=${this.customAccount.displayName}
                 type="text"
-                placeholder="昵称"
+                placeholder=${msg('Nicename')}
                 required
               />
               <input
                 name="email"
                 value=${this.customAccount.email}
                 type="email"
-                placeholder="电子邮件"
+                placeholder=${msg('Email')}
                 required
               />
               <input
                 name="website"
                 value=${this.customAccount.website}
                 type="url"
-                placeholder="网站"
+                placeholder=${msg('Website')}
               />
-              <a href=${this.loginUrl} rel="nofollow">（或登录账号）</a>
+              <a href=${this.loginUrl} rel="nofollow">${msg('(Or login)')}</a>
             </div>`
           : ''}
 
@@ -210,14 +217,18 @@ export class BaseForm extends LitElement {
                 class="form__button--login"
                 type="button"
               >
-                登录
+                ${msg('Login')}
               </button> `
             : ''}
           <div class="form__actions">
             ${this.showCaptcha
               ? html`
                   <div class="form__action--captcha">
-                    <input name="captchaCode" type="text" placeholder="请输入验证码" />
+                    <input
+                      name="captchaCode"
+                      type="text"
+                      placeholder=${msg('Please enter the verification code')}
+                    />
                     <img
                       @click=${this.handleFetchCaptcha}
                       src="${this.captcha}"
@@ -243,7 +254,7 @@ export class BaseForm extends LitElement {
                       d="M8 7.71L18 12L8 16.29v-3.34l7.14-.95L8 11.05V7.71M12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2m0 2a8 8 0 0 0-8 8a8 8 0 0 0 8 8a8 8 0 0 0 8-8a8 8 0 0 0-8-8Z"
                     ></path>
                   </svg>`}
-              提交评论
+              ${msg('Submit')}
             </button>
           </div>
         </div>

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

@@ -17,6 +17,7 @@ import {
 } from './context';
 import { ToastManager } from './lit-toast';
 import { getCaptchaCodeHeader, isRequireCaptcha } from './utils/captcha';
+import { msg } from '@lit/localize';
 
 export class CommentForm extends LitElement {
   @consume({ context: baseUrlContext })
@@ -91,14 +92,14 @@ export class CommentForm extends LitElement {
     };
 
     if (!this.currentUser && !this.allowAnonymousComments) {
-      this.toastManager?.warn('请先登录');
+      this.toastManager?.warn(msg('Please login first'));
       this.submitting = false;
       return;
     }
 
     if (!this.currentUser && this.allowAnonymousComments) {
       if (!displayName || !email) {
-        this.toastManager?.warn('请先登录或者完善信息');
+        this.toastManager?.warn(msg('Please log in or complete the information first'));
         this.submitting = false;
         return;
       } else {
@@ -130,15 +131,15 @@ export class CommentForm extends LitElement {
       this.baseFormRef.value?.handleFetchCaptcha();
 
       if (!response.ok) {
-        throw new Error('评论失败，请稍后重试');
+        throw new Error(msg('Comment failed, please try again later'));
       }
 
       const newComment = (await response.json()) as Comment;
 
       if (newComment.spec.approved) {
-        this.toastManager?.success('评论成功');
+        this.toastManager?.success(msg('Comment submitted successfully'));
       } else {
-        this.toastManager?.success('评论成功，等待审核');
+        this.toastManager?.success(msg('Comment submitted successfully, pending review'));
       }
 
       this.dispatchEvent(new CustomEvent('reload'));

packages/comment-widget/src/comment-item.ts

@@ -13,6 +13,7 @@ import varStyles from './styles/var';
 import { Ref, createRef, ref } from 'lit/directives/ref.js';
 import { CommentReplies } from './comment-replies';
 import { getPolicyInstance } from './avatar/avatar-policy';
+import { msg } from '@lit/localize';
 
 export class CommentItem extends LitElement {
   @consume({ context: baseUrlContext })
@@ -178,7 +179,7 @@ export class CommentItem extends LitElement {
       ${this.withReplies
         ? html` <base-comment-item-action
             slot="action"
-            .text=${this.showReplyForm ? '取消回复' : '加入回复'}
+            .text=${this.showReplyForm ? msg('Cancel reply') : msg('Add reply')}
             @click="${() => (this.showReplyForm = !this.showReplyForm)}"
           >
             <svg

packages/comment-widget/src/comment-pagination.ts

@@ -2,6 +2,7 @@ import { LitElement, css, html } from 'lit';
 import { property } from 'lit/decorators.js';
 import baseStyles from './styles/base';
 import varStyles from './styles/var';
+import { msg } from '@lit/localize';
 
 export class CommentPagination extends LitElement {
   @property({ type: Number })
@@ -107,7 +108,7 @@ export class CommentPagination extends LitElement {
                 d="m15 6l-6 6l6 6"
               />
             </svg>
-            上一页
+            ${msg('Previous')}
           </button>
         </li>
         ${this.renderPageNumbers()}
@@ -116,7 +117,7 @@ export class CommentPagination extends LitElement {
             @click=${() => this.gotoPage(this.page + 1)}
             ?disabled=${this.page === this.totalPages}
           >
-            下一页
+            ${msg('Next')}
             <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24">
               <path
                 fill="none"

packages/comment-widget/src/comment-replies.ts

@@ -10,6 +10,7 @@ import './reply-form';
 import varStyles from './styles/var';
 import baseStyles from './styles/base';
 import { ToastManager } from './lit-toast';
+import { msg } from '@lit/localize';
 
 export class CommentReplies extends LitElement {
   @consume({ context: baseUrlContext })
@@ -73,7 +74,7 @@ export class CommentReplies extends LitElement {
       ${this.loading ? html` <loading-block></loading-block>` : ''}
       ${this.hasNext && !this.loading
         ? html` <div class="replies__next-wrapper">
-            <button @click=${this.fetchNext}>加载更多</button>
+            <button @click=${this.fetchNext}>${msg('Load more')}</button>
           </div>`
         : ''}
     </div>`;
@@ -99,7 +100,7 @@ export class CommentReplies extends LitElement {
       );
 
       if (!response.ok) {
-        throw new Error('加载回复列表失败，请稍后重试');
+        throw new Error(msg('Failed to load reply list, please try again later'));
       }
 
       const data = (await response.json()) as ReplyVoList;

packages/comment-widget/src/comment-widget.ts

@@ -35,6 +35,7 @@ import {
 import { ToastManager } from './lit-toast';
 import baseStyles from './styles/base';
 import varStyles from './styles/var';
+import { msg } from '@lit/localize';
 
 export class CommentWidget extends LitElement {
   @provide({ context: baseUrlContext })
@@ -141,7 +142,7 @@ export class CommentWidget extends LitElement {
         : html`
             <div class="comment-widget__wrapper">
               <div class="comment-widget__stats">
-                <span>${this.comments.total} 条评论</span>
+                <span>${msg(html`${this.comments.total} Comments`)}</span>
               </div>
 
               <div class="comment-widget__list">
@@ -213,7 +214,7 @@ export class CommentWidget extends LitElement {
       );
 
       if (!response.ok) {
-        throw new Error('评论列表加载失败，请稍后重试');
+        throw new Error(msg('Failed to load comment list, please try again later'));
       }
 
       this.comments = await response.json();

packages/comment-widget/src/emoji-button.ts

@@ -12,6 +12,21 @@ import varStyles from './styles/var';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 //@ts-ignore
 import zh from '@emoji-mart/data/i18n/zh.json';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+import en from '@emoji-mart/data/i18n/en.json';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+import es from '@emoji-mart/data/i18n/es.json';
+import { msg } from '@lit/localize';
+import { getLocale } from './locale';
+
+const localeMap = {
+  'zh-CN': zh,
+  'zh-TW': zh,
+  en: en,
+  es: es,
+};
 
 export class EmojiButton extends LitElement {
   @state()
@@ -72,7 +87,7 @@ export class EmojiButton extends LitElement {
       onEmojiSelect: ({ native }: { native: string }) => {
         this.dispatchEvent(new CustomEvent('emoji-select', { detail: { native } }));
       },
-      i18n: zh,
+      i18n: localeMap[getLocale()],
     });
 
     // TODO: fix this ts error
@@ -83,7 +98,7 @@ export class EmojiButton extends LitElement {
   }
 
   override render() {
-    return html`<button class="emoji-button" type="button" aria-label="选择表情">
+    return html`<button class="emoji-button" type="button" aria-label=${msg('Select emoticon')}>
       ${this.emojiLoading
         ? html`<icon-loading></icon-loading>`
         : html`<icon-emoji @click=${this.handleOpenEmojiPicker}></icon-emoji>`}

packages/comment-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;