docs: add useTopArrived navbar and memo

web-infra-dev · Aug 26, 2024 · 6044d2e · 6044d2e
1 parent 57713e4
commit 6044d2e
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 31 deletions.
diff --git a/website/theme/components/HomeFooter/index.tsx b/website/theme/components/HomeFooter/index.tsx
@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { useLang } from 'rspress/runtime';
 import { Link } from 'rspress/theme';
 import { useI18n } from '../../i18n/index';
@@ -96,7 +97,7 @@ function useFooterData() {
   ];
 }
 
-export function HomeFooter() {
+export const HomeFooter = memo(() => {
   const footerData = useFooterData();
   return (
     <div
@@ -123,4 +124,4 @@ export function HomeFooter() {
       </div>
     </div>
   );
-}
+});
diff --git a/website/theme/components/Landingpage/Benchmark/index.tsx b/website/theme/components/Landingpage/Benchmark/index.tsx
@@ -3,6 +3,7 @@ import {
   type BenchmarkData,
 } from './BaseBenchmark';
 
+import { memo } from 'react';
 // TODO: extract to @rstack-dev/doc-ui/benchmark
 // import {
 //   Benchmark as BaseBenchmark,
@@ -86,7 +87,7 @@ const BENCHMARK_DATA: BenchmarkData = {
   },
 };
 
-export function Benchmark() {
+export const Benchmark = memo(() => {
   const t = useI18n();
   return (
     <section className={sharedStyles.container}>
@@ -109,4 +110,4 @@ export function Benchmark() {
       </div>
     </section>
   );
-}
+});
diff --git a/website/theme/components/Landingpage/BuiltWithRspack/index.tsx b/website/theme/components/Landingpage/BuiltWithRspack/index.tsx
@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { Link } from 'rspress/theme';
 import { useI18n } from '../../../i18n';
 import sharedStyles from '../shared.module.scss';
@@ -71,7 +72,7 @@ const CompanyItem = ({ item }: { item: Company }) => {
   );
 };
 
-const BuiltWithRsPack: React.FC = () => {
+const BuiltWithRsPack: React.FC = memo(() => {
   const t = useI18n();
   return (
     <section className={sharedStyles.container}>
@@ -92,6 +93,6 @@ const BuiltWithRsPack: React.FC = () => {
       </div>
     </section>
   );
-};
+});
 
 export default BuiltWithRsPack;
diff --git a/website/theme/components/Landingpage/FullyFeatured/index.tsx b/website/theme/components/Landingpage/FullyFeatured/index.tsx
@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { useNavigate } from 'rspress/runtime';
 import { Link } from 'rspress/theme';
 import { useI18n, useI18nUrl } from '../../../i18n';
@@ -23,7 +24,7 @@ type Feature = {
   link: string;
 };
 
-const FullyFeatured = () => {
+const FullyFeatured = memo(() => {
   const t = useI18n();
   const tUrl = useI18nUrl();
   const navigate = useNavigate();
@@ -151,6 +152,6 @@ const FullyFeatured = () => {
       </div>
     </section>
   );
-};
+});
 
 export default FullyFeatured;
diff --git a/website/theme/components/Landingpage/Hero/index.tsx b/website/theme/components/Landingpage/Hero/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { memo, useCallback } from 'react';
 import { useNavigate } from 'rspress/runtime';
 import { useI18n, useI18nUrl } from '../../../i18n';
 import BackgroundStar from './BackgroundStar';
@@ -55,7 +55,7 @@ const stars = positions.map(([top, left], i) => {
   );
 });
 
-const Hero = () => {
+const Hero = memo(() => {
   const tUrl = useI18nUrl();
   const t = useI18n();
 
@@ -101,6 +101,6 @@ const Hero = () => {
       </div>
     </section>
   );
-};
+});
 
 export default Hero;
diff --git a/website/theme/components/Landingpage/ToolStack/index.tsx b/website/theme/components/Landingpage/ToolStack/index.tsx
@@ -1,11 +1,12 @@
 import type React from 'react';
+import { memo } from 'react';
 import { useLang } from 'rspress/runtime';
 import { Link } from 'rspress/theme';
 import { useI18n } from '../../../i18n';
 import sharedStyles from '../shared.module.scss';
 import styles from './index.module.scss';
 
-const ToolStack: React.FC = () => {
+const ToolStack: React.FC = memo(() => {
   const lang = useLang();
   const t = useI18n();
   const isEn = lang === 'en';
@@ -74,6 +75,6 @@ const ToolStack: React.FC = () => {
       </div>
     </section>
   );
-};
+});
 
 export default ToolStack;
diff --git a/website/theme/components/Landingpage/WhyRspack/index.tsx b/website/theme/components/Landingpage/WhyRspack/index.tsx
@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { Link } from 'rspress/theme';
 import { useI18n, useI18nUrl } from '../../../i18n';
 import Compatible from './assets/Compatible.svg';
@@ -89,7 +90,8 @@ const WhyRspackCard = () => {
   );
 };
 
-const FeatureItem = ({ img, url, title, description }: Feature) => {
+const FeatureItem = memo(({ feature }: { feature: Feature }) => {
+  const { description, img, title, url } = feature;
   const {
     container,
     onMouseEnter,
@@ -164,9 +166,9 @@ const FeatureItem = ({ img, url, title, description }: Feature) => {
       </Link>
     </div>
   );
-};
+});
 
-const WhyRspack = () => {
+const WhyRspack = memo(() => {
   const t = useI18n();
   const tUrl = useI18nUrl();
 
@@ -203,21 +205,13 @@ const WhyRspack = () => {
         <div className={styles.features}>
           {/* Why Rspack? */}
           <WhyRspackCard />
-          {features.map(({ img, url, title, description }) => {
-            return (
-              <FeatureItem
-                key={title}
-                img={img}
-                url={url}
-                title={title}
-                description={description}
-              />
-            );
+          {features.map(feature => {
+            return <FeatureItem key={feature.title} feature={feature} />;
           })}
         </div>
       </div>
     </section>
   );
-};
+});
 
 export default WhyRspack;
diff --git a/website/theme/components/Landingpage/index.module.scss b/website/theme/components/Landingpage/index.module.scss
@@ -3,12 +3,14 @@
 }
 
 .background {
+  width: 100%;
   position: absolute;
   top: calc(-1 * var(--rp-nav-height));
   left: 0;
-  width: 100%;
+
   z-index: -1;
-  pointer-events: none;
   filter: blur(2px);
+
+  pointer-events: none;
   user-select: none;
 }
diff --git a/website/theme/components/Landingpage/index.tsx b/website/theme/components/Landingpage/index.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import BackgroundUrl from './Background.compressed.png';
 import { Benchmark } from './Benchmark';
 import BuiltWithRspack from './BuiltWithRspack';
@@ -13,7 +14,38 @@ const Background = () => {
   );
 };
 
+const useTopArrived = () => {
+  const [scrollY, setScrollY] = useState(0);
+  const topArrived = scrollY < 100;
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrollY(window.scrollY);
+    };
+    window.addEventListener('scroll', handleScroll, {
+      capture: false,
+      passive: true,
+    });
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  return {
+    topArrived,
+  };
+};
+
 const LandingPage = () => {
+  const { topArrived } = useTopArrived();
+  useEffect(() => {
+    if (topArrived) {
+      document.body.classList.remove('notTopArrived');
+    } else {
+      document.body.classList.add('notTopArrived');
+    }
+  }, [topArrived]);
+
   return (
     <div className={styles.landingPage}>
       <style>
@@ -23,9 +55,11 @@ const LandingPage = () => {
           :root:not(.dark) {
               --rp-c-bg: #fff;
           }
-          .rspress-nav {
+          body:not(.notTopArrived) .rspress-nav {
             background: transparent !important;
-          }`}
+            transition: background 0.2s;
+          }
+          `}
       </style>
       <Background />
       <Hero />