fix: use string placeholders for i18n to survive JSON serialization

Author: matsuzaka-yuki

src/i18n/translations.ts

@@ -9,16 +9,16 @@ export const locales: { code: Locale; native: string }[] = [
 
 export const defaultLocale: Locale = "en";
 
-export const translations: Record<Locale, Record<string, string | ((...args: string[]) => string)>> = {
+export const translations: Record<Locale, Record<string, string>> = {
   en: {
     toggleTheme: "Toggle theme",
     language: "Language",
     copyColorCode: "Copy color code",
-    copiedColor: (color) => `Copied color ${color}`,
+    copiedColor: "Copied color {0}",
     clipboardDenied: "Clipboard permission denied. Please copy manually.",
-    sizeSetTo: (size) => `Export size set to ${size}px`,
-    pngExported: (size) => `PNG exported at ${size}x${size}`,
-    svgExported: (size) => `SVG exported at ${size}x${size}`,
+    sizeSetTo: "Export size set to {0}px",
+    pngExported: "PNG exported at {0}x{0}",
+    svgExported: "SVG exported at {0}x{0}",
     canvasError: "Unable to initialize canvas for PNG export.",
     renderError: "Failed to render image for PNG export.",
     svgExportFailed: "SVG export failed.",
@@ -41,11 +41,11 @@ export const translations: Record<Locale, Record<string, string | ((...args: str
     toggleTheme: "切换主题",
     language: "语言",
     copyColorCode: "复制颜色代码",
-    copiedColor: (color) => `已复制颜色 ${color}`,
+    copiedColor: "已复制颜色 {0}",
     clipboardDenied: "剪贴板权限被拒绝，请手动复制。",
-    sizeSetTo: (size) => `导出尺寸已设为 ${size}px`,
-    pngExported: (size) => `PNG 已导出，尺寸 ${size}x${size}`,
-    svgExported: (size) => `SVG 已导出，尺寸 ${size}x${size}`,
+    sizeSetTo: "导出尺寸已设为 {0}px",
+    pngExported: "PNG 已导出，尺寸 {0}x{0}",
+    svgExported: "SVG 已导出，尺寸 {0}x{0}",
     canvasError: "无法初始化画布以导出 PNG。",
     renderError: "渲染图像以导出 PNG 失败。",
     svgExportFailed: "SVG 导出失败。",
@@ -68,11 +68,11 @@ export const translations: Record<Locale, Record<string, string | ((...args: str
     toggleTheme: "テーマ切り替え",
     language: "言語",
     copyColorCode: "カラーコードをコピー",
-    copiedColor: (color) => `カラー ${color} をコピーしました`,
+    copiedColor: "カラー {0} をコピーしました",
     clipboardDenied: "クリップボードの権限が拒否されました。手動でコピーしてください。",
-    sizeSetTo: (size) => `エクスポートサイズを ${size}px に設定しました`,
-    pngExported: (size) => `PNG を ${size}x${size} でエクスポートしました`,
-    svgExported: (size) => `SVG を ${size}x${size} でエクスポートしました`,
+    sizeSetTo: "エクスポートサイズを {0}px に設定しました",
+    pngExported: "PNG を {0}x{0} でエクスポートしました",
+    svgExported: "SVG を {0}x{0} でエクスポートしました",
     canvasError: "PNG エクスポート用のキャンバスを初期化できません。",
     renderError: "PNG エクスポート用の画像のレンダリングに失敗しました。",
     svgExportFailed: "SVG のエクスポートに失敗しました。",
@@ -89,17 +89,17 @@ export const translations: Record<Locale, Record<string, string | ((...args: str
     sizeRange: "64 ～ 4096、64 単位",
     exportPng: "PNG エクスポート",
     exportSvg: "SVG エクスポート",
-    footer: '&copy; Matsuzaka Yuki &middot; <a href="https://github.com/matsuzaka-yuki" target="_blank" rel="noopener noreferrer">GitHub</a> &middot; <a href="https://github.com/LyraVoid/APatch-Image-WebUI" target="_blank" rel="noopener noreferrer">APatch-Image-WebUI</a> に基づく',
+    footer: '&copy; Matsuzaka Yuki &middot; <a href="https://github.com/matsuzaka-yuki" target="_blank" rel="noopener noreferrer">GitHub</a> &middot; <a href="https://github.com/LyraVoid/APatch-Image-WebUI" target="__blank" rel="noopener noreferrer">APatch-Image-WebUI</a> に基づく',
   },
   "zh-TW": {
     toggleTheme: "切換主題",
     language: "語言",
     copyColorCode: "複製顏色代碼",
-    copiedColor: (color) => `已複製顏色 ${color}`,
+    copiedColor: "已複製顏色 {0}",
     clipboardDenied: "剪貼簿權限被拒絕，請手動複製。",
-    sizeSetTo: (size) => `匯出尺寸已設為 ${size}px`,
-    pngExported: (size) => `PNG 已匯出，尺寸 ${size}x${size}`,
-    svgExported: (size) => `SVG 已匯出，尺寸 ${size}x${size}`,
+    sizeSetTo: "匯出尺寸已設為 {0}px",
+    pngExported: "PNG 已匯出，尺寸 {0}x{0}",
+    svgExported: "SVG 已匯出，尺寸 {0}x{0}",
     canvasError: "無法初始化畫布以匯出 PNG。",
     renderError: "渲染圖像以匯出 PNG 失敗。",
     svgExportFailed: "SVG 匯出失敗。",

src/pages/index.astro

@@ -362,9 +362,11 @@ import { locales, defaultLocale, translations as i18nStrings } from "../i18n/tra
   if (!supportedLocales.includes(currentLocale)) currentLocale = "en";
 
   function tr(key, ...args) {
-    const fn = translations[currentLocale]?.[key];
-    if (typeof fn === "function") return fn(...args);
-    return fn || key;
+    let text = translations[currentLocale]?.[key] || translations["en"]?.[key] || key;
+    args.forEach((arg, i) => {
+      text = text.replace(new RegExp(`\\{${i}\\}`, "g"), arg);
+    });
+    return text;
   }
 
   function applyTranslations() {