aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/docs/components/pages/pack-home
diff options
context:
space:
mode:
Diffstat (limited to 'docs/components/pages/pack-home')
-rw-r--r--docs/components/pages/pack-home/DocsBenchmarkStat.tsx53
-rw-r--r--docs/components/pages/pack-home/DocsBenchmarksGraph.tsx31
-rw-r--r--docs/components/pages/pack-home/PackBenchmarkTabs.tsx149
-rw-r--r--docs/components/pages/pack-home/PackBenchmarks.tsx97
-rw-r--r--docs/components/pages/pack-home/PackBenchmarksGraph.tsx333
-rw-r--r--docs/components/pages/pack-home/PackBenchmarksPicker.tsx20
-rw-r--r--docs/components/pages/pack-home/PackDropdown.tsx117
-rw-r--r--docs/components/pages/pack-home/PackFeatures.tsx12
-rw-r--r--docs/components/pages/pack-home/PackHero.tsx115
-rw-r--r--docs/components/pages/pack-home/PackLetter.tsx114
-rw-r--r--docs/components/pages/pack-home/benchmark-data/README.md7
-rw-r--r--docs/components/pages/pack-home/benchmark-data/data.json54
-rw-r--r--docs/components/pages/pack-home/index.tsx24
13 files changed, 0 insertions, 1126 deletions
diff --git a/docs/components/pages/pack-home/DocsBenchmarkStat.tsx b/docs/components/pages/pack-home/DocsBenchmarkStat.tsx
deleted file mode 100644
index 5b8dcf6..0000000
--- a/docs/components/pages/pack-home/DocsBenchmarkStat.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import benchmarkData from "./benchmark-data/data.json";
-
-type StatFunc = (data: typeof benchmarkData) => string;
-
-/**
- * Replace with satisfies keyword when TS 4.9 drops
- */
-const satisfies =
- <T,>() =>
- <U extends T>(t: U) =>
- t;
-
-const formatToSeconds = (seconds: number) => `${seconds.toFixed(1)}s`;
-const formatPercentage = (percentage: number) => `${percentage.toFixed(1)}x`;
-
-const stats = satisfies<Record<string, StatFunc>>()({
- "next12-cold-1000": (data) => formatToSeconds(data.cold[1000].next12),
- "turbopack-cold-1000": (data) => formatToSeconds(data.cold[1000].next13),
- "turbopack-cold-vs-next12": (data) =>
- formatPercentage(data.cold[1000].next12 / data.cold[1000].next13),
- "turbopack-cold-vs-next12-30000": (data) =>
- formatPercentage(data.cold[30000].next12 / data.cold[30000].next13),
- "turbopack-update-vs-next12": (data) =>
- formatPercentage(
- data.file_change[1000].next12 / data.file_change[1000].next13
- ),
- "turbopack-update-vs-next12-30000": (data) =>
- formatPercentage(
- data.file_change[30000].next12 / data.file_change[30000].next13
- ),
- "vite-cold-1000": (data) => formatToSeconds(data.cold[1000].vite),
- "turbopack-cold-vs-vite": (data) =>
- formatPercentage(data.cold[1000].vite / data.cold[1000].next13),
- "turbopack-cold-vs-vite-30000": (data) =>
- formatPercentage(data.cold[30000].vite / data.cold[30000].next13),
- "turbopack-update-vs-vite": (data) =>
- formatPercentage(
- data.file_change[1000].vite / data.file_change[1000].next13
- ),
- "turbopack-update-vs-vite-30000": (data) =>
- formatPercentage(
- data.file_change[30000].vite / data.file_change[30000].next13
- ),
-});
-
-type Stat = keyof typeof stats;
-
-export function DocsBenchmarkStat(props: { stat: Stat }) {
- if (!stats[props.stat]) {
- throw new Error(`Invalid stat: ${props.stat}`);
- }
- return stats[props.stat](benchmarkData);
-}
diff --git a/docs/components/pages/pack-home/DocsBenchmarksGraph.tsx b/docs/components/pages/pack-home/DocsBenchmarksGraph.tsx
deleted file mode 100644
index 7fb9d55..0000000
--- a/docs/components/pages/pack-home/DocsBenchmarksGraph.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useState } from "react";
-import {
- BenchmarkBar,
- BenchmarkCategory,
- BenchmarkNumberOfModules,
-} from "./PackBenchmarks";
-import { BenchmarksGraph } from "./PackBenchmarksGraph";
-import { PackBenchmarksPicker } from "./PackBenchmarksPicker";
-
-export function DocsBenchmarksGraph(props: {
- bars: BenchmarkBar[];
- category: BenchmarkCategory;
-}) {
- const [numberOfModules, setNumberOfModules] =
- useState<BenchmarkNumberOfModules>("1000");
- return (
- <div className="my-10">
- <BenchmarksGraph
- bars={props.bars}
- category={props.category}
- numberOfModules={numberOfModules}
- pinTime
- />
- <div className="flex justify-center mt-6">
- <PackBenchmarksPicker
- setNumberOfModules={setNumberOfModules}
- ></PackBenchmarksPicker>
- </div>
- </div>
- );
-}
diff --git a/docs/components/pages/pack-home/PackBenchmarkTabs.tsx b/docs/components/pages/pack-home/PackBenchmarkTabs.tsx
deleted file mode 100644
index f771fb1..0000000
--- a/docs/components/pages/pack-home/PackBenchmarkTabs.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import { useRef, useState } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { BenchmarkCategory } from "./PackBenchmarks";
-import classNames from "classnames";
-import gradients from "../home-shared/gradients.module.css";
-
-const TABS: {
- id: BenchmarkCategory;
- title: string;
- soon: boolean;
- tooltip: string;
-}[] = [
- {
- id: "cold",
- title: "Cold Start",
- soon: false,
- tooltip: "First run",
- },
- {
- id: "file_change",
- title: "File Change",
- soon: false,
- tooltip: "Hot Reload (HMR)",
- },
- {
- id: "code_build",
- title: "Code Build",
- soon: true,
- tooltip: "First Build",
- },
- {
- id: "build_from_cache",
- title: "Build from Cache",
- soon: true,
- tooltip: "Second Build",
- },
-];
-
-const TRANSITION = {
- duration: 0.3,
- ease: [0.59, 0.15, 0.18, 0.93],
-};
-
-function SoonBadge() {
- return (
- <span className="inline-flex items-center h-5 px-2 rounded-full text-xs font-medium dark:text-[#888888] dark:bg-[#333333] text-[#666666] bg-[#EAEAEA] ">
- Soon
- </span>
- );
-}
-
-export function PackBenchmarkTabs({
- onTabChange,
-}: {
- onTabChange: (tab: BenchmarkCategory) => void;
-}) {
- const [activeTab, setActiveTab] = useState(0);
-
- const onTabClick = (index: number) => {
- if (TABS[index].soon) return;
- setActiveTab(index);
- onTabChange(TABS[index].id);
- };
-
- return (
- <div className="flex items-center justify-center w-full">
- <div className="relative flex items-center justify-start pb-12 overflow-x-scroll overflow-y-clip no-scrollbar">
- <AnimatePresence>
- <div className="flex flex-row items-center rounded-full p-1 dark:bg-[#ffffff0d] bg-[#00000005] mx-5">
- {TABS.map((tab, index) => (
- <button
- className="relative px-5 py-3"
- key={tab.id}
- onClick={() => onTabClick(index)}
- disabled={tab.soon}
- >
- {TABS[activeTab].id === tab.id && (
- <motion.div
- className={classNames(
- gradients.benchmarkActiveTab,
- "absolute w-full rounded-full h-full top-0 left-0 border border-neutral-200 dark:border-neutral-800"
- )}
- layoutId="tabSwitcher"
- style={{ borderRadius: 36 }}
- transition={TRANSITION}
- />
- )}
- <ToolTip text={tab.tooltip}>
- <motion.div
- animate={{ opacity: activeTab === index ? 1 : 0.4 }}
- className="flex flex-row items-center justify-center gap-2 whitespace-nowrap"
- transition={{ ...TRANSITION, duration: 0.2 }}
- style={{ cursor: tab.soon ? "not-allowed" : "pointer" }}
- >
- <span
- className="z-10 m-0 font-medium"
- style={{ opacity: tab.soon ? 0.6 : 1 }}
- >
- {tab.title}
- </span>
- {tab.soon && <SoonBadge />}
- </motion.div>
- </ToolTip>
- </button>
- ))}
- </div>
- </AnimatePresence>
- </div>
- </div>
- );
-}
-
-function ToolTip({ text, children }: { text; children: React.ReactNode }) {
- const [show, setShow] = useState(false);
- const timeout = useRef<NodeJS.Timeout>();
-
- const onMouseEnter = () => {
- timeout.current = setTimeout(() => {
- setShow(true);
- }, 800);
- };
-
- const onMouseLeave = () => {
- clearTimeout(timeout.current);
- setShow(false);
- };
-
- return (
- <div
- className="relative"
- onMouseEnter={onMouseEnter}
- onMouseLeave={onMouseLeave}
- >
- <motion.div
- animate={show ? { opacity: 1, y: 0 } : { opacity: 0, y: -4 }}
- transition={{ duration: 0.2, ease: [0.59, 0.15, 0.18, 0.93] }}
- className={
- "absolute top-[100%] mt-4 w-full flex flex-col items-center justify-center z-50"
- }
- >
- <div className={gradients.tooltipArrow} />
- <div className="dark:bg-[#333333] bg-neutral-100 rounded-lg px-4 py-1 whitespace-nowrap">
- <p className="font-sans text-sm text-[#888888]">{text}</p>
- </div>
- </motion.div>
- <div>{children}</div>
- </div>
- );
-}
diff --git a/docs/components/pages/pack-home/PackBenchmarks.tsx b/docs/components/pages/pack-home/PackBenchmarks.tsx
deleted file mode 100644
index 9bd1db8..0000000
--- a/docs/components/pages/pack-home/PackBenchmarks.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { useState } from "react";
-import { FadeIn } from "../home-shared/FadeIn";
-import { SectionHeader, SectionSubtext } from "../home-shared/Headings";
-import { BenchmarksGraph } from "./PackBenchmarksGraph";
-import { PackBenchmarksPicker } from "./PackBenchmarksPicker";
-import { PackBenchmarkTabs } from "./PackBenchmarkTabs";
-
-export type BenchmarkNumberOfModules = "1000" | "5000" | "10000" | "30000";
-export type BenchmarkCategory =
- | "cold"
- | "from_cache"
- | "file_change"
- | "code_build"
- | "build_from_cache";
-export interface BenchmarkData {
- next13: number;
- next12: number;
- vite: number;
- next11: number;
-}
-
-export interface BenchmarkBar {
- label: string;
- key: keyof BenchmarkData;
- turbo?: true;
- swc?: true;
-}
-
-export const DEFAULT_BARS: BenchmarkBar[] = [
- {
- key: "next13",
- label: "Next.js 13",
- turbo: true,
- },
- {
- key: "next12",
- label: "Next.js 12",
- },
- {
- key: "vite",
- label: "Vite",
- swc: true,
- },
- {
- key: "next11",
- label: "Next.js 11",
- },
-];
-export const HMR_BARS: BenchmarkBar[] = [
- {
- key: "next13",
- label: "Next.js 13",
- turbo: true,
- },
- {
- key: "vite",
- label: "Vite",
- swc: true,
- },
- {
- key: "next12",
- label: "Next.js 12",
- },
- {
- key: "next11",
- label: "Next.js 11",
- },
-];
-
-export function PackBenchmarks() {
- const [numberOfModules, setNumberOfModules] =
- useState<BenchmarkNumberOfModules>("1000");
- const [category, setCategory] = useState<BenchmarkCategory>("cold");
-
- return (
- <FadeIn className="relative flex flex-col items-center justify-center w-full gap-10 py-16 font-sans md:py-24 lg:py-32">
- <div className="flex flex-col items-center gap-5 md:gap-6">
- <SectionHeader>Faster Than Fast</SectionHeader>
- <SectionSubtext>
- Crafted by the creators of Webpack, Turbopack delivers unparalleled
- performance at scale.
- </SectionSubtext>
- </div>
- <div className="flex flex-col items-center w-full">
- <PackBenchmarkTabs onTabChange={setCategory} />
- <BenchmarksGraph
- category={category}
- numberOfModules={numberOfModules}
- bars={DEFAULT_BARS}
- />
- </div>
- <PackBenchmarksPicker
- setNumberOfModules={setNumberOfModules}
- ></PackBenchmarksPicker>
- </FadeIn>
- );
-}
diff --git a/docs/components/pages/pack-home/PackBenchmarksGraph.tsx b/docs/components/pages/pack-home/PackBenchmarksGraph.tsx
deleted file mode 100644
index f3107b0..0000000
--- a/docs/components/pages/pack-home/PackBenchmarksGraph.tsx
+++ /dev/null
@@ -1,333 +0,0 @@
-import cn from "classnames";
-import {
- animate,
- motion,
- useInView,
- useAnimation,
- AnimationPlaybackControls,
-} from "framer-motion";
-import Image from "next/image";
-import { useEffect, useRef, useState } from "react";
-import benchmarkData from "./benchmark-data/data.json";
-import { Gradient } from "../home-shared/Gradient";
-import gradients from "../home-shared/gradients.module.css";
-import {
- BenchmarkBar,
- BenchmarkCategory,
- BenchmarkData,
- BenchmarkNumberOfModules,
-} from "./PackBenchmarks";
-
-interface BenchmarksGraphProps {
- category: BenchmarkCategory;
- numberOfModules: BenchmarkNumberOfModules;
- bars: BenchmarkBar[];
- pinTime?: true;
-}
-
-export function BenchmarksGraph({
- category,
- numberOfModules,
- bars,
- pinTime,
-}: BenchmarksGraphProps) {
- const data: BenchmarkData = benchmarkData[category][numberOfModules];
- const keys = bars.map((bar) => bar.key);
- const longestTime = Math.max(...keys.map((key) => data[key])) * 1000;
- const longestTimeWithPadding = longestTime * 1.15;
- const graphRef = useRef(null);
- const graphInView = useInView(graphRef, { once: true, margin: "-128px" });
-
- return (
- <div className="flex w-full max-w-[1248px] relative px-6">
- <div className="absolute top-0 flex items-center justify-center flex-1 w-full h-full">
- <Gradient
- gray
- width="100%"
- height="100%"
- className="dark:opacity-0 dark:md:opacity-25 opacity-10"
- />
- </div>
- <div
- ref={graphRef}
- className="relative flex flex-col flex-1 gap-6 md:gap-10"
- >
- {bars.map((bar) => {
- return (
- <GraphBar
- key={bar.key}
- turbo={bar.turbo}
- Label={
- <GraphLabel label={bar.label} turbo={bar.turbo} swc={bar.swc} />
- }
- duration={data[bar.key] * 1000}
- longestTime={longestTimeWithPadding}
- inView={graphInView}
- pinTime={pinTime}
- ></GraphBar>
- );
- })}
- </div>
- </div>
- );
-}
-
-const START_DELAY = 0.0;
-
-const graphBarVariants = {
- initial: {
- width: 0,
- },
- progress: {
- width: "100%",
- },
-};
-
-const graphBarWrapperVariants = {
- hidden: {
- opacity: 0,
- },
- show: {
- opacity: 1,
- },
-};
-
-function GraphBar({
- turbo,
- duration,
- longestTime,
- inView,
- Label,
- pinTime,
-}: {
- turbo?: boolean;
- duration: number;
- longestTime: number;
- Label: JSX.Element;
- inView?: boolean;
- // Pin the time
- pinTime?: true;
-}) {
- const controls = useAnimation();
- const [timer, setTimer] = useState(0);
- const [timerAnimation, setTimerAnimation] =
- useState<AnimationPlaybackControls>();
- const [barWidth, setBarWidth] = useState(0);
- const [, setFinished] = useState(false);
-
- async function stopAnimation() {
- timerAnimation && timerAnimation.stop();
- controls.stop();
- }
-
- async function resetAnimation() {
- setTimer(0);
- setFinished(false);
- await controls.start("initial");
- }
-
- async function startAnimation() {
- const transition = {
- duration: duration / 1000,
- delay: START_DELAY,
- };
- setBarWidth((duration / longestTime) * 100);
- await controls.start("show");
- controls
- .start("progress", {
- ...transition,
- ease: "linear",
- })
- .then(() => {
- setFinished(true);
- });
- const timerAnimationRef = animate(0, duration, {
- ...transition,
- ease: "linear",
- onUpdate(value) {
- setTimer(value);
- },
- });
- setTimerAnimation(timerAnimationRef);
- }
-
- async function playFullAnimation() {
- await stopAnimation();
- await controls.start("hidden");
- await resetAnimation();
- await startAnimation();
- }
-
- useEffect(() => {
- if (inView) {
- void startAnimation();
- } else {
- void stopAnimation();
- void resetAnimation();
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [inView]);
-
- useEffect(() => {
- if (!inView) return;
- void playFullAnimation();
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [duration, longestTime]);
-
- return (
- <div className="justify-center w-full gap-1 md:flex-row md:flex align-center">
- <div className="flex items-center w-48">{Label}</div>
- <div className="flex w-full items-center justify-between gap-4 z-10 border dark:border-[#333333] rounded-lg p-1">
- <motion.div
- animate={controls}
- variants={graphBarWrapperVariants}
- style={{ width: `${barWidth}%` }}
- transition={{ duration: 0.1 }}
- initial="hidden"
- className={cn(
- "flex items-center h-full rounded relative dark:bg-[#383838] bg-[#E6E6E6]"
- )}
- >
- <motion.div
- className={cn(
- "h-12 rounded w-0 relative",
- turbo ? gradients.benchmarkTurbo : gradients.benchmark,
- { [gradients.barBorder]: !turbo }
- )}
- variants={graphBarVariants}
- animate={controls}
- transition={{ duration: 0.1 }}
- />
- </motion.div>
- <motion.div
- animate={controls}
- variants={graphBarWrapperVariants}
- className="pr-2"
- transition={{ duration: 0.1 }}
- >
- <GraphTimer
- turbo={turbo}
- timer={pinTime ? duration : timer}
- duration={duration}
- />
- </motion.div>
- </div>
- </div>
- );
-}
-
-const GraphTimer = ({
- turbo,
- timer,
- duration,
-}: {
- turbo: boolean;
- timer: number;
- duration: number;
-}) => {
- return (
- <div className={`flex flex-row gap-2 w-24 justify-end items-center z-10`}>
- {turbo && (
- <div className="relative flex w-6 h-6">
- <Image
- alt="HydroRollTRPG"
- src="/images/docs/TRPG/turbo-benchmark-icon-light.svg"
- width={32}
- height={32}
- className="block dark:hidden"
- />
- <Image
- alt="HydroRollTRPG"
- src="/images/docs/TRPG/turbo-benchmark-icon-dark.svg"
- width={32}
- height={32}
- className="hidden dark:block"
- />
- <Gradient
- pink
- width="100%"
- height="100%"
- small
- className="opacity-0 dark:opacity-60"
- />
- </div>
- )}
- <p className="font-mono">
- <Time value={timer} maxValue={duration} />
- </p>
- </div>
- );
-};
-
-function roundTo(num: number, decimals: number) {
- const factor = Math.pow(10, decimals);
- return Math.round(num * factor) / factor;
-}
-
-const Time = ({
- value,
- maxValue,
-}: {
- value: number;
- maxValue: number;
-}): JSX.Element => {
- let unitValue: string;
- let unit: string;
- if (maxValue < 1000) {
- unitValue = Math.round(value).toFixed(0);
- unit = "ms";
- } else {
- const roundedValue = roundTo(value / 1000, 1);
- unitValue = roundedValue.toFixed(1);
- unit = "s";
- }
-
- return (
- <>
- {unitValue}
- {unit}
- </>
- );
-};
-
-function GraphLabel({
- label,
- turbo,
- swc,
- mobileOnly,
- esbuild,
-}: {
- label: string;
- turbo?: boolean;
- swc?: boolean;
- mobileOnly?: boolean;
- esbuild?: boolean;
-}) {
- return (
- <div
- className={`flex items-center h-12 whitespace-nowrap font-bold gap-y-1 gap-x-2 ${
- mobileOnly && "md:hidden"
- }`}
- >
- <p>{label}</p>
- {turbo && (
- <p
- className={cn(
- "font-space-grotesk m-0",
- gradients.benchmarkTurboLabel
- )}
- >
- turbo
- </p>
- )}
- {swc && (
- <p className="font-space-grotesk m-0 font-light text-[#666666]">
- with SWC
- </p>
- )}
- {esbuild && (
- <p className="font-space-grotesk m-0 text-[#666666]">esbuild</p>
- )}
- </div>
- );
-}
diff --git a/docs/components/pages/pack-home/PackBenchmarksPicker.tsx b/docs/components/pages/pack-home/PackBenchmarksPicker.tsx
deleted file mode 100644
index 33e5bfd..0000000
--- a/docs/components/pages/pack-home/PackBenchmarksPicker.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { BenchmarkNumberOfModules } from "./PackBenchmarks";
-import { PackDropdown } from "./PackDropdown";
-
-export function PackBenchmarksPicker(props: {
- setNumberOfModules: (num: BenchmarkNumberOfModules) => void;
-}) {
- return (
- <div className="flex items-center gap-3">
- <a
- className="dark:text-[#888888] hover:underline underline-offset-4 text-[#666666] text-sm"
- href="https://github.com/retrofor/HydroRoll/blob/main/docs/components/pages/pack-home/benchmark-data"
- >
- React Components
- </a>
- <PackDropdown
- onOptionSelected={(value) => props.setNumberOfModules(value)}
- />
- </div>
- );
-}
diff --git a/docs/components/pages/pack-home/PackDropdown.tsx b/docs/components/pages/pack-home/PackDropdown.tsx
deleted file mode 100644
index 7ff5d76..0000000
--- a/docs/components/pages/pack-home/PackDropdown.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import { useState, Fragment } from "react";
-import { Listbox, Transition } from "@headlessui/react";
-import { BenchmarkNumberOfModules } from "./PackBenchmarks";
-
-export function PackDropdown({
- onOptionSelected,
-}: {
- onOptionSelected: (option: BenchmarkNumberOfModules) => void;
-}) {
- const [selectedOption, setSelectedOption] =
- useState<BenchmarkNumberOfModules>("1000");
-
- const onSelect = (option: BenchmarkNumberOfModules) => {
- onOptionSelected(option);
- setSelectedOption(option);
- };
-
- return (
- <div className="relative">
- <Listbox value={selectedOption} onChange={onSelect}>
- <Listbox.Button className="flex w-24 pl-3 pr-2 py-2 gap-3 rounded !bg-[#fafafa] dark:!bg-[#111111] dark:hover:text-white hover:text-black dark:text-[#888888] text-[#666666] items-center justify-between transition-all text-sm leading-none font-medium m-0">
- {Number(selectedOption).toLocaleString()}
- <Arrow />
- </Listbox.Button>
-
- <Transition
- as={Fragment}
- leave="transition ease-in duration-100"
- leaveFrom="opacity-100"
- leaveTo="opacity-0"
- >
- <Listbox.Options className="absolute left-0 mt-2 w-full dark:bg-[#111111] bg-[#FAFAFA] rounded py-1 z-50 list">
- <Listbox.Option
- value="1000"
- className={({ active }) =>
- `relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${
- active ? "bg-gray-800 text-gray-100" : "text-gray-900"
- }`
- }
- >
- 1000
- </Listbox.Option>
- <Listbox.Option
- className={({ active }) =>
- `relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${
- active ? "bg-gray-800 text-gray-100" : "text-gray-900"
- }`
- }
- value="5000"
- >
- 5000
- </Listbox.Option>
- <Listbox.Option
- className={({ active }) =>
- `relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${
- active ? "bg-gray-800 text-gray-100" : "text-gray-900"
- }`
- }
- value="10000"
- >
- 10000
- </Listbox.Option>
- <Listbox.Option
- className={({ active }) =>
- `relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${
- active ? "bg-gray-800 text-gray-100" : "text-gray-900"
- }`
- }
- value="30000"
- >
- 30000
- </Listbox.Option>
- </Listbox.Options>
- </Transition>
- </Listbox>
- </div>
- );
-}
-
-function BenchmarkOption({
- value,
- onSelect,
-}: {
- value: BenchmarkNumberOfModules;
- onSelect: (value: string) => void;
-}) {
- return (
- <div
- className="flex pl-3 py-2 items-center justify-between cursor-pointer transition-all dark:text-[#888888] dark:hover:text-white text-[#666666] hover:text-[#000]"
- onClick={() => onSelect(value)}
- >
- <p className="text-sm leading-none font-medium m-0">
- {Number(value).toLocaleString()}
- </p>
- </div>
- );
-}
-
-function Arrow() {
- return (
- <svg
- width="16"
- height="16"
- viewBox="0 0 16 16"
- fill="none"
- xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M4 6L8 10L12 6"
- stroke="#666666"
- strokeWidth="1.5"
- strokeLinecap="round"
- strokeLinejoin="round"
- />
- </svg>
- );
-}
diff --git a/docs/components/pages/pack-home/PackFeatures.tsx b/docs/components/pages/pack-home/PackFeatures.tsx
deleted file mode 100644
index 40fda95..0000000
--- a/docs/components/pages/pack-home/PackFeatures.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { PACK_HOME_FEATURES } from "../../../content/features";
-import { FeaturesBento } from "../home-shared/FeaturesBento";
-
-export function PackFeatures() {
- return (
- <FeaturesBento
- header="Why TRPG?"
- body="With incremental behavior and adaptable bundling strategies, Turbopack provides a fast and flexible development experience for apps of any size."
- features={PACK_HOME_FEATURES}
- />
- );
-}
diff --git a/docs/components/pages/pack-home/PackHero.tsx b/docs/components/pages/pack-home/PackHero.tsx
deleted file mode 100644
index 9def8df..0000000
--- a/docs/components/pages/pack-home/PackHero.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import cn from "classnames";
-import Image from "next/image";
-import Link from "next/link";
-// import { Marquee } from "../../clients/Marquee";
-// import { Clients } from "../../clients/Clients";
-import gradients from "../home-shared/gradients.module.css";
-import { HeroText, SectionSubtext } from "../home-shared/Headings";
-import { Gradient } from "../home-shared/Gradient";
-import { FadeIn } from "../home-shared/FadeIn";
-import { CTAButton } from "../home-shared/CTAButton";
-import PackLogo from "../../logos/PackLogo";
-
-export function PackHero() {
- return (
- <>
- <FadeIn
- noVertical
- className="font-sans w-auto pb-16 pt-[48px] md:pb-24 lg:pb-32 md:pt-16 lg:pt-20 flex justify-between gap-8 items-center flex-col relative z-0"
- >
- <FadeIn className="z-50 flex items-center justify-center w-full">
- <div className="absolute min-w-[614px] min-h-[614px]">
- <Image
- alt="HydroRollTRPG"
- src="/images/docs/TRPG/turbopack-hero-hexagons-dark.svg"
- width={614}
- height={614}
- className="hidden dark:block"
- />
- <Image
- alt="HydroRollTRPG"
- src="/images/docs/TRPG/turbopack-hero-hexagons-light.svg"
- width={614}
- height={614}
- className="block dark:hidden"
- />
- </div>
- <div className="absolute z-50 flex items-center justify-center w-64 h-64">
- <Gradient
- small
- width={120}
- height={120}
- conic
- className="dark:opacity-100 opacity-40"
- />
- </div>
-
- <div className="w-[120px] z-50 mt-[-8.075px] mb-[-8.075px]">
- <Image
- alt=""
- src={`/images/docs/TRPG/turbopack-hero-logo-dark.svg`}
- width={120}
- height={136.15}
- className="hidden dark:block"
- />
- <Image
- alt=""
- src={`/images/docs/TRPG/turbopack-hero-logo-light.svg`}
- width={120}
- height={136.15}
- className="block dark:hidden"
- />
- </div>
- </FadeIn>
- <Gradient
- width={1000}
- height={1000}
- className="top-[-500px] dark:opacity-20 opacity-[0.15]"
- conic
- />
- <div className="absolute top-0 z-10 w-full h-48 dark:from-black from-white to-transparent bg-gradient-to-b" />
- <FadeIn
- delay={0.15}
- className="z-50 flex flex-col items-center justify-center gap-5 px-6 text-center lg:gap-6"
- >
- <PackLogo
- alt="Turbopack"
- width="200"
- className="w-[160px] md:w-[200px] fill-black dark:fill-white"
- />
- <HeroText h1>The Rust-powered successor to Webpack</HeroText>
- <SectionSubtext hero>
- Turbopack is an incremental bundler optimized for JavaScript and
- TypeScript, written in Rust.
- </SectionSubtext>
- </FadeIn>
- <FadeIn
- delay={0.3}
- className="z-50 flex flex-col items-center w-full max-w-md gap-5 px-6"
- >
- <div className="flex flex-col w-full gap-3 md:!flex-row">
- <CTAButton>
- <Link href="/TRPG/docs" className="block py-3">
- Get Started
- </Link>
- </CTAButton>
- <CTAButton outline>
- <a
- target="_blank"
- rel="noreferrer"
- href="https://github.com/retrofor/HydroRoll"
- className="block py-3"
- >
- GitHub
- </a>
- </CTAButton>
- </div>
- <p className="text-sm text-[#666666]">License: MPL-2.0</p>
- </FadeIn>
- <FadeIn delay={0.5} className="relative w-full">
- <div className="absolute bottom-0 w-full dark:from-black from-white to-transparent h-72 bg-gradient-to-t" />
- </FadeIn>
- </FadeIn>
- </>
- );
-}
diff --git a/docs/components/pages/pack-home/PackLetter.tsx b/docs/components/pages/pack-home/PackLetter.tsx
deleted file mode 100644
index 46477d7..0000000
--- a/docs/components/pages/pack-home/PackLetter.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { HeroText } from "../home-shared/Headings";
-import Image from "next/image";
-import cn from "classnames";
-import gradients from "../home-shared/gradients.module.css";
-import { FadeIn } from "../home-shared/FadeIn";
-import { CTAButton } from "../home-shared/CTAButton";
-import Link from "next/link";
-import { Gradient } from "../home-shared/Gradient";
-
-export function PackLetter() {
- return (
- <section className="relative flex flex-col items-center px-6 py-16 font-sans md:py-24 lg:py-32 gap-14">
- <FadeIn>
- <HeroText>
- Let&apos;s move
- <br />
- the web forward
- </HeroText>
- </FadeIn>
- <div className="flex flex-col max-w-xl leading-6 md:text-lg lg:text-lg">
- <FadeIn className="opacity-70">
- <p>
- It&apos;s time for a new beginning in compiler infrastructure for
- the entire web ecosystem. Webpack has been downloaded over 3 billion
- times. It&apos;s become an integral part of building for the web.
- But just like Babel and Terser, it&apos;s time to go all-in on
- native. I joined Vercel and assembled a team of world class
- engineers to build the web&apos;s next generation bundler.
- </p>
- <br />
- <p>
- This team has taken lessons from 10 years of Webpack, combined with
- the innovations in incremental computation from Turborepo and
- Google&apos;s Bazel, and invented an architecture ready to withstand
- the next 10 years.
- </p>
- <br />
- <p>
- With that, we&apos;re excited to introduce Turbopack, our
- Rust-powered successor to Webpack. It will harness the power of our
- build system, Turborepo, for massive performance improvements.
- Turbopack is the new foundation of high-performance bare-metal
- tooling and is now open source—we&apos;re excited to share it with
- you.
- </p>
- </FadeIn>
- <FadeIn
- noVertical
- viewTriggerOffset
- className="relative h-2 md:h-12 lg:h-12"
- >
- <span
- className={cn(
- "w-full h-[1px] -bottom-8 md:-bottom-4 lg:-bottom-4 absolute",
- gradients.letterLine
- )}
- />
- </FadeIn>
- <FadeIn
- viewTriggerOffset
- noVertical
- className="flex items-end justify-center gap-3 md:self-start md:-ml-4 lg:self-start lg:-ml-4 min-w-[300px]"
- >
- <div className="w-24 h-24 min-w-[96px] min-h-[96px] rounded-full border dark:border-white/10 border-black/10 flex items-center justify-center ">
- <Image
- alt="Image of Tobias Koopers"
- src="/images/people/tobiaskoppers.jpg"
- width={64}
- height={64}
- className="rounded-full"
- />
- </div>
- <div className="flex flex-col gap-3 pb-2">
- <Image
- alt="Tobias Koppers hand written signature"
- src="/images/docs/TRPG/tobias-signature-light.svg"
- // 16 px added and offset to account for the glow
- width={173 + 16}
- height={91 + 16}
- className="block -mb-3 -ml-3 dark:hidden"
- />
- <Image
- alt="Tobias Koppers hand written signature"
- src="/images/docs/TRPG/tobias-signature-dark.svg"
- // 16 px added and offset to account for the glow
- width={173 + 16}
- height={91 + 16}
- className="hidden -mb-3 -ml-3 dark:block"
- />
- <div className="flex gap-2 flex-wrap text-sm leading-none text-[#888888] max-w-[156px] md:max-w-xl lg:max-w-xl">
- <p className="font-bold">Tobias Koppers</p>
- <p>Creator of Webpack</p>
- </div>
- </div>
- </FadeIn>
- </div>
- <FadeIn noVertical className="relative flex justify-center w-full mt-16">
- <div className="max-w-[180px] w-full">
- <CTAButton>
- <Link href="/TRPG/docs" className="block py-3 font-sans">
- Start Building
- </Link>
- </CTAButton>
- </div>
- <Gradient
- width={1200}
- height={300}
- className="bottom-[-200px] -z-10 opacity-20"
- conic
- />
- </FadeIn>
- </section>
- );
-}
diff --git a/docs/components/pages/pack-home/benchmark-data/README.md b/docs/components/pages/pack-home/benchmark-data/README.md
deleted file mode 100644
index 9b53481..0000000
--- a/docs/components/pages/pack-home/benchmark-data/README.md
+++ /dev/null
@@ -1,7 +0,0 @@
-# `turbopack` Benchmark Data
-
-- `bench_startup`: Time from cold start of the bundler to the browser successfully retrieving bundled scripts. This does not include react hydration time.
-- `bench_hydration`: Time from cold start of the bundler to the browser successfully retrieving bundled scripts. This does wait until react hydration has completed.
-- `bench_restart`: Before measuring: warms up any available persistent cache (we don’t have one yet) by performing the equivalent of the bench_hydration benchmark, shuts down the server. Then, times another bench_hydration.
-- `bench_hmr_to_eval`: Measures the time it takes from an incremental change to be made, bundled, sent over hmr, and evaluated by the browser.
-- `bench_hmr_to_commit`: Measures the time it takes from an incremental change to be made, bundled, sent over hmr, evaluated by the browser, and committed by React (runs a useEffect).
diff --git a/docs/components/pages/pack-home/benchmark-data/data.json b/docs/components/pages/pack-home/benchmark-data/data.json
deleted file mode 100644
index f88ae6f..0000000
--- a/docs/components/pages/pack-home/benchmark-data/data.json
+++ /dev/null
@@ -1,54 +0,0 @@
-{
- "cold": {
- "1000": {
- "next13": 1.38187759,
- "vite": 4.19890847,
- "next12": 3.64327949,
- "next11": 9.19035540
- },
- "5000": {
- "next13": 3.99792562,
- "vite": 16.59615430,
- "next12": 12.14057345,
- "next11": 32.89712268
- },
- "10000": {
- "next13": 7.34248178,
- "vite": 32.25177941,
- "next12": 23.27525035,
- "next11": 71.80680350
- },
- "30000": {
- "next13": 21.97034306,
- "vite": 97.74466099,
- "next12": 89.07274544,
- "next11": 237.61188540
- }
- },
- "file_change": {
- "1000": {
- "next13": 0.01890358,
- "vite": 0.10476515,
- "next12": 0.14617346,
- "next11": 0.21155549
- },
- "5000": {
- "next13": 0.02379283,
- "vite": 0.10963156,
- "next12": 0.49470051,
- "next11": 0.86600602
- },
- "10000": {
- "next13": 0.02302405,
- "vite": 0.11295908,
- "next12": 1.15193035,
- "next11": 2.35675312
- },
- "30000": {
- "next13": 0.02246753,
- "vite": 0.13328557,
- "next12": 6.40370549,
- "next11": 9.50431942
- }
- }
-}
diff --git a/docs/components/pages/pack-home/index.tsx b/docs/components/pages/pack-home/index.tsx
deleted file mode 100644
index d08443b..0000000
--- a/docs/components/pages/pack-home/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { PackBenchmarks } from "./PackBenchmarks";
-import { PackHero } from "./PackHero";
-import { PackLetter } from "./PackLetter";
-import { PackFeatures } from "./PackFeatures";
-import { GradientSectionBorder } from "../home-shared/GradientSectionBorder";
-import { LandingPageGlobalStyles } from "../home-shared/GlobalStyles";
-
-export default function HydroRollTRPGHome() {
- return (
- <>
- <LandingPageGlobalStyles />
- <main className="relative">
- <PackHero />
- <GradientSectionBorder>
- <PackBenchmarks />
- <PackFeatures />
- </GradientSectionBorder>
- <GradientSectionBorder>
- <PackLetter />
- </GradientSectionBorder>
- </main>
- </>
- );
-}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-01-21 17:54:40 +0000