Migrate website to Rspress and Zephyr

apps/website/components/Customers.jsx

@@ -1,5 +1,4 @@
-import Link from "next/link";
-import customers from '../customers.json';
+import customers from "../customers.json";
 
 export default function Customers() {
   const showcase = customers.map((customer, index) => {
@@ -8,16 +7,20 @@ export default function Customers() {
     url.searchParams.append("utm_medium", "customers_page");
 
     return (
-      <Link href={url} key={index}>
-        <img src={customer.image} style={{
-          width: customer.width ? `${customer.width}px` : '128px',
-          padding: '16px'
-        }} alt={customer.caption}/>
-      </Link>
+      <a href={url.toString()} key={index}>
+        <img
+          src={customer.image}
+          style={{
+            width: customer.width ? `${customer.width}px` : "128px",
+            padding: "16px",
+          }}
+          alt={customer.caption}
+        />
+      </a>
     );
   });
   return (
-    <div className={'flex items-center flex-wrap justify-center gap-6'}>
+    <div className={"flex items-center flex-wrap justify-center gap-6"}>
       {showcase}
     </div>
   );

apps/website/components/RspressCompat.jsx

@@ -0,0 +1,61 @@
+import React from "react";
+import {
+  Callout as RspressCallout,
+  Tab as RspressTab,
+  Tabs as RspressTabs,
+} from "@rspress/core/theme";
+
+const calloutTypes = new Set([
+  "tip",
+  "note",
+  "important",
+  "warning",
+  "caution",
+  "danger",
+  "info",
+  "details",
+]);
+
+export function Callout({ children, emoji, type = "info", ...props }) {
+  const normalizedType = calloutTypes.has(type) ? type : "info";
+
+  return (
+    <RspressCallout type={normalizedType} {...props}>
+      {emoji ? <span className="mr-2 inline-block">{emoji}</span> : null}
+      {children}
+    </RspressCallout>
+  );
+}
+
+export function Tab(props) {
+  return <RspressTab {...props} />;
+}
+
+export function Tabs({ children, items, ...props }) {
+  const tabValues = Array.isArray(items)
+    ? items.map((item) => ({
+        label: item,
+        value: String(item),
+      }))
+    : undefined;
+
+  const tabChildren = Array.isArray(items)
+    ? React.Children.toArray(children).map((child, index) => {
+        if (!React.isValidElement(child)) {
+          return child;
+        }
+
+        return React.cloneElement(child, {
+          value: String(items[index]),
+        });
+      })
+    : children;
+
+  return (
+    <RspressTabs values={tabValues} {...props}>
+      {tabChildren}
+    </RspressTabs>
+  );
+}
+
+Tabs.Tab = Tab;

apps/website/components/TeamMembers.jsx

@@ -1,5 +1,3 @@
-import Link from "next/link";
-
 const members = [
   {
     name: "kdy1 / Donny",
@@ -50,7 +48,7 @@ export default function TeamMembers() {
     <div className="grid grid-cols-3 gap-4 mt-4">
       {members.map((member, index) => {
         return (
-          <Link href={`https://github.com/${member.github}`} key={index}>
+          <a href={`https://github.com/${member.github}`} key={index}>
             <div className="flex flex-col items-center">
               <img
                 src={`https://github.com/${member.github}.png`}
@@ -62,7 +60,7 @@ export default function TeamMembers() {
               <div className="font-bold text-center">{member.name}</div>
               <div>{member.role}</div>
             </div>
-          </Link>
+          </a>
         );
       })}
     </div>

apps/website/components/benchmarks/benchmark.jsx

@@ -7,6 +7,7 @@
 */
 
 import React, { useState, useEffect } from "react";
+import "chart.js/auto";
 import { Line } from "react-chartjs-2";
 import styles from "./styles.module.css";
 

apps/website/components/benchmarks/dynamic.jsx

@@ -1,5 +1,16 @@
-import dynamic from "next/dynamic";
+import { BrowserOnly } from "@rspress/core/runtime";
+import { lazy, Suspense } from "react";
 
-const Benchmark = dynamic(() => import("./benchmark"));
+const Benchmark = lazy(() => import("./benchmark"));
 
-export default Benchmark;
+export default function DynamicBenchmark() {
+  return (
+    <BrowserOnly fallback={<span>Loading...</span>}>
+      {() => (
+        <Suspense fallback={<span>Loading...</span>}>
+          <Benchmark />
+        </Suspense>
+      )}
+    </BrowserOnly>
+  );
+}

apps/website/content/_nav.json

@@ -0,0 +1,17 @@
+[
+  {
+    "text": "Docs",
+    "link": "/docs/getting-started",
+    "activeMatch": "^/docs/"
+  },
+  {
+    "text": "Playground",
+    "link": "/playground",
+    "activeMatch": "^/playground"
+  },
+  {
+    "text": "Blog",
+    "link": "/blog/perf-swc-vs-babel",
+    "activeMatch": "^/blog/"
+  }
+]

apps/website/content/blog/_meta.json

@@ -0,0 +1,12 @@
+[
+  {
+    "type": "file",
+    "name": "perf-swc-vs-babel",
+    "label": "Performance Comparison of SWC and Babel"
+  },
+  {
+    "type": "file",
+    "name": "swc-1",
+    "label": "Introducing SWC 1.0"
+  }
+]