chore: update docs

farm-fe · Sep 29, 2024 · f9db758 · f9db758
1 parent 3ba2c92
commit f9db758
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 104 deletions.
diff --git a/docs/src/components/Benchmark/index.module.css b/docs/src/components/Benchmark/index.module.css
@@ -1,8 +1,8 @@
 .progress-bar-container {
   width: 50vw;
-  height: 25px;
+  height: 35px;
   border-radius: 4px;
-  padding: 4px;
+  padding: 2px 6px;
   box-sizing: content-box;
   border: 1px solid var(--farm--border);
 }

diff --git a/docs/src/components/Benchmark/index.tsx b/docs/src/components/Benchmark/index.tsx
@@ -4,7 +4,7 @@ import { useInView } from "react-intersection-observer";
 import styles from "./index.module.css";
 import Translate from "@docusaurus/Translate";
 import Link from "@docusaurus/Link";
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import clsx from "clsx";
 import ShinyTextEx from "../MagicUi/shiny-text";
 const BENCHMARK_DATA = {
@@ -127,8 +127,11 @@ export default function Benchmark() {
     { name: <Translate>HotBuild</Translate>, title: "HotBuild" },
   ];
   const [activeScene, setActiveScene] = useState("ColdStart");
-  const { ref, inView } = useInView();
-  const performanceInfoList = BENCHMARK_DATA[activeScene];
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+    threshold: 0.1,
+  });
+  const performanceInfoList = useMemo(() => BENCHMARK_DATA[activeScene], [activeScene]);
 
   const [visibleSection, setVisibleSection] = useState("ColdStart");
 
@@ -167,7 +170,7 @@ export default function Benchmark() {
   }
   return (
     <>
-      <div ref={ref} className="flex">
+      <div ref={ref} className="flex relative z-10">
         <>
           <div
             className={`${styles.tabs} flex flex-col items-center my-4 z-1`}

diff --git a/docs/src/components/MagicUi/neon-gradient-card.tsx b/docs/src/components/MagicUi/neon-gradient-card.tsx
@@ -1,14 +1,7 @@
 "use client";
 
 import { cn } from "../../lib/utils";
-import {
-  CSSProperties,
-  ReactElement,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { CSSProperties, ReactNode, useEffect, useRef, useState, useMemo } from "react";
 
 interface NeonColorsProps {
   firstColor: string;
@@ -17,120 +10,78 @@ interface NeonColorsProps {
 }
 
 interface NeonGradientCardProps {
-  /**
-   * @default <div />
-   * @type ReactElement
-   * @description
-   * The component to be rendered as the card
-   * */
-  as?: ReactElement;
-  /**
-   * @default ""
-   * @type string
-   * @description
-   * The className of the card
-   */
   className?: string;
-
-  /**
-   * @default ""
-   * @type ReactNode
-   * @description
-   * The children of the card
-   * */
   children?: ReactNode;
-
-  /**
-   * @default 5
-   * @type number
-   * @description
-   * The size of the border in pixels
-   * */
   borderSize?: number;
-
-  /**
-   * @default 20
-   * @type number
-   * @description
-   * The size of the radius in pixels
-   * */
   borderRadius?: number;
-
-  /**
-   * @default "{ firstColor: '#ffaa40', secondColor: '#9c40ff' }"
-   * @type string
-   * @description
-   * The colors of the neon gradient
-   * */
   neonColors?: NeonColorsProps;
-
   height?: string;
-
   [key: string]: any;
 }
 
-const NeonGradientCard: React.FC<NeonGradientCardProps> = ({
+const DEFAULT_NEON_COLORS: NeonColorsProps = {
+  firstColor: "#ffaa40",
+  secondColor: "#9c40ff",
+  thirdColor: "#00FFF1",
+};
+
+const NeonGradientCard: React.FC<NeonGradientCardProps> = React.memo(({
   className,
   children,
   borderSize = 0,
   borderRadius = 20,
   height = '26rem',
-  neonColors = {
-    firstColor: "#ffaa40",
-    secondColor: "#9c40ff",
-    thirdColor: "#00FFF1",
-  },
+  neonColors = DEFAULT_NEON_COLORS,
   ...props
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const childrenRef = useRef(children);
 
-  useEffect(() => {
-    const updateDimensions = () => {
-      if (containerRef.current) {
-        const { offsetWidth, offsetHeight } = containerRef.current;
-        setDimensions({ width: offsetWidth, height: offsetHeight });
-      }
-    };
+  const updateDimensions = () => {
+    if (containerRef.current) {
+      const { offsetWidth, offsetHeight } = containerRef.current;
+      setDimensions({ width: offsetWidth, height: offsetHeight });
+    }
+  };
 
+  useEffect(() => {
     updateDimensions();
     window.addEventListener("resize", updateDimensions);
-
-    return () => {
-      window.removeEventListener("resize", updateDimensions);
-    };
+    return () => window.removeEventListener("resize", updateDimensions);
   }, []);
 
   useEffect(() => {
-    if (containerRef.current) {
-      const { offsetWidth, offsetHeight } = containerRef.current;
-      setDimensions({ width: offsetWidth, height: offsetHeight });
+    if (childrenRef.current !== children) {
+      childrenRef.current = children;
+      updateDimensions();
     }
   }, [children]);
 
+  const cardStyle = useMemo(() => {
+    return {
+      "--border-size": `${borderSize}px`,
+      "--border-radius": `${borderRadius}px`,
+      "--neon-first-color": neonColors.firstColor,
+      "--neon-second-color": neonColors.secondColor,
+      "--neon-third-color": neonColors.thirdColor,
+      "--card-width": `${dimensions.width}px`,
+      "--card-height": `${dimensions.height}px`,
+      "--card-content-radius": `${borderRadius - borderSize}px`,
+      "--pseudo-element-background-image": `linear-gradient(0deg, ${neonColors.firstColor}, ${neonColors.secondColor}, ${neonColors.thirdColor})`,
+      "--pseudo-element-width": `${dimensions.width + borderSize * 2}px`,
+      "--pseudo-element-height": height,
+      "--after-blur": `${dimensions.width / 3}px`,
+    } as CSSProperties;
+  }, [borderSize, borderRadius, neonColors, dimensions, height]);
+
   return (
     <div
       ref={containerRef}
-      style={
-        {
-          "--border-size": `${borderSize}px`,
-          "--border-radius": `${borderRadius}px`,
-          "--neon-first-color": neonColors.firstColor,
-          "--neon-second-color": neonColors.secondColor,
-          "--neon-third-color": neonColors.thirdColor,
-          "--card-width": `${dimensions.width}px`,
-          "--card-height": `${dimensions.height}px`,
-          "--card-content-radius": `${borderRadius - borderSize}px`,
-          "--pseudo-element-background-image": `linear-gradient(0deg, ${neonColors.firstColor}, ${neonColors.secondColor}, ${neonColors.thirdColor})`,
-          "--pseudo-element-width": `${dimensions.width + borderSize * 2}px`,
-          // "--pseudo-element-height": `${dimensions.height + borderSize * 2}px`,
-          "--pseudo-element-height": height,
-          "--after-blur": `${dimensions.width / 3}px`,
-        } as CSSProperties
-      }
+      style={cardStyle}
       className={cn(
         "relative z-10 h-full w-full rounded-[var(--border-radius)]",
-        className,
+        className
       )}
       {...props}
     >
@@ -146,15 +97,14 @@ const NeonGradientCard: React.FC<NeonGradientCardProps> = ({
           "after:bg-[linear-gradient(0deg,var(--neon-first-color),var(--neon-second-color),var(--neon-third-color))] after:bg-[length:100%_200%] after:opacity-80",
           "after:animate-backgroundPositionSpin",
           "after:animation-duration: 10s",
-          // "dark:bg-transparent dark:before:bg-transparent dark:after:bg-transparent",
           "dark:bg-[rgb(2,2,2)]",
-          "navbar--fixed-top",
+          "navbar--fixed-top"
         )}
       >
         {children}
       </div>
     </div>
   );
-};
+});
 
 export default NeonGradientCard;
diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx
@@ -11,6 +11,7 @@ import BentoGridCard from "../components/MagicUi/card";
 import StarrySky from "../components/StarrySky";
 import { AuroraBackground } from "../components/ui/aurora-back";
 import { useColorMode } from "@docusaurus/theme-common";
+import NeonGradientCard from "../components/MagicUi/neon-gradient-card";
 import styles from "./index.module.css";
 
 function HomepageHeader() {
@@ -19,7 +20,7 @@ function HomepageHeader() {
       className={clsx(
         "grid grid-cols-1 gap-10 relative z-10 mx-auto max-w-8xl py-4 sm:py-6 lg:py-8",
         "lg:grid-cols-2",
-        styles.heroBanner
+        styles.heroBanner,
       )}
     >
       <div className="container w-full flex flex-col my-1 px-2">
@@ -72,7 +73,7 @@ function HomepageHeader() {
             <div
               className={clsx(
                 styles.farmButton,
-                "flex w-36 sm:w-40 items-center justify-center font-bold"
+                "flex w-36 sm:w-40 items-center justify-center font-bold",
               )}
             >
               <Translate>Quick Start</Translate>
@@ -85,20 +86,18 @@ function HomepageHeader() {
             <div
               className={clsx(
                 styles.farmButton2,
-                "flex w-36 sm:w-40  items-center justify-center font-bold"
+                "flex w-36 sm:w-40  items-center justify-center font-bold",
               )}
             >
               <Translate>Why Farm?</Translate>
             </div>
           </Link>
         </div>
       </div>
-      <Benchmark />
     </header>
   );
 }
 
-
 const HomeBaseContent = () => {
   const { colorMode } = useColorMode();
 
@@ -107,6 +106,9 @@ const HomeBaseContent = () => {
       <main className="mb-20 my-10 max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8max-w-6xl">
         <AnimatedGradientStarWithGithub />
         <HomepageHeader />
+        <NeonGradientCard>
+        </NeonGradientCard>
+        <Benchmark />
         <BentoGridCard />
       </main>
     );
@@ -129,7 +131,6 @@ const HomeBaseContent = () => {
   }
 };
 
-
 export default function Home() {
   const { siteConfig } = useDocusaurusContext();
   return (