1- import React from 'react' ;
21import GitHubCorners from '@uiw/react-github-corners' ;
3- import Layout from '@uiw/react-layout' ;
4- import Markdown from './Markdown' ;
2+ import MarkdownPreview from '@uiw/react-markdown-preview' ;
3+ import { getMetaId , isMeta , getURLParameters } from 'markdown-react-code-preview-loader' ;
4+ import CodeLayout from 'react-code-preview-layout' ;
5+ import data from '@uiw/react-layout/README.md' ;
6+ import pkg from '@uiw/react-layout/package.json' ;
7+ // import Codepen from '@uiw/react-codepen';
8+ import CodeSandbox from '@uiw/react-codesandbox' ;
9+ import rehypeIgnore from 'rehype-ignore' ;
10+ import '@wcj/dark-mode' ;
511import styles from './App.module.less' ;
612import logo from './logo.svg' ;
7- import pkg from '@uiw/react-layout/package.json' ;
13+ import Footer from './Footer' ;
14+ import { Fragment } from 'react' ;
15+
16+ // @ts -ignore
17+ const version = VERSION ;
818
919export default function App ( ) {
1020 return (
1121 < div className = { styles . app } >
22+ < dark-mode permanent > </ dark-mode >
1223 < GitHubCorners fixed target = "__blank" zIndex = { 10 } href = "https://github.com/uiwjs/react-layout" />
1324 < header className = { styles . header } >
1425 < img src = { logo } className = { styles . logo } alt = "react logo" />
@@ -17,15 +28,109 @@ export default function App() {
1728 </ h1 >
1829 < p className = { styles . info } > { pkg . description } </ p >
1930 </ header >
20- < Markdown
21- className = { styles . markdown }
22- path = "https://github.com/uiwjs/uiw/tree/master/packages/react-alert/README.md"
23- dependencies = { { Layout } }
24- renderPage = { async ( ) => {
25- const md = await import ( '@uiw/react-layout/README.md' ) ;
26- return md . default ;
31+ < MarkdownPreview
32+ style = { { maxWidth : 750 , margin : '0 auto' , paddingTop : 21 } }
33+ disableCopy = { true }
34+ source = { data . source }
35+ rehypePlugins = { [ rehypeIgnore ] }
36+ components = { {
37+ code : ( { inline, node, ...props } ) => {
38+ const { 'data-meta' : meta , ...rest } = props as any ;
39+ if ( inline || ! isMeta ( meta ) ) {
40+ return < code { ...props } /> ;
41+ }
42+ const line = node . position ?. start . line ;
43+ const metaId = getMetaId ( meta ) || String ( line ) ;
44+ const Child = data . components [ `${ metaId } ] ;
45+ if ( metaId && typeof Child === 'function' ) {
46+ const code = data . data [ metaId ] . value || '' ;
47+ const param = getURLParameters ( meta ) ;
48+
49+ // const codePenOption = {
50+ // title: `@uiw/react-layout${version} - demo`,
51+ // // includeModule: ['@uiw/react-layout'],
52+ // js: (code || '').replace('_mount_', 'document.getElementById("container")'),
53+ // html: '<div id="container" style="padding: 24px"></div>',
54+ // css_external: `https://unpkg.com/@uiw/react-layout@${version}/dist/layout.min.css`,
55+ // 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`,
56+ // };
57+ const codeSandboxOption = {
58+ files : {
59+ 'sandbox.config.json' : {
60+ content : `{
61+ "template": "node",
62+ "container": {
63+ "startScript": "start",
64+ "node": "14"
65+ }
66+ }` ,
67+ } ,
68+ 'public/index.html' : {
69+ content : `<div id="container"></div>` ,
70+ } ,
71+ 'src/app.js' : {
72+ content : code ,
73+ } ,
74+ 'src/index.js' : {
75+ content : `import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './app';\nReactDOM.render(<App />, document.getElementById('container'));` ,
76+ } ,
77+ '.kktrc.js' : {
78+ content : `import lessModules from "@kkt/less-modules";\nexport default (conf, env, options) => {\n conf = lessModules(conf, env, options);\n return conf;\n};` ,
79+ } ,
80+ 'package.json' : {
81+ content : {
82+ name : 'uiw-demo' ,
83+ description : `uiw v${ version } ,
84+ dependencies : {
85+ react : '^17.0.2' ,
86+ 'react-dom' : '^17.0.2' ,
87+ uiw : 'latest' ,
88+ } ,
89+ devDependencies : {
90+ '@kkt/less-modules' : '~7.1.1' ,
91+ kkt : '~7.1.5' ,
92+ } ,
93+ license : 'MIT' ,
94+ scripts : {
95+ start : 'kkt start' ,
96+ build : 'kkt build' ,
97+ } ,
98+ browserslist : [ '>0.2%' , 'not dead' , 'not ie <= 11' , 'not op_mini all' ] ,
99+ } ,
100+ } ,
101+ } ,
102+ } ;
103+
104+ return (
105+ < CodeLayout
106+ toolbar = { param . title || 'Example' }
107+ code = { < code { ...rest } /> }
108+ text = { code }
109+ toolbarExtra = {
110+ < Fragment >
111+ { /* <Codepen {...codePenOption}>
112+ <svg viewBox="0 0 1024 1024" width="18" height="18" fill="currentColor">
113+ <path
114+ 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"
115+ p-id="2071"
116+ />
117+ </svg>
118+ </Codepen> */ }
119+ < CodeSandbox { ...codeSandboxOption } > Open in CodeSandbox</ CodeSandbox >
120+ </ Fragment >
121+ }
122+ >
123+ < Child />
124+ </ CodeLayout >
125+ ) ;
126+ }
127+ return < code { ...rest } /> ;
128+ } ,
27129 } }
28130 />
131+ < div className = { styles . footer } >
132+ < Footer />
133+ </ div >
29134 </ div >
30135 ) ;
31136}
0 commit comments