site: open demo in codepen with prefill code, close #5140

site/theme/en-US.js

@@ -18,6 +18,7 @@ module.exports = {
     'app.component.examples': 'Examples',
     'app.demo.copy': 'Copy code',
     'app.demo.copied': 'Copied!',
+    'app.demo.codepen': 'Open in codepen',
     'app.home.slogan': 'A UI Design Language',
     'app.home.introduce': 'Introduce',
     'app.home.start': 'Get Started',

site/theme/static/demo.less

@@ -185,10 +185,29 @@
     }
   }
 
+  &-codepen {
+    position: absolute;
+    top: 10px;
+    right: 40px;
+    background: transparent url("https://gw.alipayobjects.com/zos/rmsportal/bsyXYJlnerAkEMGKtTpa.svg") center / 14px no-repeat;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    opacity: 0;
+    transition: all .3s;
+    border: 0;
+    text-indent: -9999px;
+    overflow: hidden;
+  }
+
   .highlight-wrapper:hover &-code-copy {
     opacity: 1;
   }
 
+  .highlight-wrapper:hover &-codepen {
+    opacity: .66;
+  }
+
   pre {
     margin: 0;
     width: auto;

site/theme/template/Content/Demo.jsx

@@ -104,6 +104,25 @@ export default class Demo extends React.Component {
       'highlight-wrapper': true,
       'highlight-wrapper-expand': codeExpand,
     });
+
+    const codepenPrefillConfig = {
+      title: `${localizedTitle} - Ant Design Demo`,
+      html: `<div id="container" style="padding: 24px"></div>
+<script>
+  var mountNode = document.getElementById('container');
+</script>`,
+      js: state.sourceCode.replace(/import\s+\{\s+(.*)\s+\}\s+from\s+'antd';/, 'const { $1 } = antd;'),
+      css: style,
+      editors: '001',
+      css_external: 'https://unpkg.com/antd/dist/antd.css',
+      js_external: [
+        'react/dist/react.js',
+        'react-dom/dist/react-dom.js',
+        'moment/min/moment-with-locales.js',
+        'antd/dist/antd-with-locales.js',
+      ].map(url => `https://unpkg.com/${url}`).join(';'),
+      js_pre_processor: 'typescript',
+    };
     return (
       <section className={codeBoxClass} id={meta.id}>
         <section className="code-box-demo">
@@ -147,6 +166,12 @@ export default class Demo extends React.Component {
                 />
               </Tooltip>
             </CopyToClipboard>
+            <form action="https://codepen.io/pen/define" method="POST" target="_blank">
+              <input type="hidden" name="data" value={JSON.stringify(codepenPrefillConfig)} />
+              <Tooltip title={<FormattedMessage id="app.demo.codepen" />}>
+                <input type="submit" value="Create New Pen with Prefilled Data" className="code-box-codepen" />
+              </Tooltip>
+            </form>
             {props.utils.toReactComponent(highlightedCode)}
           </div>
           {

site/theme/zh-CN.js

@@ -18,6 +18,7 @@ module.exports = {
     'app.component.examples': '代码演示',
     'app.demo.copy': '复制代码',
     'app.demo.copied': '复制成功',
+    'app.demo.codepen': '在 codepen 中打开',
     'app.home.slogan': '一个 UI 设计语言',
     'app.home.introduce': '设计规范',
     'app.home.start': '开发指引',