feat(docs): repo landing page (vercel#122)

Co-authored-by: Thomas Knickman <[email protected]> Co-authored-by: jueungrace <[email protected]> Co-authored-by: Shu Ding <[email protected]>
Novailoveyou · Oct 21, 2022 · 6c87980 · 6c87980
1 parent beb209a
commit 6c87980
Show file tree

Hide file tree

Showing 58 changed files with 983 additions and 491 deletions.
diff --git a/docs/components/Feature.tsx b/docs/components/Feature.tsx
@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import Link from "next/link";
-import type { Feature } from "../content/features";
+import type { Feature } from "../content/legacy-features";
 
 type FeatureProps = {
   feature: Omit<Feature, "page">;

diff --git a/docs/components/Features.tsx b/docs/components/Features.tsx
@@ -1,11 +1,14 @@
 import React from "react";
-import { REPO_DOCS_FEATURES, REPO_HOME_FEATURES } from "../content/features";
+import {
+  LEGACY_REPO_DOCS_FEATURES,
+  LEGACY_REPO_HOME_FEATURES,
+} from "../content/legacy-features";
 import Feature from "./Feature";
 
 export function HomeFeatures() {
   return (
     <DetailedFeaturesGrid>
-      {REPO_HOME_FEATURES.map((feature) => (
+      {LEGACY_REPO_HOME_FEATURES.map((feature) => (
         <Feature
           key={feature.name.split(" ").join("-")}
           feature={feature}
@@ -19,7 +22,7 @@ export function HomeFeatures() {
 export function DocsFeatures({ detailed = true }: { detailed?: boolean }) {
   return (
     <div className="grid grid-cols-2 gap-6 my-12 sm:grid-cols-3 ">
-      {REPO_DOCS_FEATURES.map((feature) => (
+      {LEGACY_REPO_DOCS_FEATURES.map((feature) => (
         <Feature
           key={feature.name.split(" ").join("-")}
           feature={feature}

diff --git a/.../components/pages/pack-home/CTAButton.tsx → ...omponents/pages/home-shared/CTAButton.tsx b/.../components/pages/pack-home/CTAButton.tsx → ...omponents/pages/home-shared/CTAButton.tsx
@@ -1,24 +1,32 @@
 import cn from "classnames";
+import { MouseEventHandler } from "react";
 import gradients from "./gradients.module.css";
 
 export function CTAButton({
   children,
   outline,
+  onClick,
+  monospace,
 }: {
   outline?: boolean;
   children: React.ReactNode;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  monospace?: boolean;
 }) {
   const outlineClasses =
     "border dark:border-neutral-400  dark:text-neutral-200 dark:hover:border-white dark:hover:text-white border-[#EAEAEA] text-neutral-800 hover:border-black hover:text-black";
   const filledClasses =
     "dark:text-black text-white border-transparent bg-black dark:bg-white";
 
   return (
-    <div className="group relative w-full">
+    <div className="relative w-full group">
       <button
+        onClick={onClick}
         className={`flex items-center justify-center w-full min-w-[120px] py-3 text-base font-medium  no-underline ${
           outline ? outlineClasses : filledClasses
-        } rounded md:leading-6 transition-all duration-300`}
+        } rounded md:leading-6 transition-all duration-300 ${
+          monospace ? "font-mono" : ""
+        }`}
       >
         {children}
       </button>

diff --git a/docs/components/pages/pack-home/FadeIn.tsx → docs/components/pages/home-shared/FadeIn.tsx b/docs/components/pages/pack-home/FadeIn.tsx → docs/components/pages/home-shared/FadeIn.tsx
diff --git a/...omponents/pages/pack-home/PackFeature.tsx → ...mponents/pages/home-shared/FeatureBox.tsx b/...omponents/pages/pack-home/PackFeature.tsx → ...mponents/pages/home-shared/FeatureBox.tsx
@@ -1,36 +1,37 @@
 import Image from "next/future/image";
+import type { ReactNode } from "react";
 
-export function PackFeature({
+export function FeatureBox({
   name,
   description,
   iconDark,
   iconLight,
 }: {
-  iconDark: string;
-  iconLight: string;
+  iconDark: Parameters<typeof Image>[0]["src"];
+  iconLight: Parameters<typeof Image>[0]["src"];
   name: string;
-  description: string;
+  description: ReactNode;
 }) {
   return (
-    <div className="flex flex-col p-8 gap-5 no-underline text-black dark:text-white  relative overflow-hidden rounded-xl box-border border dark:border-neutral-800">
+    <div className="box-border relative flex flex-col gap-5 p-8 overflow-hidden text-black no-underline border dark:text-white rounded-xl dark:border-neutral-800">
       <Image
         src={iconDark}
         width={64}
         height={64}
         aria-hidden="true"
         alt=""
-        className="dark:block hidden"
+        className="hidden dark:block"
       />
       <Image
         src={iconLight}
         width={64}
         height={64}
         aria-hidden="true"
         alt=""
-        className="dark:hidden block"
+        className="block dark:hidden"
       />
       <div className="flex flex-col gap-2">
-        <h4 className="m-0 font-bold font-space-grotesk leading-5 text-gray-900 dark:text-white">
+        <h4 className="m-0 font-bold leading-5 text-gray-900 font-space-grotesk dark:text-white">
           {name}
         </h4>
 

diff --git a/docs/components/pages/home-shared/FeaturesBento.tsx b/docs/components/pages/home-shared/FeaturesBento.tsx
@@ -0,0 +1,32 @@
+import type { Features } from "../../../content/features";
+import { FadeIn } from "./FadeIn";
+import { SectionHeader, SectionSubtext } from "./Headings";
+import { FeatureBox } from "./FeatureBox";
+
+export function FeaturesBento({ header, body, features }: { header: string, body: string, features: Features }) {
+  return (
+    <section className="relative flex flex-col items-center px-6 pb-16 font-sans md:pb-24 lg:pb-32 gap-9 lg:gap-14">
+      <FadeIn className="flex flex-col items-center gap-5 md:gap-6">
+        <SectionHeader>{header}</SectionHeader>
+        <SectionSubtext>
+          {body}
+        </SectionSubtext>
+      </FadeIn>
+      <div className="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-x-6 lg:gap-y-6 max-w-[1200px]">
+        {features.map((feature) => (
+          <FadeIn
+            className="flex"
+            key={feature.name.replace(/\s+/g, "-").toLowerCase()}
+          >
+            <FeatureBox
+              name={feature.name}
+              description={feature.description}
+              iconDark={feature.iconDark}
+              iconLight={feature.iconLight}
+            />
+          </FadeIn>
+        ))}
+      </div>
+    </section>
+  );
+}
diff --git a/docs/components/pages/pack-home/Gradient.tsx → ...components/pages/home-shared/Gradient.tsx b/docs/components/pages/pack-home/Gradient.tsx → ...components/pages/home-shared/Gradient.tsx
diff --git a/...pages/pack-home/GradientSectionBorder.tsx → ...ges/home-shared/GradientSectionBorder.tsx b/...pages/pack-home/GradientSectionBorder.tsx → ...ges/home-shared/GradientSectionBorder.tsx
@@ -1,6 +1,6 @@
 import cn from "classnames";
 import { FadeIn } from "./FadeIn";
-import gradients from "./gradients.module.css";
+import gradients from "../home-shared/gradients.module.css";
 
 export function GradientSectionBorder({
   children,

diff --git a/docs/components/pages/pack-home/Headings.tsx → ...components/pages/home-shared/Headings.tsx b/docs/components/pages/pack-home/Headings.tsx → ...components/pages/home-shared/Headings.tsx
@@ -3,20 +3,23 @@ import gradients from "./gradients.module.css";
 
 export function HeroText({
   children,
+  className,
   h1,
 }: {
   children: React.ReactNode;
+  className?: string;
   h1?: boolean;
 }) {
-  const className = cn(
+  const combinedClassname = cn(
     gradients.heroHeading,
-    "font-extrabold tracking-[-0.04em] leading-none text-[40px] md:text-5xl lg:text-[80px] max-w-lg md:max-w-xl lg:max-w-4xl text-center text-transparent"
+    "font-extrabold tracking-[-0.04em] leading-none text-[40px] md:text-5xl lg:text-[80px] max-w-lg md:max-w-xl lg:max-w-4xl text-center text-transparent",
+    className
   );
 
   if (h1) {
-    return <h1 className={className}>{children}</h1>;
+    return <h1 className={combinedClassname}>{children}</h1>;
   }
-  return <h2 className={className}>{children}</h2>;
+  return <h2 className={combinedClassname}>{children}</h2>;
 }
 
 export function SectionHeader({ children }: { children: React.ReactNode }) {

diff --git a/...ents/pages/pack-home/gradients.module.css → ...ts/pages/home-shared/gradients.module.css b/...ents/pages/pack-home/gradients.module.css → ...ts/pages/home-shared/gradients.module.css
diff --git a/docs/components/pages/pack-home/PackBenchmarkTabs.tsx b/docs/components/pages/pack-home/PackBenchmarkTabs.tsx
@@ -2,7 +2,7 @@ import { useRef, useState } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 import { BenchmarkCategory } from "./PackBenchmarks";
 import classNames from "classnames";
-import gradients from "./gradients.module.css";
+import gradients from "../home-shared/gradients.module.css";
 
 const TABS: {
   id: BenchmarkCategory;

diff --git a/docs/components/pages/pack-home/PackBenchmarks.tsx b/docs/components/pages/pack-home/PackBenchmarks.tsx
@@ -1,9 +1,9 @@
 import { useState } from "react";
 import { PackBenchmarkTabs } from "./PackBenchmarkTabs";
-import { SectionHeader, SectionSubtext } from "./Headings";
+import { SectionHeader, SectionSubtext } from "../home-shared/Headings";
 import { BenchmarksGraph } from "./PackBenchmarksGraph";
 import { PackDropdown } from "./PackDropdown";
-import { FadeIn } from "./FadeIn";
+import { FadeIn } from "../home-shared/FadeIn";
 
 export type BenchmarkNumberOfModules = "1000" | "5000" | "10000" | "30000";
 export type BenchmarkCategory =

diff --git a/docs/components/pages/pack-home/PackBenchmarksGraph.tsx b/docs/components/pages/pack-home/PackBenchmarksGraph.tsx
@@ -9,8 +9,8 @@ import {
 import Image from "next/future/image";
 import { useEffect, useRef, useState } from "react";
 import benchmarkData from "./benchmark-data.json";
-import { Gradient } from "./Gradient";
-import gradients from "./gradients.module.css";
+import { Gradient } from "../home-shared/Gradient";
+import gradients from "../home-shared/gradients.module.css";
 import { BenchmarkCategory, BenchmarkNumberOfModules } from "./PackBenchmarks";
 
 export function BenchmarksGraph({

diff --git a/docs/components/pages/pack-home/PackFeatures.tsx b/docs/components/pages/pack-home/PackFeatures.tsx
@@ -1,34 +1,8 @@
 import { PACK_HOME_FEATURES } from "../../../content/features";
-import { FadeIn } from "./FadeIn";
-import { SectionHeader, SectionSubtext } from "./Headings";
-import { PackFeature } from "./PackFeature";
+import { FeaturesBento } from "../home-shared/FeaturesBento";
 
 export function PackFeatures() {
   return (
-    <section className="font-sans relative px-6 pb-16 md:pb-24 lg:pb-32 gap-9 lg:gap-14 items-center flex flex-col">
-      <FadeIn className="flex flex-col gap-5 md:gap-6 items-center">
-        <SectionHeader>Why Turbopack?</SectionHeader>
-        <SectionSubtext>
-          With incremental behavior and adaptable bundling strategies, Turbopack
-          provides a fast and flexible development experience for apps of any
-          size.
-        </SectionSubtext>
-      </FadeIn>
-      <div className="grid grid-cols-1 gap-x-4 gap-y-4 sm:grid-cols-2 lg:grid-cols-3 lg:gap-x-6 lg:gap-y-6 max-w-[1200px]">
-        {PACK_HOME_FEATURES.map((feature) => (
-          <FadeIn
-            className="flex"
-            key={feature.name.replace(/\s+/g, "-").toLowerCase()}
-          >
-            <PackFeature
-              name={feature.name}
-              description={feature.description}
-              iconDark={feature.IconDark}
-              iconLight={feature.IconLight}
-            />
-          </FadeIn>
-        ))}
-      </div>
-    </section>
+    <FeaturesBento header="Why Turbopack?" 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
@@ -3,18 +3,18 @@ import Image from "next/future/image";
 import Link from "next/link";
 // import { Marquee } from "../../clients/Marquee";
 // import { Clients } from "../../clients/Clients";
-import gradients from "./gradients.module.css";
-import { HeroText, SectionSubtext } from "./Headings";
-import { Gradient } from "./Gradient";
-import { FadeIn } from "./FadeIn";
-import { CTAButton } from "./CTAButton";
+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";
 
 export function PackHero() {
   return (
     <>
-      <div className="absolute top-0 dark:from-black from-white to-transparent w-full h-48 z-10 bg-gradient-to-b" />
+      <div className="absolute top-0 z-10 w-full h-48 dark:from-black from-white to-transparent bg-gradient-to-b" />
       <FadeIn 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">
-        <div className="flex justify-center items-center w-full ">
+        <div className="flex items-center justify-center w-full ">
           <div className="absolute z-50 min-w-[614px] min-h-[614px]">
             <Image
               alt="Turbopack"
@@ -31,7 +31,7 @@ export function PackHero() {
               className="block dark:hidden"
             />
           </div>
-          <div className="absolute w-64 h-64 flex items-center justify-center z-50">
+          <div className="absolute z-50 flex items-center justify-center w-64 h-64">
             <Gradient
               small
               width={120}
@@ -66,7 +66,7 @@ export function PackHero() {
         </div>
         <FadeIn
           delay={0.2}
-          className="flex justify-center flex-col items-center gap-5 lg:gap-6 text-center px-6 z-50"
+          className="z-50 flex flex-col items-center justify-center gap-5 px-6 text-center lg:gap-6"
         >
           <span
             className={cn(
@@ -84,27 +84,27 @@ export function PackHero() {
         </FadeIn>
         <FadeIn
           delay={0.6}
-          className="flex items-center gap-5 max-w-md w-full flex-col px-6 z-50"
+          className="z-50 flex flex-col items-center w-full max-w-md gap-5 px-6"
         >
-          <div className="flex gap-3 w-full ">
+          <div className="flex flex-col w-full gap-3 md:!flex-row">
             <CTAButton>
               <Link href="/pack/docs">
                 <a className="">Get Started</a>
               </Link>
             </CTAButton>
             <CTAButton outline>
-              <Link href="/pack/docs">
+              <Link href="https://github.com/vercel/turbo">
                 <a className="">GitHub</a>
               </Link>
             </CTAButton>
           </div>
           <p className="text-sm text-[#666666]">License: MPL-2.0</p>
         </FadeIn>
         <FadeIn delay={0.8} className="relative w-full">
-          <div className="absolute bottom-0 dark:from-black from-white to-transparent w-full h-72 bg-gradient-to-t" />
+          <div className="absolute bottom-0 w-full dark:from-black from-white to-transparent h-72 bg-gradient-to-t" />
         </FadeIn>
         {/* Comment this out at the request of Jared */}
-        {/* <FadeIn delay={1.6} className="flex w-full justify-center items-center">
+        {/* <FadeIn delay={1.6} className="flex items-center justify-center w-full">
           <p
             className={cn(
               "text-xs font-semibold tracking-[0.2em] text-center uppercase mt-8 lg:mt-16 max-w-[300px] lg:max-w-xl px-6",

diff --git a/docs/components/pages/pack-home/PackLetter.tsx b/docs/components/pages/pack-home/PackLetter.tsx
@@ -1,23 +1,23 @@
-import { HeroText } from "./Headings";
+import { HeroText } from "../home-shared/Headings";
 import Image from "next/future/image";
 import cn from "classnames";
-import gradients from "./gradients.module.css";
-import { FadeIn } from "./FadeIn";
-import { CTAButton } from "./CTAButton";
+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 "./Gradient";
+import { Gradient } from "../home-shared/Gradient";
 
 export function PackLetter() {
   return (
-    <section className="font-sans relative px-6 py-16 md:py-24 lg:py-32 items-center flex flex-col gap-14">
+    <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 md:text-lg lg:text-lg leading-6">
+      <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
@@ -69,22 +69,22 @@ export function PackLetter() {
               className="rounded-full"
             />
           </div>
-          <div className="flex flex-col pb-2 gap-3">
+          <div className="flex flex-col gap-3 pb-2">
             <Image
               alt="Tobias Koppers hand written signature"
               src="/images/docs/pack/tobias-signature-light.svg"
               // 16 px added and offset to account for the glow
               width={173 + 16}
               height={91 + 16}
-              className="-ml-3 -mb-3 block dark:hidden"
+              className="block -mb-3 -ml-3 dark:hidden"
             />
             <Image
               alt="Tobias Koppers hand written signature"
               src="/images/docs/pack/tobias-signature-dark.svg"
               // 16 px added and offset to account for the glow
               width={173 + 16}
               height={91 + 16}
-              className="-ml-3 -mb-3 hidden dark:block"
+              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>
@@ -93,7 +93,7 @@ export function PackLetter() {
           </div>
         </FadeIn>
       </div>
-      <FadeIn noVertical className="w-full flex justify-center  mt-16 relative">
+      <FadeIn noVertical className="relative flex justify-center w-full mt-16">
         <div className="max-w-[180px] w-full">
           <CTAButton>
             <Link href="/pack/docs">