fix:调整多语言加载

Author: SunLxy

website/src/components/useMdData/index.ts

@@ -2,15 +2,15 @@ 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 }>) => {
+const useMdData = (path: (lang: string) => Promise<{ default: CodeBlockData }>, name: string = 'language') => {
   const init = useTranslation();
   const [mdData, setMdData] = useState<CodeBlockData>({
     source: '',
     components: {},
     codeBlock: {},
     languages: {},
   });
-  const lang = init.t('language');
+  const lang = init.t(name);
   useEffect(() => {
     const getMd = async () => {
       try {

website/src/language/i18n.ts

@@ -6,9 +6,11 @@ import LanguageData from './language.json';
 // 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,
     },
   };
 });

website/src/language/language.json

@@ -1,10 +1,14 @@
 {
   "zh": {
     "label": "中文",
-    "value": "-zh"
+    "value": "-zh",
+    "markdown-react-code-preview-loader": "README-zh",
+    "App": "App-zh"
   },
   "en": {
     "label": "英文",
-    "value": ""
+    "value": "",
+    "markdown-react-code-preview-loader": "README",
+    "App": "App"
   }
 }

website/src/pages/docs/index.tsx

@@ -1,6 +1,8 @@
 import MarkdownPreview from '@uiw/react-markdown-preview';
 import useMdData from './../../components/useMdData';
 export function HomePage() {
-  const mdData = useMdData((lang) => import(`markdown-react-code-preview-loader/README${lang}.md`));
+  const mdData = useMdData((path) => {
+    return import(`markdown-react-code-preview-loader/${path}.md`);
+  }, 'markdown-react-code-preview-loader');
   return <MarkdownPreview source={mdData.source} />;
 }

website/src/pages/example/index.tsx

@@ -14,7 +14,7 @@ const getMetaData = (meta: string) => {
 };
 
 export function ExamplePage() {
-  const mdData = useMdData((lang) => import(`./App${lang}.md`));
+  const mdData = useMdData((path) => import(`./${path}.md`), 'App');
   return (
     <div>
       <MarkdownPreview