feat: code add stackblitz (#19714)

* feat: code add stackblitz

* fix: style

* Update site/theme/static/demo.less

Co-Authored-By: 偏右 <afc163@gmail.com>

package.json

@@ -147,6 +147,7 @@
     "@ant-design/tools": "^8.0.4",
     "@packtracker/webpack-plugin": "^2.0.1",
     "@sentry/browser": "^5.4.0",
+    "@stackblitz/sdk": "^1.3.0",
     "@types/classnames": "^2.2.8",
     "@types/gtag.js": "^0.0.3",
     "@types/lodash": "^4.14.139",

site/theme/en-US.js

@@ -24,6 +24,7 @@ module.exports = {
     'app.demo.code.hide': 'Hide code',
     'app.demo.codepen': 'Open in CodePen',
     'app.demo.codesandbox': 'Open in CodeSandbox',
+    'app.demo.stackblitz': 'Open in Stackblitz',
     'app.demo.riddle': 'Open in Riddle',
     'app.home.slogan': "The world's second most popular React UI framework",
     'app.home.introduce':

site/theme/static/demo.less

@@ -193,6 +193,16 @@
     }
   }
 
+  &-code-action {
+    width: 20px;
+    height: 20px;
+    color: @site-text-color-secondary;
+    font-size: 16px;
+    line-height: 18px;
+    cursor: pointer;
+    transition: all 0.24s;
+  }
+
   &-code-copy {
     width: 20px;
     height: 20px;

site/theme/template/Content/Demo.jsx

@@ -6,6 +6,7 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import classNames from 'classnames';
 import LZString from 'lz-string';
 import { Icon, Tooltip } from 'antd';
+import stackblitzSdk from '@stackblitz/sdk';
 import EditButton from './EditButton';
 import ErrorBoundary from './ErrorBoundary';
 import BrowserFrame from '../BrowserFrame';
@@ -98,8 +99,16 @@ class Demo extends React.Component {
 
   render() {
     const {
-      meta, src, content, preview, highlightedCode, style,
-      highlightedStyle, expand, utils, intl: { locale },
+      meta,
+      src,
+      content,
+      preview,
+      highlightedCode,
+      style,
+      highlightedStyle,
+      expand,
+      utils,
+      intl: { locale },
     } = this.props;
     const { copied, copyTooltipVisible } = this.state;
     if (!this.liveDemo) {
@@ -181,30 +190,34 @@ class Demo extends React.Component {
       },
       { react: 'latest', 'react-dom': 'latest', antd: 'latest' },
     );
-    const codesanboxPrefillConfig = {
-      files: {
-        'package.json': {
-          content: {
-            dependencies,
-          },
-        },
-        'index.css': {
-          content: (style || '').replace(new RegExp(`#${meta.id}\\s*`, 'g'), ''),
-        },
-        'index.js': {
-          content: `
+    const indexJsContent = `
 import React from 'react';
 import ReactDOM from 'react-dom';
 import 'antd/dist/antd.css';
 import './index.css';
 ${sourceCode.replace('mountNode', "document.getElementById('container')")}
-          `,
-        },
+          `;
+    const indexCssContent = (style || '').replace(new RegExp(`#${meta.id}\\s*`, 'g'), '');
+    const codesanboxPrefillConfig = {
+      files: {
+        'package.json': { content: { dependencies } },
+        'index.css': { content: indexCssContent },
+        'index.js': { content: indexJsContent },
         'index.html': {
           content: html,
         },
       },
     };
+    const stackblitzPrefillConfig = {
+      title: `${localizedTitle} - Ant Design Demo`,
+      template: 'create-react-app',
+      dependencies,
+      files: {
+        'index.css': indexCssContent,
+        'index.js': indexJsContent,
+        'index.html': html,
+      },
+    };
     return (
       <section className={codeBoxClass} id={meta.id}>
         <section className="code-box-demo">
@@ -276,6 +289,16 @@ ${sourceCode.replace('mountNode', "document.getElementById('container')")}
                 />
               </Tooltip>
             </form>
+            <Tooltip title={<FormattedMessage id="app.demo.stackblitz" />}>
+              <span
+                className="code-box-code-action"
+                onClick={() => {
+                  stackblitzSdk.openProject(stackblitzPrefillConfig);
+                }}
+              >
+                <Icon type="thunderbolt" />
+              </span>
+            </Tooltip>
             <CopyToClipboard text={sourceCode} onCopy={() => this.handleCodeCopied(meta.id)}>
               <Tooltip
                 visible={copyTooltipVisible}

site/theme/zh-CN.js

@@ -24,6 +24,7 @@ module.exports = {
     'app.demo.code.hide': '收起代码',
     'app.demo.codepen': '在 CodePen 中打开',
     'app.demo.codesandbox': '在 CodeSandbox 中打开',
+    'app.demo.stackblitz': '在 Stackblitz 中打开',
     'app.demo.riddle': '在 Riddle 中打开',
     'app.home.slogan': '一个 UI 设计语言',
     'app.home.introduce':