chore: wip

yjl9903 · Sep 11, 2024 · af9a5ab · af9a5ab
1 parent 2d5ba82
commit af9a5ab
Show file tree

Hide file tree

Showing 7 changed files with 312 additions and 24 deletions.
diff --git a/apps/frontend/web/app/hooks/index.ts b/apps/frontend/web/app/hooks/index.ts
@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+
+export const useDocument = () => {
+  return import.meta.env.SSR ? undefined : document;
+};
+
+export const useDocumentScroll = () => {
+  const document = useDocument();
+
+  const [state, setState] = useState({
+    x: 0,
+    y: 0
+  });
+
+  useEffect(() => {
+    const handler = () => {
+      if (document?.documentElement) {
+        setState({
+          x: document.documentElement.scrollLeft,
+          y: document.documentElement.scrollTop
+        });
+      }
+    };
+
+    if (document) {
+      document.addEventListener('scroll', handler, {
+        capture: false,
+        passive: true
+      });
+    }
+
+    return () => {
+      if (document) {
+        document.removeEventListener('scroll', handler);
+      }
+    };
+  }, [document]);
+
+  return state;
+};
diff --git a/apps/frontend/web/app/layouts/Layout.tsx b/apps/frontend/web/app/layouts/Layout.tsx
@@ -0,0 +1,52 @@
+import { NavLink } from '@remix-run/react';
+import { atom, useAtom } from 'jotai';
+import { useEffect, useRef, useState } from 'react';
+
+import { useDocumentScroll } from '~/hooks';
+
+const NavHeight = 40;
+
+const TitleHeight = 152;
+
+export const heroHeightAtom = atom((get) => NavHeight + TitleHeight);
+
+export default function Layout(props: { children?: React.ReactNode }) {
+  const { x, y } = useDocumentScroll();
+  const [heroHeight] = useAtom(heroHeightAtom);
+
+  return (
+    <div className="w-full" style={{ '--hero-height': `${heroHeight}px` }}>
+      <Header scrollY={y}></Header>
+      <div className="flex pt-$hero-height">
+        <div className="w-[300px] border-r-1 h-[150vh]"></div>
+        <div className="flex-auto">{props.children}</div>
+      </div>
+    </div>
+  );
+}
+
+
+
+function Header(props: { scrollY: number }) {
+  const { scrollY } = props;
+  const [heroHeight, setHeroHeright] = useAtom(heroHeightAtom);
+
+  const titleTop = Math.min(TitleHeight, scrollY);
+
+  return (
+    <div className="w-full fixed bg-[#fef8f7]" style={{ height: `${heroHeight}px` }}>
+      <nav className="px-8 py-2 flex gap-2">
+        <div>🌸 Anime Garden</div>
+        <div>动画</div>
+      </nav>
+      <div className='w-full'>
+        <div className="w-full pt-4rem pb-3rem text-4xl font-quicksand font-bold text-center select-none outline-none absolute" style={{ top: `-${titleTop}px` }}>
+          <NavLink to="/">🌸 Anime Garden</NavLink>
+        </div>
+        <div className="w-full pt-4 flex justify-center pb-6rem absolute" style={{ top: `${TitleHeight - titleTop}px` }}>
+          <div className="rounded-md h-16 w-[600px] border bg-white"></div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/web/app/root.tsx b/apps/frontend/web/app/root.tsx
@@ -6,6 +6,8 @@ import {
   ScrollRestoration,
 } from "@remix-run/react";
 
+import { Provider } from "jotai";
+
 import 'virtual:uno.css';
 
 import './styles/main.css';
@@ -25,8 +27,10 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Meta />
         <Links />
       </head>
-      <body>
-        <div className="font-sans">{children}</div>
+      <body className="font-sans">
+        <Provider>
+          {children}
+        </Provider>
         <ScrollRestoration />
         <Scripts />
       </body>

diff --git a/apps/frontend/web/app/routes/_index/route.tsx b/apps/frontend/web/app/routes/_index/route.tsx
@@ -1,6 +1,6 @@
 import type { MetaFunction } from "@remix-run/node";
 
-import { NavLink } from "@remix-run/react";
+import Layout from '~/layouts/Layout';
 
 export const meta: MetaFunction = () => {
   return [
@@ -11,25 +11,6 @@ export const meta: MetaFunction = () => {
 
 export default function Index() {
   return (
-    <div className="w-full">
-      <div className="w-screen fixed bg-[#fef8f7]">
-        <nav className="px-8 py-2 flex gap-2">
-          <div>🌸 Anime Garden</div>
-          <div>动画</div>
-        </nav>
-        <div className="mt-4rem pb-3rem text-4xl font-quicksand font-bold text-center select-none outline-none">
-          <NavLink to="/">🌸 Anime Garden</NavLink>
-        </div>
-        <div className="flex justify-center pb-6rem sticky top-4">
-          <div className="rounded-md h-16 w-[600px] border bg-white">
-
-          </div>
-        </div>
-      </div>
-      <div className="flex">
-        <div className="w-[300px] border-r-1 h-[150vh]"></div>
-        <div></div>
-      </div>
-    </div>
+    <Layout>123</Layout>
   );
 }
diff --git a/apps/frontend/web/env.d.ts b/apps/frontend/web/env.d.ts
@@ -1,7 +1,15 @@
 /// <reference types="unplugin-info/client" />
 
+import type * as CSS from 'csstype';
+
 declare module '~build/meta' {
   export const APP_HOST: string;
 
   export const SERVER_URL: string;
 }
+
+declare module 'csstype' {
+  interface Properties {
+    '--hero-height'?: string;
+  }
+}
diff --git a/apps/frontend/web/package.json b/apps/frontend/web/package.json
@@ -15,8 +15,10 @@
     "@remix-run/react": "^2.10.3",
     "@remix-run/serve": "^2.10.3",
     "isbot": "^4.1.0",
+    "jotai": "^2.9.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-use": "^17.5.1"
   },
   "devDependencies": {
     "@remix-run/dev": "^2.10.3",