website: update markdown preview.

Author: jaywcjlove

www/package.json

@@ -8,16 +8,11 @@
     "map": "source-map-explorer build/static/js/*.js --html build/website-result.html"
   },
   "dependencies": {
-    "@uiw/react-back-to-top": "1.2.3",
+    "@uiw/react-markdown-preview-example": "1.1.0",
     "@uiw/react-color-colorful": "^1.3.1",
-    "@uiw/react-github-corners": "^1.5.15",
     "@uiw/react-json-view": "1.8.0",
-    "@uiw/react-markdown-preview": "^4.1.0",
-    "@wcj/dark-mode": "^1.0.13",
     "react": "^18.2.0",
-    "react-code-preview-layout": "^3.0.1",
-    "react-dom": "^18.2.0",
-    "styled-components": "^6.0.0"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",

www/src/App.tsx

@@ -1,73 +1,44 @@
 import { useState } from 'react';
-import GitHubCorners from '@uiw/react-github-corners';
 import styled, { css } from 'styled-components';
-import BackToUp from '@uiw/react-back-to-top';
 import { Example } from './example/default';
-import MarkdownPreview from './Markdown';
 import { ExampleEditor } from './example/editor';
 
-const Header = styled.header`
-  padding: 2rem 0;
-  text-align: center;
-  h1 {
-    font-weight: 900;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif,
-      'Apple Color Emoji', 'Segoe UI Emoji';
-  }
-`;
-
-const SupVersion = styled.sup`
-  font-weight: 200;
-  font-size: 0.78rem;
-  margin-left: 0.5em;
-  margin-top: -0.3em;
-  position: absolute;
-`;
-
 const ExampleWrapper = styled.div`
   max-width: 530px;
   margin: 0 auto;
   padding-bottom: 3rem;
 `;
 
-const Wrappper = styled.div`
-  padding-bottom: 5rem;
-`;
-
 const TabItem = styled.div`
   padding-bottom: 10px;
 `;
 
-const Button = styled.button<{ $active: boolean; }>`
+const Button = styled.button<{ $active: boolean }>`
   background: transparent;
   border: 0;
   cursor: pointer;
   border-radius: 3px;
-  ${({ $active }) => $active && css`
-    background-color: var(--tabs-bg, #bce0ff);
-  `}
+  ${({ $active }) =>
+    $active &&
+    css`
+      background-color: var(--tabs-bg, #bce0ff);
+    `}
 `;
 
 export default function App() {
   const [tabs, setTabs] = useState<'preview' | 'editor'>('preview');
   return (
-    <Wrappper>
-      <GitHubCorners fixed target="__blank" zIndex={10} href="https://github.com/uiwjs/react-json-view" />
-      <Header>
-        <h1>
-          JSON View for React<SupVersion>v{VERSION}</SupVersion>
-        </h1>
-      </Header>
-      <ExampleWrapper>
-        <TabItem>
-          <Button $active={tabs === 'preview'} onClick={() => setTabs('preview')}>Preview</Button>
-          <Button $active={tabs === 'editor'} onClick={() => setTabs('editor')}>Editor</Button>
-        </TabItem>
-        {tabs === 'preview' && <Example />}
-        {tabs === 'editor' && <ExampleEditor />}
-      </ExampleWrapper>
-      <MarkdownPreview />
-      <BackToUp>Top</BackToUp>
-    </Wrappper>
+    <ExampleWrapper>
+      <TabItem>
+        <Button $active={tabs === 'preview'} onClick={() => setTabs('preview')}>
+          Preview
+        </Button>
+        <Button $active={tabs === 'editor'} onClick={() => setTabs('editor')}>
+          Editor
+        </Button>
+      </TabItem>
+      {tabs === 'preview' && <Example />}
+      {tabs === 'editor' && <ExampleEditor />}
+    </ExampleWrapper>
   );
 }

www/src/Markdown.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { createGlobalStyle } from 'styled-components';
-import '@wcj/dark-mode';
+import data from '@uiw/react-json-view/README.md';
+import MarkdownPreviewExample from '@uiw/react-markdown-preview-example';
 import App from './App';
 
-export const GlobalStyle = createGlobalStyle<any>`
+export const GlobalStyle = createGlobalStyle`
   [data-color-mode*='dark'], [data-color-mode*='dark'] body {
     --tabs-bg: #5f5f5f;
   }
@@ -21,17 +22,22 @@ export const GlobalStyle = createGlobalStyle<any>`
   }
 `;
 
+const Github = MarkdownPreviewExample.Github;
+const Example = MarkdownPreviewExample.Example;
+
 const container = document.getElementById('root');
 const root = createRoot(container!);
 root.render(
-  <React.Fragment>
-    <dark-mode
-      permanent
-      dark="Dark"
-      light="Light"
-      style={{ position: 'fixed', top: 8, left: 12, zIndex: 99, fontSize: 32 }}
-    />
-    <GlobalStyle />
-    <App />
-  </React.Fragment>,
+  <MarkdownPreviewExample
+    source={data.source}
+    components={data.components}
+    data={data.data}
+    title="JSON View for React"
+    version={`v${VERSION}`}
+  >
+    <Github href="https://github.com/uiwjs/react-markdown-preview-example" />
+    <Example>
+      <App />
+    </Example>
+  </MarkdownPreviewExample>,
 );