346 lines
13 KiB
TypeScript
346 lines
13 KiB
TypeScript
import {
|
|
Footer,
|
|
Header,
|
|
NpxCreateNxWorkspace,
|
|
NxUsersShowcase,
|
|
} from '@nrwl/nx-dev/ui-common';
|
|
import {
|
|
AffectedCommand,
|
|
CloudSupport,
|
|
DependencyGraph,
|
|
EcosystemFeatures,
|
|
EggheadCourses,
|
|
ExperienceFeatures,
|
|
GettingStarted,
|
|
MonorepoFeatures,
|
|
NxPlaybook,
|
|
OpenPlatform,
|
|
OpenSourceProjects,
|
|
Performance,
|
|
Testimonials,
|
|
VscodePlugin,
|
|
YoutubeChannel,
|
|
} from '@nrwl/nx-dev/ui-home';
|
|
import { NextSeo } from 'next-seo';
|
|
import Link from 'next/link';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
export default function Index(): JSX.Element {
|
|
/**
|
|
* Detects whether we should use a background fallback or not.
|
|
* `false` by default
|
|
*/
|
|
function useHeroBackgroundFallback(): boolean {
|
|
const [useFallback, setUseFallback] = useState<boolean>(false);
|
|
|
|
useEffect(() => {
|
|
function handleResize(): void {
|
|
// Firefox has a hard time rendering SVG for high resolutions
|
|
if (navigator.userAgent.search(/firefox/gi) !== -1) {
|
|
if (window.innerWidth > 1460) {
|
|
return setUseFallback(true);
|
|
}
|
|
}
|
|
return setUseFallback(false);
|
|
}
|
|
handleResize();
|
|
window.addEventListener('resize', handleResize);
|
|
return (): void => window.removeEventListener('resize', handleResize);
|
|
}, []);
|
|
|
|
return useFallback;
|
|
}
|
|
const showBackgroundFallback = useHeroBackgroundFallback();
|
|
|
|
return (
|
|
<>
|
|
<NextSeo
|
|
title="Nx: Smart, Fast and Extensible Build System"
|
|
description="Next generation build system with first class monorepo support and powerful integrations."
|
|
openGraph={{
|
|
url: 'https://nx.dev',
|
|
title: 'Nx: Smart, Fast and Extensible Build System',
|
|
description:
|
|
'Nx is a smart, fast and extensible build system which comes with first class monorepo support and powerful integrations.',
|
|
images: [
|
|
{
|
|
url: 'https://nx.dev/images/nx-media.jpg',
|
|
width: 800,
|
|
height: 400,
|
|
alt: 'Nx: Smart, Fast and Extensible Build System',
|
|
type: 'image/jpeg',
|
|
},
|
|
],
|
|
site_name: 'Nx',
|
|
type: 'website',
|
|
}}
|
|
/>
|
|
<h1 className="sr-only">Next generation monorepo tool</h1>
|
|
<Header useDarkBackground={false} />
|
|
<main id="main" role="main">
|
|
<div className="w-full">
|
|
{/*INTRO COMPONENT*/}
|
|
<header
|
|
id="animated-background"
|
|
className="bg-blue-nx-base transform-gpu bg-clip-border bg-right bg-no-repeat bg-origin-border text-white lg:bg-cover"
|
|
style={{
|
|
backgroundImage: showBackgroundFallback
|
|
? 'url(/images/background/hero-bg.jpg)'
|
|
: 'url(/images/background/hero-bg-large.svg)',
|
|
}}
|
|
>
|
|
<div className="md:py-18 mx-auto max-w-screen-lg px-4 py-4 xl:max-w-screen-xl">
|
|
<div className="md:my-18 my-8 flex flex-col items-center justify-center 2xl:my-24">
|
|
<div className="flex w-full flex-col text-center">
|
|
<h1
|
|
className="mb-8 text-4xl font-extrabold leading-none tracking-tight sm:mt-10 sm:mt-14 sm:mb-10 sm:text-5xl lg:text-5xl"
|
|
data-cy="primary-heading"
|
|
>
|
|
<span className="block lg:inline">
|
|
Smart, Fast and Extensible
|
|
</span>{' '}
|
|
Build System
|
|
</h1>
|
|
<h2 className="mx-auto mb-10 max-w-2xl text-2xl font-semibold sm:mb-11">
|
|
Next generation build system with first class monorepo
|
|
support and powerful integrations.
|
|
</h2>
|
|
</div>
|
|
<div
|
|
aria-hidden="true"
|
|
className="mx-auto mt-8 hidden w-full max-w-2xl flex-col items-center justify-between pb-10 sm:flex lg:mt-0 lg:pb-0"
|
|
>
|
|
<NpxCreateNxWorkspace />
|
|
</div>
|
|
<div className="my-14 flex flex-wrap space-y-4 text-center sm:space-y-0 sm:space-x-4">
|
|
<Link href="#getting-started">
|
|
<a
|
|
title="Start using Nx by creating a workspace"
|
|
className="text-blue-nx-base hover:text-blue-nx-dark w-full flex-none rounded-md border border-transparent bg-white py-3 px-6 text-lg font-semibold leading-6 transition hover:bg-gray-100 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white sm:w-auto"
|
|
>
|
|
Create Nx Workspace
|
|
</a>
|
|
</Link>
|
|
|
|
<Link href="/recipe/lerna-and-nx">
|
|
<a
|
|
title="Integrate Nx and Lerna"
|
|
className="text-blue-nx-base hover:text-blue-nx-dark w-full flex-none rounded-md border border-transparent bg-white py-3 px-6 text-lg font-semibold leading-6 transition hover:bg-gray-100 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white sm:w-auto"
|
|
>
|
|
Nx & Lerna
|
|
</a>
|
|
</Link>
|
|
|
|
<Link href="/recipe/adding-to-monorepo">
|
|
<a
|
|
title="Add Nx to existing Monorepo"
|
|
className="text-blue-nx-base hover:text-blue-nx-dark mt-4 w-full flex-none rounded-md border border-transparent bg-white py-3 px-6 text-lg font-semibold leading-6 transition hover:bg-gray-100 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white sm:w-auto md:mt-0"
|
|
>
|
|
Add Nx to Monorepo
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="hidden border-b border-gray-100 bg-gray-50 md:block">
|
|
{/*COMPANIES*/}
|
|
<NxUsersShowcase />
|
|
</div>
|
|
|
|
{/*NX FEATURES*/}
|
|
<div
|
|
id="features"
|
|
className="relative overflow-hidden bg-gray-50 py-12"
|
|
>
|
|
{/*MONOREPO*/}
|
|
<MonorepoFeatures />
|
|
<div className="relative my-12" aria-hidden="true">
|
|
<div className="w-full border-t border-gray-100" />
|
|
</div>
|
|
|
|
{/*INTEGRATED*/}
|
|
<ExperienceFeatures />
|
|
<div className="relative my-12" aria-hidden="true">
|
|
<div className="w-full border-t border-gray-100" />
|
|
</div>
|
|
{/*ECOSYSTEM*/}
|
|
<EcosystemFeatures />
|
|
</div>
|
|
|
|
<div className="relative transform-gpu bg-gray-50">
|
|
<img
|
|
className="w-full"
|
|
src="/images/background/hero-bg-large-3.svg"
|
|
loading="lazy"
|
|
alt="separator"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
|
|
{/*NX FEATURE DETAILS*/}
|
|
<article
|
|
id="features-in-depth"
|
|
className="relative overflow-hidden bg-gray-50 pb-32"
|
|
>
|
|
<header className="mx-auto max-w-prose py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
|
|
<div className="text-center">
|
|
<h1 className="text-blue-nx-base text-base font-semibold uppercase tracking-wide">
|
|
Monorepo done right
|
|
</h1>
|
|
<p className="mt-1 text-4xl font-extrabold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
|
|
Works for Projects of Any Size
|
|
</p>
|
|
<p className="mx-auto mt-5 max-w-xl text-xl text-gray-500">
|
|
Whether you have one project or one thousand, Nx will keep
|
|
your CI fast and your workspace maintainable.
|
|
</p>
|
|
</div>
|
|
</header>
|
|
{/*NX AFFECTED*/}
|
|
<AffectedCommand />
|
|
{/*DEP-GRAPH*/}
|
|
<DependencyGraph />
|
|
{/*NX CONSOLE*/}
|
|
<VscodePlugin />
|
|
{/*NEXT GENERATION CLOUD SUPPORT*/}
|
|
<CloudSupport />
|
|
{/*PERFORMANCE*/}
|
|
<Performance />
|
|
{/*OPEN PLATFORM*/}
|
|
<OpenPlatform />
|
|
</article>
|
|
|
|
{/*TESTIMONIALS*/}
|
|
<article
|
|
id="testimonials"
|
|
className="relative bg-white pt-16 sm:pt-24 lg:pt-32"
|
|
>
|
|
<header className="sm:py-18 mx-auto max-w-prose px-4 py-16 text-center sm:max-w-3xl sm:px-6 lg:px-8">
|
|
<div>
|
|
<h1 className="text-blue-nx-base text-base font-semibold uppercase tracking-wider">
|
|
They talk about Nx
|
|
</h1>
|
|
<p className="mt-2 text-4xl font-extrabold tracking-tight text-gray-800 sm:text-6xl">
|
|
Devs & CEOs, Startups & big companies are loving Nx
|
|
</p>
|
|
<p className="mx-auto mt-5 max-w-prose text-xl text-gray-500">
|
|
Here is what they say about Nx, what they like about it, how
|
|
it transforms their developer life and what you are missing
|
|
out on!
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<Testimonials />
|
|
</article>
|
|
|
|
{/*GETTING STARTED*/}
|
|
<article
|
|
id="getting-started"
|
|
className="relative bg-white pt-16 sm:pt-24 lg:pt-32"
|
|
>
|
|
<header className="mx-auto max-w-prose px-4 text-center sm:max-w-3xl sm:px-6 lg:px-8">
|
|
<div>
|
|
<h1 className="text-blue-nx-base text-base font-semibold uppercase tracking-wider">
|
|
Getting Started <span className="sr-only">With Nx</span>
|
|
</h1>
|
|
<p className="mt-2 text-4xl font-extrabold tracking-tight text-gray-800 sm:text-6xl">
|
|
TypeScript, React, Angular, Node and more
|
|
</p>
|
|
<p className="mx-auto mt-5 max-w-prose text-xl text-gray-500">
|
|
Nx has first-class support for many frontend and backend
|
|
technologies, so its documentation comes in multiple flavours.
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<GettingStarted />
|
|
</article>
|
|
|
|
<div
|
|
id="learning-materials"
|
|
className="sm:py-18 mx-auto mt-28 max-w-prose py-16 px-4 sm:px-6 lg:px-8"
|
|
>
|
|
<div className="text-center">
|
|
<p className="mt-1 text-4xl font-extrabold text-gray-800 sm:text-5xl sm:tracking-tight lg:text-6xl">
|
|
Free Courses and Videos
|
|
</p>
|
|
<p className="mx-auto mt-5 max-w-xl text-xl text-gray-500">
|
|
For visual learners we have created high-quality courses walking
|
|
you through building real-world examples step by step.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/*TUTORIALS*/}
|
|
<div className="bg-white py-12">
|
|
<EggheadCourses />
|
|
</div>
|
|
<div className="bg-white py-12">
|
|
<YoutubeChannel />
|
|
</div>
|
|
<div className="bg-white py-12">
|
|
<NxPlaybook />
|
|
</div>
|
|
|
|
<div className="relative transform-gpu bg-white">
|
|
<img
|
|
className="w-full"
|
|
loading="lazy"
|
|
src="/images/background/hero-bg-large-2.svg"
|
|
alt="separator"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
|
|
{/*COMMUNITY*/}
|
|
<article id="community" className="bg-white">
|
|
<div className="sm:py-18 mx-auto max-w-prose py-16 px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center">
|
|
<h1 className="text-base font-semibold uppercase tracking-wide text-gray-600">
|
|
Community
|
|
</h1>
|
|
<p className="mt-1 text-4xl font-extrabold text-gray-800 sm:text-5xl sm:tracking-tight lg:text-6xl">
|
|
Used by Popular Open Source Projects
|
|
</p>
|
|
<p className="mx-auto mt-5 max-w-xl text-xl text-gray-500">
|
|
Nx works equally well for the teams building apps and for the
|
|
communities building open source libraries and tools.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/*OPEN SOURCE PROJECTS*/}
|
|
<OpenSourceProjects />
|
|
|
|
{/*/!*TESTIMONIALS*!/*/}
|
|
{/*<div*/}
|
|
{/* id="testimonials"*/}
|
|
{/* className="mt-28 max-w-prose mx-auto py-16 px-4 sm:py-18 sm:px-6 lg:px-8"*/}
|
|
{/*>*/}
|
|
{/* <div className="text-center">*/}
|
|
{/* <p className="mt-1 text-4xl font-extrabold text-gray-800 sm:text-5xl sm:tracking-tight lg:text-6xl">*/}
|
|
{/* What Devs Love About Nx*/}
|
|
{/* </p>*/}
|
|
{/* <p className="max-w-xl mt-5 mx-auto text-xl text-gray-500">*/}
|
|
{/* More than 600k developers all over the world build and ship*/}
|
|
{/* with Nx. This is what they love about it.*/}
|
|
{/* </p>*/}
|
|
{/* </div>*/}
|
|
{/*</div>*/}
|
|
{/*/!*TESTIMONIALS*!/*/}
|
|
{/*<Testimonials />*/}
|
|
{/*COMPANIES*/}
|
|
<div className="my-12">
|
|
<NxUsersShowcase />
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</main>
|
|
<Footer useDarkBackground={false} />
|
|
</>
|
|
);
|
|
}
|