diff --git a/docs/site/app/(no-sidebar)/graphics/dotted-lines.tsx b/docs/site/app/(no-sidebar)/graphics/dotted-lines.tsx new file mode 100644 index 0000000000000..6ef36bdcf836e --- /dev/null +++ b/docs/site/app/(no-sidebar)/graphics/dotted-lines.tsx @@ -0,0 +1,111 @@ +export const DottedLines = ({ className }: { className: string }) => { + return ( + + + + + + + + + + + + + + + + + ); +}; diff --git a/docs/site/app/(no-sidebar)/graphics/effortless.tsx b/docs/site/app/(no-sidebar)/graphics/effortless.tsx new file mode 100644 index 0000000000000..398add1dc1d38 --- /dev/null +++ b/docs/site/app/(no-sidebar)/graphics/effortless.tsx @@ -0,0 +1,803 @@ +"use client"; + +import { useTheme } from "next-themes"; +import { useEffect, useState } from "react"; + +export const EffortlessGraphic = () => { + const { resolvedTheme } = useTheme(); + + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + if (!mounted) return null; + + if (resolvedTheme === "dark") { + return ; + } + return ; +}; + +const EffortlessLight = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const EffortlessDark = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/docs/site/app/(no-sidebar)/graphics/providers.tsx b/docs/site/app/(no-sidebar)/graphics/providers.tsx new file mode 100644 index 0000000000000..1639d381861a2 --- /dev/null +++ b/docs/site/app/(no-sidebar)/graphics/providers.tsx @@ -0,0 +1,943 @@ +"use client"; +import { useTheme } from "next-themes"; +import { useEffect, useState } from "react"; + +export const CiProviders = () => { + const { resolvedTheme } = useTheme(); + + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + if (!mounted) return null; + + if (resolvedTheme === "dark") { + return ; + } + return ; +}; + +const ProvidersLight = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export const ProvidersDark = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/docs/site/app/(no-sidebar)/graphics/remote-caching.tsx b/docs/site/app/(no-sidebar)/graphics/remote-caching.tsx new file mode 100644 index 0000000000000..a933497c3226f --- /dev/null +++ b/docs/site/app/(no-sidebar)/graphics/remote-caching.tsx @@ -0,0 +1,440 @@ +"use client"; + +import { useTheme } from "next-themes"; +import { useEffect, useState } from "react"; + +export const RemoteCachingGraphic = () => { + const { resolvedTheme } = useTheme(); + + const [mounted, setMounted] = useState(false); + + useEffect(() => { + setMounted(true); + }, []); + + if (!mounted) return null; + + if (resolvedTheme === "dark") { + return ; + } + return ; +}; + +const RemoteCachingDark = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; +const RemoteCachingLight = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/docs/site/app/(no-sidebar)/page.tsx b/docs/site/app/(no-sidebar)/page.tsx index c605d7a604cc1..906deff053d3a 100644 --- a/docs/site/app/(no-sidebar)/page.tsx +++ b/docs/site/app/(no-sidebar)/page.tsx @@ -1,186 +1,214 @@ -"use client"; - -import React, { useState } from "react"; +import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock"; +import type { Metadata } from "next"; +import { createCssVariablesTheme } from "shiki"; import Link from "next/link"; -import { motion } from "framer-motion"; -import { cn } from "#components/cn.ts"; -import { FadeIn } from "#app/_components/home-shared/fade-in.tsx"; -import { PackLogo } from "#app/_components/logos/pack-logo.tsx"; -import { RepoLogo } from "#app/_components/logos/repo-logo.tsx"; -import { TurboheroBackground } from "#app/_components/turbohero-background.tsx"; -import { Turborepo } from "#app/_components/turborepo.tsx"; -import { Turbopack } from "#app/_components/turbopack.tsx"; -import { PRODUCT_SLOGANS } from "#lib/constants.ts"; -import { Clients } from "#app/_clients/clients.tsx"; -import styles from "./index.module.css"; +import { Button } from "#components/button.tsx"; +import { Grid } from "#components/grid/grid.tsx"; +import { GridCell } from "#components/grid/grid-cell.tsx"; +import { Snippet } from "#components/snippet.tsx"; +import { Testimonials } from "#components/testimonials.tsx"; +import { ArrowRight } from "#components/icons/arrow-right.tsx"; +import { RemoteCacheCounterClient } from "#components/remote-cache-counter/client.tsx"; +import { CiProviders } from "./graphics/providers"; +import { RemoteCachingGraphic } from "./graphics/remote-caching"; +import { EffortlessGraphic } from "./graphics/effortless"; +import { DottedLines } from "./graphics/dotted-lines"; -function Background(): JSX.Element { - return ( -
-
- - - - - -
- ); -} +// Copied from source.config.ts +const theme = createCssVariablesTheme({ + name: "css-variables", + variablePrefix: "--shiki-", + variableDefaults: {}, +}); + +const FEATURES = [ + { + title: "Works with any provider", + description: "Integrate with any CI provider for speed at all scales", + illustration: , + }, + { + title: "Remote Caching", + description: "Never do the same work twice", + illustration: , + }, + { + title: "Effortless monorepos", + description: "Easily define your workflows for local development and CI", + illustration: , + }, +]; -const variants = { - hidden: { opacity: 0 }, - active: { opacity: 1 }, +const simpleTurboJson = `{ + "tasks": { + "build": { + "dependsOn": ["^build"] + } + } +}`; + +const remoteCachingCommands = `# Login to Remote Cache +turbo login +# Link to Remote Cache +turbo link + +# Run tasks +turbo run build`; + +export const metadata: Metadata = { + alternates: { canonical: "https://turbo.build" }, }; -function Card({ - alt, - href, - title, - icon: Icon, - className, - children, -}: { - href: string; - icon: React.ElementType; - title: "repo" | "pack"; - alt?: string; - className?: string; - children: React.ReactNode; -}): JSX.Element { - const [hovering, setHovering] = useState(false); +export default function HomePage() { return ( - { - setHovering(true); - }} - onMouseLeave={() => { - setHovering(false); - }} - > -