chore: migrate landingpage to Rsbuild

rspack-contrib · Sep 2, 2024 · 3b88445 · 3b88445
1 parent 2f64538
commit 3b88445
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 48 deletions.
diff --git a/src/benchmark/ProgressBar.module.scss b/src/benchmark/ProgressBar.module.scss
@@ -34,7 +34,7 @@
   height: 100%;
   border-radius: 5px;
   background: var(
-    --rs-benchamark-bar-background,
+    --rs-benchmark-bar-background,
     linear-gradient(279deg, #ff8b00 35.21%, #f93920 63.34%)
   );
 }

diff --git a/src/hero/index.module.scss b/src/hero/index.module.scss
@@ -2,11 +2,6 @@
 @media screen and (max-width: 600px) {
   .logo {
     width: 120px !important;
-    height: 100px !important;
-  }
-  .ovalBg {
-    width: 168px !important;
-    height: 140px !important;
   }
   .buttonGroup {
     display: flex;
@@ -77,20 +72,21 @@
 
 .logo {
   width: 216px;
-  height: 180px;
   position: relative;
   user-select: none;
 
   .ovalBg {
-    width: 303px; // 216.225px * 1.4
-    height: 252px; // 180px * 1.4
+    width: 80%; // 216.225px * 1.4
+    height: 80%;
     z-index: -1;
     position: absolute;
     // our logo center is on the right and down
     top: calc(50% + 5px);
     left: calc(50% + 5px);
     transform: translate(-50%, -50%);
-    background-image: url('./ovalBg.svg');
+    background: var(--rs-hero-oval-background, #dfc228);
+    filter: var(--rs-hero-oval-filter, blur(40px));
+    border-radius: 50%;
     background-repeat: no-repeat;
     background-size: 100% 100%;
     background-position: center;
@@ -107,7 +103,7 @@
 
   // background
   background: var(
-    --orange-gradient,
+    --rs-hero-title-gradient,
     linear-gradient(279deg, #ff8b00 35.21%, #f93920 63.34%)
   );
   background-clip: text;
@@ -172,7 +168,7 @@
   // style
   border: none;
   background: var(
-    --orange-gradient,
+    --rs-hero-button-gradient,
     linear-gradient(279deg, #ff8b00 35.21%, #f93920 63.34%)
   );
   // text
@@ -181,7 +177,7 @@
 
 .buttonSecondary {
   // style
-  border: 1.5px solid var(--orange-gradient, #ff8b00);
+  border: 1.5px solid var(--rs-hero-button-border, #ff8b00);
   background: transparent;
   // text
   color: var(--rs-hero-title-color, #0b0c0e);

diff --git a/src/hero/index.tsx b/src/hero/index.tsx
@@ -64,6 +64,7 @@ type HeroProps = {
   onClickLearnMore: () => void;
 
   showStars?: boolean;
+  showOvalBg?: boolean;
   logoUrl?: string;
   title?: string;
   subTitle?: string;
@@ -76,6 +77,7 @@ export const Hero: FC<HeroProps> = ({
   onClickGetStarted,
   onClickLearnMore,
   showStars = false,
+  showOvalBg = true,
   logoUrl = 'https://assets.rspack.dev/rspack/rspack-logo.svg',
   title = 'Rspack',
   subTitle = 'The fast Rust-based web bundler',
@@ -103,8 +105,8 @@ export const Hero: FC<HeroProps> = ({
             })
           : null}
         <div className={styles.logo}>
-          <img src={logoUrl} alt="logo" />
-          <div className={styles.ovalBg} />
+          <img src={logoUrl} className="rs-logo" alt="logo" />
+          {showOvalBg ? <div className={`${styles.ovalBg} rs-oval`} /> : null}
         </div>
         <h1 className={styles.title}>
           <span>{title}</span>

diff --git a/src/hero/ovalBg.svg b/src/hero/ovalBg.svg
diff --git a/src/why-rspack/index.tsx b/src/why-rspack/index.tsx
@@ -4,12 +4,12 @@ import styles from './index.module.scss';
 import { useCardAnimation } from './useCardAnimation';
 import { useLottieAnimation } from './useLottieAnimation';
 
-type Feature = {
+export type Feature = {
   img: string;
   url: string;
   title: string;
   description: string;
-  lottieJsonData: any;
+  lottieJsonData?: any;
 };
 
 type WhyRspackCardProps = {
@@ -112,6 +112,8 @@ const FeatureItem = memo(
       shineBg,
     } = useCardAnimation();
 
+    const hasLottieAnimation = lottieJsonData !== undefined;
+
     const { ref: lottieContainerRef } = useLottieAnimation(
       isHovering,
       lottieJsonData,
@@ -170,19 +172,30 @@ const FeatureItem = memo(
             }}
           />
           <div className={styles.featureIcon}>
-            <img
-              src={img}
-              alt={title}
-              className={styles.featureIconImg}
-              style={{
-                display: isHovering ? 'none' : 'flex',
-              }}
-            />
-            <div
-              ref={lottieContainerRef as any}
-              className={styles.featureIconImg}
-              style={{ display: isHovering ? 'flex' : 'none' }}
-            />
+            {
+              <img
+                src={img}
+                alt={title}
+                className={styles.featureIconImg}
+                style={
+                  hasLottieAnimation
+                    ? {
+                        display:
+                          isHovering && hasLottieAnimation ? 'none' : 'flex',
+                      }
+                    : {}
+                }
+              />
+            }
+            {hasLottieAnimation ? (
+              <div
+                ref={lottieContainerRef as any}
+                className={styles.featureIconImg}
+                style={{
+                  display: isHovering ? 'flex' : 'none',
+                }}
+              />
+            ) : null}
           </div>
           <div className={styles.featureContent}>
             <h3 className={styles.featureTitle}>{title}</h3>
@@ -215,7 +228,7 @@ const FeatureList: FC<FeatureListProps> = memo(({ LinkComp, features }) => {
   );
 });
 
-export type WhyRspackProps = FeatureListProps & WhyRspackCardProps;
+export type WhyRspackProps = FeatureListProps & Partial<WhyRspackCardProps>;
 
 export const WhyRspack: FC<WhyRspackProps> = ({
   title,
@@ -225,7 +238,9 @@ export const WhyRspack: FC<WhyRspackProps> = ({
 }) => {
   return (
     <div className={styles.features}>
-      <WhyRspackCard title={title} description={description} />
+      {title && description ? (
+        <WhyRspackCard title={title} description={description} />
+      ) : null}
       <FeatureList features={features} LinkComp={LinkComp} />
     </div>
   );

diff --git a/src/why-rspack/useLottieAnimation.tsx b/src/why-rspack/useLottieAnimation.tsx
@@ -4,7 +4,7 @@ import { useEffect, useRef } from 'react';
 
 export const useLottieAnimation = (
   isHovering: boolean,
-  lottieJsonData: string,
+  lottieJsonData?: string,
 ) => {
   const ref = useRef();
 
@@ -14,6 +14,9 @@ export const useLottieAnimation = (
     if (!ref.current) {
       return;
     }
+    if (!lottieJsonData) {
+      return;
+    }
     const animation = lottie.loadAnimation({
       container: ref.current,
       animationData: lottieJsonData,

diff --git a/stories/WhyRspack.stories.tsx b/stories/WhyRspack.stories.tsx
@@ -2,7 +2,7 @@ import {
   containerStyle,
   innerContainerStyle,
 } from '@rstack-dev/doc-ui/section-style';
-import { WhyRspack } from '@rstack-dev/doc-ui/why-rspack';
+import { type Feature, WhyRspack } from '@rstack-dev/doc-ui/why-rspack';
 import './index.scss';
 import CompatibleJson from './why-rspack-assets/Compatible.json';
 import Compatible from './why-rspack-assets/Compatible.svg';
@@ -13,7 +13,7 @@ import Lightning from './why-rspack-assets/Lightning.svg';
 import SpeedometerJson from './why-rspack-assets/Speedometer.json';
 import Speedometer from './why-rspack-assets/Speedometer.svg';
 
-const features = [
+const features: Feature[] = [
   {
     img: Speedometer,
     url: '/guide/start/introduction',
@@ -62,6 +62,61 @@ export const WhyRspackStory = () => {
   );
 };
 
+// TODO: img
+const rsbuildFeatures = [
+  {
+    img: '🚀',
+    url: '', // 由于您没有提供每个特性的 URL，这里先留空
+    title: 'Rspack-based',
+    description:
+      'Using Rspack to bring you the ultimate development experience.',
+  },
+  {
+    img: '🦄',
+    url: '',
+    title: 'Batteries Included',
+    description:
+      'Out-of-the-box integration with the most practical building features in the ecosystem.',
+  },
+  {
+    img: '🎯',
+    url: '',
+    title: 'Framework Agnostic',
+    description: 'Supports React, Vue, Svelte, and more frameworks.',
+  },
+  {
+    img: '🛠️',
+    url: '',
+    title: 'Deep Optimization',
+    description:
+      'Automatically optimize static assets to maximizing production performance.',
+  },
+  {
+    img: '🎨',
+    url: '',
+    title: 'Highly Pluggable',
+    description:
+      'Comes with a lightweight plugin system and a set of high quality plugins.',
+  },
+  {
+    img: '🍭',
+    url: '',
+    title: 'Easy to Configure',
+    description:
+      'Start with zero configuration and everything is configurable.',
+  },
+];
+
+export const WhyRspackStoryWithoutFirstCardAndLottie = () => {
+  return (
+    <section className={containerStyle} key={title}>
+      <div className={innerContainerStyle}>
+        <WhyRspack features={rsbuildFeatures} />
+      </div>
+    </section>
+  );
+};
+
 export default {
   title: 'WhyRspack',
 };