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-github-corners": "^1.5.15",
+    "@uiw/react-markdown-preview-example": "^1.3.1",
     "@uiw/react-json-view": "^1.6.0",
-    "@uiw/react-markdown-preview": "^4.1.0",
     "@uiw/react-xml-reader": "1.0.1",
-    "@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 { CSSProperties, useState } from 'react';
 import XMLReader from '@uiw/react-xml-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,34 +12,24 @@ 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-xml-reader" />
-      <Header>
-        <h1>
-        XML Reader for React<SupVersion>v{VERSION}</SupVersion>
-        </h1>
-        <Examples>
-          <XMLReader
-            parserOptions={{
-            }}
-            onFileLoaded={async (data, iFileInfo, iOriginalFile, text) => {
-              setValue(data);
-              const txt = await iOriginalFile?.text()
-              console.log('data:', data, iFileInfo, iOriginalFile, txt)
-            }}
-          />
-          {value && (
-            <JsonView
-              keyName="data"
-              value={value}
-              collapsed={false}
-              style={lightTheme as CSSProperties}
-            />
-          )}
-        </Examples>
-      </Header>
-      <MarkdownPreview />
-      <BackToUp>Top</BackToUp>
-    </Wrappper>
+    <Examples>
+      <XMLReader
+        parserOptions={{
+        }}
+        onFileLoaded={async (data, iFileInfo, iOriginalFile, text) => {
+          setValue(data);
+          const txt = await iOriginalFile?.text()
+          console.log('data:', data, iFileInfo, iOriginalFile, txt)
+        }}
+      />
+      {value && (
+        <JsonView
+          keyName="data"
+          value={value}
+          collapsed={false}
+          style={lightTheme as CSSProperties}
+        />
+      )}
+    </Examples>
   );
 }

www/src/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 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-xml-reader/README.md';
+import App from './App';
 
 setup(React.createElement);
 
@@ -19,16 +20,23 @@ 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="XML View for React"
+    description="React component that handles xml file input and its parsing."
+    version={`v${VERSION}`}
+  >
+    <Github href="https://github.com/uiwjs/react-json-view" />
+    <Example>
+      <App />
+    </Example>
+  </MarkdownPreviewExample>
 );