docs: improve home page SSG and benchmark data (#7185)

* docs: improve home page SSG and benchmark data * fix: SSR * fix: lock * Merge branch 'main' into home_page_ssg_0716
web-infra-dev · Jul 16, 2024 · 1764b5f · 1764b5f
1 parent cb3d0d6
commit 1764b5f
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 80 deletions.
diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml
diff --git a/website/theme/components/Benchmark/ProgressBar.module.scss b/website/theme/components/Benchmark/ProgressBar.module.scss
@@ -6,6 +6,12 @@
   box-sizing: content-box;
 }
 
+@media screen and (max-width: 1060px) {
+  .container {
+    width: 85vw;
+  }
+}
+
 .inner-container {
   width: 100%;
   height: 8px;

diff --git a/website/theme/components/Benchmark/ProgressBar.tsx b/website/theme/components/Benchmark/ProgressBar.tsx
@@ -1,6 +1,7 @@
 import { motion } from 'framer-motion';
 import { useState } from 'react';
 import styles from './ProgressBar.module.scss';
+import { useInView } from 'react-intersection-observer';
 
 export function formatTime(time: number, totalTime: number) {
   if (totalTime < 1000) {
@@ -23,33 +24,32 @@ export function ProgressBar({
 }) {
   const [elapsedTime, setElapsedTime] = useState(0);
   const TOTAL_TIME = value * 1000;
-  const isSmallScreen = window.innerWidth < 1060;
-  const progressBarWidth = isSmallScreen ? 80 : 60;
   const variants = {
     initial: { width: 0 },
     animate: { width: `${(value / max) * 100}%` },
   };
+  const { ref, inView } = useInView();
 
   const formattedTime = formatTime(elapsedTime, TOTAL_TIME);
   return (
-    <div
-      className={`${styles.container} flex items-center sm:pr-4`}
-      style={{
-        width: `${progressBarWidth}vw`,
-      }}
-    >
-      <div className={`${styles['inner-container']} flex justify-between`}>
-        <motion.div
-          className={`${styles.bar} ${styles[color]}`}
-          initial="initial"
-          animate="animate"
-          variants={variants}
-          onUpdate={(latest: { width: string }) => {
-            const width = Number.parseFloat(latest.width);
-            setElapsedTime(width * max * 10);
-          }}
-          transition={{ duration: value, ease: 'linear' }}
-        />
+    <div className={`${styles.container} flex items-center sm:pr-4`}>
+      <div
+        ref={ref}
+        className={`${styles['inner-container']} flex justify-between`}
+      >
+        {inView ? (
+          <motion.div
+            className={`${styles.bar} ${styles[color]}`}
+            initial="initial"
+            animate="animate"
+            variants={variants}
+            onUpdate={(latest: { width: string }) => {
+              const width = Number.parseFloat(latest.width);
+              setElapsedTime(width * max * 10);
+            }}
+            transition={{ duration: value, ease: 'linear' }}
+          />
+        ) : null}
       </div>
       <div className={styles.desc}>
         <span className={styles.time}>{formattedTime}</span> {desc}

diff --git a/website/theme/components/Benchmark/index.tsx b/website/theme/components/Benchmark/index.tsx
@@ -1,5 +1,3 @@
-import { useInView } from 'react-intersection-observer';
-import { NoSSR } from 'rspress/runtime';
 import { useI18n } from '../../i18n';
 import { ProgressBar } from './ProgressBar';
 import styles from './index.module.scss';
@@ -14,6 +12,12 @@ const BENCHMARK_DATA = {
     coldBuild: 0.36,
     hmr: 0.09,
   },
+  viteSwc: {
+    label: 'Vite + SWC',
+    coldStart: 1.58,
+    coldBuild: 1.37,
+    hmr: 0.05,
+  },
   webpackSwc: {
     label: 'webpack + SWC',
     coldStart: 2.4,
@@ -31,13 +35,9 @@ const maxTime = 6.47;
 
 export function Benchmark() {
   const t = useI18n();
-  const { ref, inView } = useInView();
 
   return (
-    <div
-      ref={ref}
-      className="relative flex flex-col justify-center pt-24 pb-10 mt-18 h-auto"
-    >
+    <div className="relative flex flex-col justify-center pt-24 pb-10 mt-18 h-auto">
       <div className="flex flex-center flex-col">
         <h2 className={`${styles.title} font-bold text-3xl sm:text-5xl mt-16`}>
           {t('benchmarkTitle')}
@@ -48,53 +48,45 @@ export function Benchmark() {
           {t('benchmarkDesc')}
         </p>
       </div>
-      {inView && (
-        <NoSSR>
-          <div className="flex flex-col items-center my-4 z-1">
-            {Object.values(BENCHMARK_DATA).map(item => (
-              <div
-                key={item.label}
-                className={`${styles.item} flex flex-center justify-start m-5`}
-              >
-                {inView && (
-                  <>
-                    <p className={styles.progressName}>{item.label}</p>
-                    <div>
-                      <ProgressBar
-                        value={item.coldStart}
-                        max={maxTime}
-                        color="cyan"
-                        desc="dev"
-                      />
-                      <ProgressBar
-                        value={item.coldBuild}
-                        max={maxTime}
-                        color="blue"
-                        desc="build"
-                      />
-                      <ProgressBar
-                        value={item.hmr}
-                        max={maxTime}
-                        color="cyan"
-                        desc="HMR"
-                      />
-                    </div>
-                  </>
-                )}
-              </div>
-            ))}
+      <div className="flex flex-col items-center my-4 z-1">
+        {Object.values(BENCHMARK_DATA).map(item => (
+          <div
+            key={item.label}
+            className={`${styles.item} flex flex-center justify-start m-5`}
+          >
+            <p className={styles.progressName}>{item.label}</p>
             <div>
-              <a
-                href="misc/benchmark.html"
-                target="_blank"
-                className={`${styles['bottom-link']} hover:text-brand transition-colors duration-300 font-medium p-2`}
-              >
-                👉 {t('benchmarkDetail')}
-              </a>
+              <ProgressBar
+                value={item.coldStart}
+                max={maxTime}
+                color="cyan"
+                desc="dev"
+              />
+              <ProgressBar
+                value={item.coldBuild}
+                max={maxTime}
+                color="blue"
+                desc="build"
+              />
+              <ProgressBar
+                value={item.hmr}
+                max={maxTime}
+                color="cyan"
+                desc="HMR"
+              />
             </div>
           </div>
-        </NoSSR>
-      )}
+        ))}
+        <div>
+          <a
+            href="misc/benchmark.html"
+            target="_blank"
+            className={`${styles['bottom-link']} hover:text-brand transition-colors duration-300 font-medium p-2`}
+          >
+            👉 {t('benchmarkDetail')}
+          </a>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/website/theme/components/Featured/index.module.scss b/website/theme/components/Featured/index.module.scss
@@ -56,9 +56,12 @@
         hsla(0, 0%, 100%, 0.16) 406.65deg
       )
       border-box !important;
-  transition: transform 0.15s ease-out;
+  transition:
+    border-color,
+    transform 0.15s ease-out;
 
   &:hover {
+    border: 1px solid rgba(133, 139, 152, 0.4);
     background:
       linear-gradient(var(--rp-c-bg), var(--rp-c-bg)) padding-box,
       conic-gradient(

diff --git a/website/theme/components/Featured/index.tsx b/website/theme/components/Featured/index.tsx
@@ -86,7 +86,7 @@ export function Featured() {
           <div className={styles.list}>
             {features.map(feature => {
               return (
-                <a href={feature.link}>
+                <a href={feature.link} key={feature.title}>
                   <div className={styles.card}>
                     <div className={styles.cardTitle}>{feature.title}</div>
                     <div className={styles.cardDesc}>{feature.desc}</div>

diff --git a/website/theme/components/HomeFooter/index.module.scss b/website/theme/components/HomeFooter/index.module.scss
@@ -0,0 +1,9 @@
+.text {
+  color: var(--rp-c-text-2);
+  transition: color 0.2s ease-out;
+
+  &:hover {
+    color: var(--rp-c-link);
+    text-decoration: underline;
+  }
+}
diff --git a/website/theme/components/HomeFooter/index.tsx b/website/theme/components/HomeFooter/index.tsx
@@ -1,6 +1,7 @@
 import { useLang } from 'rspress/runtime';
 import { Link } from 'rspress/theme';
 import { useI18n } from '../../i18n/index';
+import styles from './index.module.scss';
 
 function useFooterData() {
   const t = useI18n();
@@ -110,7 +111,9 @@ export function HomeFooter() {
               {item.items.map(subItem => (
                 <li key={subItem.title}>
                   <Link href={subItem.link}>
-                    <span className="font-normal">{subItem.title}</span>
+                    <span className={`font-normal ${styles.text}`}>
+                      {subItem.title}
+                    </span>
                   </Link>
                 </li>
               ))}

diff --git a/website/theme/index.css b/website/theme/index.css
@@ -8,6 +8,7 @@ summary {
   --rp-c-brand-darker: #c26c1d;
   --rp-c-brand-light: #f2a65a;
   --rp-c-brand-lighter: #f2a65a;
+  --rp-c-link: var(--rp-c-brand);
   --rp-c-brand-tint: rgba(250, 192, 61, 0.15);
   --rp-code-title-bg: rgba(250, 192, 61, 0.15);
   --rp-code-block-bg: rgba(214, 188, 70, 0.05);