website: update website style.

Author: jaywcjlove

package.json

@@ -40,29 +40,30 @@
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
-    "@wcj/dark-mode": "^1.0.14",
-    "@uiw/react-codesandbox": "^1.1.5",
-    "@uiw/react-codepen": "^1.0.2",
-    "markdown-react-code-preview-loader": "^2.1.2",
-    "react-code-preview-layout": "^3.0.0",
     "@kkt/less-modules": "^7.4.9",
     "@kkt/ncc": "~1.0.8",
     "@kkt/raw-modules": "^7.4.9",
     "@kkt/scope-plugin-options": "^7.4.9",
-    "@types/react": "~18.0.15",
-    "@types/react-dom": "~18.0.6",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@uiw/react-codepen": "^1.0.2",
+    "@uiw/react-codesandbox": "^1.1.5",
     "@uiw/react-github-corners": "~1.5.3",
     "@uiw/react-markdown-preview": "~4.1.0",
     "@uiw/reset.css": "~1.0.6",
+    "@wcj/dark-mode": "^1.0.14",
     "compile-less-cli": "~1.8.11",
+    "goober": "^2.1.13",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.6.0",
+    "jest-environment-node": "^29.5.0",
+    "jest-watch-typeahead": "^2.2.2",
     "kkt": "^7.4.9",
+    "markdown-react-code-preview-loader": "^2.1.2",
     "react": "^18.2.0",
+    "react-code-preview-layout": "^3.0.0",
     "react-dom": "^18.2.0",
     "tsbb": "^4.1.5",
-    "jest": "^29.5.0",
-    "jest-watch-typeahead": "^2.2.2",
-    "jest-environment-jsdom": "~29.5.0",
-    "jest-environment-node": "^29.5.0",
     "uiw": "^4.21.14"
   },
   "eslintConfig": {
@@ -83,4 +84,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

website/App.css

@@ -2,27 +2,66 @@ import React from 'react';
 import GitHubCorners from '@uiw/react-github-corners';
 import '@uiw/reset.css';
 import "@wcj/dark-mode"
-import './App.css';
+import { styled } from 'goober';
 import Page from './components/Markdown';
 
+const Wrapper = styled('div')`
+  dark-mode {
+    position: fixed;
+    left: 10px;
+    top: 10px;
+  }
+`;
+
+const Title = styled('h1')`
+  text-align: center;
+  font-size: 2em;
+  font-weight: 600;
+`;
+
+const Header = styled('header')`
+  background-color: #282c34;
+  min-height: 60vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+`;
+
+const Anchor = styled('a')`
+  color: #09d3ac;
+`;
+
+const Details = styled('p')`
+  max-width: 702px;
+  padding: 25px 0 27px;
+`;
+
+const Content= styled('div')`
+  max-width: 980px;
+  margin: 0 auto;
+`;
+
 const App: React.FC = () => {
   return (
-    <div className="App">
+    <Wrapper>
       <dark-mode permanent></dark-mode>
       <GitHubCorners zIndex={9999} fixed href="https://github.com/uiwjs/react-split" />
-      <header className="App-header">
-        <h1 className="title">React Split</h1>
-        <a className="App-link" href="https://github.com/uiwjs/react-split" target="_blank" rel="noopener noreferrer">
+      <Header>
+        <Title className="title">React Split</Title>
+        <Anchor className="App-link" href="https://github.com/uiwjs/react-split" target="_blank" rel="noopener noreferrer">
           Fork on Github
-        </a>
-        <p>
+        </Anchor>
+        <Details>
           A piece of view can be divided into areas where the width or height can be adjusted by dragging.
-        </p>
-      </header>
-      <div style={{ maxWidth: 980, margin: '0 auto' }}>
+        </Details>
+      </Header>
+      <Content>
         <Page />
-      </div>
-    </div>
+      </Content>
+    </Wrapper>
   );
 }
 

website/App.tsx

@@ -1,6 +1,6 @@
-import pkg from '../../../package.json';
 import Codepen from '@uiw/react-codepen';
 import Codesandbox from '@uiw/react-codesandbox';
+import pkg from '../../../package.json';
 const version = pkg.version
 
 

website/components/Markdown/Code.tsx

@@ -2,20 +2,33 @@ import MarkdownPreview from '@uiw/react-markdown-preview';
 import { Root, Element, RootContent } from 'hast';
 import CodeLayout from 'react-code-preview-layout';
 import { getMetaId, isMeta, getURLParameters } from 'markdown-react-code-preview-loader';
-import styles from './index.module.less';
+import { styled } from 'goober';
 import data from "../../../README.md"
 import { getToolbarExtra } from "./Code"
 
 const Preview = CodeLayout.Preview;
 const Code = CodeLayout.Code;
 const Toolbar = CodeLayout.Toolbar;
 
+const MarkdownWrp = styled(MarkdownPreview)`
+  padding: 20px 26px;
+  pre[data-type='rehyp'] {
+    overflow: initial;
+    font-size: initial;
+    line-height: initial;
+
+    white-space: initial;
+    word-spacing: initial;
+    word-break: initial;
+    word-wrap: initial;
+  }
+`;
+
 export default function Markdown() {
   return (
-    <MarkdownPreview
+    <MarkdownWrp
       style={{ padding: '20px 26px' }}
       source={data.source}
-      className={styles.markdown}
       rehypeRewrite={(
         node: Root | RootContent,
         index: number,

website/components/Markdown/index.module.less

@@ -1,5 +1,9 @@
 import App from './App';
 import { createRoot } from 'react-dom/client';
+import { createElement } from 'react';
+import { setup } from 'goober';
+
+setup(createElement);
 
 const container = document.getElementById('root');
 const root = createRoot(container!);