website: update markdown preview.

uiwjs · Jul 22, 2023 · a9a7310 · a9a7310
1 parent 04dbddd
commit a9a7310
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 244 deletions.
diff --git a/core/README.md b/core/README.md
@@ -32,7 +32,7 @@ $ npm install @uiw/react-markdown-preview --save
 
 [![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/react-markdown-preview-co1mj?fontsize=14&hidenavigation=1&theme=dark)
 
-```jsx mdx:preview
+```jsx mdx:preview&checkered=0
 import React from 'react';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 
@@ -51,7 +51,7 @@ export default function Demo() {
 
 ## Disable Header links
 
-```jsx mdx:preview
+```jsx mdx:preview&checkered=0
 import React from 'react';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 
@@ -81,7 +81,7 @@ export default function Demo() {
 
 syntax: <code>```jsx {1,4-5}</code>
 
-```jsx mdx:preview?background=#fff
+```jsx mdx:preview
 import React from 'react';
 import MarkdownPreview from '@uiw/react-markdown-preview';
 

diff --git a/website/package.json b/website/package.json
@@ -7,15 +7,9 @@
     "start": "kkt start"
   },
   "dependencies": {
-    "@uiw/react-back-to-top": "^1.2.0",
-    "@uiw/react-codesandbox": "~1.1.4",
-    "@uiw/react-github-corners": "~1.5.3",
-    "@uiw/react-markdown-preview": "^4.1.13",
-    "@uiw/react-shields": "~1.1.2",
-    "@uiw/reset.css": "~1.0.5",
-    "@wcj/dark-mode": "~1.0.9",
+    "@uiw/react-markdown-preview-example": "^1.5.5",
+    "@uiw/react-shields": "^1.1.3",
     "react": "~18.2.0",
-    "react-code-preview-layout": "^3.0.0",
     "react-dom": "~18.2.0",
     "react-router-dom": "^6.8.1"
   },

diff --git a/website/src/App.css b/website/src/App.css
diff --git a/website/src/App.tsx b/website/src/App.tsx
@@ -1,58 +1,26 @@
-import { useState } from 'react';
-import GitHubCorners from '@uiw/react-github-corners';
 import Github from '@uiw/react-shields/esm/github';
 import Npm from '@uiw/react-shields/esm/npm';
-import BackToUp from '@uiw/react-back-to-top';
-import MarkdownPreview from '@uiw/react-markdown-preview';
-import '@wcj/dark-mode';
-import logo from './logo.svg';
-import { Preview } from './preview';
-import './App.css';
+import styled from 'styled-components';
 
-let val = 1;
+const Footer = styled.footer`
+  text-align: center;
+  padding-top: 30px;
+`;
 
 const App = () => {
-  const [value, setValue] = useState('');
   return (
-    <div className="App">
-      <BackToUp>Top</BackToUp>
-      <dark-mode permanent light="Light" dark="Dark"></dark-mode>
-      <GitHubCorners zIndex={9999} fixed target="__blank" href="https://github.com/uiwjs/react-markdown-preview" />
-      <header className="App-header">
-        <img style={{}} src={logo} className="App-logo" alt="logo" />
-        <a href="https://github.com/uiwjs/react-markdown-preview" target="_blank" rel="noopener noreferrer">
-          React Markdown Preview
-        </a>
-        <p>
-          React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub
-          Markdown style.
-        </p>
-      </header>
-      <div className="App-editor">
-        <button onClick={() => setValue('# Markdown ' + val++)}>set value</button>
-
-        <textarea
-          placeholder="Please enter the Markdown code!"
-          value={value}
-          spellCheck="false"
-          onChange={(e) => setValue(e.target.value)}
-        />
-        <MarkdownPreview className="App-editor-preview" source={value} />
-      </div>
-      <Preview />
-      <div className="App-footer">
-        <Github user="uiwjs" repo="react-markdown-preview">
-          <Github.Social type="forks" href="https://github.com/uiwjs/react-markdown-preview" />
-          <Github.Social type="stars" href="https://github.com/uiwjs/react-markdown-preview/stargazers" />
-          <Github.Social type="watchers" href="https://github.com/uiwjs/react-markdown-preview/watchers" />
-        </Github>
-        <Npm.Version
-          scope="@uiw"
-          packageName="react-markdown-preview"
-          href="https://www.npmjs.com/package/@uiw/react-markdown-preview"
-        />
-      </div>
-    </div>
+    <Footer>
+      <Github user="uiwjs" repo="react-markdown-preview">
+        <Github.Social type="forks" href="https://github.com/uiwjs/react-markdown-preview" />
+        <Github.Social type="stars" href="https://github.com/uiwjs/react-markdown-preview/stargazers" />
+        <Github.Social type="watchers" href="https://github.com/uiwjs/react-markdown-preview/watchers" />
+      </Github>
+      <Npm.Version
+        scope="@uiw"
+        packageName="react-markdown-preview"
+        href="https://www.npmjs.com/package/@uiw/react-markdown-preview"
+      />
+    </Footer>
   );
 };
 

diff --git a/website/src/index.tsx b/website/src/index.tsx
@@ -1,6 +1,25 @@
-import App from './App';
 import { createRoot } from 'react-dom/client';
+import MarkdownPreviewExample from '@uiw/react-markdown-preview-example';
+import data from '@uiw/react-markdown-preview/README.md';
+import Example from './App';
 
 const container = document.getElementById('root');
 const root = createRoot(container!);
-root.render(<App />);
+root.render(
+  <MarkdownPreviewExample
+    source={data.source}
+    components={data.components}
+    data={data.data}
+    title={
+      <a href="https://github.com/uiwjs/react-markdown-preview" target="_blank" rel="noopener noreferrer">
+        React Markdown Preview
+      </a>
+    }
+    description="React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub
+          Markdown style."
+    version={`v${VERSION}`}
+  >
+    <MarkdownPreviewExample.Github href="https://github.com/uiwjs/react-markdown-preview" />
+    <Example />
+  </MarkdownPreviewExample>,
+);
diff --git a/website/src/logo.svg b/website/src/logo.svg
diff --git a/website/src/preview/index.tsx b/website/src/preview/index.tsx
diff --git a/website/src/react-app-env.d.ts b/website/src/react-app-env.d.ts
@@ -1,14 +1,6 @@
 /// <reference types="react-scripts" />
 
-declare module '*.module.less' {
-  const classes: { readonly [key: string]: string };
-  export default classes;
-}
-
-declare module '*.less' {
-  const src: string;
-  export default src;
-}
+declare var VERSION: string;
 
 declare module '*.md' {
   import { CodeBlockData } from 'markdown-react-code-preview-loader';