website: update markdown preview.

uiwjs · Jul 17, 2023 · 9b4d1d4 · 9b4d1d4
1 parent f4a6bf5
commit 9b4d1d4
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 190 deletions.
diff --git a/www/.kktrc.ts b/www/.kktrc.ts
@@ -1,12 +1,12 @@
 import path from 'path';
-import webpack, { Configuration } from 'webpack';
-import { LoaderConfOptions } from 'kkt';
+import webpack from 'webpack';
+import { LoaderConfOptions, WebpackConfiguration } from 'kkt';
 import lessModules from '@kkt/less-modules';
 import scopePluginOptions from '@kkt/scope-plugin-options';
 import { mdCodeModulesLoader } from 'markdown-react-code-preview-loader';
 import pkg from './package.json';
 
-export default (conf: Configuration, env: 'production' | 'development', options: LoaderConfOptions) => {
+export default (conf: WebpackConfiguration, env: 'production' | 'development', options: LoaderConfOptions) => {
   conf = lessModules(conf, env, options);
   conf = mdCodeModulesLoader(conf);
   conf = scopePluginOptions(conf, env, {

diff --git a/www/package.json b/www/package.json
@@ -20,17 +20,12 @@
     "source-map-explorer": "^2.5.3"
   },
   "dependencies": {
-    "@uiw/react-github-corners": "~1.5.3",
+    "@uiw/react-markdown-preview-example": "^1.5.3",
     "@uiw/react-heat-map": "2.1.1",
-    "@uiw/react-markdown-preview": "^4.0.17",
-    "@uiw/react-shields": "~1.1.2",
     "@uiw/react-tooltip": "^4.21.11",
     "@uiw/reset.css": "^1.0.6",
-    "@wcj/dark-mode": "^1.0.15",
     "react": "^18.2.0",
-    "react-code-preview-layout": "^3.0.0",
-    "react-dom": "^18.2.0",
-    "rehype-ignore": "^1.0.5"
+    "react-dom": "^18.2.0"
   },
   "eslintConfig": {
     "extends": [

diff --git a/www/src/App.module.less b/www/src/App.module.less
diff --git a/www/src/App.tsx b/www/src/App.tsx
diff --git a/www/src/Example.tsx b/www/src/Example.tsx
@@ -1,7 +1,43 @@
-import { Fragment, useState } from 'react';
+import { useState } from 'react';
 import Tooltip from '@uiw/react-tooltip';
 import HeatMap, { HeatMapValue } from '@uiw/react-heat-map';
-import styles from './App.module.less';
+import styled from 'styled-components';
+
+const ExampleWrapper = styled.div`
+  background-color: #fff;
+  border-radius: 5px;
+  box-shadow: 0 0 0 1px rgb(16 22 26 / 10%), 0 0 0 rgb(16 22 26 / 0%), 0 1px 1px rgb(16 22 26 / 20%);
+  margin: 0 auto;
+  margin-top: 70px;
+  width: 663px;
+  svg {
+    border-radius: 5px;
+  }
+`;
+
+const Tools = styled.div`
+  user-select: none;
+  font-size: 12px;
+  margin-top: 10px !important;
+  padding: 10px;
+  padding-left: 0px;
+  border-radius: 5px;
+  width: 663px;
+  margin: 0 auto;
+  label {
+    display: flex;
+    align-items: center;
+    input {
+      margin-right: 5px;
+      margin-left: 10px;
+    }
+  }
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
 
 const data1: HeatMapValue[] = [
   { date: '2016/01/11', count: 2, content: '' },
@@ -71,8 +107,8 @@ export default function Example() {
   const [enableWeekLabels, setEnableWeekLabels] = useState<false | undefined | string[]>(undefined);
   const [enableMonthLabels, setEnableMonthLabels] = useState<false | undefined | string[]>(undefined);
   return (
-    <Fragment>
-      <div className={styles.example} style={{ width: 663 }}>
+    <Wrapper>
+      <ExampleWrapper>
         <HeatMap
           style={{
             backgroundColor: enableDark ? '#000' : '#fff',
@@ -126,8 +162,8 @@ export default function Example() {
           //   );
           // }}
         />
-      </div>
-      <div style={{ width: 663, margin: '0 auto' }} className={styles.tools}>
+      </ExampleWrapper>
+      <Tools>
         <div style={{ paddingLeft: 10, paddingBottom: 20 }}>
           <button onClick={() => setValue(data1)}>Value 1</button>
           <button onClick={() => setValue(data2)}>Value 2</button>
@@ -231,7 +267,7 @@ export default function Example() {
             legendCellSize = {legendCellSize}
           </label>
         </div>
-      </div>
-    </Fragment>
+      </Tools>
+    </Wrapper>
   );
 }
diff --git a/www/src/Markdown.tsx b/www/src/Markdown.tsx
diff --git a/www/src/index.tsx b/www/src/index.tsx
@@ -1,8 +1,25 @@
 import { createRoot } from 'react-dom/client';
-import '@uiw/reset.css/reset.css';
-import App from './App';
+import MarkdownPreview from '@uiw/react-markdown-preview-example';
+import data from '@uiw/react-heat-map/README.md';
+import Demo from './Example';
 
+const Github = MarkdownPreview.Github;
+const Example = MarkdownPreview.Example;
 
 const container = document.getElementById('root');
 const root = createRoot(container!); // createRoot(container!) if you use TypeScript
-root.render(<App />);
+root.render(
+  <MarkdownPreview
+    source={data.source}
+    components={data.components}
+    data={data.data}
+    title="HeatMap for React"
+    description="React component create calendar heatmap to visualize time series data, a la github contribution graph."
+    version={`v${VERSION}`}
+  >
+    <Github href="https://github.com/uiwjs/react-heat-map" />
+    <Example>
+      <Demo />
+    </Example>
+  </MarkdownPreview>,
+);
diff --git a/www/src/logo.svg b/www/src/logo.svg