Skip to content

Commit

Permalink
chore: optimize performance (#135)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ErKeLost
ErKeLost authored Jul 31, 2024
1 parent 6ab9ee9 commit 3f477b7
Show file tree
Hide file tree
Showing 8 changed files with 213 additions and 486 deletions.
2 changes: 0 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@
"dependencies": {
"@crowdin/cli": "3",
"@crowdin/crowdin-api-client": "^1.23.4",
"@documate/react": "^0.2.0",
"@docusaurus/core": "3.4.0",
"@docusaurus/plugin-ideal-image": "^3.4.0",
"@docusaurus/preset-classic": "3.4.0",
Expand All @@ -51,7 +50,6 @@
"three": "0.128.0"
},
"devDependencies": {
"@documate/documate": "^0.2.0",
"@docusaurus/module-type-aliases": "3.4.0",
"@docusaurus/types": "3.4.0",
"@swc/core": "^1.3.99",
Expand Down
339 changes: 0 additions & 339 deletions pnpm-lock.yaml
View file

Large diffs are not rendered by default.

82 changes: 40 additions & 42 deletions src/components/Benchmark/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,52 +168,50 @@ export default function Benchmark() {
return (
<>
<div ref={ref} className="flex">
{inView && (
<>
<div
className={`${styles.tabs} flex flex-col items-center my-4 z-1`}
>
<div className="flex h-20 w-full flex-1 items-center self-start lg:justify-end">
<div className="w-full">
<PillTabs SCENE={SCENE}>
{performanceInfoList.map((info) => (
<div
key={info.name}
className="flex flex-center justify-start my-8 flex-col sm:flex-row"
>
{inView && (
<>
<div
className="flex items-center text-light-500 text-center font-bold"
style={{ minWidth: "100px" }}
>
{info.name}
</div>
<ProgressBar
value={info.time}
max={Math.max(
...performanceInfoList.map((info) => info.time)
)}
/>
</>
)}
</div>
))}
</PillTabs>
<div className="font-bold cursor-pointer">
<Link
rel="stylesheet"
href="https://github.com/farm-fe/performance-compare"
<>
<div
className={`${styles.tabs} flex flex-col items-center my-4 z-1`}
>
<div className="flex h-20 w-full flex-1 items-center self-start lg:justify-end">
<div className="w-full">
<PillTabs SCENE={SCENE}>
{performanceInfoList.map((info) => (
<div
key={info.name}
className="flex flex-center justify-start my-8 flex-col sm:flex-row"
>
{/* <Translate>See benchmark details</Translate> */}
<ShinyTextEx />
</Link>
</div>
{inView && (
<>
<div
className="flex items-center text-light-500 text-center font-bold"
style={{ minWidth: "100px" }}
>
{info.name}
</div>
<ProgressBar
value={info.time}
max={Math.max(
...performanceInfoList.map((info) => info.time)
)}
/>
</>
)}
</div>
))}
</PillTabs>
<div className="font-bold cursor-pointer">
<Link
rel="stylesheet"
href="https://github.com/farm-fe/performance-compare"
>
{/* <Translate>See benchmark details</Translate> */}
<ShinyTextEx />
</Link>
</div>
</div>
</div>
</>
)}
</div>
</>
</div>
</>
);
Expand Down
21 changes: 12 additions & 9 deletions src/components/HomepageFeatures/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ const FeatureList = [
Img: Rocket,
description: (
<Translate>
Written in Rust, start a React / Vue project in milliseconds
and perform an HMR update within 10ms for most situations.
Written in Rust, start a React / Vue project in milliseconds and perform
an HMR update within 10ms for most situations.
</Translate>
),
className:
Expand All @@ -27,7 +27,9 @@ const FeatureList = [
Img: Box,
description: (
<Translate>
Incremental Building: Support persistent cache, module level cache enabled by default, any module won't be compiled twice until it's changed!
Incremental Building: Support persistent cache, module level cache
enabled by default, any module won't be compiled twice until it's
changed!
</Translate>
),
className:
Expand All @@ -38,9 +40,10 @@ const FeatureList = [
Img: FeaturePng,
description: (
<Translate>
Farm supports compiling HTML, CSS, CSS Modules, Js/Jsx/Ts/Tsx, JSON, Static Assets out
of the box, supports Sass, Less, PostCSS, Vue, React, Solid by way of official plugins, supports
lazy compiling, partial bundling and more
Farm supports compiling HTML, CSS, CSS Modules, Js/Jsx/Ts/Tsx, JSON,
Static Assets out of the box, supports Sass, Less, PostCSS, Vue, React,
Solid by way of official plugins, supports lazy compiling, partial
bundling and more
</Translate>
),
className:
Expand Down Expand Up @@ -75,8 +78,8 @@ const FeatureList = [
Img: Compatibility,
description: (
<Translate>
What you see in development will be the same as what you
get in production. Supports both legacy (ES5) and modern browsers.
What you see in development will be the same as what you get in
production. Supports both legacy (ES5) and modern browsers.
</Translate>
),
className:
Expand Down Expand Up @@ -124,7 +127,7 @@ function Feature({ Img, title, description, className }) {

export default function FeatureSection() {
return (
<section className="my-4">
<section>
<div className="max-w-7xl mx-auto flex">
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
{FeatureList.map((feature, index) => (
Expand Down
59 changes: 59 additions & 0 deletions src/components/MagicUi/blur-fade.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
"use client";

import { useRef } from "react";
import { AnimatePresence, motion, useInView, Variants } from "framer-motion";

interface BlurFadeProps {
children: React.ReactNode;
className?: string;
variant?: {
hidden: { y: number };
visible: { y: number };
};
duration?: number;
delay?: number;
yOffset?: number;
inView?: boolean;
inViewMargin?: string;
blur?: string;
}

export default function BlurFade({
children,
className,
variant,
duration = 0.4,
delay = 0,
yOffset = 6,
inView = false,
inViewMargin = "-50px",
blur = "6px",
}: BlurFadeProps) {
const ref = useRef(null);
const inViewResult = useInView(ref, { once: true, margin: inViewMargin });
const isInView = !inView || inViewResult;
const defaultVariants: Variants = {
hidden: { y: yOffset, opacity: 0, filter: `blur(${blur})` },
visible: { y: -yOffset, opacity: 1, filter: `blur(0px)` },
};
const combinedVariants = variant || defaultVariants;
return (
<AnimatePresence>
<motion.div
ref={ref}
initial="hidden"
animate={isInView ? "visible" : "hidden"}
exit="hidden"
variants={combinedVariants}
transition={{
delay: 0.04 + delay,
duration,
ease: "easeOut",
}}
className={className}
>
{children}
</motion.div>
</AnimatePresence>
);
}
83 changes: 47 additions & 36 deletions src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import StarrySky from "../components/StarrySky";
import styles from "./index.module.css";
import Translate from "@docusaurus/Translate";
import AnimatedGradientStarWithGithub from "../components/MagicUi/animated-shiny-text";
import NeonGradientCard from '../components/MagicUi/neon-gradient-card';
import BlurFade from "../components/MagicUi/blur-fade";

function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (
Expand All @@ -21,42 +24,48 @@ function HomepageHeader() {
>

<div className="container w-full flex flex-col my-1">
<p className="font-extrabold text-3xl sm:text-6xl lg:text-6xl text-left mb-6 flex flex-col gap-2">
<div>
<span>
<Translate>Extremely</Translate>
</span>
<span className={clsx(styles.banner)}>
<Translate> Fast </Translate>
</span>
<span>
<Translate>Web</Translate>
</span>
</div>
<div>
<span className={clsx(styles.banner)}>
<Translate> Build Tool</Translate>
</span>
</div>
<div>
<span>
<Translate>Written in</Translate>
</span>
<span className={clsx(styles.banner, "my-6")}>
<Translate> Rust</Translate>
</span>
</div>
</p>
<p className="font-semibold brand-color mb-6 text-1xl sm:text-2xl lg:text-xl tracking-wide text-left flex flex-col gap-2">
<div>
<span className={clsx(styles.banner, "font-extrabold")}>
<Translate>Farm </Translate>
</span>
<span className="font-sans">
<Translate>is a Rust-Based Web Building Engine to Facilitate Your Web Program and JavaScript Library</Translate>
</span>
</div>
</p>

<BlurFade delay={0.25} inView>
<p className="font-extrabold text-3xl sm:text-6xl lg:text-6xl text-left mb-6 flex flex-col gap-2">
<div>
<span>
<Translate>Extremely</Translate>
</span>
<span className={clsx(styles.banner)}>
<Translate> Fast </Translate>
</span>
<span>
<Translate>Web</Translate>
</span>
</div>
<div>
<span className={clsx(styles.banner)}>
<Translate> Build Tool</Translate>
</span>
</div>
<div>
<span>
<Translate>Written in</Translate>
</span>
<span className={clsx(styles.banner, "my-6")}>
<Translate> Rust</Translate>
</span>
</div>
</p>
</BlurFade>

<BlurFade delay={0.3 * 2} inView>
<p className="font-semibold brand-color mb-6 text-1xl sm:text-2xl lg:text-xl tracking-wide text-left flex flex-col gap-2">
<div>
<span className={clsx(styles.banner, "font-extrabold")}>
<Translate>Farm </Translate>
</span>
<span className="font-sans">
<Translate>is a Rust-Based Web Building Engine to Facilitate Your Web Program and JavaScript Library</Translate>
</span>
</div>
</p>
</BlurFade>
<div className={clsx(styles.buttons, "my-2")}>
<Link to="/docs/quick-start" style={{ textDecoration: "none" }}>
<div
Expand Down Expand Up @@ -101,6 +110,8 @@ export default function Home() {
<HomepageHeader />
<HomepageFeatures />
</main>
{/* <NeonGradientCard height='18rem' borderRadius={0}> */}
{/* </NeonGradientCard> */}
</Layout>
);
}
Loading

0 comments on commit 3f477b7

Please sign in to comment.