website: update code preview.

uiwjs · Jun 9, 2022 · c54a65c · c54a65c
1 parent 0204f98
commit c54a65c
Show file tree

Hide file tree

Showing 13 changed files with 178 additions and 210 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -10,10 +10,10 @@ jobs:
   windows:
     runs-on: windows-2019
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 16
 
       - name: Look Changelog
         uses: jaywcjlove/changelog-generator@v1.4.8
@@ -23,18 +23,17 @@ jobs:
           filter: '[R|r]elease[d]\s+[v|V]\d(\.\d+){0,2}'
 
       - run: npm install --unsafe-perm
-      - run: npm run hoist
       - run: npm run build
       - run: npm run coverage
       - run: npm run doc
 
   build:
     runs-on: ubuntu-18.04
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 16
 
       - name: Look Changelog
         uses: jaywcjlove/changelog-generator@v1.4.8
@@ -43,8 +42,7 @@ jobs:
           filter-author: (小弟调调™|Renovate Bot|renovate-bot)
           filter: '[R|r]elease[d]\s+[v|V]\d(\.\d+){0,2}'
 
-      - run: npm install --unsafe-perm
-      - run: npm run hoist
+      - run: npm install
       - run: npm run build
       - run: npm run bundle
       - run: npm run bundle:min
@@ -75,7 +73,7 @@ jobs:
 
       # - name: get tag version
       #   id: tag_version
-      #   uses: jaywcjlove/changelog-generator@v1.5.0
+      #   uses: jaywcjlove/changelog-generator@v1.5.3
 
       # - name: Deploy
       #   uses: peaceiris/actions-gh-pages@v3
@@ -86,7 +84,7 @@ jobs:
 
       # - name: Generate Changelog
       #   id: changelog
-      #   uses: jaywcjlove/changelog-generator@v1.5.0
+      #   uses: jaywcjlove/changelog-generator@v1.5.3
       #   if: steps.create_tag.outputs.successful
       #   with:
       #     head-ref: ${{ steps.create_tag.outputs.version }}

diff --git a/core/README.md b/core/README.md
@@ -1,5 +1,7 @@
+<!--rehype:ignore:start-->
 Layout
 ===
+<!--rehype:ignore:end-->
 
 [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-layout.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-layout)
 [![Build & Deploy](https://github.com/uiwjs/react-layout/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-layout/actions/workflows/ci.yml)
@@ -29,8 +31,7 @@ Layout.Footer = LayoutFooter
 
 ## Basic Usage
 
-<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true-->
-```jsx
+```jsx mdx:preview
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Layout, { LayoutHeader, LayoutContent, LayoutSider, LayoutFooter } from '@uiw/react-layout';
@@ -79,8 +80,7 @@ export default Demo;
 
 ## Layout top-middle-bottom
 
-<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true-->
-```jsx
+```jsx mdx:preview
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Layout from '@uiw/react-layout';
@@ -105,8 +105,7 @@ export default Demo;
 
 ## Layout left-right
 
-<!--rehype:bgWhite=true&codeSandbox=true&codePen=true&noScroll=true-->
-```jsx
+```jsx mdx:preview
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Layout from '@uiw/react-layout';

diff --git a/lerna.json b/lerna.json
@@ -1,4 +1,5 @@
 {
   "version": "4.10.1",
-  "packages": ["website", "core"]
+  "packages": ["website", "core"],
+  "useWorkspaces": true
 }
diff --git a/package.json b/package.json
@@ -39,6 +39,13 @@
     ]
   },
   "license": "MIT",
+  "workspaces": [
+    "core",
+    "website"
+  ],
+  "engines": {
+    "node": ">=16.0.0"
+  },
   "devDependencies": {
     "@kkt/ncc": "~1.0.8",
     "compile-less-cli": "~1.8.11",
@@ -47,6 +54,8 @@
     "lint-staged": "~12.3.5",
     "prettier": "~2.5.1",
     "pretty-quick": "~3.1.3",
+    "react": "~17.0.2",
+    "react-dom": "~17.0.2",
     "tsbb": "~3.7.0"
   }
 }
diff --git a/website/.kktrc.ts b/website/.kktrc.ts
@@ -1,18 +1,28 @@
 import path from 'path';
+import webpack from 'webpack';
 import { Configuration } from 'webpack';
 import lessModules from '@kkt/less-modules';
-import rawModules from '@kkt/raw-modules';
+// import rawModules from '@kkt/raw-modules';
 import scopePluginOptions from '@kkt/scope-plugin-options';
+import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';
 import { LoaderConfOptions } from 'kkt';
+import pkg from './package.json';
 
 export default (conf: Configuration, env: 'development' | 'production', options: LoaderConfOptions) => {
   conf = lessModules(conf, env, options);
-  conf = rawModules(conf, env, options);
+  // conf = rawModules(conf, env, options);
+  conf = mdCodeModulesLoader(conf);
   conf = scopePluginOptions(conf, env, {
     ...options,
     allowedFiles: [path.resolve(process.cwd(), 'README.md'), path.resolve(process.cwd(), 'src')],
   });
 
+  conf.plugins!.push(
+    new webpack.DefinePlugin({
+      VERSION: JSON.stringify(pkg.version),
+    }),
+  );
+
   if (env === 'production') {
     /** https://github.com/uiwjs/react-code-preview/issues/94 */
     conf.module!.exprContextCritical = false;

diff --git a/website/package.json b/website/package.json
@@ -8,10 +8,14 @@
     "build": "kkt build"
   },
   "dependencies": {
-    "@uiw/react-code-preview": "~4.0.5",
+    "@uiw/react-codepen": "~1.0.2",
+    "@uiw/react-codesandbox": "~1.1.5",
     "@uiw/react-github-corners": "~1.5.3",
     "@uiw/react-layout": "~4.10.1",
-    "@uiw/react-markdown-preview": "~3.5.1",
+    "@uiw/react-markdown-preview": "^4.0.16",
+    "@wcj/dark-mode": "^1.0.14",
+    "rehype-ignore": "^1.0.1",
+    "react-code-preview-layout": "^2.0.3",
     "react": "~17.0.2",
     "react-dom": "~17.0.2"
   },
@@ -21,7 +25,8 @@
     "@kkt/scope-plugin-options": "~7.1.1",
     "@types/react": "~17.0.39",
     "@types/react-dom": "~17.0.13",
-    "kkt": "~7.1.5"
+    "kkt": "~7.1.5",
+    "markdown-react-code-preview-loader": "2.1.2"
   },
   "eslintConfig": {
     "extends": [

diff --git a/website/src/App.module.less b/website/src/App.module.less
@@ -1,22 +1,24 @@
 .app {
   padding-bottom: 70px;
-  background-color: #fff;
+}
+
+dark-mode {
+  position: absolute;
+  left: 10px;
+  top: 10px;
 }
 
 .header {
-  background-color: #282c34;
+  background-color: var(--color-canvas-subtle);
   min-height: calc(100vh - 80px);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding-bottom: 30px;
   text-align: center;
-  color: white;
   sup {
-    background-color: #ffffff21;
     border-radius: 3px;
-    color: #fff;
     font-size: 12px;
     padding: 1px 5px;
   }
@@ -29,15 +31,14 @@
 .info {
   font-size: 21px;
   max-width: 520px;
-  color: #969ca7;
 }
 
-.markdown {
-  margin: 0 auto;
-  text-align: left;
+.footer {
   max-width: 750px;
-  overflow: auto;
-  background-color: #fff;
-  padding: 16px 20px;
-  border-radius: 5px;
+  margin: 0 auto;
+  text-align: center;
+  padding-top: 64px;
+  a + a {
+    margin-left: 10px;
+  }
 }
diff --git a/website/src/App.tsx b/website/src/App.tsx
@@ -1,14 +1,25 @@
-import React from 'react';
 import GitHubCorners from '@uiw/react-github-corners';
-import Layout from '@uiw/react-layout';
-import Markdown from './Markdown';
+import MarkdownPreview from '@uiw/react-markdown-preview';
+import { getMetaId, isMeta, getURLParameters } from 'markdown-react-code-preview-loader';
+import CodeLayout from 'react-code-preview-layout';
+import data from '@uiw/react-layout/README.md';
+import pkg from '@uiw/react-layout/package.json';
+// import Codepen from '@uiw/react-codepen';
+import CodeSandbox from '@uiw/react-codesandbox';
+import rehypeIgnore from 'rehype-ignore';
+import '@wcj/dark-mode';
 import styles from './App.module.less';
 import logo from './logo.svg';
-import pkg from '@uiw/react-layout/package.json';
+import Footer from './Footer';
+import { Fragment } from 'react';
+
+// @ts-ignore
+const version = VERSION;
 
 export default function App() {
   return (
     <div className={styles.app}>
+      <dark-mode permanent></dark-mode>
       <GitHubCorners fixed target="__blank" zIndex={10} href="https://github.com/uiwjs/react-layout" />
       <header className={styles.header}>
         <img src={logo} className={styles.logo} alt="react logo" />
@@ -17,15 +28,109 @@ export default function App() {
         </h1>
         <p className={styles.info}>{pkg.description}</p>
       </header>
-      <Markdown
-        className={styles.markdown}
-        path="https://github.com/uiwjs/uiw/tree/master/packages/react-alert/README.md"
-        dependencies={{ Layout }}
-        renderPage={async () => {
-          const md = await import('@uiw/react-layout/README.md');
-          return md.default;
+      <MarkdownPreview
+        style={{ maxWidth: 750, margin: '0 auto', paddingTop: 21 }}
+        disableCopy={true}
+        source={data.source}
+        rehypePlugins={[rehypeIgnore]}
+        components={{
+          code: ({ inline, node, ...props }) => {
+            const { 'data-meta': meta, ...rest } = props as any;
+            if (inline || !isMeta(meta)) {
+              return <code {...props} />;
+            }
+            const line = node.position?.start.line;
+            const metaId = getMetaId(meta) || String(line);
+            const Child = data.components[`${metaId}`];
+            if (metaId && typeof Child === 'function') {
+              const code = data.data[metaId].value || '';
+              const param = getURLParameters(meta);
+
+              // const codePenOption = {
+              //   title: `@uiw/react-layout${version} - demo`,
+              //   // includeModule: ['@uiw/react-layout'],
+              //   js: (code || '').replace('_mount_', 'document.getElementById("container")'),
+              //   html: '<div id="container" style="padding: 24px"></div>',
+              //   css_external: `https://unpkg.com/@uiw/react-layout@${version}/dist/layout.min.css`,
+              //   js_external: `https://unpkg.com/react@17.x/umd/react.development.js;https://unpkg.com/react-dom@17.x/umd/react-dom.development.js;https://unpkg.com/classnames@2.2.6/index.js;https://unpkg.com/@uiw/react-layout@${version}/dist/layout.min.js;https://unpkg.com/@uiw/codepen-require-polyfill@1.1.3/index.js`,
+              // };
+              const codeSandboxOption = {
+                files: {
+                  'sandbox.config.json': {
+                    content: `{
+                      "template": "node",
+                      "container": {
+                        "startScript": "start",
+                        "node": "14"
+                      }
+                    }`,
+                  },
+                  'public/index.html': {
+                    content: `<div id="container"></div>`,
+                  },
+                  'src/app.js': {
+                    content: code,
+                  },
+                  'src/index.js': {
+                    content: `import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './app';\nReactDOM.render(<App />, document.getElementById('container'));`,
+                  },
+                  '.kktrc.js': {
+                    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: 'uiw-demo',
+                      description: `uiw v${version} - demo`,
+                      dependencies: {
+                        react: '^17.0.2',
+                        'react-dom': '^17.0.2',
+                        uiw: 'latest',
+                      },
+                      devDependencies: {
+                        '@kkt/less-modules': '~7.1.1',
+                        kkt: '~7.1.5',
+                      },
+                      license: 'MIT',
+                      scripts: {
+                        start: 'kkt start',
+                        build: 'kkt build',
+                      },
+                      browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'],
+                    },
+                  },
+                },
+              };
+
+              return (
+                <CodeLayout
+                  toolbar={param.title || 'Example'}
+                  code={<code {...rest} />}
+                  text={code}
+                  toolbarExtra={
+                    <Fragment>
+                      {/* <Codepen {...codePenOption}>
+                        <svg viewBox="0 0 1024 1024" width="18" height="18" fill="currentColor">
+                          <path
+                            d="M123.428571 668l344.571429 229.714286v-205.142857L277.142857 565.142857z m-35.428571-82.285714l110.285714-73.714286-110.285714-73.714286v147.428572z m468 312l344.571429-229.714286-153.714286-102.857143-190.857143 127.428572v205.142857z m-44-281.714286l155.428571-104-155.428571-104-155.428571 104zM277.142857 458.857143l190.857143-127.428572V126.285714L123.428571 356z m548.571429 53.142857l110.285714 73.714286V438.285714z m-78.857143-53.142857l153.714286-102.857143-344.571429-229.714286v205.142857z m277.142857-102.857143v312q0 23.428571-19.428571 36.571429l-468 312q-12 7.428571-24.571429 7.428571t-24.571429-7.428571L19.428571 704.571429q-19.428571-13.142857-19.428571-36.571429V356q0-23.428571 19.428571-36.571429L487.428571 7.428571q12-7.428571 24.571429-7.428571t24.571429 7.428571l468 312q19.428571 13.142857 19.428571 36.571429z"
+                            p-id="2071"
+                          />
+                        </svg>
+                      </Codepen> */}
+                      <CodeSandbox {...codeSandboxOption}>Open in CodeSandbox</CodeSandbox>
+                    </Fragment>
+                  }
+                >
+                  <Child />
+                </CodeLayout>
+              );
+            }
+            return <code {...rest} />;
+          },
         }}
       />
+      <div className={styles.footer}>
+        <Footer />
+      </div>
     </div>
   );
 }
diff --git a/website/src/Markdown/Footer.tsx → website/src/Footer.tsx b/website/src/Markdown/Footer.tsx → website/src/Footer.tsx
@@ -1,5 +1,4 @@
-import React, { Fragment } from 'react';
-// import { Divider } from 'uiw';
+import { Fragment } from 'react';
 
 export type FooterProps = {
   path?: string;