From 52d63396c5f908203c86df6502d21ccfa827a2a1 Mon Sep 17 00:00:00 2001
From: SunLxy <1011771396@qq.com>
Date: Sun, 8 May 2022 00:04:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=8D=95=E4=B8=AA=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=80=E7=A7=8D=E8=AF=AD=E8=A8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 website/src/Layout.tsx                    |  7 +++++--
 website/src/components/useMdData/index.ts |  2 +-
 website/src/language/Select.tsx           |  8 ++++----
 website/src/language/i18n.ts              | 18 ++++++++----------
 website/src/language/language.json        | 15 +--------------
 website/src/language/locale/en.json       |  7 +++++++
 website/src/language/locale/zh.json       |  7 +++++++
 website/src/pages/docs/index.tsx          |  4 ++--
 website/src/pages/example/index.tsx       |  2 +-
 9 files changed, 36 insertions(+), 34 deletions(-)
 create mode 100644 website/src/language/locale/en.json
 create mode 100644 website/src/language/locale/zh.json

diff --git a/website/src/Layout.tsx b/website/src/Layout.tsx
index 4ecec94..d7a0a45 100644
--- a/website/src/Layout.tsx
+++ b/website/src/Layout.tsx
@@ -4,17 +4,20 @@ import GitHubCorners from '@uiw/react-github-corners';
 import '@wcj/dark-mode';
 import styles from './Layout.module.less';
 import Language from './language/Select';
+import { useTranslation } from 'react-i18next';
+
 export function Layout() {
+  const i18next = useTranslation();
   return (
     <Fragment>
       <GitHubCorners target="__blank" fixed href="https://github.com/kktjs/markdown-react-code-preview-loader" />
       <header className={styles.header}>
         <nav>
           <NavLink to="/" replace>
-            Docuemnt
+            {i18next.t('docuemnt')}
           </NavLink>
           <NavLink to="/example" replace>
-            Example
+            {i18next.t('example')}
           </NavLink>
           <dark-mode permanent></dark-mode>
           <Language />
diff --git a/website/src/components/useMdData/index.ts b/website/src/components/useMdData/index.ts
index 99f347d..0998d9b 100644
--- a/website/src/components/useMdData/index.ts
+++ b/website/src/components/useMdData/index.ts
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { CodeBlockData } from 'markdown-react-code-preview-loader';
 import { useTranslation } from 'react-i18next';
 
-const useMdData = (path: (lang: string) => Promise<{ default: CodeBlockData }>, name: string = 'language') => {
+const useMdData = (path: (lang: string) => Promise<{ default: CodeBlockData }>, name: string = 'md-language-name') => {
   const init = useTranslation();
   const [mdData, setMdData] = useState<CodeBlockData>({
     source: '',
diff --git a/website/src/language/Select.tsx b/website/src/language/Select.tsx
index 9894c1b..36f4cc0 100644
--- a/website/src/language/Select.tsx
+++ b/website/src/language/Select.tsx
@@ -4,17 +4,17 @@ import { Select } from 'uiw';
 import { useTranslation } from 'react-i18next';
 
 const Language = () => {
-  const { i18n } = useTranslation();
+  const { i18n, t } = useTranslation();
   const Options = React.useMemo(() => {
-    return Object.entries(languageData).map(([key, item]) => {
+    return (languageData || []).map((key) => {
       return (
         <Select.Option key={key} value={key}>
-          {item.label}
+          {t(key)}
         </Select.Option>
       );
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [JSON.stringify(languageData)]);
+  }, [JSON.stringify(languageData), i18n.language]);
 
   return (
     <div style={{ width: 100 }}>
diff --git a/website/src/language/i18n.ts b/website/src/language/i18n.ts
index 2226444..62141d0 100644
--- a/website/src/language/i18n.ts
+++ b/website/src/language/i18n.ts
@@ -1,19 +1,13 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import LanguageData from './language.json';
+
+import EN from './locale/en.json';
+import ZH from './locale/zh.json';
+
 // the translations
 // (tip move them in a JSON file and import them,
 // or even better, manage them separated from your code: https://react.i18next.com/guides/multiple-translation-files)
 const resources: Record<string, { translation: { language: string } }> = {};
-Object.entries(LanguageData).forEach(([key, item]) => {
-  const { value, label, ...rest } = item;
-  resources[key] = {
-    translation: {
-      language: item.value,
-      ...rest,
-    },
-  };
-});
 
 i18n
   .use(initReactI18next) // passes i18n down to react-i18next
@@ -22,6 +16,10 @@ i18n
     lng: 'en', // language to use, more information here: https://www.i18next.com/overview/configuration-options#languages-namespaces-resources
     // you can use the i18n.changeLanguage function to change the language manually: https://www.i18next.com/overview/api#changelanguage
     // if you're using a language detector, do not define the lng option
+    lowerCaseLng: true,
   });
 
+i18n.addResources('zh', 'translation', ZH);
+i18n.addResources('en', 'translation', EN);
+
 export default i18n;
diff --git a/website/src/language/language.json b/website/src/language/language.json
index 3355f54..cae34a5 100644
--- a/website/src/language/language.json
+++ b/website/src/language/language.json
@@ -1,14 +1 @@
-{
-  "zh": {
-    "label": "中文",
-    "value": "-zh",
-    "markdown-react-code-preview-loader": "README-zh",
-    "App": "App-zh"
-  },
-  "en": {
-    "label": "英文",
-    "value": "",
-    "markdown-react-code-preview-loader": "README",
-    "App": "App"
-  }
-}
+["zh", "en"]
diff --git a/website/src/language/locale/en.json b/website/src/language/locale/en.json
new file mode 100644
index 0000000..4f434b9
--- /dev/null
+++ b/website/src/language/locale/en.json
@@ -0,0 +1,7 @@
+{
+  "md-language-name": "",
+  "zh": "chinese",
+  "en": "english",
+  "docuemnt": "Docuemnt",
+  "example": "Example"
+}
diff --git a/website/src/language/locale/zh.json b/website/src/language/locale/zh.json
new file mode 100644
index 0000000..d703f81
--- /dev/null
+++ b/website/src/language/locale/zh.json
@@ -0,0 +1,7 @@
+{
+  "md-language-name": "-zh",
+  "zh": "中文",
+  "en": "英文",
+  "docuemnt": "文档",
+  "example": "案例"
+}
diff --git a/website/src/pages/docs/index.tsx b/website/src/pages/docs/index.tsx
index f8874fd..1079e12 100644
--- a/website/src/pages/docs/index.tsx
+++ b/website/src/pages/docs/index.tsx
@@ -2,7 +2,7 @@ import MarkdownPreview from '@uiw/react-markdown-preview';
 import useMdData from './../../components/useMdData';
 export function HomePage() {
   const mdData = useMdData((path) => {
-    return import(`markdown-react-code-preview-loader/${path}.md`);
-  }, 'markdown-react-code-preview-loader');
+    return import(`markdown-react-code-preview-loader/README${path}.md`);
+  });
   return <MarkdownPreview source={mdData.source} />;
 }
diff --git a/website/src/pages/example/index.tsx b/website/src/pages/example/index.tsx
index 85590d1..ad7789d 100644
--- a/website/src/pages/example/index.tsx
+++ b/website/src/pages/example/index.tsx
@@ -14,7 +14,7 @@ const getMetaData = (meta: string) => {
 };
 
 export function ExamplePage() {
-  const mdData = useMdData((path) => import(`./${path}.md`), 'App');
+  const mdData = useMdData((path) => import(`./App${path}.md`));
   return (
     <div>
       <MarkdownPreview