website: update markdown preview.

Author: jaywcjlove

www/package.json

@@ -8,18 +8,12 @@
     "map": "source-map-explorer build/static/js/*.js --html build/website-result.html"
   },
   "dependencies": {
-    "@uiw/react-back-to-top": "1.2.3",
-    "@uiw/react-color-colorful": "^1.3.1",
+    "@uiw/react-markdown-preview-example": "^1.1.0",
     "@uiw/react-csv-reader": "1.0.2",
-    "@uiw/react-github-corners": "^1.5.15",
     "@uiw/react-json-view": "^1.6.0",
-    "@uiw/react-markdown-preview": "^4.1.0",
-    "@wcj/dark-mode": "^1.0.13",
     "goober": "^2.1.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,33 +1,8 @@
-import GitHubCorners from '@uiw/react-github-corners';
 import CSVReader from '@uiw/react-csv-reader';
 import JsonView from '@uiw/react-json-view';
 import { lightTheme } from '@uiw/react-json-view/light';
-import BackToUp from '@uiw/react-back-to-top';
 import { styled } from "goober";
 import { CSSProperties, useState } from 'react';
-import MarkdownPreview from './Markdown';
-
-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 Wrappper = styled('div')`
-  padding-bottom: 5rem;
-`;
 
 const Examples = styled('div')`
   text-align: left;
@@ -37,36 +12,26 @@ const Examples = styled('div')`
 export default function App() {
   const [value, setValue] = useState<any[]>([]);
   return (
-    <Wrappper>
-      <GitHubCorners fixed target="__blank" zIndex={10} href="https://github.com/uiwjs/react-csv-reader" />
-      <Header>
-        <h1>
-        CSV Reader for React<SupVersion>v{VERSION}</SupVersion>
-        </h1>
-        <Examples>
-          <CSVReader
-            parserOptions={{
-              // header: true,
-              // worker: true,
-            }}
-            onFileLoaded={async (data, iFileInfo, iOriginalFile) => {
-              setValue(data);
-              const txt = await iOriginalFile?.text()
-              console.log('data:', data, iFileInfo, iOriginalFile, txt)
-            }}
-          />
-          {value && value.length > 0 && (
-            <JsonView
-              keyName="data"
-              value={value}
-              collapsed={false}
-              style={lightTheme as CSSProperties}
-            />
-          )}
-        </Examples>
-      </Header>
-      <MarkdownPreview />
-      <BackToUp>Top</BackToUp>
-    </Wrappper>
+    <Examples>
+      <CSVReader
+        parserOptions={{
+          // header: true,
+          // worker: true,
+        }}
+        onFileLoaded={async (data, iFileInfo, iOriginalFile) => {
+          setValue(data);
+          const txt = await iOriginalFile?.text()
+          console.log('data:', data, iFileInfo, iOriginalFile, txt)
+        }}
+      />
+      {value && value.length > 0 && (
+        <JsonView
+          keyName="data"
+          value={value}
+          collapsed={false}
+          style={lightTheme as CSSProperties}
+        />
+      )}
+    </Examples>
   );
 }

www/src/Markdown.tsx

@@ -3,6 +3,8 @@ import { createRoot } from 'react-dom/client';
 import '@wcj/dark-mode';
 import App from './App';
 import { glob, setup } from 'goober';
+import MarkdownPreviewExample from '@uiw/react-markdown-preview-example';
+import data from '@uiw/react-csv-reader/README.md';
 
 setup(React.createElement);
 
@@ -19,16 +21,22 @@ glob`
   }
 `;
 
+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 }}
-    />
-    <App />
-  </React.Fragment>,
+  <MarkdownPreviewExample
+    source={data.source}
+    components={data.components}
+    data={data.data}
+    title="CSV Reader for React"
+    version={`v${VERSION}`}
+  >
+    <Github href="https://github.com/uiwjs/react-csv-reader" />
+    <Example>
+      <App />
+    </Example>
+  </MarkdownPreviewExample>,
 );