fix:单个文件一种语言

SunLxy · May 7, 2022 · 52d6339 · 52d6339
1 parent 5485735
commit 52d6339
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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