diff --git a/www/.kktrc.ts b/www/.kktrc.ts index 9104e6a2..a95e68a7 100644 --- 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 index 7f3c1a15..6c56be3c 100644 --- 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 deleted file mode 100644 index ed099579..00000000 --- a/www/src/App.module.less +++ /dev/null @@ -1,73 +0,0 @@ -html { - background-color: #282c34; - font-family: Alliance no\.1, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, - Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; -} - -.header { - background-color: #282c34; - min-height: calc(100vh - 80px); - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding-bottom: 30px; - color: white; -} -.version { - position: fixed; - z-index: 9; - left: 40px; - top: 10px; - background-color: #ffffff4f; -} -.logo { - max-width: 210px; -} - -.info { - font-size: 21px; - max-width: 520px; - text-align: center; -} - -.app { - padding-bottom: 70px; -} - -.content { - max-width: 950px; - margin: 0 auto; - padding-top: 125px; - > pre { - overflow-x: initial; - } -} - -.example { - 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; - svg { - border-radius: 5px; - } -} - -.tools { - user-select: none; - font-size: 12px; - margin-top: 10px !important; - padding: 10px; - padding-left: 0px; - border-radius: 5px; - label { - display: flex; - align-items: center; - input { - margin-right: 5px; - margin-left: 10px; - } - } -} diff --git a/www/src/App.tsx b/www/src/App.tsx deleted file mode 100644 index 48fbfdd3..00000000 --- a/www/src/App.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import GitHubCorners from '@uiw/react-github-corners'; -import '@wcj/dark-mode'; -import MarkdownPreview from './Markdown'; -import Example from './Example'; -import logo from './logo.svg'; -import styles from './App.module.less'; - -const App: React.FC = () => { - return ( -
- - {VERSION} - -
- react logo -

- React component create calendar heatmap to visualize time series data, a la github contribution graph. -

- -
- -
- ); -}; - -export default App; diff --git a/www/src/Example.tsx b/www/src/Example.tsx index f481eb67..7b91ef9f 100644 --- 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(undefined); const [enableMonthLabels, setEnableMonthLabels] = useState(undefined); return ( - -
+ + -
-
+ +
@@ -231,7 +267,7 @@ export default function Example() { legendCellSize = {legendCellSize}
-
- + + ); } diff --git a/www/src/Markdown.tsx b/www/src/Markdown.tsx deleted file mode 100644 index 29920958..00000000 --- a/www/src/Markdown.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { useEffect, useRef } from 'react'; -import CodeLayout from 'react-code-preview-layout'; -import { getMetaId, isMeta, getURLParameters } from 'markdown-react-code-preview-loader'; -import MarkdownPreview from '@uiw/react-markdown-preview'; -import rehypeIgnore from 'rehype-ignore'; -import data from '@uiw/react-heat-map/README.md'; -import { CodeComponent, ReactMarkdownNames } from 'react-markdown/lib/ast-to-react'; - -const Preview = CodeLayout.Preview; -const Code = CodeLayout.Code; -const Toolbar = CodeLayout.Toolbar; - -const CodePreview: CodeComponent | ReactMarkdownNames = ({ inline, node, ...props }) => { - const $dom = useRef(null); - const { 'data-meta': meta, ...rest } = props as any; - - useEffect(() => { - if ($dom.current) { - const parentElement = $dom.current.parentElement; - if (parentElement && parentElement.parentElement) { - parentElement.parentElement.replaceChild($dom.current, parentElement); - } - } - }, [$dom]); - - if (inline || !isMeta(meta)) { - return ; - } - const line = node.position?.start.line; - const metaId = getMetaId(meta) || String(line); - const Child = data.components[`${metaId}`]; - if (metaId && typeof Child === 'function') { - const code = data.data[metaId].value || ''; - const { title } = getURLParameters(meta); - return ( - - - - - {title || 'Code Example'} - - - - - ); - } - return ; -}; - -export default function Markdown() { - return ( - - ); -} diff --git a/www/src/index.tsx b/www/src/index.tsx index 0b715d34..e4ee29df 100644 --- 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(); \ No newline at end of file +root.render( + + + + + + , +); \ No newline at end of file diff --git a/www/src/logo.svg b/www/src/logo.svg deleted file mode 100644 index 3f454ebc..00000000 --- a/www/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - -