Skip to content

Commit f1aea21

Browse files
jaywcjlovejaywcjlove
committed
feat: add isMeta method.
1 parent 68380b8 commit f1aea21

File tree

8 files changed

+156
-14
lines changed

8 files changed

+156
-14
lines changed

‎website/.kktrc.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { Configuration } from 'webpack';
22
import { LoaderConfOptions } from 'kkt';
3-
import rawModules from '@kkt/raw-modules';
43
import lessModules from '@kkt/less-modules';
4+
import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';
5+
56
export default (conf: Configuration, env: 'development' | 'production', options: LoaderConfOptions) => {
67
conf = lessModules(conf, env, options);
7-
conf = rawModules(conf, env, {
8-
...options,
9-
});
8+
conf = mdCodeModulesLoader(conf);
109

10+
conf.module!.exprContextCritical = false;
1111
if (env === 'production') {
1212
conf.output = { ...conf.output, publicPath: './' };
1313
}

‎website/package.json

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,16 @@
1515
"devDependencies": {
1616
"@kkt/less-modules": "~7.1.1",
1717
"@kkt/raw-modules": "~7.1.1",
18-
"@types/react-dom": "18.0.3"
18+
"@types/react-dom": "18.0.3",
19+
"markdown-react-code-preview-loader": "^1.3.0"
1920
},
2021
"dependencies": {
22+
"@uiw/react-github-corners": "^1.5.14",
23+
"@uiw/react-markdown-preview": "^4.0.9",
2124
"@wcj/dark-mode": "^1.0.14",
22-
"uiw": "^4.21.6",
23-
"@uiw/react-github-corners": "~1.5.3",
25+
"react-code-preview-layout": "1.0.0",
2426
"react-router-dom": "^6.3.0",
25-
"@uiw/react-markdown-preview": "~4.0.5",
26-
"react-code-preview-layout": "1.0.0"
27+
"uiw": "^4.21.6"
2728
},
2829
"eslintConfig": {
2930
"extends": [
@@ -43,4 +44,4 @@
4344
"last 1 safari version"
4445
]
4546
}
46-
}
47+
}

‎website/src/App.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ const App = () => {
1818
<NavLink to="/example" replace>
1919
示例
2020
</NavLink>
21+
<NavLink to="/markdown-example" replace>
22+
Markdown 示例
23+
</NavLink>
2124
</nav>
2225
</header>
2326
<div className={styles.body}>

‎website/src/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import App from './App';
33
import { HashRouter, Routes, Route } from 'react-router-dom';
44
import DOC from './pages/doc';
55
import Example from './pages/example';
6+
import MarkdownExample from './pages/markdown-example';
67
import './index.css';
78

89
ReactDOM.createRoot(document.getElementById('root')!).render(
@@ -11,6 +12,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
1112
<Route element={<App />}>
1213
<Route path="/" element={<DOC />} />
1314
<Route path="/example" element={<Example />} />
15+
<Route path="/markdown-example" element={<MarkdownExample />} />
1416
</Route>
1517
</Routes>
1618
</HashRouter>,

‎website/src/pages/doc/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import MDdata from 'react-code-preview-layout/README.md';
22
import MarkdownPreview from '@uiw/react-markdown-preview';
3-
const Doc = () => {
4-
return <MarkdownPreview source={MDdata} />;
5-
};
3+
4+
const Doc = () => <MarkdownPreview source={MDdata.source} />;
5+
66
export default Doc;

‎website/src/pages/markdown-example/README.md

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
Markdown Preview Example
2+
===
3+
4+
这里是一个示例
5+
6+
### 基本用法
7+
8+
```jsx mdx:preview:demo12
9+
import ReactDOM from 'react-dom';
10+
import { Button, Divider, Icon } from 'uiw';
11+
12+
export default function Demo() {
13+
return (
14+
<div>
15+
<Button type="primary">主要按钮</Button>
16+
<Button type="success">成功按钮</Button>
17+
<Button type="warning">警告按钮</Button>
18+
<Button type="danger">错误按钮</Button>
19+
<Button type="light">亮按钮</Button>
20+
<Button type="dark">暗按钮</Button>
21+
<Divider />
22+
<Button basic type="primary">主要按钮</Button>
23+
<Button basic type="success">成功按钮</Button>
24+
<Button basic type="warning">警告按钮</Button>
25+
<Button basic type="danger">错误按钮</Button>
26+
<Button basic type="light">亮按钮</Button>
27+
<Button basic type="dark">暗按钮</Button>
28+
<Divider />
29+
<Button>Normal</Button>
30+
<Button disabled>Disabled</Button>
31+
<Button type="primary" active>Button</Button>
32+
<Button type="primary" size="small">more <Icon type="down" /></Button>
33+
<Button type="link"> (超连接样式)link </Button>
34+
</div>
35+
)
36+
}
37+
```
38+
39+
### 按钮组
40+
41+
```jsx mdx:preview
42+
import ReactDOM from 'react-dom';
43+
import { Button, ButtonGroup, Divider, Icon } from 'uiw';
44+
45+
export default function Demo() {
46+
return (
47+
<div>
48+
<ButtonGroup>
49+
<Button type="primary">主要按钮</Button>
50+
<Button type="success">成功按钮</Button>
51+
<Button type="warning">警告按钮</Button>
52+
<Button type="danger">错误按钮</Button>
53+
<Button type="light">亮按钮</Button>
54+
<Button type="dark">暗按钮</Button>
55+
</ButtonGroup>
56+
<ButtonGroup style={{ marginTop: 5 }}>
57+
<Button size="small" type="primary">按钮</Button>
58+
<Button size="small" type="primary">按钮</Button>
59+
<Button size="small" type="primary">按钮</Button>
60+
<Button size="small" type="primary">按钮</Button>
61+
</ButtonGroup>
62+
<ButtonGroup style={{ marginTop: 5 }}>
63+
<Button type="light">按钮</Button>
64+
<Button type="light">按钮</Button>
65+
<Button type="light">按钮</Button>
66+
<Button type="light">按钮</Button>
67+
</ButtonGroup>
68+
<Divider style={{ maxWidth: 220 }}>添加图标</Divider>
69+
<ButtonGroup>
70+
<Button icon="copy" type="primary">复制</Button>
71+
<Button icon="delete" type="success">删除</Button>
72+
<Button icon="file-add" type="warning">添加文件</Button>
73+
<Button icon="map" type="danger">地图</Button>
74+
<Button icon="linux" type="light">Linux</Button>
75+
<Button icon="apple" type="dark">Apple</Button>
76+
</ButtonGroup>
77+
<ButtonGroup style={{ marginTop: 5 }}>
78+
<Button icon="copy" type="primary">复制</Button>
79+
<Button icon="delete" type="primary">删除</Button>
80+
<Button icon="file-add" type="primary">添加文件</Button>
81+
<Button icon="map" type="primary">地图</Button>
82+
<Button icon="linux" type="primary">Linux</Button>
83+
<Button icon="apple" type="primary">Apple</Button>
84+
</ButtonGroup>
85+
<ButtonGroup style={{ marginTop: 5 }}>
86+
<Button icon="copy">复制</Button>
87+
<Button icon="delete">删除</Button>
88+
<Button icon="file-add">添加文件</Button>
89+
<Button icon="map">地图</Button>
90+
<Button icon="linux">Linux</Button>
91+
<Button icon="apple">Apple</Button>
92+
</ButtonGroup>
93+
<ButtonGroup style={{ marginTop: 5 }}>
94+
<Button icon="copy" />
95+
<Button icon="delete" />
96+
<Button icon="file-add" />
97+
<Button icon="map" />
98+
<Button icon="linux" />
99+
<Button icon="apple" />
100+
</ButtonGroup>
101+
</div>
102+
)
103+
}
104+
```

‎website/src/pages/markdown-example/index.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import MarkdownPreview from '@uiw/react-markdown-preview';
2+
import CodeLayout from 'react-code-preview-layout';
3+
import { getMetaId } from 'markdown-react-code-preview-loader';
4+
import MDdata from './README.md';
5+
6+
export default function MarkdownExample() {
7+
return (
8+
<MarkdownPreview
9+
source={MDdata.source}
10+
components={{
11+
code: ({ inline, node, ...props }) => {
12+
const { 'data-meta': meta, ...rest } = props as any;
13+
if (inline) {
14+
return <code {...props} />;
15+
}
16+
const metaId = getMetaId(meta);
17+
if (!metaId) {
18+
return <code {...props} />;
19+
}
20+
const line = node.position?.start.line;
21+
const Child = MDdata.components[metaId || line || ''];
22+
return (
23+
<CodeLayout code={rest.children}>
24+
<Child />
25+
</CodeLayout>
26+
);
27+
},
28+
}}
29+
/>
30+
);
31+
}

‎website/src/react-app-env.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/// <reference types="react-scripts" />
22
declare module '*.md' {
3-
const src: string;
3+
import { CodeBlockData } from 'markdown-react-code-preview-loader';
4+
const src: CodeBlockData;
45
export default src;
56
}
67

0 commit comments

Comments
 (0)