website: update demo preview issue.

Author: jaywcjlove

website/App.css

@@ -1,13 +1,3 @@
-/* body {
-  margin: 0;
-  padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-} */
-
 .App-header {
   background-color: #282c34;
   min-height: 60vh;
@@ -30,36 +20,4 @@
 .App-header p {
   max-width: 702px;
   padding: 25px 0 27px;
-}
-/* .App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #09d3ac;
-}
-
-.info {
-  text-align: left;
-  font-size: calc(10px + 2vmin);
-  width: 820px;;
-  padding-top: 10px;
-  overflow: auto;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-} */
+}

website/components/Markdown/Code.tsx

@@ -2,53 +2,62 @@ import CodePreview, { CodePreviewProps } from '@uiw/react-code-preview';
 
 export interface CodeProps extends CodePreviewProps {
   code: string;
-  codeSandbox: boolean;
+  version: string;
   codePen: boolean;
+  codeSandbox?: boolean;
   dependencies: any;
 }
 
-export default function Code({ dependencies, codePen, codeSandbox, ...other }: CodeProps) {
+export default function Code({ version, dependencies, codePen, codeSandbox, ...other }: CodeProps) {
   const props: CodePreviewProps = { ...other };
+  if (codePen) {
+    props.codePenOption = {
+      title: `@uiw/react-split${version} - demo`,
+      includeModule: ['@uiw/react-split'],
+      js: (props.code || '').replace('_mount_', 'document.getElementById("container")'),
+      html: '<div id="container" style="padding: 24px"></div>',
+      css_external: `https://unpkg.com/@uiw/react-split@${version}/dist/split.min.css`,
+      js_external: `https://unpkg.com/[email protected]/umd/react.development.js;https://unpkg.com/[email protected]/umd/react-dom.development.js;https://unpkg.com/[email protected]/index.js;https://unpkg.com/@uiw/react-split@${version}/dist/split.min.js;https://unpkg.com/@uiw/[email protected]/index.js`,
+    };
+  }
   if (codeSandbox) {
     props.codeSandboxOption = {
       files: {
         'sandbox.config.json': {
           content: `{
-        "template": "node",
-        "container": {
-          "startScript": "start",
-          "node": "14"
-        }
-      }`,
+            "template": "node",
+            "container": {
+              "startScript": "start",
+              "node": "14"
+            }
+          }`,
         },
         'public/index.html': {
           content: `<div id="container"></div>`,
         },
         'src/index.js': {
-          content: props.code!.replace('_mount_', 'document.getElementById("container")'),
+          content: (props.code || '').replace('_mount_', 'document.getElementById("container")'),
         },
         '.kktrc.js': {
-          content: `import webpack from "webpack";\nimport lessModules from "@kkt/less-modules";\nexport default (conf, env, options) => {\nconf = lessModules(conf, env, options);\nreturn conf;\n};`,
+          content: `import lessModules from "@kkt/less-modules";\nexport default (conf, env, options) => {\n  conf = lessModules(conf, env, options);\n  return conf;\n};`,
         },
         'package.json': {
           content: {
-            name: 'react-amap-demo',
-            description: `Split 面板分割 React 组件 - demo`,
+            name: 'uiw-demo',
+            description: `uiw v${version} - demo`,
             dependencies: {
-              react: 'latest',
-              'react-dom': 'latest',
-              '@uiw/react-amap': 'latest',
+              react: '^17.0.2',
+              'react-dom': '^17.0.2',
+              '@uiw/react-split': 'latest',
             },
             devDependencies: {
-              '@kkt/less-modules': '6.9.0',
-              kkt: '6.9.0',
-              typescript: '4.1.3',
+              '@kkt/less-modules': '~7.1.1',
+              kkt: '~7.1.5',
             },
             license: 'MIT',
             scripts: {
               start: 'kkt start',
               build: 'kkt build',
-              test: 'kkt test --env=jsdom',
             },
             browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'],
           },

website/components/Markdown/index.tsx

@@ -1,5 +1,6 @@
 import { Component } from 'react';
 import MarkdownPreview from '@uiw/react-markdown-preview';
+import pkg from '../../../package.json';
 import Code from './Code';
 import styles from './index.module.less';
 
@@ -67,26 +68,36 @@ export default class Markdown extends Component<MarkdownProps, MarkdownState> {
         className={styles.markdown}
         components={{
           /**
+           * bordered 边框
            * bgWhite 设置代码预览背景白色，否则为格子背景。
            * noCode 不显示代码编辑器。
            * noPreview 不显示代码预览效果。
            * noScroll 预览区域不显示滚动条。
            * codePen 显示 Codepen 按钮，要特别注意 包导入的问题，实例中的 import 主要用于 Codepen 使用。
            */
-           code: ({ inline, node, ...props }) => {
-            const { noPreview, noScroll, bgWhite, noCode, codePen, codeSandbox } = props as any;
+          code: ({ inline, node, ...props }) => {
+            const { noPreview, bordered, noScroll, bgWhite, noCode, codePen, codeSandbox } = props as any;
             if (inline) {
               return <code {...props} />;
             }
-            const config = { noPreview, noScroll, bgWhite, noCode, codePen } as any;
+            const config = {
+              noPreview,
+              bordered,
+              noScroll,
+              bgWhite,
+              noCode,
+              codePen,
+              codeSandbox,
+            } as any;
             if (Object.keys(config).filter((name) => config[name] !== undefined).length === 0) {
               return <code {...props} />;
             }
             return (
               <Code
+                version={pkg.version}
                 code={getCodeStr(node.children)}
                 dependencies={this.dependencies}
-                {...{ noPreview, noScroll, bgWhite, noCode, codePen, codeSandbox }}
+                {...{ noPreview, bordered, noScroll, bgWhite, noCode, codePen, codeSandbox }}
               />
             );
           },