From 66a731b4c2a330848d2f05605b7e3247a32002d0 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 7 Jul 2017 16:09:02 +0800
Subject: [PATCH] site: open demo in codepen with prefill code, close #5140

---
 site/theme/en-US.js                  |  1 +
 site/theme/static/demo.less          | 19 +++++++++++++++++++
 site/theme/template/Content/Demo.jsx | 25 +++++++++++++++++++++++++
 site/theme/zh-CN.js                  |  1 +
 4 files changed, 46 insertions(+)

diff --git a/site/theme/en-US.js b/site/theme/en-US.js
index 662e502c27..7380ed609f 100644
--- a/site/theme/en-US.js
+++ b/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',
diff --git a/site/theme/static/demo.less b/site/theme/static/demo.less
index 1363643a3a..1d8cd0cf8b 100644
--- a/site/theme/static/demo.less
+++ b/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;
diff --git a/site/theme/template/Content/Demo.jsx b/site/theme/template/Content/Demo.jsx
index 3d23ef8a4c..271e75f558 100644
--- a/site/theme/template/Content/Demo.jsx
+++ b/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>
           {
diff --git a/site/theme/zh-CN.js b/site/theme/zh-CN.js
index b0c2be07e5..ee1f0ab1a3 100644
--- a/site/theme/zh-CN.js
+++ b/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': '开发指引',