website: fix markdown preview type error.

Author: jaywcjlove

package.json

@@ -36,10 +36,9 @@
     ]
   },
   "devDependencies": {
-    "cross-env": "^7.0.3",
     "husky": "^8.0.0",
-    "lerna": "^7.1.5",
-    "lint-staged": "^14.0.1",
+    "lerna": "^8.0.0",
+    "lint-staged": "^15.1.0",
     "prettier": "^3.0.2",
     "tsbb": "^4.1.5"
   }

website/.kktrc.ts

@@ -18,6 +18,8 @@ export default (conf: Configuration, env: 'production' | 'development', options:
     }),
   );
   conf.module!.exprContextCritical = false;
+  conf.ignoreWarnings = [{ module: /node_modules[\\/]parse5[\\/]/ }];
+
   if (env === 'production') {
     conf.optimization = {
       ...conf.optimization,

website/package.json

@@ -12,14 +12,14 @@
     "map": "source-map-explorer build/static/js/*.js --html build/website-result.html"
   },
   "devDependencies": {
-    "@kkt/less-modules": "^7.4.9",
-    "@kkt/raw-modules": "^7.4.9",
-    "@kkt/scope-plugin-options": "^7.4.9",
+    "@kkt/less-modules": "^7.5.4",
+    "@kkt/raw-modules": "^7.5.4",
+    "@kkt/scope-plugin-options": "^7.5.4",
     "@types/katex": "^0.16.0",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
     "@types/react-test-renderer": "^18.0.2",
-    "kkt": "^7.4.9",
+    "kkt": "^7.5.4",
     "source-map-explorer": "~2.5.2"
   },
   "dependencies": {

website/src/comps/Nav.tsx

@@ -20,6 +20,9 @@ const Menu = styled.nav`
 export const Nav = () => {
   return (
     <Menu>
+      <a href="https://jaywcjlove.github.io/#/sponsor" target="_blank" rel="noreferrer">
+        Sponsor
+      </a>
       <NavLink to="/">Home</NavLink>
       <NavLink to="/docs">Document</NavLink>
       <a href="https://github.com/uiwjs/react-login-page" rel="noreferrer" target="_blank">

website/src/comps/Preview.tsx

@@ -15,13 +15,13 @@ const MarkdownCode = CodeLayout.Preview;
 const Code = CodeLayout.Code;
 const Toolbar = CodeLayout.Toolbar;
 
-const Wrapper = styled.div<{ isShowExample?: boolean }>`
+const Wrapper = styled.div<{ $isShowExample?: boolean }>`
   flex: 1;
   padding-right: 0.51rem;
   padding-left: 0.51rem;
   overflow: hidden;
   z-index: 1;
-  padding-top: ${({ isShowExample }) => (isShowExample ? '0' : '0')};
+  padding-top: ${({ $isShowExample }) => ($isShowExample ? '0' : '0')};
   margin: 0 auto;
   width: 100%;
   ${mediaStyle}
@@ -95,52 +95,34 @@ export const Preview: FC<PropsWithChildren<PreviewProps>> = (props) => {
           </PageArrow>
         </NavMenu>
       )}
-      <Wrapper isShowExample={props.disableNav}>
+      <Wrapper $isShowExample={props.disableNav}>
         {loading && <div>Loading...</div>}
         {mdData && !loading && (
           <Markdown
             source={mdData.source}
             rehypeRewrite={(node: Root | RootContent, index: number, parent: Root | Element) => {
               if (node.type === 'element' && parent && parent.type === 'root') {
-                const menu = parent.children[1] as Element | undefined;
-                let childLength = [...parent.children].filter((item) => item.type !== 'raw').length;
-                const lastChild = parent.children[parent.children.length - 1];
-                if (lastChild?.type === 'raw') {
-                  childLength = parent.children.length - 2;
-                }
-                if (
-                  (index + 1 === childLength || index - 1 === childLength || index === childLength) &&
-                  menu?.properties?.class !== 'menu-toc'
-                ) {
-                  const child = [...parent.children].map((item) => {
-                    if (item.type === 'element' && item.tagName === 'pre') {
-                      const meta = item.children[0]?.data?.meta as string;
-                      if (isMeta(meta)) {
-                        item.tagName = 'div';
-                        item.properties = {
-                          ...item.properties,
-                          'data-md': meta,
-                          'data-meta': 'preview',
-                        };
-                        return { ...item };
-                      }
+                [...parent.children].map((item) => {
+                  if (item.type === 'element' && item.tagName === 'pre') {
+                    const meta = (item.children[0]?.data as any)?.meta as string;
+                    if (isMeta(meta)) {
+                      item.tagName = 'div';
+                      item.properties = {
+                        ...item.properties,
+                        'data-md': meta,
+                        'data-meta': 'preview',
+                      };
+                      return { ...item };
                     }
-                    return item;
-                  });
-                  parent.children = [
-                    {
-                      type: 'element',
-                      tagName: 'div',
-                      children: child as Element[],
-                    },
-                  ];
-                }
+                  }
+                  return item;
+                });
               }
             }}
             components={{
               div: ({ node, ...props }) => {
                 const { 'data-meta': meta, 'data-md': metaData, ...rest } = props as any;
-                const line = node.position?.start.line;
+                const line = node?.position?.start.line;
                 const metaId = getMetaId(metaData) || String(line);
                 const Child = mdData.components[metaId];
                 if (meta !== 'preview' || !metaId || typeof Child !== 'function') return <div {...props} />;

website/src/pages/home.tsx

@@ -84,6 +84,9 @@ export const Home = () => {
         <a href="https://github.com/uiwjs/react-login-page" target="_blank" rel="noreferrer">
           Github
         </a>
+        <a href="https://jaywcjlove.github.io/#/sponsor" target="_blank" rel="noreferrer">
+          Sponsor
+        </a>
       </Nav>
       <Example />
     </Wrapper>