feat: 调整主页路由和样式 (#15)

* feat: use gasp

* feat: scroll animation(bats&birds&mountains)

* feat: 网页路由&主页滚动效果

* feat: 调主页路由和样式

* feat: pnpm构建

* fix: add gsap package

* fix: title && component css

* fix scroll problem

---------

Co-authored-by: 1360151219 <[email protected]>
Co-authored-by: matto49 <[email protected]>

Author: 3 people

.vscode/settings.json

@@ -16,5 +16,6 @@
   },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  } // required to format on save
+  },
+  "svg.preview.background": "white" // required to format on save
 }

package.json

@@ -15,6 +15,7 @@
     "husky": "^8.0.2"
   },
   "dependencies": {
-    "core-js": "^3.25.1"
+    "core-js": "^3.25.1",
+    "gsap": "^3.12.2"
   }
 }

packages/demo/index.scss

@@ -1,7 +1,8 @@
 :root {
   --master-bg-color: rgb(252, 234, 220);
   --master-deep-bg-color: #c76591;
-  --master-text-color: #634f47;
+  --master-text-color: #fff;
+  --link-color: #eabe9e;
 }
 * {
   padding: 0;
@@ -11,6 +12,7 @@ body,
 html,
 #root {
   height: 100%;
+  font-family: 'Helvetica Neue', 'Gilroy ExtraBold', Times, serif;
 }
 
 h1 {
@@ -69,51 +71,3 @@ h3 {
   padding: 32px 40px;
   margin: 24px;
 }
-
-.pivot-code-box {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  margin: 16px 0;
-  overflow: hidden;
-  border: 1px solid rgba(5, 5, 5, 0.06);
-  border-radius: 6px;
-  -webkit-transition: all 0.2s;
-  transition: all 0.2s;
-  &-actions {
-    display: flex;
-    flex-direction: row-reverse;
-    padding: 4px 8px;
-    .pivot-code-box-icon {
-      width: 20px;
-      height: 20px;
-      cursor: pointer;
-      img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-  &-demo {
-    padding: 24px 30px;
-    display: flex;
-    border-bottom: 1px solid rgba(5, 5, 5, 0.06);
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    > :not(.PIVOT-draggable-item) {
-      margin: 0 24px;
-    }
-  }
-
-  .line-numbers {
-    //width: 100%;
-    .code-toolbar {
-      .data-prismjs-copy {
-        //width: 70vw;
-        //width: 100%;
-        overflow: auto;
-      }
-    }
-  }
-}

packages/demo/index.tsx

@@ -1,61 +1,26 @@
-import { useState } from 'react';
 import ReactDom from 'react-dom/client';
-import { Outlet, BrowserRouter as Router, useRoutes } from 'react-router-dom';
-import { Button, Icon, Input, Skeleton, Card } from 'pivot-design';
+import React, { ReactNode } from 'react';
+import { BrowserRouter as Router, useLocation, useRoutes } from 'react-router-dom';
 import router from '@/routers';
-import ButtonMdx from './src/components/Button/index.mdx';
-import IconMdx from './src/components/Icon/index.mdx';
-import InputMdx from './src/components/Input/index.mdx';
-import CardMdx from './src/components/Card/index.mdx';
-import SkeletonMdx from './src/components/Skeleton/index.mdx';
-import Draggable from '@/examples/Draggable/Draggable';
-import CodeBlock from '@/components/codeBlock';
 import './index.scss';
-const App = () => {
-  const [select, setSelect] = useState('Input');
-  const demoSelect = () => {
-    return (
-      <div className="demo-container">
-        <div className={`demo-item ${select === 'Button' ? 'active' : ''}`} onClick={() => setSelect('Button')}>
-          按钮
-        </div>
-        <div className={`demo-item ${select === 'Card' ? 'active' : ''}`} onClick={() => setSelect('Card')}>
-          卡片
-        </div>
-
-        <div className={`demo-item ${select === 'Draggable' ? 'active' : ''}`} onClick={() => setSelect('Draggable')}>
-          拖拽列表
-        </div>
-        <div className={`demo-item ${select === 'Skeleton' ? 'active' : ''}`} onClick={() => setSelect('Skeleton')}>
-          骨架屏
-        </div>
-        <div className={`demo-item ${select === 'Icon' ? 'active' : ''}`} onClick={() => setSelect('Icon')}>
-          图标
-        </div>
-        <div className={`demo-item ${select === 'Input' ? 'active' : ''}`} onClick={() => setSelect('Input')}>
-          输入框
-        </div>
-      </div>
-    );
-  };
+import { useLayoutEffect } from 'react';
 
+const App = () => {
   return useRoutes(router);
+};
 
-  /* <div className="pivot-design-docs-content">
-        {demoSelect()}
-        <div className="demo-component">
-          {select === 'Button' ? <ButtonMdx components={{ Button, CodeBlock }} /> : null}
-          {select === 'Icon' ? <IconMdx components={{ Icon, CodeBlock }} /> : null}
-          {select === 'Input' ? <InputMdx components={{ Input, CodeBlock }} /> : null}
-          {select === 'Card' ? <CardMdx components={{ Card, CodeBlock }} /> : null}
-          {select === 'Draggable' ? <Draggable /> : null}
-          {select === 'Skeleton' ? <SkeletonMdx components={{ Skeleton, CodeBlock }} /> : null}
-        </div>
-      </div> */
+const AutoScrollToTop: React.FC<{ children: React.ReactElement }> = ({ children }) => {
+  const location = useLocation();
+  useLayoutEffect(() => {
+    document.documentElement.scrollTo(0, 0);
+  }, [location.pathname]);
+  return children;
 };
 
 ReactDom.createRoot(document.getElementById('root') as HTMLElement).render(
   <Router>
-    <App />
+    <AutoScrollToTop>
+      <App />
+    </AutoScrollToTop>
   </Router>
 );

packages/demo/package.json

@@ -38,6 +38,7 @@
   "dependencies": {
     "@mdx-js/loader": "^2.1.5",
     "babel-plugin-prismjs": "^2.1.0",
+    "gsap": "^3.11.5",
     "pivot-design": "workspace:*",
     "pivot-design-icon": "workspace:*",
     "prismjs": "^1.29.0",

packages/demo/src/components/codeBlock.tsx renamed to packages/demo/src/components/_CodeBlock/codeBlock.tsx

@@ -1,5 +1,6 @@
 import Prism from 'prismjs';
 import React, { useRef, useState, useEffect, TransitionEventHandler } from 'react';
+import './index.scss';
 interface ICodeProps {
   children: React.ReactNode;
   code: string;

packages/demo/src/components/_CodeBlock/index.scss

@@ -0,0 +1,47 @@
+.pivot-code-box {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  margin: 16px 0;
+  overflow: hidden;
+  border: 1px solid rgba(5, 5, 5, 0.06);
+  border-radius: 6px;
+  -webkit-transition: all 0.2s;
+  transition: all 0.2s;
+  &-actions {
+    display: flex;
+    flex-direction: row-reverse;
+    padding: 4px 8px;
+    .pivot-code-box-icon {
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  &-demo {
+    padding: 24px 30px;
+    display: flex;
+    border-bottom: 1px solid rgba(5, 5, 5, 0.06);
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    > :not(.PIVOT-draggable-item) {
+      margin: 0 24px;
+    }
+  }
+
+  .line-numbers {
+    //width: 100%;
+    .code-toolbar {
+      .data-prismjs-copy {
+        //width: 70vw;
+        //width: 100%;
+        overflow: auto;
+      }
+    }
+  }
+}

packages/demo/src/examples/Draggable/Draggable.tsx

@@ -1,6 +1,6 @@
 import DraggableMdx from '../../components/Draggable/index.mdx';
 import { DraggableItem, Droppable, arrayMove, DndContext, Sortable } from 'pivot-design';
-import CodeBlock from '@/components/codeBlock';
+import CodeBlock from '@/components/_CodeBlock/codeBlock';
 import { useState } from 'react';
 
 const Draggable = () => {