feat: link i18n

package.json

@@ -2,7 +2,7 @@
   "publisher": "oeyoews",
   "name": "usewiki2",
   "displayName": "usewiki2",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "private": true,
   "packageManager": "[email protected]",
   "description": "",

packages/react/src/App.tsx

@@ -22,7 +22,7 @@ import {
 } from '@/components/ui/accordion';
 import { sound } from './sound';
 import { WebviewMessenger } from './utils/WebViewMessenger';
-import { links as cards } from './links';
+import { getLinks } from './links';
 import { useTranslation } from 'react-i18next';
 import { ILanguage } from './i18n';
 
@@ -31,6 +31,8 @@ const vscode = acquireVsCodeApi();
 const messenger = new WebviewMessenger({ vscode });
 function App() {
   const { t, i18n } = useTranslation();
+  const { t: t2 } = useTranslation('links');
+  const cards = getLinks(t2);
   const [inputValue, setInputValue] = useState('');
   const inputRef = useRef<HTMLTextAreaElement>(null);
   const [placeholder, setPlaceholder] = useState(t('placeholder'));

packages/react/src/i18n.ts

@@ -1,17 +1,21 @@
 import i18next from 'i18next';
 import { initReactI18next } from 'react-i18next';
 
-import en from '@/locales/en.json';
-import zhCN from '@/locales/zh_CN.json';
+import en from '@/locales/lang/en.json';
+import zhCN from '@/locales/lang/zh_CN.json';
+import links_en from '@/locales/links/en.json';
+import links_zhCN from '@/locales/links/zhCN.json';
 export const fallbackLanguage = 'en';
 
 export const defaultNS = 'translation';
 export const resources = {
   en: {
     translation: en,
+    links: links_en,
   },
   zhCN: {
     translation: zhCN,
+    links: links_zhCN,
   },
 } as const;
 

packages/react/src/links.ts

@@ -1,3 +1,5 @@
+import { type TFunction } from 'i18next';
+
 type Colors =
   | 'green'
   | 'rose'
@@ -22,35 +24,37 @@ const getClass = (color: Colors) => {
   return colors[color];
 };
 
-export const links = [
-  {
-    title: '太微官网',
-    description: 'A non-linear personal web notebook',
-    link: 'https://tiddlywiki.com',
-    class: getClass('green'),
-  },
-  {
-    title: '太微 GitHub',
-    description: 'The TiddlyWiki5 source code',
-    link: 'https://github.com/TiddlyWiki/TiddlyWiki5',
-    class: getClass('rose'),
-  },
-  {
-    title: '太微官方论坛',
-    description: 'The official TiddlyWiki5 forum',
-    link: 'https://talk.tiddlywiki.org',
-    class: getClass('yellow'),
-  },
-  {
-    title: '中文太微文档',
-    description: 'The TiddlyWiki5 Chinese documentation',
-    link: 'https://bramchen.github.io/tw5-docs/zh-Hans',
-    class: getClass('purple'),
-  },
-  {
-    title: '中文太微教程',
-    description: 'The TiddlyWiki5 Chinese tutorial',
-    link: 'https://tw-cn.netlify.app',
-    class: getClass('indigo'),
-  },
-];
+export function getLinks(t: TFunction<'links', undefined>) {
+  return [
+    {
+      title: t('tw_official_site'),
+      description: t('tw_official_site_description'),
+      link: 'https://tiddlywiki.com',
+      class: getClass('green'),
+    },
+    {
+      title: t('github'),
+      description: t('github_description'),
+      link: 'https://github.com/TiddlyWiki/TiddlyWiki5',
+      class: getClass('rose'),
+    },
+    {
+      title: t('forum'),
+      description: t('forum_description'),
+      link: 'https://talk.tiddlywiki.org',
+      class: getClass('yellow'),
+    },
+    {
+      title: t('docs_cn'),
+      description: t('docs_cn_description'),
+      link: 'https://bramchen.github.io/tw5-docs/zh-Hans',
+      class: getClass('purple'),
+    },
+    {
+      title: t('tutorial_cn'),
+      description: t('tutorial_cn_description'),
+      link: 'https://tw-cn.netlify.app',
+      class: getClass('indigo'),
+    },
+  ];
+}

packages/react/src/locales/links/en.json

@@ -0,0 +1,12 @@
+{
+	"tw_official_site": "TiddlyWiki Official Site",
+	"tw_official_site_description": "The official website for TiddlyWiki.",
+	"github": "Taiwei GitHub",
+	"github_description": "The TiddlyWiki5 source code",
+	"forum": "TiddlyWiki Official Forum",
+	"forum_description": "The official TiddlyWiki5 forum",
+	"docs_cn": "Chinese TiddlyWiki Documentation",
+	"docs_cn_description": "The TiddlyWiki5 Chinese documentation",
+	"tutorial_cn": "Chinese Taiwei Tutorial",
+	"tutorial_cn_description": "The TiddlyWiki5 Chinese tutorial"
+}

packages/react/src/locales/links/zhCN.json

@@ -0,0 +1,12 @@
+{
+	"tw_official_site": "太微官方网站",
+	"tw_official_site_description": "TiddlyWiki 的官方网站。",
+	"github": "太微 GitHub",
+	"github_description": "TiddlyWiki5 的源代码",
+	"forum": "太微官方论坛",
+	"forum_description": "TiddlyWiki5 官方论坛",
+	"docs_cn": "中文太微文档",
+	"docs_cn_description": "TiddlyWiki5 中文文档",
+	"tutorial_cn": "中文太微教程",
+	"tutorial_cn_description": "TiddlyWiki5 中文教程"
+}