website: modify website router.

jaywcjlove · jaywcjlove · commit 5599909f1a38 · 2023-08-30T10:12:56.000+08:00
diff --git a/www/package.json b/www/package.json
@@ -18,7 +18,6 @@
     "@types/katex": "^0.16.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "@types/styled-components": "^5.1.25",
     "cross-env": "^7.0.3",
     "kkt": "^7.2.0",
     "source-map-explorer": "~2.5.2"
@@ -95,7 +94,7 @@
     "react-dom": "~18.2.0",
     "react-router-dom": "^6.14.2",
     "rehype-ignore": "^1.0.1",
-    "styled-components": "^5.3.5"
+    "styled-components": "^6.0.7"
   },
   "eslintConfig": {
     "extends": [
diff --git a/www/src/pages/extensions/basic-setup/index.tsx b/www/src/pages/extensions/basic-setup/index.tsx
@@ -0,0 +1,10 @@
+import { Preview } from '../../theme/Preview';
+import { BasicSetupExample } from './example';
+
+export const Component = () => {
+  return (
+    <Preview path={() => import('@uiw/codemirror-extensions-basic-setup/README.md')}>
+      <BasicSetupExample />
+    </Preview>
+  );
+};
diff --git a/www/src/pages/extensions/classname/index.tsx b/www/src/pages/extensions/classname/index.tsx
@@ -3,6 +3,7 @@ import { classname } from '@uiw/codemirror-extensions-classname';
 import CodeMirror from '@uiw/react-codemirror';
 import { langs } from '@uiw/codemirror-extensions-langs';
 import { EditorView } from '@codemirror/view';
+import { Preview } from '../../theme/Preview';
 import { useTheme } from '../../../utils/useTheme';
 import { PageWarpper } from '..';
 
@@ -41,3 +42,11 @@ export const ClassNameExample: FC<PropsWithChildren<{ source?: string }>> = ({ s
     </PageWarpper>
   );
 };
+
+export const Component = () => {
+  return (
+    <Preview path={() => import('@uiw/codemirror-extensions-classname/README.md')}>
+      <ClassNameExample />
+    </Preview>
+  );
+};
diff --git a/www/src/pages/extensions/color/index.tsx b/www/src/pages/extensions/color/index.tsx
@@ -2,6 +2,7 @@ import { color } from '@uiw/codemirror-extensions-color';
 import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 import { useState } from 'react';
 import { langs } from '@uiw/codemirror-extensions-langs';
+import { Preview } from '../../theme/Preview';
 import { useTheme } from '../../../utils/useTheme';
 import { codeSample } from './code';
 import { PageWarpper } from '..';
@@ -58,3 +59,11 @@ export const ColorExample = () => {
     </PageWarpper>
   );
 };
+
+export const Component = () => {
+  return (
+    <Preview path={() => import('@uiw/codemirror-extensions-color/README.md')}>
+      <ColorExample />
+    </Preview>
+  );
+};
diff --git a/www/src/pages/extensions/events/index.tsx b/www/src/pages/extensions/events/index.tsx
@@ -1,4 +1,5 @@
-import { FC, PropsWithChildren } from 'react';
+import { Preview } from '../../theme/Preview';
+import type { FC, PropsWithChildren } from 'react';
 import * as events from '@uiw/codemirror-extensions-events';
 import CodeMirror from '@uiw/react-codemirror';
 import styled from 'styled-components';
@@ -48,3 +49,11 @@ export const EventsExample: FC<PropsWithChildren<{ source?: string }>> = ({ sour
     </PageWarpper>
   );
 };
+
+export const Component = () => {
+  return (
+    <Preview path={() => import('@uiw/codemirror-extensions-events/README.md')}>
+      <EventsExample />
+    </Preview>
+  );
+};
diff --git a/www/src/pages/extensions/hyper-link/index.tsx b/www/src/pages/extensions/hyper-link/index.tsx
@@ -2,6 +2,7 @@ import { hyperLink } from '@uiw/codemirror-extensions-hyper-link';
 // import { hyperLinkExtension, hyperLinkStyle } from '@uiw/codemirror-extensions-hyper-link';
 import CodeMirror from '@uiw/react-codemirror';
 import { langs } from '@uiw/codemirror-extensions-langs';
+import { Preview } from '../../theme/Preview';
 import { useTheme } from '../../../utils/useTheme';
 import { markdownString } from './codeSample';
 import { PageWarpper } from '..';
@@ -32,3 +33,11 @@ export const HyperLinkExample = () => {
     </PageWarpper>
   );
 };
+
+export const Component = () => {
+  return (
+    <Preview path={() => import('@uiw/codemirror-extensions-hyper-link/README.md')}>
+      <HyperLinkExample />
+    </Preview>
+  );
+};
diff --git a/www/src/pages/extensions/langs/index.tsx b/www/src/pages/extensions/langs/index.tsx
@@ -1,7 +1,8 @@
-import { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
+import { useEffect, useState } from 'react';
 import { langNames, LanguageName, loadLanguage } from '@uiw/codemirror-extensions-langs';
 import CodeMirror from '@uiw/react-codemirror';
-import { useEffect, useState } from 'react';
+import { Preview } from '../../theme/Preview';
 import styled from 'styled-components';
 import { useTheme } from '../../../utils/useTheme';
 import { PageWarpper } from '..';
@@ -53,3 +54,11 @@ export const LangsExample: FC<PropsWithChildren<{ source?: string }>> = (props)
     </PageWarpper>
   );
 };
+
+export const Component = () => {
+  return (
+    <Preview path={() => import('@uiw/codemirror-extensions-langs/README.md')}>
+      <LangsExample />
+    </Preview>
+  );
+};
diff --git a/www/src/pages/extensions/line-numbers-relative/index.tsx b/www/src/pages/extensions/line-numbers-relative/index.tsx
@@ -1,7 +1,8 @@
-import { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { lineNumbersRelative } from '@uiw/codemirror-extensions-line-numbers-relative';
 import CodeMirror from '@uiw/react-codemirror';
 import { langs } from '@uiw/codemirror-extensions-langs';
+import { Preview } from '../../theme/Preview';
 import { useTheme } from '../../../utils/useTheme';
 import { PageWarpper } from '..';
 
@@ -19,3 +20,11 @@ export const LineNumbersRelativeExample: FC<PropsWithChildren<{ source?: string
     </PageWarpper>
   );
 };
+
+export const Component = () => {
+  return (
+    <Preview path={() => import('@uiw/codemirror-extensions-line-numbers-relative/README.md')}>
+      <LineNumbersRelativeExample />
+    </Preview>
+  );
+};
diff --git a/www/src/pages/extensions/mentions/index.tsx b/www/src/pages/extensions/mentions/index.tsx
@@ -1,8 +1,9 @@
-import { FC, PropsWithChildren } from 'react';
+import type { FC, PropsWithChildren } from 'react';
 import { mentions } from '@uiw/codemirror-extensions-mentions';
 import CodeMirror from '@uiw/react-codemirror';
 import { langs } from '@uiw/codemirror-extensions-langs';
 import { useTheme } from '../../../utils/useTheme';
+import { Preview } from '../../theme/Preview';
 import { PageWarpper } from '..';
 
 const users = [
@@ -65,3 +66,11 @@ export const MentionsExample: FC<PropsWithChildren<{ source?: string }>> = ({ so
     </PageWarpper>
   );
 };
+
+export const Component = () => {
+  return (
+    <Preview path={() => import('@uiw/codemirror-extensions-mentions/README.md')}>
+      <MentionsExample />
+    </Preview>
+  );
+};
diff --git a/www/src/pages/extensions/themes/index.tsx b/www/src/pages/extensions/themes/index.tsx
@@ -4,6 +4,7 @@ import CodeMirror, { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 import * as themes from '@uiw/codemirror-themes-all';
 import { langs } from '@uiw/codemirror-extensions-langs';
 import styled from 'styled-components';
+import { Preview } from '../../theme/Preview';
 import { useTheme } from '../../../utils/useTheme';
 import { PageWarpper } from '..';
 
@@ -48,3 +49,11 @@ export const ThemesAllExample: FC<PropsWithChildren<{ source?: string }>> = ({ s
     </PageWarpper>
   );
 };
+
+export const Component = () => {
+  return (
+    <Preview path={() => import('@uiw/codemirror-themes-all/README.md')}>
+      <ThemesAllExample />
+    </Preview>
+  );
+};
diff --git a/www/src/pages/extensions/zebra-stripes/index.tsx b/www/src/pages/extensions/zebra-stripes/index.tsx
@@ -1,4 +1,5 @@
 import { FC, PropsWithChildren } from 'react';
+import { Preview } from '../../theme/Preview';
 import { zebraStripes } from '@uiw/codemirror-extensions-zebra-stripes';
 import CodeMirror from '@uiw/react-codemirror';
 import { useState } from 'react';
@@ -49,3 +50,11 @@ export const ZebraStripesExample: FC<PropsWithChildren<{ source?: string }>> = (
     </PageWarpper>
   );
 };
+
+export const Component = () => {
+  return (
+    <Preview path={() => import('@uiw/codemirror-extensions-zebra-stripes/README.md')}>
+      <ZebraStripesExample />
+    </Preview>
+  );
+};
diff --git a/www/src/pages/merge/examples/onchange.tsx b/www/src/pages/merge/examples/onchange.tsx
@@ -0,0 +1,5 @@
+import { Preview } from '../../theme/Preview';
+
+export const Component = () => {
+  return <Preview path={() => import('./Example.md')} />;
+};
diff --git a/www/src/pages/merge/index.tsx b/www/src/pages/merge/index.tsx
@@ -0,0 +1,10 @@
+import { Preview } from '../theme/Preview';
+import { MergeExample } from './Example';
+
+export const Component = () => {
+  return (
+    <Preview path={() => import('react-codemirror-merge/README.md')}>
+      <MergeExample />
+    </Preview>
+  );
+};
diff --git a/www/src/pages/theme/editor/index.tsx b/www/src/pages/theme/editor/index.tsx
@@ -68,7 +68,7 @@ export type Style = Partial<
 
 export function ThemeEditor() {
   const navigate = useNavigate();
-  const { type = 'light' } = useParams();
+  const { type = 'multiple' } = useParams();
   const [extension, setExtension] = useState<Extension>(javascript({ jsx: true }));
   const [code, setCode] = useState('');
   const [lang, setLang] = useState('jsx');
@@ -239,8 +239,12 @@ export function ThemeEditor() {
             }}
           />
         )}
-        {type === 'multiple' && <Sample theme={myTheme} style={{ padding: '30px 30px', maxWidth: 860 }} />}
+        {type === 'multiple' && <Sample theme={myTheme} style={{ padding: '30px 30px' }} />}
       </EditorView>
     </Fragment>
   );
 }
+
+export const Component = () => {
+  return <ThemeEditor />;
+};
diff --git a/www/src/router.tsx b/www/src/router.tsx
