Skip to content

Commit 5599909

Browse files
jaywcjlovejaywcjlove
committedAug 30, 2023
website: modify website router.
·
v4.23.10v4.21.13
1 parent 092e7ac commit 5599909

File tree

15 files changed

+131
-81
lines changed

15 files changed

+131
-81
lines changed
 

‎www/package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818
"@types/katex": "^0.16.0",
1919
"@types/react": "^18.2.0",
2020
"@types/react-dom": "^18.2.0",
21-
"@types/styled-components": "^5.1.25",
2221
"cross-env": "^7.0.3",
2322
"kkt": "^7.2.0",
2423
"source-map-explorer": "~2.5.2"
@@ -95,7 +94,7 @@
9594
"react-dom": "~18.2.0",
9695
"react-router-dom": "^6.14.2",
9796
"rehype-ignore": "^1.0.1",
98-
"styled-components": "^5.3.5"
97+
"styled-components": "^6.0.7"
9998
},
10099
"eslintConfig": {
101100
"extends": [

‎www/src/pages/extensions/basic-setup/index.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Preview } from '../../theme/Preview';
2+
import { BasicSetupExample } from './example';
3+
4+
export const Component = () => {
5+
return (
6+
<Preview path={() => import('@uiw/codemirror-extensions-basic-setup/README.md')}>
7+
<BasicSetupExample />
8+
</Preview>
9+
);
10+
};

‎www/src/pages/extensions/classname/example.tsx ‎www/src/pages/extensions/classname/index.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { classname } from '@uiw/codemirror-extensions-classname';
33
import CodeMirror from '@uiw/react-codemirror';
44
import { langs } from '@uiw/codemirror-extensions-langs';
55
import { EditorView } from '@codemirror/view';
6+
import { Preview } from '../../theme/Preview';
67
import { useTheme } from '../../../utils/useTheme';
78
import { PageWarpper } from '..';
89

@@ -41,3 +42,11 @@ export const ClassNameExample: FC<PropsWithChildren<{ source?: string }>> = ({ s
4142
</PageWarpper>
4243
);
4344
};
45+
46+
export const Component = () => {
47+
return (
48+
<Preview path={() => import('@uiw/codemirror-extensions-classname/README.md')}>
49+
<ClassNameExample />
50+
</Preview>
51+
);
52+
};

‎www/src/pages/extensions/color/example.tsx ‎www/src/pages/extensions/color/index.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { color } from '@uiw/codemirror-extensions-color';
22
import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
33
import { useState } from 'react';
44
import { langs } from '@uiw/codemirror-extensions-langs';
5+
import { Preview } from '../../theme/Preview';
56
import { useTheme } from '../../../utils/useTheme';
67
import { codeSample } from './code';
78
import { PageWarpper } from '..';
@@ -58,3 +59,11 @@ export const ColorExample = () => {
5859
</PageWarpper>
5960
);
6061
};
62+
63+
export const Component = () => {
64+
return (
65+
<Preview path={() => import('@uiw/codemirror-extensions-color/README.md')}>
66+
<ColorExample />
67+
</Preview>
68+
);
69+
};

‎www/src/pages/extensions/events/example.tsx ‎www/src/pages/extensions/events/index.tsx

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { FC, PropsWithChildren } from 'react';
1+
import { Preview } from '../../theme/Preview';
2+
import type { FC, PropsWithChildren } from 'react';
23
import * as events from '@uiw/codemirror-extensions-events';
34
import CodeMirror from '@uiw/react-codemirror';
45
import styled from 'styled-components';
@@ -48,3 +49,11 @@ export const EventsExample: FC<PropsWithChildren<{ source?: string }>> = ({ sour
4849
</PageWarpper>
4950
);
5051
};
52+
53+
export const Component = () => {
54+
return (
55+
<Preview path={() => import('@uiw/codemirror-extensions-events/README.md')}>
56+
<EventsExample />
57+
</Preview>
58+
);
59+
};

‎www/src/pages/extensions/hyper-link/example.tsx ‎www/src/pages/extensions/hyper-link/index.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { hyperLink } from '@uiw/codemirror-extensions-hyper-link';
22
// import { hyperLinkExtension, hyperLinkStyle } from '@uiw/codemirror-extensions-hyper-link';
33
import CodeMirror from '@uiw/react-codemirror';
44
import { langs } from '@uiw/codemirror-extensions-langs';
5+
import { Preview } from '../../theme/Preview';
56
import { useTheme } from '../../../utils/useTheme';
67
import { markdownString } from './codeSample';
78
import { PageWarpper } from '..';
@@ -32,3 +33,11 @@ export const HyperLinkExample = () => {
3233
</PageWarpper>
3334
);
3435
};
36+
37+
export const Component = () => {
38+
return (
39+
<Preview path={() => import('@uiw/codemirror-extensions-hyper-link/README.md')}>
40+
<HyperLinkExample />
41+
</Preview>
42+
);
43+
};

‎www/src/pages/extensions/langs/example.tsx ‎www/src/pages/extensions/langs/index.tsx

+11-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { FC, PropsWithChildren } from 'react';
1+
import type { FC, PropsWithChildren } from 'react';
2+
import { useEffect, useState } from 'react';
23
import { langNames, LanguageName, loadLanguage } from '@uiw/codemirror-extensions-langs';
34
import CodeMirror from '@uiw/react-codemirror';
4-
import { useEffect, useState } from 'react';
5+
import { Preview } from '../../theme/Preview';
56
import styled from 'styled-components';
67
import { useTheme } from '../../../utils/useTheme';
78
import { PageWarpper } from '..';
@@ -53,3 +54,11 @@ export const LangsExample: FC<PropsWithChildren<{ source?: string }>> = (props)
5354
</PageWarpper>
5455
);
5556
};
57+
58+
export const Component = () => {
59+
return (
60+
<Preview path={() => import('@uiw/codemirror-extensions-langs/README.md')}>
61+
<LangsExample />
62+
</Preview>
63+
);
64+
};

‎www/src/pages/extensions/line-numbers-relative/example.tsx ‎www/src/pages/extensions/line-numbers-relative/index.tsx

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { FC, PropsWithChildren } from 'react';
1+
import type { FC, PropsWithChildren } from 'react';
22
import { lineNumbersRelative } from '@uiw/codemirror-extensions-line-numbers-relative';
33
import CodeMirror from '@uiw/react-codemirror';
44
import { langs } from '@uiw/codemirror-extensions-langs';
5+
import { Preview } from '../../theme/Preview';
56
import { useTheme } from '../../../utils/useTheme';
67
import { PageWarpper } from '..';
78

@@ -19,3 +20,11 @@ export const LineNumbersRelativeExample: FC<PropsWithChildren<{ source?: string
1920
</PageWarpper>
2021
);
2122
};
23+
24+
export const Component = () => {
25+
return (
26+
<Preview path={() => import('@uiw/codemirror-extensions-line-numbers-relative/README.md')}>
27+
<LineNumbersRelativeExample />
28+
</Preview>
29+
);
30+
};

‎www/src/pages/extensions/mentions/example.tsx ‎www/src/pages/extensions/mentions/index.tsx

+10-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { FC, PropsWithChildren } from 'react';
1+
import type { FC, PropsWithChildren } from 'react';
22
import { mentions } from '@uiw/codemirror-extensions-mentions';
33
import CodeMirror from '@uiw/react-codemirror';
44
import { langs } from '@uiw/codemirror-extensions-langs';
55
import { useTheme } from '../../../utils/useTheme';
6+
import { Preview } from '../../theme/Preview';
67
import { PageWarpper } from '..';
78

89
const users = [
@@ -65,3 +66,11 @@ export const MentionsExample: FC<PropsWithChildren<{ source?: string }>> = ({ so
6566
</PageWarpper>
6667
);
6768
};
69+
70+
export const Component = () => {
71+
return (
72+
<Preview path={() => import('@uiw/codemirror-extensions-mentions/README.md')}>
73+
<MentionsExample />
74+
</Preview>
75+
);
76+
};

‎www/src/pages/extensions/themes/example.tsx ‎www/src/pages/extensions/themes/index.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
44
import * as themes from '@uiw/codemirror-themes-all';
55
import { langs } from '@uiw/codemirror-extensions-langs';
66
import styled from 'styled-components';
7+
import { Preview } from '../../theme/Preview';
78
import { useTheme } from '../../../utils/useTheme';
89
import { PageWarpper } from '..';
910

@@ -48,3 +49,11 @@ export const ThemesAllExample: FC<PropsWithChildren<{ source?: string }>> = ({ s
4849
</PageWarpper>
4950
);
5051
};
52+
53+
export const Component = () => {
54+
return (
55+
<Preview path={() => import('@uiw/codemirror-themes-all/README.md')}>
56+
<ThemesAllExample />
57+
</Preview>
58+
);
59+
};

‎www/src/pages/extensions/zebra-stripes/index.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { FC, PropsWithChildren } from 'react';
2+
import { Preview } from '../../theme/Preview';
23
import { zebraStripes } from '@uiw/codemirror-extensions-zebra-stripes';
34
import CodeMirror from '@uiw/react-codemirror';
45
import { useState } from 'react';
@@ -49,3 +50,11 @@ export const ZebraStripesExample: FC<PropsWithChildren<{ source?: string }>> = (
4950
</PageWarpper>
5051
);
5152
};
53+
54+
export const Component = () => {
55+
return (
56+
<Preview path={() => import('@uiw/codemirror-extensions-zebra-stripes/README.md')}>
57+
<ZebraStripesExample />
58+
</Preview>
59+
);
60+
};

‎www/src/pages/merge/examples/onchange.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { Preview } from '../../theme/Preview';
2+
3+
export const Component = () => {
4+
return <Preview path={() => import('./Example.md')} />;
5+
};

‎www/src/pages/merge/index.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { Preview } from '../theme/Preview';
2+
import { MergeExample } from './Example';
3+
4+
export const Component = () => {
5+
return (
6+
<Preview path={() => import('react-codemirror-merge/README.md')}>
7+
<MergeExample />
8+
</Preview>
9+
);
10+
};

‎www/src/pages/theme/editor/index.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export type Style = Partial<
6868

6969
export function ThemeEditor() {
7070
const navigate = useNavigate();
71-
const { type = 'light' } = useParams();
71+
const { type = 'multiple' } = useParams();
7272
const [extension, setExtension] = useState<Extension>(javascript({ jsx: true }));
7373
const [code, setCode] = useState('');
7474
const [lang, setLang] = useState('jsx');
@@ -239,8 +239,12 @@ export function ThemeEditor() {
239239
}}
240240
/>
241241
)}
242-
{type === 'multiple' && <Sample theme={myTheme} style={{ padding: '30px 30px', maxWidth: 860 }} />}
242+
{type === 'multiple' && <Sample theme={myTheme} style={{ padding: '30px 30px' }} />}
243243
</EditorView>
244244
</Fragment>
245245
);
246246
}
247+
248+
export const Component = () => {
249+
return <ThemeEditor />;
250+
};

‎www/src/router.tsx

+13-72
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,6 @@ import React from 'react';
22
import { Navigate, IndexRouteObject, NonIndexRouteObject, Outlet } from 'react-router-dom';
33
import { Layout } from './components/Layout';
44
import { ErrorPage } from './components/ErrorPage';
5-
import { ThemeEditor } from './pages/theme/editor';
6-
7-
import { BasicSetupExample } from './pages/extensions/basic-setup/example';
8-
import { ClassNameExample } from './pages/extensions/classname/example';
9-
10-
import { EventsExample } from './pages/extensions/events/example';
11-
import { LineNumbersRelativeExample } from './pages/extensions/line-numbers-relative/example';
12-
import { LangsExample } from './pages/extensions/langs/example';
13-
import { HyperLinkExample } from './pages/extensions/hyper-link/example';
14-
import { ColorExample } from './pages/extensions/color/example';
15-
import { MentionsExample } from './pages/extensions/mentions/example';
16-
import { ThemesAllExample } from './pages/extensions/themes/example';
17-
import { ZebraStripesExample } from './pages/extensions/zebra-stripes';
18-
19-
import { MergeExample } from './pages/merge/Example';
205
import { Preview } from './pages/theme/Preview';
216

227
export interface MenuRouteObject
@@ -50,92 +35,52 @@ export const routes: MenuRouteObject[] = [
5035
{
5136
path: 'basic-setup',
5237
label: 'basic setup',
53-
element: (
54-
<Preview path={() => import('@uiw/codemirror-extensions-basic-setup/README.md')}>
55-
<BasicSetupExample />
56-
</Preview>
57-
),
38+
lazy: () => import('./pages/extensions/basic-setup'),
5839
},
5940
{
6041
path: 'color',
6142
label: 'color',
62-
element: (
63-
<Preview path={() => import('@uiw/codemirror-extensions-basic-setup/README.md')}>
64-
<ColorExample />
65-
</Preview>
66-
),
43+
lazy: () => import('./pages/extensions/color'),
6744
},
6845
{
6946
path: 'classname',
7047
label: 'classname',
71-
element: (
72-
<Preview path={() => import('@uiw/codemirror-extensions-classname/README.md')}>
73-
<ClassNameExample />
74-
</Preview>
75-
),
48+
lazy: () => import('./pages/extensions/classname'),
7649
},
7750
{
7851
path: 'events',
7952
label: 'events',
80-
element: (
81-
<Preview path={() => import('@uiw/codemirror-extensions-events/README.md')}>
82-
<EventsExample />
83-
</Preview>
84-
),
53+
lazy: () => import('./pages/extensions/events'),
8554
},
8655
{
8756
path: 'hyper-link',
8857
label: 'hyper link',
89-
element: (
90-
<Preview path={() => import('@uiw/codemirror-extensions-hyper-link/README.md')}>
91-
<HyperLinkExample />
92-
</Preview>
93-
),
58+
lazy: () => import('./pages/extensions/hyper-link'),
9459
},
9560
{
9661
path: 'line-numbers-relative',
9762
label: 'line numbers relative',
98-
element: (
99-
<Preview path={() => import('@uiw/codemirror-extensions-line-numbers-relative/README.md')}>
100-
<LineNumbersRelativeExample />
101-
</Preview>
102-
),
63+
lazy: () => import('./pages/extensions/line-numbers-relative'),
10364
},
10465
{
10566
path: 'languages',
10667
label: 'languages',
107-
element: (
108-
<Preview path={() => import('@uiw/codemirror-extensions-langs/README.md')}>
109-
<LangsExample />
110-
</Preview>
111-
),
68+
lazy: () => import('./pages/extensions/langs'),
11269
},
11370
{
11471
path: 'mentions',
11572
label: 'mentions',
116-
element: (
117-
<Preview path={() => import('@uiw/codemirror-extensions-mentions/README.md')}>
118-
<MentionsExample />
119-
</Preview>
120-
),
73+
lazy: () => import('./pages/extensions/mentions'),
12174
},
12275
{
12376
path: 'themes-all',
12477
label: 'themes all',
125-
element: (
126-
<Preview path={() => import('@uiw/codemirror-themes-all/README.md')}>
127-
<ThemesAllExample />
128-
</Preview>
129-
),
78+
lazy: () => import('./pages/extensions/themes'),
13079
},
13180
{
13281
path: 'zebra-stripes',
13382
label: 'zebra stripes',
134-
element: (
135-
<Preview path={() => import('@uiw/codemirror-extensions-zebra-stripes/README.md')}>
136-
<ZebraStripesExample />
137-
</Preview>
138-
),
83+
lazy: () => import('./pages/extensions/zebra-stripes'),
13984
},
14085
],
14186
},
@@ -150,7 +95,7 @@ export const routes: MenuRouteObject[] = [
15095
},
15196
{
15297
path: ':type',
153-
Component: ThemeEditor,
98+
lazy: () => import('./pages/theme/editor'),
15499
},
155100
],
156101
},
@@ -662,16 +607,12 @@ export const routes: MenuRouteObject[] = [
662607
{
663608
path: 'document',
664609
label: 'Document',
665-
element: (
666-
<Preview path={() => import('react-codemirror-merge/README.md')}>
667-
<MergeExample />
668-
</Preview>
669-
),
610+
lazy: () => import('./pages/merge'),
670611
},
671612
{
672613
path: 'onchange',
673614
label: 'onChange Example',
674-
element: <Preview path={() => import('./pages/merge/examples/Example.md')} />,
615+
lazy: () => import('./pages/merge/examples/onchange'),
675616
},
676617
],
677618
},

0 commit comments

Comments
 (0)
Please sign in to comment.