docs: correct code iframe values (#38603)

* docs: correct code iframe values

* chore: remove useless migrate script

Co-authored-by: lijianan <574980606@qq.com>
This commit is contained in:
Peach 2022-11-17 11:30:20 +08:00 committed by GitHub
parent 43c14bb70e
commit 415cc833cf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 28 additions and 234 deletions

View File

@ -24,7 +24,7 @@ Alert component for feedback.
<code src="./demo/description.tsx">Description</code>
<code src="./demo/icon.tsx">Icon</code>
<code src="./demo/close-text.tsx">Customized Close Text</code>
<code src="./demo/banner.tsx" iframe>Banner</code>
<code src="./demo/banner.tsx" iframe="250">Banner</code>
<code src="./demo/loop-banner.tsx">Loop Banner</code>
<code src="./demo/smooth-closed.tsx">Smoothly Unmount</code>
<code src="./demo/error-boundary.tsx">ErrorBoundary</code>

View File

@ -25,7 +25,7 @@ group:
<code src="./demo/description.tsx">含有辅助性文字介绍</code>
<code src="./demo/icon.tsx">图标</code>
<code src="./demo/close-text.tsx">自定义关闭</code>
<code src="./demo/banner.tsx" iframe>顶部公告</code>
<code src="./demo/banner.tsx" iframe="250">顶部公告</code>
<code src="./demo/loop-banner.tsx">轮播的公告</code>
<code src="./demo/smooth-closed.tsx">平滑地卸载</code>
<code src="./demo/error-boundary.tsx">React 错误处理</code>

View File

@ -17,7 +17,7 @@ group: Other
## Examples
<code src="./demo/basic.tsx">Basic</code>
<code src="./demo/custom.tsx" iframe>Custom style</code>
<code src="./demo/custom.tsx" iframe="400">Custom style</code>
## API

View File

@ -18,7 +18,7 @@ group: 其他
## 代码演示
<code src="./demo/basic.tsx">基本</code>
<code src="./demo/custom.tsx" iframe>自定义样式</code>
<code src="./demo/custom.tsx" iframe="400">自定义样式</code>
## API

View File

@ -49,7 +49,7 @@ return (
<code src="./demo/basic.tsx">Basic Usage</code>
<code src="./demo/withIcon.tsx">With an Icon</code>
<code src="./demo/react-router.tsx" iframe>react-router V6</code>
<code src="./demo/react-router.tsx" iframe="200">react-router V6</code>
<code src="./demo/separator.tsx">Configuring the Separator</code>
<code src="./demo/overlay.tsx">Bread crumbs with drop down menu</code>
<code src="./demo/separator-component.tsx">Configuring the Separator</code>

View File

@ -50,7 +50,7 @@ return (
<code src="./demo/basic.tsx">基本</code>
<code src="./demo/withIcon.tsx">带有图标的</code>
<code src="./demo/react-router.tsx" iframe>react-router V6</code>
<code src="./demo/react-router.tsx" iframe="200">react-router V6</code>
<code src="./demo/separator.tsx">分隔符</code>
<code src="./demo/overlay.tsx">带下拉菜单的面包屑</code>
<code src="./demo/separator-component.tsx">分隔符</code>

View File

@ -16,14 +16,14 @@ FloatButton. Available since `5.0.0`.
## Examples
<code src="./demo/basic.tsx" iframe>Basic</code>
<code src="./demo/type.tsx" iframe>Type</code>
<code src="./demo/shape.tsx" iframe>Shape</code>
<code src="./demo/description.tsx" iframe>Description</code>
<code src="./demo/tooltip.tsx" iframe>FloatButton with tooltip</code>
<code src="./demo/group.tsx" iframe="300">FloatButton Group</code>
<code src="./demo/group-menu.tsx" iframe>Menu mode</code>
<code src="./demo/back-top.tsx" iframe>BackTop</code>
<code src="./demo/basic.tsx" iframe="360">Basic</code>
<code src="./demo/type.tsx" iframe="360">Type</code>
<code src="./demo/shape.tsx" iframe="360">Shape</code>
<code src="./demo/description.tsx" iframe="360">Description</code>
<code src="./demo/tooltip.tsx" iframe="360">FloatButton with tooltip</code>
<code src="./demo/group.tsx" iframe="360">FloatButton Group</code>
<code src="./demo/group-menu.tsx" iframe="360">Menu mode</code>
<code src="./demo/back-top.tsx" iframe="360">BackTop</code>
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
## API

View File

@ -17,14 +17,14 @@ demo:
## 代码演示
<code src="./demo/basic.tsx" iframe>基本</code>
<code src="./demo/type.tsx" iframe>类型</code>
<code src="./demo/shape.tsx" iframe>形状</code>
<code src="./demo/description.tsx" iframe>描述</code>
<code src="./demo/tooltip.tsx" iframe>含有气泡卡片的悬浮按钮</code>
<code src="./demo/group.tsx" iframe="300">浮动按钮组</code>
<code src="./demo/group-menu.tsx" iframe>菜单模式</code>
<code src="./demo/back-top.tsx" iframe>回到顶部</code>
<code src="./demo/basic.tsx" iframe="360">基本</code>
<code src="./demo/type.tsx" iframe="360">类型</code>
<code src="./demo/shape.tsx" iframe="360">形状</code>
<code src="./demo/description.tsx" iframe="360">描述</code>
<code src="./demo/tooltip.tsx" iframe="360">含有气泡卡片的悬浮按钮</code>
<code src="./demo/group.tsx" iframe="360">浮动按钮组</code>
<code src="./demo/group-menu.tsx" iframe="360">菜单模式</code>
<code src="./demo/back-top.tsx" iframe="360">回到顶部</code>
<code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
## API

View File

@ -61,11 +61,11 @@ Style of a navigation should conform to its level.
<code src="./demo/top.tsx">Header-Content-Footer</code>
<code src="./demo/top-side-2.tsx">Header Sider 2</code>
<code src="./demo/top-side.tsx">Header-Sider</code>
<code src="./demo/side.tsx" iframe>Sider</code>
<code src="./demo/side.tsx" iframe="360">Sider</code>
<code src="./demo/custom-trigger.tsx">Custom trigger</code>
<code src="./demo/responsive.tsx">Responsive</code>
<code src="./demo/fixed.tsx" iframe>Fixed Header</code>
<code src="./demo/fixed-sider.tsx" iframe>Fixed Sider</code>
<code src="./demo/fixed.tsx" iframe="360">Fixed Header</code>
<code src="./demo/fixed-sider.tsx" iframe="360">Fixed Sider</code>
<code src="./demo/custom-trigger-debug.tsx" debug>Custom trigger debug</code>
## API

View File

@ -62,11 +62,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg
<code src="./demo/top.tsx">上中下布局</code>
<code src="./demo/top-side-2.tsx">顶部-侧边布局-通栏</code>
<code src="./demo/top-side.tsx">顶部-侧边布局</code>
<code src="./demo/side.tsx" iframe>侧边布局</code>
<code src="./demo/side.tsx" iframe="360">侧边布局</code>
<code src="./demo/custom-trigger.tsx">自定义触发器</code>
<code src="./demo/responsive.tsx">响应式布局</code>
<code src="./demo/fixed.tsx" iframe>固定头部</code>
<code src="./demo/fixed-sider.tsx" iframe>固定侧边栏</code>
<code src="./demo/fixed.tsx" iframe="360">固定头部</code>
<code src="./demo/fixed-sider.tsx" iframe="360">固定侧边栏</code>
<code src="./demo/custom-trigger-debug.tsx" debug>自定义触发器 Debug</code>
## API

View File

@ -1,206 +0,0 @@
/* eslint-disable no-console */
const fs = require('fs-extra');
// const glob = require('glob');
const chalk = require('chalk');
const path = require('path');
const yaml = require('dumi/node_modules/js-yaml');
// 检查 ~demo 文件夹是否存在,存在则说明是来自 next 的合并
// const tmpFolder = `~demo`;
// ==============================================================================
// Log 先记录flush 后才打印,以免打印过多无用信息
let consoleLines = [];
let consoleOffset = 0;
function logCache(...args) {
consoleLines.push(args);
}
function logClear() {
consoleLines = [];
}
function logFlush() {
consoleLines.forEach(args => {
const txt = args
.map(arg => (arg && typeof arg === 'object' ? JSON.stringify(arg, null, 2) : arg))
.join(' ');
const lines = txt.split(/[\n\r]+/);
lines.forEach(line => {
console.log(' '.repeat(consoleOffset), line);
});
});
logClear();
}
function log(...args) {
logCache(...args);
logFlush();
}
function logOffset(offset) {
consoleOffset = offset;
}
// ==============================================================================
// 执行迁移
// if (fs.existsSync(tmpFolder)) {
// let demoFileCount = 0;
// let apiFileCount = 0;
//
// const files = glob
// .sync(path.join(tmpFolder, `components/**`))
// .filter(file => file.endsWith('.md'));
// log('存在 ~demo 文件夹,先做迁移', files.length, '个文件');
//
// files.forEach(file => {
// const filePath = file.split(path.sep).splice(1).join(path.sep);
// if (fs.statSync(filePath).isDirectory()) {
// return;
// }
//
// if (!filePath.startsWith('components')) {
// throw new Error('Tmp demo path not correct');
// }
//
// fs.ensureDirSync(path.dirname(filePath));
// if (filePath.startsWith('components/overview')) {
// // overview 文件不需要迁移
// return;
// }
//
// if (filePath.endsWith('.en-US.md') || filePath.endsWith('.zh-CN.md')) {
// // 保留 meta 信息
// const md = fs.readFileSync(filePath, 'utf-8');
// const [, frontmatter] = md.match(/^(---[^]+?\n---)/);
// const legacyMD = fs.readFileSync(file, 'utf-8');
// fs.writeFileSync(filePath, legacyMD.replace(/^(---[^]+?\n---)/, frontmatter));
// } else {
// fs.copyFileSync(file, filePath);
// }
//
// if (filePath.includes('demo')) {
// demoFileCount += 1;
// } else {
// apiFileCount += 1;
// }
// });
//
// log('迁移完成,共迁移文件数:', apiFileCount, '个介绍文档', demoFileCount, '个 demo');
// }
// ==============================================================================
// 有一部分转换需要 hardcode这里就不做分析简单替换了
function hardcodeMD(content) {
return content.replace(/```.*\n.*IconDisplay.*\n.*mountNode.*\n```/, '<IconSearch></IconSearch>');
}
// 重新生成所有的 Demo 文件
const componentsPath = path.join(__dirname, '../components');
const components = fs
.readdirSync(componentsPath)
.filter(d => fs.existsSync(path.join(componentsPath, d, 'demo')));
components.forEach(component => {
const demoPath = path.join(componentsPath, component, 'demo');
const demos = fs.readdirSync(demoPath).filter(demo => demo.endsWith('.md'));
const codes = demos
.filter(demo => {
const mdPath = path.join(demoPath, demo);
const md = fs.readFileSync(mdPath, 'utf-8');
return md.match(/^(---[^]+?\n---)\s+([^]+?)?\s+(```(?:tsx|jsx)[^]+?\n```)([^]*)$/);
})
.map(demo => {
const mdPath = path.join(demoPath, demo);
const md = fs.readFileSync(mdPath, 'utf-8');
const [, frontmatter, content, code, extra] = md.match(
/^(---[^]+?\n---)\s+([^]+?)?\s+(```(?:tsx|jsx)[^]+?\n```)([^]*)$/,
);
const meta = yaml.load(frontmatter.replace(/^---|---$/g, ''));
const name = path.basename(demo, '.md');
return {
name,
meta,
html: {
'zh-CN': `<code src="./demo/${name}.tsx"${meta.debug ? ' debug' : ''}${
meta.iframe ? ' iframe' : ''
}>${meta.title['zh-CN']}</code>`,
'en-US': `<code src="./demo/${name}.tsx"${meta.debug ? ' debug' : ''}${
meta.iframe ? ' iframe' : ''
}>${meta.title['en-US']}</code>`,
},
md: content + extra,
code: code.replace(/^```(tsx|jsx)\n|```$/g, ''),
};
})
.sort((a, b) => a.meta.order - b.meta.order);
const zhPath = path.join(componentsPath, component, 'index.zh-CN.md');
const enPath = path.join(componentsPath, component, 'index.en-US.md');
const zh = fs.readFileSync(zhPath, 'utf-8');
const en = fs.readFileSync(enPath, 'utf-8');
// if (!/cols: /.test(zh)) {
// zh = zh.replace(/(\n---)/, '\ndemo:\n cols: 2$1');
// }
//
// if (!/cols: /.test(en)) {
// en = en.replace(/(\n---)/, '\ndemo:\n cols: 2$1');
// }
logOffset(0);
log();
log(chalk.yellow('Update', component, ':'));
logOffset(1);
// 中文
const zhContent = zh
.replace(/(\n## api)/i, `${codes.map(code => code.html['zh-CN']).join('\n')}$1`)
.replace(/\ncols: 2(.*?)(\n---)/, '$1\ndemo:\n cols: 2$2')
.replace(/\ncols: 1/, '');
fs.writeFileSync(zhPath, hardcodeMD(zhContent), 'utf-8');
// 英文
const enContent = en
.replace(/(\n## api)/i, `${codes.map(code => code.html['en-US']).join('\n')}$1`)
.replace(/\ncols: 2(.*?)(\n---)/, '$1\ndemo:\n cols: 2$2')
.replace(/\ncols: 1/, '');
fs.writeFileSync(enPath, hardcodeMD(enContent), 'utf-8');
log('写入', component, 'demo & demo md...');
codes.forEach(code => {
// const extraMeta = Object.keys(code.meta).filter(
// key => !['title', 'order', 'debug'].includes(key),
// );
// if (extraMeta.length) {
// log('写入额外的 meta', code.meta);
// code.code = `/*\n${extraMeta.map(key => ` * ${key}: ${code.meta[key]}`).join('\n')}\n */\n\n${
// code.code
// }`;
// }
let importReactContent = "import React from 'react';";
const importReactReg = /import React(\D*)from 'react';\n/;
const matchImportReact = code.code.match(importReactReg);
if (matchImportReact) {
[importReactContent] = matchImportReact;
code.code = code.code.replace(importReactReg, '').trim();
}
fs.writeFileSync(
path.join(demoPath, `${code.name}.tsx`),
`${importReactContent}${code.code}\n`,
'utf-8',
);
if (code.md.trim()) {
fs.writeFileSync(path.join(demoPath, `${code.name}.md`), code.md, 'utf-8');
} else {
fs.unlinkSync(path.join(demoPath, `${code.name}.md`));
}
});
});