feat: 文档支持国际化

Tencent · May 20, 2022 · eecca06 · eecca06
1 parent 1c6bba4
commit eecca06
Show file tree

Hide file tree

Showing 10 changed files with 538 additions and 546 deletions.
diff --git a/examples/button/button_en.md → examples/button/button.en-US.md b/examples/button/button_en.md → examples/button/button.en-US.md
diff --git a/site/plugin-tdoc/demo.js b/site/plugin-tdoc/demo.js
@@ -4,11 +4,11 @@ import path from 'path';
 export default function renderDemo(md, container) {
   md.use(container, 'demo', {
     validate(params) {
-      return params.trim().match(/^demo\s+([\\/.\w-]+)(\s+(.+?))?(\s+--dev)?$/);
+      return params.trim().match(/^demo\s+([\\/.\w-]+)(\s+(.+?))?$/);
     },
     render(tokens, idx) {
       if (tokens[idx].nesting === 1) {
-        const match = tokens[idx].info.trim().match(/^demo\s+([\\/.\w-]+)(\s+(.+?))?(\s+--dev)?$/);
+        const match = tokens[idx].info.trim().match(/^demo\s+([\\/.\w-\.]+)(\s+(.+?))?$/);
         const [, demoPath, componentName = ''] = match;
         const demoPathOnlyLetters = demoPath.replace(/[^a-zA-Z\d]/g, '');
         const demoName = path.basename(demoPath);

diff --git a/site/plugin-tdoc/md-to-vue.js b/site/plugin-tdoc/md-to-vue.js
@@ -145,7 +145,7 @@ function customRender({ source, file, md }) {
   };
 
   // md filename
-  const reg = file.match(/examples\/(\w+-?\w+)\/(\w+-?\w+)\.md/);
+  const reg = file.match(/([\w-]+)\.?([\w-]+)?\.md/);
   const componentName = reg && reg[1];
 
   // split md
@@ -164,7 +164,6 @@ function customRender({ source, file, md }) {
     designMd: '<td-doc-empty></td-doc-empty>',
   };
 
-
   // 渲染 live demo
   if (pageData.usage && pageData.isComponent) {
     const usageObj = compileUsage({

diff --git a/site/plugin-tdoc/transforms.js b/site/plugin-tdoc/transforms.js
@@ -10,31 +10,44 @@ let demoCodesImports = {};
 export default {
   before({ source, file }) {
     const resourceDir = path.dirname(file);
-    const reg = file.match(/examples\/(\w+-?\w+)\/(\w+-?\w+)\.md/);
-    const name = reg && reg[1];
+    const reg = file.match(/([\w-]+)\.?([\w-]+)?\.md/);
+    const fileName = reg && reg[0];
+    const componentName = reg && reg[1];
+    const localeName = reg && reg[2];
     demoImports = {};
     demoCodesImports = {};
 
     // 统一换成 common 公共文档内容
-    if (name && source.includes(':: BASE_DOC ::')) {
-      const docPath = path.resolve(__dirname, `../../src/_common/docs/web/api/${name}.md`);
-      if (fs.existsSync(docPath)) {
-        const baseDoc = fs.readFileSync(docPath, 'utf-8');
-        source = source.replace(':: BASE_DOC ::', baseDoc);
+    if (fileName && source.includes(':: BASE_DOC ::')) {
+      const localeDocPath = path.resolve(__dirname, `../../src/_common/docs/web/api/${fileName}`);
+      const defaultDocPath = path.resolve(__dirname, `../../src/_common/docs/web/api/${componentName}.md`);
+      let baseDoc = '';
+      if (fs.existsSync(localeDocPath)) {
+        // 优先载入语言版本
+        baseDoc = fs.readFileSync(localeDocPath, 'utf-8');
+      } else if (fs.existsSync(defaultDocPath)) {
+        // 回退中文默认版本
+        baseDoc = fs.readFileSync(defaultDocPath, 'utf-8');
       } else {
-        console.error(`未找到 ${docPath} 文件`);
+        console.error(`未找到 ${defaultDocPath} 文件`);
       }
+      source = source.replace(':: BASE_DOC ::', baseDoc);
     }
 
     // 替换成对应 demo 文件
     source = source.replace(/\{\{\s+(.+)\s+\}\}/g, (demoStr, demoFileName) => {
-      const demoPath = path.resolve(resourceDir, `./demos/${demoFileName}.vue`);
-      if (!fs.existsSync(demoPath)) {
-        console.log('\x1B[36m%s\x1B[0m', `${name} 组件需要实现 demos/${demoFileName}.vue 示例!`);
+      const defaultDemoPath = path.resolve(resourceDir, `./demos/${demoFileName}.vue`);
+      const localeDemoPath = path.resolve(resourceDir, `./demos/${demoFileName}.${localeName}.vue`);
+      // localeDemo 优先级最高
+      if (fs.existsSync(localeDemoPath))
+        return `\n::: demo demos/${demoFileName}.${localeName} ${componentName}\n:::\n`;
+
+      if (!fs.existsSync(defaultDemoPath)) {
+        console.log('\x1B[36m%s\x1B[0m', `${componentName} 组件需要实现 demos/${demoFileName}.vue 示例!`);
         return '\n<h3>DEMO (🚧建设中）...</h3>';
       }
 
-      return `\n::: demo demos/${demoFileName} ${name}\n:::\n`;
+      return `\n::: demo demos/${demoFileName} ${componentName}\n:::\n`;
     });
 
     source.replace(/:::\s*demo\s+([\\/.\w-]+)/g, (demoStr, relativeDemoPath) => {
@@ -65,7 +78,7 @@ export default {
       demoDefsStr,
       demoCodesDefsStr,
       demoInstallStr,
-      demoCodeInstallStr
+      demoCodeInstallStr,
     });
 
     return sfc;