mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

docs: 🚹 improve riddle/codesandbox/codepen (#27546)

Browse Source 
* docs: 📝 update riddle template

* docs: improve icon
This commit is contained in:
偏右 2020-11-04 18:04:38 +08:00 committed by GitHub
parent d01aa2539e
commit 234cc1ea24
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
site/theme/template/Content/Demo/index.jsx
View File

@ -163,12 +163,11 @@ class Demo extends React.Component {
const localizeIntro = content[locale] || content;
const introChildren = utils.toReactComponent(['div'].concat(localizeIntro));
const highlightClass = classNames({
'highlight-wrapper': true,
const highlightClass = classNames('highlight-wrapper', {
'highlight-wrapper-expand': codeExpand,
});
const prefillStyle = `@import 'antd/dist/antd.css';\n\n${style || ''}`.replace(
const prefillStyle = `@import '~antd/dist/antd.css';\n\n${style || ''}`.replace(
new RegExp(`#${meta.id}\\s*`, 'g'),
'',
);
@ -187,8 +186,27 @@ class Demo extends React.Component {
const sourceCode = this.getSourceCode();
const dependencies = sourceCode.split('\n').reduce(
(acc, line) => {
const matches = line.match(/import .+? from '(.+)';$/);
if (matches && matches[1] && !line.includes('antd')) {
const paths = matches[1].split('/');
if (paths.length) {
const dep = paths[0].startsWith('@') ? `${paths[0]}/${paths[1]}` : paths[0];
acc[dep] = 'latest';
}
}
return acc;
},
// eslint-disable-next-line no-undef
{ antd: antdReproduceVersion },
);
dependencies['@ant-design/icons'] = 'latest';
const codepenPrefillConfig = {
title: `${localizedTitle} - Ant Design Demo`,
title: `${localizedTitle} - antd@${dependencies.antd}`,
html,
js: sourceCode
.replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'antd';/, 'const { $1 } = antd;')
@ -218,29 +236,20 @@ class Demo extends React.Component {
.join(';'),
js_pre_processor: 'typescript',
};
const riddlePrefillConfig = {
title: `${localizedTitle} - Ant Design Demo`,
title: `${localizedTitle} - antd@${dependencies.antd}`,
js: sourceCode,
css: prefillStyle,
json: JSON.stringify(
{
name: 'antd-demo',
dependencies,
},
null,
2,
),
};
const dependencies = sourceCode.split('\n').reduce(
(acc, line) => {
const matches = line.match(/import .+? from '(.+)';$/);
if (matches && matches[1] && !line.includes('antd')) {
const paths = matches[1].split('/');
if (paths.length) {
const dep = paths[0].startsWith('@') ? `${paths[0]}/${paths[1]}` : paths[0];
acc[dep] = 'latest';
}
}
return acc;
},
// eslint-disable-next-line no-undef
{ antd: antdReproduceVersion },
);
dependencies['@ant-design/icons'] = 'latest';
// Reorder source code
let parsedSourceCode = sourceCode;
@ -267,17 +276,16 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
.replace('<style>', '');
const codesandboxPackage = {
name: `${localizedTitle} - Ant Design Demo`,
version: '1.0.0',
title: `${localizedTitle} - antd@${dependencies.antd}`,
main: 'index.js',
dependencies: {
...dependencies,
react: '^16.12.0',
'react-dom': '^16.12.0',
'react-scripts': '^3.0.1',
react: '^16.14.0',
'react-dom': '^16.14.0',
'react-scripts': '^4.0.0',
},
devDependencies: {
typescript: '^3.8.2',
typescript: '^4.0.5',
},
scripts: {
start: 'react-scripts start',
@ -298,7 +306,7 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
},
};
const stackblitzPrefillConfig = {
title: `${localizedTitle} - Ant Design Demo`,
title: `${localizedTitle} - antd@${dependencies.antd}`,
template: 'create-react-app',
dependencies,
files: {
@ -418,7 +426,7 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
src={
theme === 'dark'
? 'https://gw.alipayobjects.com/zos/antfincdn/btT3qDZn1U/wSAkBuJFbdxsosKKpqyq.svg'
: 'https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg'
: 'https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg'
}
className={codeExpand ? 'code-expand-icon-hide' : 'code-expand-icon-show'}
onClick={() => this.handleCodeExpand(meta.id)}
@ -428,7 +436,7 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
src={
theme === 'dark'
? 'https://gw.alipayobjects.com/zos/antfincdn/CjZPwcKUG3/OpROPHYqWmrMDBFMZtKF.svg'
: 'https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg'
: 'https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg'
}
className={codeExpand ? 'code-expand-icon-show' : 'code-expand-icon-hide'}
onClick={() => this.handleCodeExpand(meta.id)}