feat(i18n): add support for Japanese and Traditional Chinese (Hong Kong)

astro.config.mjs

@@ -7,8 +7,8 @@ export default defineConfig({
   adapter: cloudflare(),
   integrations: [react()],
   i18n: {
-    defaultLocale: "en",
-    locales: ["en", "zh-cn"],
+    defaultLocale: "zh-cn",
+    locales: ["en", "zh-cn", "zh-hk", "ja"],
     routing: {
       prefixDefaultLocale: true,
       redirectToDefaultLocale: false,

src/components/LanguagePicker.astro

@@ -8,6 +8,8 @@ const translatePath = getTranslatedPath(lang);
 const flags: Record<string, string> = {
   en: "🇺🇸",
   "zh-cn": "🇨🇳",
+  "zh-hk": "🇭🇰",
+  ja: "🇯🇵",
 };
 
 const currentFlag = flags[lang] || "🏳️";

src/i18n/ui.ts

@@ -1,6 +1,8 @@
 export const languages = {
   en: "English",
   "zh-cn": "简体中文",
+  "zh-hk": "繁體中文",
+  ja: "日本語",
 };
 
 export const defaultLang = "en";
@@ -115,4 +117,113 @@ export const ui = {
     "settings.background": "背景",
     "user.logout": "退出登录",
   },
+  "zh-hk": {
+    "site.title": "Lolisland",
+    "nav.home": "首頁",
+    "nav.about": "關於",
+
+    // Login
+    "login.title": "登入",
+    "login.username.placeholder": "使用者名稱",
+    "login.password.placeholder": "密碼",
+    "login.submit": "登入",
+    "login.or": "或",
+    "login.qq.title": "QQ 登入",
+    // Errors (Client-side)
+    "error.username_required": "請輸入使用者名稱",
+    "error.password_required": "請輸入密碼",
+    "error.network": "網絡錯誤",
+    "error.login_failed": "登入失敗",
+
+    // QQ Auth
+    "qq.title": "QQ 登入",
+    "qq.instruction": "請輸入 QQ 號碼以開始",
+    "qq.input.placeholder": "QQ 號碼",
+    "qq.next": "下一步",
+    "qq.back": "返回登入",
+    "qq.error.required": "請輸入 QQ 號碼",
+    "qq.error.format": "QQ 號碼必須是 5-11 位數字",
+    "qq.error.failed_start": "無法啟動認證",
+
+    // Register
+    "register.title": "完成註冊",
+    "register.instruction": "設定使用者名稱及密碼",
+    "register.submit": "註冊",
+
+    // Dashboard
+    "dashboard.logged_in": "已登入",
+    "dashboard.instruction": "開發中...",
+
+    // Verification
+    "verification.title": "驗證",
+    "verification.instruction": "請將以下代碼發送至機械人所在的 QQ 群：",
+    "verification.waiting": "等待驗證...",
+    "verification.cancel": "取消",
+    "verification.copied": "已複製至剪貼簿！",
+
+    // Settings
+    "settings.title": "標題",
+    "settings.marbles": "波子",
+    "settings.collisions": "碰撞",
+    "settings.mouse_interaction": "滑鼠互動",
+    "settings.motion": "動態感應",
+    "settings.orientation": "方向感應",
+    "settings.background": "背景",
+    "user.logout": "登出",
+  },
+  ja: {
+    "site.title": "Lolisland",
+    "nav.home": "ホーム",
+    "nav.about": "概要",
+
+    // Login
+    "login.title": "ログイン",
+    "login.username.placeholder": "ユーザー名",
+    "login.password.placeholder": "パスワード",
+    "login.submit": "ログイン",
+    "login.or": "または",
+    "login.qq.title": "QQでログイン",
+    // Errors (Client-side)
+    "error.username_required": "ユーザー名を入力してください",
+    "error.password_required": "パスワードを入力してください",
+    "error.network": "ネットワークエラー",
+    "error.login_failed": "ログイン失敗",
+
+    // QQ Auth
+    "qq.title": "QQログイン",
+    "qq.instruction": "QQ番号を入力して開始",
+    "qq.input.placeholder": "QQ番号",
+    "qq.next": "次へ",
+    "qq.back": "ログインに戻る",
+    "qq.error.required": "QQ番号を入力してください",
+    "qq.error.format": "QQ番号は5〜11桁である必要があります",
+    "qq.error.failed_start": "認証の開始に失敗しました",
+
+    // Register
+    "register.title": "登録完了",
+    "register.instruction": "ユーザー名とパスワードを設定",
+    "register.submit": "登録",
+
+    // Dashboard
+    "dashboard.logged_in": "ログイン中",
+    "dashboard.instruction": "開発中...",
+
+    // Verification
+    "verification.title": "認証",
+    "verification.instruction":
+      "以下のコードをQQグループのボットに送信してください：",
+    "verification.waiting": "認証待ち...",
+    "verification.cancel": "キャンセル",
+    "verification.copied": "コピーしました！",
+
+    // Settings
+    "settings.title": "タイトル",
+    "settings.marbles": "ビー玉",
+    "settings.collisions": "衝突",
+    "settings.mouse_interaction": "マウス操作",
+    "settings.motion": "モーション",
+    "settings.orientation": "オリエンテーション",
+    "settings.background": "背景",
+    "user.logout": "ログアウト",
+  },
 } as const;

src/pages/index.astro

@@ -18,8 +18,20 @@ const languages = acceptLang
   .sort((a, b) => b.q - a.q);
 
 for (const lang of languages) {
+  if (lang.code.startsWith("ja")) {
+    targetUrl = "/ja/";
+    break;
+  }
   if (lang.code.startsWith("zh")) {
+    if (
+      lang.code.includes("hk") ||
+      lang.code.includes("tw") ||
+      lang.code.includes("hant")
+    ) {
+      targetUrl = "/zh-hk/";
+    } else {
       targetUrl = "/zh-cn/";
+    }
     break;
   }
   if (lang.code.startsWith("en")) {

src/pages/ja/index.astro

@@ -0,0 +1,8 @@
+---
+import MainView from "../../components/MainView.astro";
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="Lolisland" lang="ja">
+  <MainView/>
+</Layout>

src/pages/zh-cn/index.astro

@@ -3,6 +3,6 @@ import MainView from "../../components/MainView.astro";
 import Layout from "../../layouts/Layout.astro";
 ---
 
-<Layout title="Lolisland" lang="zh">
+<Layout title="Lolisland" lang="zh-cn">
   <MainView/>
 </Layout>

src/pages/zh-hk/index.astro

@@ -0,0 +1,8 @@
+---
+import MainView from "../../components/MainView.astro";
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="Lolisland" lang="zh-hk">
+  <MainView/>
+</Layout>