docs(core): flavour & home screen updates (#5879)
* docs(core): flavour screens update * feat(core): new layout split * docs(core): links by current flavour and version
This commit is contained in:
Benjamin Cabanes
GitHub
parent
b08efe991c
commit
f7a0f8beab
@ -1,12 +1,12 @@
|
||||
import React from 'react';
|
||||
import Content from './content';
|
||||
import cx from 'classnames';
|
||||
import Head from 'next/head';
|
||||
import { Menu } from '@nrwl/nx-dev/data-access-documents';
|
||||
import {
|
||||
DocumentData,
|
||||
Menu,
|
||||
VersionMetadata,
|
||||
} from '@nrwl/nx-dev/data-access-documents';
|
||||
|
||||
import Content from './content';
|
||||
import Sidebar from './sidebar';
|
||||
|
||||
export interface DocumentationFeatureDocViewerProps {
|
||||
@ -17,6 +17,7 @@ export interface DocumentationFeatureDocViewerProps {
|
||||
menu: Menu;
|
||||
document: DocumentData;
|
||||
toc: any;
|
||||
navIsOpen: boolean;
|
||||
}
|
||||
|
||||
export function DocViewer({
|
||||
@ -26,6 +27,7 @@ export function DocViewer({
|
||||
menu,
|
||||
flavor,
|
||||
flavorList,
|
||||
navIsOpen,
|
||||
}: DocumentationFeatureDocViewerProps) {
|
||||
return (
|
||||
<>
|
||||
@ -42,10 +44,14 @@ export function DocViewer({
|
||||
flavor={flavor}
|
||||
flavorList={flavorList}
|
||||
versionList={versionList}
|
||||
navIsOpen={navIsOpen}
|
||||
/>
|
||||
<div
|
||||
id="content-wrapper"
|
||||
className="min-w-0 w-full flex-auto lg:static lg:max-h-full lg:overflow-visible"
|
||||
className={cx(
|
||||
'min-w-0 w-full flex-auto lg:static lg:max-h-full lg:overflow-visible pt-16 md:pl-4',
|
||||
navIsOpen && 'overflow-hidden max-h-screen fixed'
|
||||
)}
|
||||
>
|
||||
<Content
|
||||
document={document}
|
||||
|
||||
@ -16,6 +16,7 @@ export interface SidebarProps {
|
||||
versionList: VersionMetadata[];
|
||||
flavorList: any[];
|
||||
flavor: any;
|
||||
navIsOpen: boolean;
|
||||
}
|
||||
|
||||
export function Sidebar({
|
||||
@ -24,6 +25,7 @@ export function Sidebar({
|
||||
version,
|
||||
versionList,
|
||||
menu,
|
||||
navIsOpen,
|
||||
}: SidebarProps) {
|
||||
const router = useRouter();
|
||||
const getStartedPath = (version: string, flavor: string): string =>
|
||||
@ -34,11 +36,15 @@ export function Sidebar({
|
||||
return (
|
||||
<div
|
||||
data-testid="sidebar"
|
||||
className="fixed z-40 inset-0 flex-none h-full bg-black bg-opacity-25 w-full lg:bg-white lg:static lg:h-auto lg:overflow-y-visible lg:pt-o lg:w-64 lg:block hidden border-r border-gray-200"
|
||||
className={cx(
|
||||
'fixed z-40 inset-0 flex-none h-full bg-black bg-opacity-25 w-full lg:bg-white lg:static lg:h-auto lg:overflow-y-visible lg:pt-o lg:w-64 lg:block border-r border-gray-50',
|
||||
!navIsOpen && 'hidden',
|
||||
navIsOpen && 'block'
|
||||
)}
|
||||
>
|
||||
<div
|
||||
data-testid="navigation-wrapper"
|
||||
className="h-full overflow-y-auto scrolling-touch lg:h-auto lg:block lg:relative lg:sticky lg:bg-transparent overflow-hidden lg:top-18 bg-white mr-24 lg:mr-0 pr-2 sm:pr-4 xl:pr-6"
|
||||
className="h-full overflow-y-auto scrolling-touch lg:h-auto lg:block lg:relative lg:sticky lg:bg-transparent overflow-auto lg:top-18 bg-white mr-24 lg:mr-0 px-2 sm:pr-4 xl:pr-6"
|
||||
>
|
||||
<div className="hidden lg:block h-12 pointer-events-none absolute inset-x-0 z-10 bg-gradient-to-b from-white" />
|
||||
<div className="px-1 pt-6 sm:px-3 xl:px-5 lg:pt-10">
|
||||
@ -62,10 +68,10 @@ export function Sidebar({
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="px-1 py-6 sm:px-3 xl:px-5 h-1 w-full border-b b-gray-200" />
|
||||
<div className="px-1 py-6 sm:px-3 xl:px-5 h-1 w-full border-b border-gray-50" />
|
||||
<nav
|
||||
data-testid="navigation"
|
||||
className="px-1 pt-1 overflow-y-auto font-medium text-base sm:px-3 xl:px-5 lg:text-sm pb-10 lg:pb-14 sticky?lg:h-(screen-18)"
|
||||
className="px-1 pt-1 font-medium text-base sm:px-3 xl:px-5 lg:text-sm pb-10 lg:pb-14 sticky?lg:h-(screen-18)"
|
||||
>
|
||||
{menu.sections.map((section) => (
|
||||
<SidebarSection key={section.id} section={section} />
|
||||
@ -82,7 +88,7 @@ function SidebarSection({ section }: { section: MenuSection }) {
|
||||
{section.hideSectionHeader ? null : (
|
||||
<h4
|
||||
data-testid={`section-h4:${section.id}`}
|
||||
className="mt-6 mb-4 pb-2 text-m border-b border-gray-50 border-solid"
|
||||
className="mt-6 mb-4 text-m border-b border-gray-50 border-solid"
|
||||
>
|
||||
{section.name}
|
||||
</h4>
|
||||
@ -132,13 +138,19 @@ function SidebarSectionItems({ item }: { item: MenuItem }) {
|
||||
<Link href={item.path}>
|
||||
<a
|
||||
className={cx(
|
||||
'p-2 transition-colors duration-200 relative block hover:text-gray-900'
|
||||
'py-1 transition-colors duration-200 relative block text-gray-500 hover:text-gray-900'
|
||||
)}
|
||||
>
|
||||
{isActiveLink ? (
|
||||
<span className="rounded-md absolute h-full w-2 right-2 top-0 bg-blue-nx-base" />
|
||||
<span className="rounded-md absolute h-full w-1 -right-4 top-0 bg-green-nx-base" />
|
||||
) : null}
|
||||
<span className="relative">{item.name}</span>
|
||||
<span
|
||||
className={cx('relative', {
|
||||
'text-gray-900': isActiveLink,
|
||||
})}
|
||||
>
|
||||
{item.name}
|
||||
</span>
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
@ -16,9 +16,13 @@ function Hit({ hit, children }) {
|
||||
);
|
||||
}
|
||||
|
||||
export function AlgoliaSearch() {
|
||||
const frameworkFilter = `framework:react`; // TODO: @ben Tap into current framework selection
|
||||
const versionFilter = `version:latest`; // TODO: @ben Tap into current version selection
|
||||
export interface AlgoliaSearchProps {
|
||||
flavorId: string;
|
||||
versionId: string;
|
||||
}
|
||||
export function AlgoliaSearch({ flavorId, versionId }: AlgoliaSearchProps) {
|
||||
const frameworkFilter = `framework:${flavorId}`;
|
||||
const versionFilter = `version:${versionId}`;
|
||||
|
||||
const router = useRouter();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
@ -1,3 +1,8 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import cx from 'classnames';
|
||||
import Link from 'next/link';
|
||||
import Head from 'next/head';
|
||||
import { Dialog } from '@headlessui/react';
|
||||
import type {
|
||||
DocumentData,
|
||||
@ -6,13 +11,9 @@ import type {
|
||||
} from '@nrwl/nx-dev/data-access-documents';
|
||||
import { flavorList } from '@nrwl/nx-dev/data-access-documents';
|
||||
import { DocViewer } from '@nrwl/nx-dev/feature-doc-viewer';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
import { Footer, Header } from '@nrwl/nx-dev/ui/common';
|
||||
import { documentsApi, menuApi } from '../lib/api';
|
||||
import { useStorage } from '../lib/use-storage';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Head from 'next/head';
|
||||
|
||||
const versionList = documentsApi.getVersions();
|
||||
const defaultVersion = versionList.find((v) => v.default);
|
||||
@ -44,13 +45,20 @@ export function DocumentationPage({
|
||||
const { value: storedFlavor, setValue: setStoredFlavor } = useStorage(
|
||||
'flavor'
|
||||
);
|
||||
const { setValue: setStoredVersion } = useStorage('version');
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [navIsOpen, setNavIsOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isFallback) {
|
||||
setStoredFlavor(flavor.value);
|
||||
}
|
||||
}, [flavor, isFallback, setStoredFlavor]);
|
||||
useEffect(() => {
|
||||
if (!isFallback) {
|
||||
setStoredVersion(version.id);
|
||||
}
|
||||
}, [version, isFallback, setStoredVersion]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isFallback || !storedFlavor) return;
|
||||
@ -80,6 +88,12 @@ export function DocumentationPage({
|
||||
/>
|
||||
</Head>
|
||||
)}
|
||||
<Header
|
||||
showSearch={true}
|
||||
version={{ name: version.name, value: version.id }}
|
||||
flavor={{ name: flavor.label, value: flavor.value }}
|
||||
/>
|
||||
<main>
|
||||
<DocViewer
|
||||
version={version}
|
||||
versionList={versions}
|
||||
@ -88,7 +102,66 @@ export function DocumentationPage({
|
||||
document={document}
|
||||
menu={menu}
|
||||
toc={null}
|
||||
navIsOpen={navIsOpen}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="fixed z-50 bottom-4 right-4 w-16 h-16 rounded-full bg-blue-nx-base text-white block lg:hidden"
|
||||
onClick={() => setNavIsOpen(!navIsOpen)}
|
||||
>
|
||||
<span className="sr-only">Open site navigation</span>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
className={cx(
|
||||
'absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform',
|
||||
{
|
||||
'opacity-0 scale-80': navIsOpen,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<path
|
||||
d="M4 8h16M4 16h16"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
className={cx(
|
||||
'absolute top-1/2 left-1/2 -mt-3 -ml-3 transition duration-300 transform',
|
||||
{
|
||||
'opacity-0 scale-80': !navIsOpen,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<path
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</main>
|
||||
{!navIsOpen ? (
|
||||
<Footer
|
||||
flavor={{
|
||||
name: flavor.label,
|
||||
value: flavor.value,
|
||||
}}
|
||||
version={{
|
||||
name: version.name,
|
||||
value: version.id,
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
<Dialog
|
||||
as="div"
|
||||
className="fixed z-50 inset-0 overflow-y-auto"
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import React from 'react';
|
||||
import { AppProps } from 'next/app';
|
||||
import Head from 'next/head';
|
||||
import { Header, Footer } from '@nrwl/nx-dev/ui/common';
|
||||
import '../styles/main.css';
|
||||
|
||||
export default function CustomApp({ Component, pageProps }: AppProps) {
|
||||
@ -37,12 +36,8 @@ export default function CustomApp({ Component, pageProps }: AppProps) {
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</Head>
|
||||
<div className="documentation-app text-gray-700 antialiased bg-white">
|
||||
<Header showSearch={!!pageProps.document} />
|
||||
<main>
|
||||
<Component {...pageProps} />
|
||||
</main>
|
||||
</div>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,9 +1,31 @@
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { InlineCommand, NxUsersShowcase } from '@nrwl/nx-dev/ui/common';
|
||||
import {
|
||||
Footer,
|
||||
Header,
|
||||
InlineCommand,
|
||||
NxUsersShowcase,
|
||||
} from '@nrwl/nx-dev/ui/common';
|
||||
import React from 'react';
|
||||
import { useStorage } from '../lib/use-storage';
|
||||
|
||||
export function AngularPage() {
|
||||
const { value: storedFlavor } = useStorage('flavor');
|
||||
const { value: storedVersion } = useStorage('version');
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
showSearch={false}
|
||||
flavor={{
|
||||
name: storedFlavor || 'react',
|
||||
value: storedFlavor || 'react',
|
||||
}}
|
||||
version={{
|
||||
name: storedVersion || 'Latest',
|
||||
value: storedVersion || 'latest',
|
||||
}}
|
||||
/>
|
||||
<main>
|
||||
<div className="w-full overflow-hidden">
|
||||
{/*Intro component*/}
|
||||
<div className="bg-blue-nx-dark text-white">
|
||||
@ -19,22 +41,42 @@ export function AngularPage() {
|
||||
<h2 className="text-3xl sm:text-3xl lg:text-5xl leading-none font-extrabold tracking-tight mb-4">
|
||||
Nx and Modern Angular
|
||||
</h2>
|
||||
<p className="sm:text-lg mb-16">
|
||||
Nx is a smart and extensible build framework that helps you
|
||||
develop, test, build, and scale Angular applications with
|
||||
fully integrated support for modern tools like Jest, Cypress,
|
||||
Storybook, ESLint, NgRx, and more.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-8 mb-32 flex sm:flex-row flex-col justify-center">
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<p className="sm:text-lg mb-6">
|
||||
<b>Nx</b> provides a holistic dev experience powered by an
|
||||
advanced CLI and editor plugins.
|
||||
<b>Nx</b> takes the core of the Angular framework and the
|
||||
CLI and provides a more modern development experience on top
|
||||
of them. <b>Nx</b>
|
||||
provides better linting, better testing, a faster CLI,
|
||||
support for popular community libraries and tools.
|
||||
</p>
|
||||
<p className="sm:text-lg mb-6">***CHANGE ME***</p>
|
||||
<p className="sm:text-lg mb-6">
|
||||
<b>Nx</b> uses distributed graph-based task execution and
|
||||
computation caching. Keep your CI and local dev experience fast
|
||||
as your repository grows.
|
||||
computation caching. Keep your CI and local dev experience
|
||||
fast as your repository grows.
|
||||
</p>
|
||||
<p className="sm:text-lg mb-6">
|
||||
<b>Nx</b> can be added to any Angular project{' '}
|
||||
<a href="#create-nx-workspace">in minutes</a>.
|
||||
You can{' '}
|
||||
<a
|
||||
href="#create-an-angular-workspace-with-nx"
|
||||
className="underline pointer"
|
||||
>
|
||||
get started by creating a modern Angular workspace with Nx
|
||||
</a>
|
||||
, or{' '}
|
||||
<Link href="/latest/angular/migration/overview">
|
||||
<a className="underline pointer">
|
||||
add it to an existing Angular workspace
|
||||
</a>
|
||||
</Link>{' '}
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
@ -55,14 +97,19 @@ export function AngularPage() {
|
||||
{/*How to use Nx*/}
|
||||
<div className="mt-32 flex sm:flex-row flex-col justify-center">
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<h3 className="text-2xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
|
||||
Create an Angular Workspace with Nx
|
||||
<h3
|
||||
id="create-an-angular-workspace-with-nx"
|
||||
className="text-2xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4"
|
||||
>
|
||||
Create an Angular Workspace <br className="hidden lg:block" />{' '}
|
||||
with Nx
|
||||
</h3>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<p className="sm:text-lg mb-6">
|
||||
Get started right away by creating a new Angular workspace by
|
||||
running the following command in your Terminal or Command prompt:
|
||||
running the following command in your Terminal or Command
|
||||
prompt:
|
||||
</p>
|
||||
|
||||
<div className="w-full">
|
||||
@ -94,8 +141,8 @@ export function AngularPage() {
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<p className="sm:text-lg mb-6">
|
||||
Once you’ve created your Angular workspace, follow the steps in
|
||||
this tutorial to learn how to add testing, share code, view
|
||||
Once you’ve created your Angular workspace, follow the steps
|
||||
in this tutorial to learn how to add testing, share code, view
|
||||
dependency graphs, and much, much more.
|
||||
</p>
|
||||
<div className="inline-flex">
|
||||
@ -122,8 +169,8 @@ export function AngularPage() {
|
||||
</Link>
|
||||
</div>
|
||||
<p className="italic sm:text-lg my-6">
|
||||
If you want to add Nx to an existing Angular project, check out
|
||||
these guides for{' '}
|
||||
If you want to add Nx to an existing Angular project, check
|
||||
out these guides for{' '}
|
||||
<Link href="/latest/angular/migration/overview">
|
||||
<a className="underline pointer">
|
||||
"Create React App" migration
|
||||
@ -133,28 +180,33 @@ export function AngularPage() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*Nx technology*/}
|
||||
<div className="bg-blue-nx-base text-white">
|
||||
<div className="max-w-screen-lg mx-auto px-5 py-5">
|
||||
<div className="py-32 flex sm:flex-row flex-col items-center justify-center">
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
|
||||
Distributed Graph-Based Task Executions and Computation Caching
|
||||
<h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
|
||||
Distributed Graph-Based Task Executions and Computation
|
||||
Caching
|
||||
</h3>
|
||||
<p className="sm:text-lg mb-6">
|
||||
<span className="font-bold">Nx</span> is smart. It analyzes your
|
||||
workspace and figures out what can be affected by every code
|
||||
change. That's why Nx doesn't rebuild and retest everything on
|
||||
every commit —{' '}
|
||||
<span className="font-bold">Nx</span> is smart. It analyzes
|
||||
your workspace and figures out what can be affected by every
|
||||
code change. That's why Nx doesn't rebuild and retest
|
||||
everything on every commit —{' '}
|
||||
<span className="font-bold">
|
||||
it only rebuilds what is necessary
|
||||
</span>
|
||||
.
|
||||
</p>
|
||||
<p className="sm:text-lg mb-6">
|
||||
<span className="font-bold">Nx</span> partitions commands into a
|
||||
graph of smaller tasks. Nx then runs those tasks in parallel, and
|
||||
<span className="font-bold">Nx</span> partitions commands
|
||||
into a graph of smaller tasks. Nx then runs those tasks in
|
||||
parallel, and
|
||||
<span className="font-bold">
|
||||
it can even distribute them across many machines without any
|
||||
configuration
|
||||
it can even distribute them across many machines without
|
||||
any configuration
|
||||
</span>
|
||||
.
|
||||
</p>
|
||||
@ -162,44 +214,26 @@ export function AngularPage() {
|
||||
<span className="font-bold">
|
||||
Nx also uses a distributed computation cache.
|
||||
</span>{' '}
|
||||
If someone has already built or tested similar code, Nx will use
|
||||
their results to speed up the command for everyone else.
|
||||
If someone has already built or tested similar code, Nx will
|
||||
use their results to speed up the command for everyone else.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-center sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<img
|
||||
loading="lazy"
|
||||
className="w-full opacity-25"
|
||||
height="128"
|
||||
width="128"
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/nx.svg"
|
||||
<Image
|
||||
src="/images/distributed-tasks.png"
|
||||
alt="Distributed Graph-Based Task Execution and Computation Caching illustration"
|
||||
width={388}
|
||||
height={300}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*Call out*/}
|
||||
<div className="bg-blue-nx-base text-white">
|
||||
<div className="max-w-7xl mx-auto my-12 py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
|
||||
<h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
|
||||
<span className="block">Ready to dive in?</span>
|
||||
<span className="block">Start using Nx with React today.</span>
|
||||
</h2>
|
||||
<div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
|
||||
<div className="inline-flex rounded-md shadow">
|
||||
<Link href="/latest/react/getting-started/getting-started">
|
||||
<a className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-gray-700 bg-white">
|
||||
Get started with React
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-w-screen-lg mx-auto px-5 py-5">
|
||||
{/*Nx plugins ecosystem*/}
|
||||
<div className="py-32 flex sm:flex-row flex-col items-center justify-center">
|
||||
<div className="w-full sm:w-2/5 flex flex-col justify-between items-center sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<div className="grid grid-cols-4 sm:grid-cols-2 md:grid-cols-4 gap-16 lg:gap-24">
|
||||
<div className="grid grid-cols-4 gap-16">
|
||||
<img
|
||||
loading="lazy"
|
||||
className="w-full opacity-25"
|
||||
@ -262,33 +296,33 @@ export function AngularPage() {
|
||||
<h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
|
||||
Rich Plugin Ecosystem
|
||||
</h3>
|
||||
<p className="sm:text-lg mb-6 font-bold">
|
||||
Nx is an open platform with plugins for many modern tools and
|
||||
frameworks.
|
||||
</p>
|
||||
<p className="sm:text-lg mb-6">
|
||||
<b>
|
||||
Nx is an open platform with plugins for many modern tools
|
||||
and frameworks.
|
||||
</b>
|
||||
It has support for TypeScript, Angular, NativeScript, Cypress,
|
||||
Jest, Prettier, Nest.js, AngularCLI, Storybook, Ionic, Go, Rust
|
||||
among others. With Nx, you get a consistent dev experience
|
||||
regardless of the tools used.
|
||||
Jest, Prettier, Nest.js, AngularCLI, Storybook, Ionic, Go,
|
||||
Rust among others. With Nx, you get a consistent dev
|
||||
experience regardless of the tools used.
|
||||
</p>
|
||||
<p className="sm:text-lg mb-6">For instance:</p>
|
||||
<ul className="sm:text-lg list-disc list-inside">
|
||||
<li>
|
||||
Use Nx's{' '}
|
||||
<a
|
||||
className="underline pointer"
|
||||
href="https://nx.dev/latest/angular/storybook/overview"
|
||||
href="https://blog.nrwl.io/nx-is-modern-angular-bda6cf10746d"
|
||||
>
|
||||
Storybook
|
||||
</a>{' '}
|
||||
and{' '}
|
||||
Nx is Modern Angular
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="underline pointer"
|
||||
href="https://nx.dev/latest/angular/cypress/overview#cypress-plugin"
|
||||
href="https://blog.nrwl.io/smarter-and-faster-angular-development-with-nx-6ccca0fe18d1"
|
||||
>
|
||||
Cypress
|
||||
</a>{' '}
|
||||
plugins to build design systems.
|
||||
Smarter and Faster Angular Development with Nx
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -303,16 +337,17 @@ export function AngularPage() {
|
||||
Nx Integrated Development Experience
|
||||
</h3>
|
||||
<p className="sm:text-lg mb-6">
|
||||
Nx provides a modern dev experience that is more integrated. Nx
|
||||
adds a high-quality VS Code plugin which helps you use the build
|
||||
tool effectively, generate components in folders, and much more.
|
||||
Nx provides a modern dev experience that is more integrated.
|
||||
Nx adds a high-quality VS Code plugin which helps you use
|
||||
the build tool effectively, generate components in folders,
|
||||
and much more.
|
||||
</p>
|
||||
<p className="sm:text-lg mb-6">
|
||||
Nx also supports optional free cloud support with Nx Cloud as
|
||||
well as GitHub integration. Share links with your teammates
|
||||
where everyone working on a project can examine detailed build
|
||||
logs and get insights about how to improve your project and
|
||||
build.
|
||||
Nx also supports optional free cloud support with Nx Cloud
|
||||
as well as GitHub integration. Share links with your
|
||||
teammates where everyone working on a project can examine
|
||||
detailed build logs and get insights about how to improve
|
||||
your project and build.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
@ -326,6 +361,24 @@ export function AngularPage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*Call out*/}
|
||||
<div className="bg-blue-nx-dark text-white overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto my-12 py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
|
||||
<h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
|
||||
<span className="block">Ready to dive in?</span>
|
||||
<span className="block">Start using Nx with React today.</span>
|
||||
</h2>
|
||||
<div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
|
||||
<div className="inline-flex rounded-md shadow">
|
||||
<Link href="/latest/react/getting-started/getting-started">
|
||||
<a className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-gray-700 bg-white">
|
||||
Get started with React
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-w-screen-lg mx-auto px-5 py-5">
|
||||
{/*Learn more*/}
|
||||
<div className="py-32 flex sm:flex-row flex-col items-start justify-center">
|
||||
@ -336,14 +389,16 @@ export function AngularPage() {
|
||||
</div>
|
||||
<div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<p className="sm:text-lg mb-6">
|
||||
To learn more about Nx and how Nx can increase your dev and build
|
||||
efficiency and modernize your apps stack, check out the following
|
||||
resources:
|
||||
To learn more about Nx and how Nx can increase your dev and
|
||||
build efficiency and modernize your apps stack, check out the
|
||||
following resources:
|
||||
</p>
|
||||
<ul className="sm:text-lg list-disc list-inside">
|
||||
<li>
|
||||
<Link href={'/latest/angular/getting-started/intro'}>
|
||||
<a className="underline pointer">Nx Angular Documentation</a>
|
||||
<a className="underline pointer">
|
||||
Nx Angular Documentation
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
@ -361,8 +416,8 @@ export function AngularPage() {
|
||||
href="https://www.youtube.com/watch?v=h5FIGDn5YM0"
|
||||
target="_blank"
|
||||
>
|
||||
Nx Explainer: Dev Tools for Monorepos, In-Depth with Victor
|
||||
Savkin
|
||||
Nx Explainer: Dev Tools for Monorepos, In-Depth with
|
||||
Victor Savkin
|
||||
</a>
|
||||
</li>
|
||||
<li className="mt-4">
|
||||
@ -393,8 +448,8 @@ export function AngularPage() {
|
||||
>
|
||||
follow Nx Dev Tools on Twitter
|
||||
</a>{' '}
|
||||
to keep up with latest news, feature announcements, and resources
|
||||
from the Nx Core Team.
|
||||
to keep up with latest news, feature announcements, and
|
||||
resources from the Nx Core Team.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -402,6 +457,18 @@ export function AngularPage() {
|
||||
{/*Who is using Nx*/}
|
||||
<NxUsersShowcase />
|
||||
</div>
|
||||
</main>
|
||||
<Footer
|
||||
flavor={{
|
||||
name: storedFlavor || 'react',
|
||||
value: storedFlavor || 'react',
|
||||
}}
|
||||
version={{
|
||||
name: storedVersion || 'Latest',
|
||||
value: storedVersion || 'latest',
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { PluginCard } from '@nrwl/nx-dev/ui/common';
|
||||
import { Footer, Header, PluginCard } from '@nrwl/nx-dev/ui/common';
|
||||
import React from 'react';
|
||||
import { useStorage } from '../lib/use-storage';
|
||||
|
||||
declare const fetch: any;
|
||||
|
||||
interface NodeProps {
|
||||
interface CommunityProps {
|
||||
pluginList: {
|
||||
description: string;
|
||||
name: string;
|
||||
@ -12,16 +14,11 @@ interface NodeProps {
|
||||
}[];
|
||||
}
|
||||
|
||||
export async function getStaticProps(): Promise<{ props: NodeProps }> {
|
||||
// Call an external API endpoint to get posts.
|
||||
// You can use any data fetching library
|
||||
export async function getStaticProps(): Promise<{ props: CommunityProps }> {
|
||||
const res = await fetch(
|
||||
'https://raw.githubusercontent.com/nrwl/nx/master/community/approved-plugins.json'
|
||||
);
|
||||
const pluginList = await res.json();
|
||||
|
||||
// By returning { props: { posts } }, the Blog component
|
||||
// will receive `posts` as a prop at build time
|
||||
return {
|
||||
props: {
|
||||
pluginList,
|
||||
@ -29,8 +26,23 @@ export async function getStaticProps(): Promise<{ props: NodeProps }> {
|
||||
};
|
||||
}
|
||||
|
||||
export function Node(props: NodeProps) {
|
||||
export function Community(props: CommunityProps) {
|
||||
const { value: storedFlavor } = useStorage('flavor');
|
||||
const { value: storedVersion } = useStorage('version');
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
showSearch={false}
|
||||
flavor={{
|
||||
name: storedFlavor || 'react',
|
||||
value: storedFlavor || 'react',
|
||||
}}
|
||||
version={{
|
||||
name: storedVersion || 'Latest',
|
||||
value: storedVersion || 'latest',
|
||||
}}
|
||||
/>
|
||||
<main>
|
||||
<div className="w-full">
|
||||
{/*Intro component*/}
|
||||
<div className="bg-gray-50">
|
||||
@ -56,8 +68,8 @@ export function Node(props: NodeProps) {
|
||||
</h2>
|
||||
|
||||
<p className="sm:text-lg mb-6">
|
||||
At the <a href="https://github.com/nrwl/nx">Nx GitHub repo</a>,
|
||||
you can file issues or contribute code back to the project.
|
||||
At the <a href="https://github.com/nrwl/nx">Nx GitHub repo</a>
|
||||
, you can file issues or contribute code back to the project.
|
||||
</p>
|
||||
<p className="sm:text-lg mb-6">
|
||||
<a
|
||||
@ -68,11 +80,11 @@ export function Node(props: NodeProps) {
|
||||
>
|
||||
Join the Nx Community Slack
|
||||
</a>{' '}
|
||||
to meet a friendly community of Nx users. This is a perfect place
|
||||
to ask clarifying questions or to talk through new ideas that you
|
||||
want to try with Nx. There's also a channel dedicated to sharing
|
||||
articles about Nx and most of the authors of community plugins can
|
||||
be reached there.
|
||||
to meet a friendly community of Nx users. This is a perfect
|
||||
place to ask clarifying questions or to talk through new ideas
|
||||
that you want to try with Nx. There's also a channel dedicated
|
||||
to sharing articles about Nx and most of the authors of
|
||||
community plugins can be reached there.
|
||||
</p>
|
||||
|
||||
<h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-bold text-gray-800 tracking-tight mb-4">
|
||||
@ -112,8 +124,8 @@ export function Node(props: NodeProps) {
|
||||
<p className="sm:text-lg mb-6">
|
||||
In each session, members of the Nx core team answer your
|
||||
questions, help get you up and running with Nx, and address
|
||||
particular challenges. If you have a question or topic you’d like
|
||||
to see covered in Nx Office Hours, you can{' '}
|
||||
particular challenges. If you have a question or topic you’d
|
||||
like to see covered in Nx Office Hours, you can{' '}
|
||||
<a
|
||||
className="underline cursor-pointer"
|
||||
target="_blank"
|
||||
@ -154,8 +166,8 @@ export function Node(props: NodeProps) {
|
||||
</a>
|
||||
: a monthly email digest from the Nx core team at Nrwl.
|
||||
Subscribers receive news about Nx releases, posts about new Nx
|
||||
features, details about new plugins, links to community resources,
|
||||
and additional Nx content.
|
||||
features, details about new plugins, links to community
|
||||
resources, and additional Nx content.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full md:w-1/2 flex flex-col justify-between items-start md:pl-16 md:pb-0 pb-10 mt-8 md:mt-0">
|
||||
@ -171,8 +183,9 @@ export function Node(props: NodeProps) {
|
||||
Community plugin
|
||||
</h2>
|
||||
<p className="sm:text-lg mb-6">
|
||||
Core Nx plugins are created and maintained by the Nx team at Nrwl
|
||||
and you can see all the available plugins when you run the{' '}
|
||||
Core Nx plugins are created and maintained by the Nx team at
|
||||
Nrwl and you can see all the available plugins when you run
|
||||
the{' '}
|
||||
<code className="text-sm bg-gray-50 text-gray-600 font-mono leading-6 px-2 py-1 border border-gray-200 rounded">
|
||||
nx list
|
||||
</code>{' '}
|
||||
@ -180,14 +193,14 @@ export function Node(props: NodeProps) {
|
||||
</p>
|
||||
<p className="sm:text-lg mb-6">
|
||||
<b>The community plugins listed below</b> are created and
|
||||
maintained by members of the Nx community, will allow you to use
|
||||
the full power of the workspace while using different
|
||||
maintained by members of the Nx community, will allow you to
|
||||
use the full power of the workspace while using different
|
||||
technologies!
|
||||
</p>
|
||||
<div className="inline-flex rounded-md shadow mb-6">
|
||||
<a
|
||||
href="#community-plugin-list"
|
||||
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
|
||||
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-nx-base"
|
||||
>
|
||||
Check the community plugins right now!
|
||||
</a>
|
||||
@ -197,8 +210,8 @@ export function Node(props: NodeProps) {
|
||||
</h3>
|
||||
<p className="sm:text-lg mb-6">
|
||||
Each of the plugins listed below have a yarn and an npm icon.
|
||||
Clicking on either of these copies the relevant command to install
|
||||
the dependency for your project.
|
||||
Clicking on either of these copies the relevant command to
|
||||
install the dependency for your project.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full lg:w-3/5 flex flex-col justify-between items-start md:pl-16 pb-10 mt-8 md:mt-0">
|
||||
@ -216,8 +229,8 @@ export function Node(props: NodeProps) {
|
||||
>
|
||||
subscribe to the Nx Newsletter
|
||||
</a>{' '}
|
||||
Nx Plugin guide to learn how to get started with building your
|
||||
own plugin!
|
||||
Nx Plugin guide to learn how to get started with building
|
||||
your own plugin!
|
||||
</p>
|
||||
<iframe
|
||||
width="560"
|
||||
@ -238,14 +251,14 @@ export function Node(props: NodeProps) {
|
||||
<div className="max-w-7xl mx-auto my-12 py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
|
||||
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
|
||||
<span className="block">Ready to dive in?</span>
|
||||
<span className="block text-blue-600">
|
||||
<span className="block text-blue-nx-base">
|
||||
Start using Nx with Node today.
|
||||
</span>
|
||||
</h2>
|
||||
<div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
|
||||
<div className="inline-flex rounded-md shadow">
|
||||
<Link href="/latest/node/getting-started/getting-started">
|
||||
<a className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
|
||||
<a className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-nx-base">
|
||||
Get started with Node
|
||||
</a>
|
||||
</Link>
|
||||
@ -277,7 +290,19 @@ export function Node(props: NodeProps) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<Footer
|
||||
flavor={{
|
||||
name: storedFlavor || 'react',
|
||||
value: storedFlavor || 'react',
|
||||
}}
|
||||
version={{
|
||||
name: storedVersion || 'Latest',
|
||||
value: storedVersion || 'latest',
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default Node;
|
||||
export default Community;
|
||||
|
||||
@ -1,10 +1,31 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { InlineCommand, NxUsersShowcase } from '@nrwl/nx-dev/ui/common';
|
||||
import {
|
||||
Footer,
|
||||
Header,
|
||||
InlineCommand,
|
||||
NxUsersShowcase,
|
||||
} from '@nrwl/nx-dev/ui/common';
|
||||
import Image from 'next/image';
|
||||
import { useStorage } from '../lib/use-storage';
|
||||
|
||||
export function Index() {
|
||||
const { value: storedFlavor } = useStorage('flavor');
|
||||
const { value: storedVersion } = useStorage('version');
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
showSearch={false}
|
||||
flavor={{
|
||||
name: storedFlavor || 'react',
|
||||
value: storedFlavor || 'react',
|
||||
}}
|
||||
version={{
|
||||
name: storedVersion || 'Latest',
|
||||
value: storedVersion || 'latest',
|
||||
}}
|
||||
/>
|
||||
<main>
|
||||
<div className="w-full">
|
||||
{/*INTRO COMPONENT*/}
|
||||
<div className="bg-blue-nx-base text-white">
|
||||
@ -15,8 +36,8 @@ export function Index() {
|
||||
Smart, Extensible Build Framework
|
||||
</h1>
|
||||
<p className="max-w-screen-lg text-lg sm:text-2xl sm:leading-10 font-medium mb-10 sm:mb-11">
|
||||
Build full-stack applications with modern tools and reinforce
|
||||
best practices for your entire development team.
|
||||
Build full-stack applications with modern tools and
|
||||
reinforce best practices for your entire development team.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap space-y-4 sm:space-y-0 sm:space-x-4 text-center">
|
||||
@ -113,19 +134,43 @@ export function Index() {
|
||||
<svg viewBox="0 0 24 24" className="w-1/2" fill="#77AE64">
|
||||
<path d="M11.998,24c-0.321,0-0.641-0.084-0.922-0.247l-2.936-1.737c-0.438-0.245-0.224-0.332-0.08-0.383 c0.585-0.203,0.703-0.25,1.328-0.604c0.065-0.037,0.151-0.023,0.218,0.017l2.256,1.339c0.082,0.045,0.197,0.045,0.272,0l8.795-5.076 c0.082-0.047,0.134-0.141,0.134-0.238V6.921c0-0.099-0.053-0.192-0.137-0.242l-8.791-5.072c-0.081-0.047-0.189-0.047-0.271,0 L3.075,6.68C2.99,6.729,2.936,6.825,2.936,6.921v10.15c0,0.097,0.054,0.189,0.139,0.235l2.409,1.392 c1.307,0.654,2.108-0.116,2.108-0.89V7.787c0-0.142,0.114-0.253,0.256-0.253h1.115c0.139,0,0.255,0.112,0.255,0.253v10.021 c0,1.745-0.95,2.745-2.604,2.745c-0.508,0-0.909,0-2.026-0.551L2.28,18.675c-0.57-0.329-0.922-0.945-0.922-1.604V6.921 c0-0.659,0.353-1.275,0.922-1.603l8.795-5.082c0.557-0.315,1.296-0.315,1.848,0l8.794,5.082c0.57,0.329,0.924,0.944,0.924,1.603 v10.15c0,0.659-0.354,1.273-0.924,1.604l-8.794,5.078C12.643,23.916,12.324,24,11.998,24z M19.099,13.993 c0-1.9-1.284-2.406-3.987-2.763c-2.731-0.361-3.009-0.548-3.009-1.187c0-0.528,0.235-1.233,2.258-1.233 c1.807,0,2.473,0.389,2.747,1.607c0.024,0.115,0.129,0.199,0.247,0.199h1.141c0.071,0,0.138-0.031,0.186-0.081 c0.048-0.054,0.074-0.123,0.067-0.196c-0.177-2.098-1.571-3.076-4.388-3.076c-2.508,0-4.004,1.058-4.004,2.833 c0,1.925,1.488,2.457,3.895,2.695c2.88,0.282,3.103,0.703,3.103,1.269c0,0.983-0.789,1.402-2.642,1.402 c-2.327,0-2.839-0.584-3.011-1.742c-0.02-0.124-0.126-0.215-0.253-0.215h-1.137c-0.141,0-0.254,0.112-0.254,0.253 c0,1.482,0.806,3.248,4.655,3.248C17.501,17.007,19.099,15.91,19.099,13.993z" />
|
||||
</svg>
|
||||
<div className="sm:text-base md:text-sm lg:text-base">Node</div>
|
||||
<div className="sm:text-base md:text-sm lg:text-base">
|
||||
Node
|
||||
</div>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<h2 className="text-xl sm:text-2xl lg:text-3xl leading-none font-extrabold tracking-tight mb-4">
|
||||
Frameworks Agnostic
|
||||
<h2 className="text-xl sm:text-2xl lg:text-3xl leading-none font-extrabold tracking-tight mb-4 relative">
|
||||
<svg
|
||||
width={42}
|
||||
height={42}
|
||||
viewBox="0 0 64 64"
|
||||
style={{
|
||||
transform: 'scaleX(-1) rotate(50deg)',
|
||||
left: '-4.3rem',
|
||||
position: 'absolute',
|
||||
top: 'calc(50% - (32px / 2))',
|
||||
}}
|
||||
className="hidden md:block"
|
||||
>
|
||||
<path
|
||||
shapeRendering="geometricPrecision"
|
||||
d="m63.386,16.193l.002-.002c0.002-0.003 0.004-0.006 0.006-0.01 0.172-0.195 0.298-0.43 0.399-0.678 0.032-0.076 0.053-0.148 0.076-0.225 0.058-0.191 0.094-0.389 0.106-0.596 0.006-0.076 0.018-0.148 0.016-0.226 0-0.04 0.01-0.076 0.008-0.115-0.014-0.239-0.062-0.47-0.136-0.687-0.006-0.023-0.022-0.041-0.03-0.064-0.088-0.239-0.214-0.451-0.363-0.645-0.021-0.027-0.028-0.063-0.05-0.09l-10.311-12.146c-0.789-0.93-2.084-0.948-2.894-0.037-0.808,0.91-0.823,2.402-0.032,3.334l5.558,6.549c-8.121-1.076-16.104,0.633-16.481,0.717-24.646,4.467-42.087,27.227-38.88,50.736 0.159,1.164 1.028,1.992 2.019,1.992 0.106,0 0.212-0.009 0.32-0.027 1.116-0.203 1.878-1.409 1.704-2.696-2.857-20.94 13.056-41.282 35.537-45.358 0.103-0.024 8.351-1.794 16.117-0.574l-8.577,5.093c-1.005,0.598-1.398,2.02-0.881,3.177 0.516,1.159 1.748,1.608 2.756,1.017l13.52-8.028c0.183-0.111 0.347-0.25 0.491-0.411z"
|
||||
/>
|
||||
</svg>
|
||||
First-class support for your favorite stack
|
||||
</h2>
|
||||
<p className="sm:text-lg mb-6">
|
||||
Nx is a smart and extensible build framework to help you
|
||||
architect, test, and build at any scale — integrating seamlessly
|
||||
with modern technologies and libraries while providing a robust
|
||||
CLI, caching, dependency management, and more.
|
||||
architect, test, and build at any scale — integrating
|
||||
seamlessly with modern technologies and libraries while
|
||||
providing a robust CLI, caching, dependency management, and
|
||||
more.
|
||||
</p>
|
||||
<p className="sm:text-lg mb-6">
|
||||
It has first-class support for many frontend and backend
|
||||
technologies, so its documentation comes in multiple flavours.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -137,30 +182,31 @@ export function Index() {
|
||||
<div className="mt-32 flex sm:flex-row flex-col">
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-center items-center sm:pr-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<Image
|
||||
src="/images/computation.svg"
|
||||
alt="Use Intelligent Build System with Distributed Caching illustration"
|
||||
src="/images/distributed-tasks.png"
|
||||
alt="Distributed Graph-Based Task Execution and Computation Caching illustration"
|
||||
width={388}
|
||||
height={300}
|
||||
/>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-center sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
|
||||
Distributed Graph-Based Task Execution and Computation Caching
|
||||
Distributed Graph-Based Task Execution and Computation
|
||||
Caching
|
||||
</h2>
|
||||
<p className="sm:text-lg mb-6">
|
||||
<span className="font-bold">Nx</span> is smart. It analyzes your
|
||||
workspace and figures out what can be affected by every code
|
||||
change. That's why Nx doesn't rebuild and retest everything on
|
||||
every commit -{' '}
|
||||
<span className="font-bold">Nx</span> is smart. It analyzes
|
||||
your workspace and figures out what can be affected by every
|
||||
code change. That's why Nx doesn't rebuild and retest
|
||||
everything on every commit -{' '}
|
||||
<span className="font-bold">
|
||||
it only rebuilds what is necessary
|
||||
</span>
|
||||
.
|
||||
</p>
|
||||
<p className="sm:text-lg mb-6">
|
||||
<span className="font-bold">Nx</span> partitions commands into a
|
||||
graph of smaller tasks. Nx then runs those tasks in parallel,
|
||||
and it can{' '}
|
||||
<span className="font-bold">Nx</span> partitions commands
|
||||
into a graph of smaller tasks. Nx then runs those tasks in
|
||||
parallel, and it can{' '}
|
||||
<span className="font-bold">
|
||||
even distribute them across many machines without any
|
||||
configuration
|
||||
@ -171,8 +217,9 @@ export function Index() {
|
||||
<span className="font-bold">
|
||||
Nx also uses a distributed computation cache
|
||||
</span>
|
||||
. If someone has already built or tested similar code, Nx will
|
||||
use their results to speed up the command for everyone else.
|
||||
. If someone has already built or tested similar code, Nx
|
||||
will use their results to speed up the command for everyone
|
||||
else.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -180,20 +227,20 @@ export function Index() {
|
||||
<div className="my-32 flex sm:flex-row flex-col">
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-center sm:pr-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<h2 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
|
||||
Holistic Dev Experience Powered by an Advanced CLI and Editor
|
||||
Plugins
|
||||
Holistic Dev Experience Powered by an Advanced CLI and
|
||||
Editor Plugins
|
||||
</h2>
|
||||
<p className="sm:text-lg mb-6">
|
||||
<span className="font-bold">Nx</span> helps scale your
|
||||
development from one team building one application to many teams
|
||||
building multiple frontend and backend applications all in the
|
||||
same workspace.{' '}
|
||||
development from one team building one application to many
|
||||
teams building multiple frontend and backend applications
|
||||
all in the same workspace.{' '}
|
||||
<span className="font-bold">
|
||||
When using Nx, developers have a holistic dev experience
|
||||
powered by an advanced CLI
|
||||
</span>{' '}
|
||||
(with editor plugins), capabilities for controlled code sharing
|
||||
and consistent code generation.
|
||||
(with editor plugins), capabilities for controlled code
|
||||
sharing and consistent code generation.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-center items-center sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
@ -235,11 +282,12 @@ export function Index() {
|
||||
Support for Modern Tools
|
||||
</h2>
|
||||
<p className="sm:text-lg mb-6">
|
||||
<span className="font-bold">Nx</span> is an open platform with
|
||||
plugins for many modern tools and frameworks. It has support for
|
||||
TypeScript, React, Angular, Cypress, Jest, Prettier, Nest.js,
|
||||
Next.js, Storybook, Ionic among others. With Nx, you get a
|
||||
consistent dev experience regardless of the tools used.
|
||||
<span className="font-bold">Nx</span> is an open platform
|
||||
with plugins for many modern tools and frameworks. It has
|
||||
support for TypeScript, React, Angular, Cypress, Jest,
|
||||
Prettier, Nest.js, Next.js, Storybook, Ionic among others.
|
||||
With Nx, you get a consistent dev experience regardless of
|
||||
the tools used.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-center items-center sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
@ -270,10 +318,11 @@ export function Index() {
|
||||
Get access to key learning materials
|
||||
</h2>
|
||||
<p className="sm:text-lg mb-6">
|
||||
With accessible and free online content about Nx, you can quickly
|
||||
get up and running with all of Nx's features. Nx tutorials and
|
||||
resources are continuously updated with the latest version. Plus,
|
||||
when you're looking for advanced courses visit{' '}
|
||||
With accessible and free online content about Nx, you can
|
||||
quickly get up and running with all of Nx's features. Nx
|
||||
tutorials and resources are continuously updated with the
|
||||
latest version. Plus, when you're looking for advanced courses
|
||||
visit{' '}
|
||||
<a
|
||||
className="cursor-pointer underline"
|
||||
href="https://nxplaybook.com/?utm_source=nx.dev"
|
||||
@ -308,10 +357,10 @@ export function Index() {
|
||||
</h3>
|
||||
<p className="sm:text-lg mb-6">
|
||||
For developers, Nx extends Nx Console to give you more
|
||||
visibility into your workspace. With Nx Console and Nx in your
|
||||
workflow you can reduce the time it takes to build high-quality
|
||||
software at scale, and improve best-practices across your
|
||||
organization.{' '}
|
||||
visibility into your workspace. With Nx Console and Nx in
|
||||
your workflow you can reduce the time it takes to build
|
||||
high-quality software at scale, and improve best-practices
|
||||
across your organization.{' '}
|
||||
<a
|
||||
href="https://nx.dev/node/cli/console"
|
||||
target="_blank"
|
||||
@ -328,8 +377,8 @@ export function Index() {
|
||||
</h3>
|
||||
<p className="sm:text-lg mb-6">
|
||||
Nx is built and maintained as an open-source toolkit for
|
||||
developers by community contributors alongside the experts at
|
||||
Nrwl, a software consulting firm with renowned JavaScript
|
||||
developers by community contributors alongside the experts
|
||||
at Nrwl, a software consulting firm with renowned JavaScript
|
||||
experts and core contributors. To learn more, visit{' '}
|
||||
<a
|
||||
href="https://nrwl.io/?utm_source=nx.dev"
|
||||
@ -348,6 +397,18 @@ export function Index() {
|
||||
{/*Who is using Nx*/}
|
||||
<NxUsersShowcase />
|
||||
</div>
|
||||
</main>
|
||||
<Footer
|
||||
flavor={{
|
||||
name: storedFlavor || 'react',
|
||||
value: storedFlavor || 'react',
|
||||
}}
|
||||
version={{
|
||||
name: storedVersion || 'Latest',
|
||||
value: storedVersion || 'latest',
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { InlineCommand, NxUsersShowcase } from '@nrwl/nx-dev/ui/common';
|
||||
import {
|
||||
Footer,
|
||||
Header,
|
||||
InlineCommand,
|
||||
NxUsersShowcase,
|
||||
} from '@nrwl/nx-dev/ui/common';
|
||||
import React from 'react';
|
||||
import { useStorage } from '../lib/use-storage';
|
||||
|
||||
export function Node() {
|
||||
const sectionItemList = [
|
||||
@ -46,7 +53,23 @@ export function Node() {
|
||||
},
|
||||
];
|
||||
|
||||
const { value: storedFlavor } = useStorage('flavor');
|
||||
const { value: storedVersion } = useStorage('version');
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
showSearch={false}
|
||||
flavor={{
|
||||
name: storedFlavor || 'react',
|
||||
value: storedFlavor || 'react',
|
||||
}}
|
||||
version={{
|
||||
name: storedVersion || 'Latest',
|
||||
value: storedVersion || 'latest',
|
||||
}}
|
||||
/>
|
||||
<main>
|
||||
<div className="w-full overflow-hidden">
|
||||
{/*Intro component*/}
|
||||
<div className="bg-blue-nx-dark text-white">
|
||||
@ -82,14 +105,14 @@ export function Node() {
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 lg:w-3/5 flex flex-col items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
|
||||
The power and scalability of Node has helped pave the way for
|
||||
increasingly complex and sophisticated applications.
|
||||
The power and scalability of Node has helped pave the way
|
||||
for increasingly complex and sophisticated applications.
|
||||
</h3>
|
||||
<p className="sm:text-lg mb-6">
|
||||
Using Typescript in Node applications helps dev teams code more
|
||||
consistently, avoid compatibility issues, and it can be used to
|
||||
build libraries for NPM. Unfortunately, the setup is often
|
||||
tedious and time consuming, and any mistakes in your
|
||||
Using Typescript in Node applications helps dev teams code
|
||||
more consistently, avoid compatibility issues, and it can be
|
||||
used to build libraries for NPM. Unfortunately, the setup is
|
||||
often tedious and time consuming, and any mistakes in your
|
||||
configuration can grind your work to a halt.
|
||||
</p>
|
||||
</div>
|
||||
@ -104,11 +127,12 @@ export function Node() {
|
||||
develop, test, build, and scale Node applications.
|
||||
</h3>
|
||||
<p className="sm:text-lg mb-6">
|
||||
Nx is a set of tools that provides a standardized and integrated
|
||||
development experience for all of your Node workspaces. It takes
|
||||
care of things like Typescript configuration and library
|
||||
sharing, so you can focus on other, more interesting development
|
||||
tasks. In addition, Nx provides...
|
||||
Nx is a set of tools that provides a standardized and
|
||||
integrated development experience for all of your Node
|
||||
workspaces. It takes care of things like Typescript
|
||||
configuration and library sharing, so you can focus on
|
||||
other, more interesting development tasks. In addition, Nx
|
||||
provides...
|
||||
</p>
|
||||
<ul className="sm:text-lg list-disc list-inside">
|
||||
<li>API creation using Express and Nest</li>
|
||||
@ -117,10 +141,12 @@ export function Node() {
|
||||
<li className="mt-4">
|
||||
Support for popular community tools and frameworks
|
||||
</li>
|
||||
<li className="mt-4">Nx’s own devkit for building plugins</li>
|
||||
<li className="mt-4">
|
||||
And other Nx-specific features including dependency graphs,
|
||||
code generation, and computation caching
|
||||
Nx’s own devkit for building plugins
|
||||
</li>
|
||||
<li className="mt-4">
|
||||
And other Nx-specific features including dependency
|
||||
graphs, code generation, and computation caching
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -171,9 +197,9 @@ export function Node() {
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<p className="sm:text-lg mb-4 underline">
|
||||
Get started right away by creating a modern Node workspace with
|
||||
Nx, or learn more about the benefits Nx provides when building
|
||||
Node applications.
|
||||
Get started right away by creating a modern Node workspace
|
||||
with Nx, or learn more about the benefits Nx provides when
|
||||
building Node applications.
|
||||
</p>
|
||||
<div className="inline-flex rounded-md shadow">
|
||||
<Link href="/latest/node/getting-started/getting-started">
|
||||
@ -197,9 +223,9 @@ export function Node() {
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<p className="sm:text-lg mb-6">
|
||||
Get started right away by creating a new Node workspace. If you’re
|
||||
using Nest run the following command in your Terminal or Command
|
||||
prompt:
|
||||
Get started right away by creating a new Node workspace. If
|
||||
you’re using Nest run the following command in your Terminal
|
||||
or Command prompt:
|
||||
</p>
|
||||
|
||||
<div className="w-full">
|
||||
@ -243,9 +269,9 @@ export function Node() {
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<p className="sm:text-lg mb-6">
|
||||
Once you’ve created your Node workspace, follow the steps in this
|
||||
tutorial to learn how to add testing, share code, view dependency
|
||||
graphs, and much, much more.
|
||||
Once you’ve created your Node workspace, follow the steps in
|
||||
this tutorial to learn how to add testing, share code, view
|
||||
dependency graphs, and much, much more.
|
||||
</p>
|
||||
<div className="inline-flex">
|
||||
<Link href="/latest/node/tutorial/01-create-application">
|
||||
@ -351,7 +377,8 @@ export function Node() {
|
||||
Tools
|
||||
</h3>
|
||||
<p className="sm:text-lg mb-6">
|
||||
Nx provides excellent tooling for Node in many ways, including:
|
||||
Nx provides excellent tooling for Node in many ways,
|
||||
including:
|
||||
</p>
|
||||
<ul className="sm:text-lg list-disc list-inside">
|
||||
<li>
|
||||
@ -373,10 +400,10 @@ export function Node() {
|
||||
>
|
||||
Jest
|
||||
</a>{' '}
|
||||
is a zero-config JavaScript testing framework that prioritizes
|
||||
simplicity. With robust documentation and a feature-full API,
|
||||
Jest is a great solution for JS developers looking for a
|
||||
powerful, modern testing toolkit.
|
||||
is a zero-config JavaScript testing framework that
|
||||
prioritizes simplicity. With robust documentation and a
|
||||
feature-full API, Jest is a great solution for JS developers
|
||||
looking for a powerful, modern testing toolkit.
|
||||
</li>
|
||||
<li className="mt-4">
|
||||
<a
|
||||
@ -386,10 +413,11 @@ export function Node() {
|
||||
>
|
||||
ESLint
|
||||
</a>{' '}
|
||||
uses static analysis to identify problems in your code, many of
|
||||
which are fixed automatically in a syntax-aware manner. ESLint
|
||||
is highly configurable; customize your linting preprocess code,
|
||||
use custom parsers, or write your own rules.
|
||||
uses static analysis to identify problems in your code, many
|
||||
of which are fixed automatically in a syntax-aware manner.
|
||||
ESLint is highly configurable; customize your linting
|
||||
preprocess code, use custom parsers, or write your own
|
||||
rules.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -404,16 +432,17 @@ export function Node() {
|
||||
Nx Integrated Development Experience
|
||||
</h3>
|
||||
<p className="sm:text-lg mb-6">
|
||||
Nx provides a modern dev experience that is more integrated. Nx
|
||||
adds a high-quality VS Code plugin which helps you use the build
|
||||
tool effectively, generate components in folders, and much more.
|
||||
Nx provides a modern dev experience that is more integrated.
|
||||
Nx adds a high-quality VS Code plugin which helps you use
|
||||
the build tool effectively, generate components in folders,
|
||||
and much more.
|
||||
</p>
|
||||
<p className="sm:text-lg mb-6">
|
||||
Nx also supports optional free cloud support with Nx Cloud as
|
||||
well as GitHub integration. Share links with your teammates
|
||||
where everyone working on a project can examine detailed build
|
||||
logs and get insights about how to improve your project and
|
||||
build.
|
||||
Nx also supports optional free cloud support with Nx Cloud
|
||||
as well as GitHub integration. Share links with your
|
||||
teammates where everyone working on a project can examine
|
||||
detailed build logs and get insights about how to improve
|
||||
your project and build.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
@ -437,9 +466,9 @@ export function Node() {
|
||||
</div>
|
||||
<div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<p className="sm:text-lg mb-6">
|
||||
To learn more about Nx and how Nx can increase your dev and build
|
||||
efficiency and modernize your apps stack, check out the following
|
||||
resources:
|
||||
To learn more about Nx and how Nx can increase your dev and
|
||||
build efficiency and modernize your apps stack, check out the
|
||||
following resources:
|
||||
</p>
|
||||
<ul className="sm:text-lg list-disc list-inside">
|
||||
<li>
|
||||
@ -457,8 +486,8 @@ export function Node() {
|
||||
href="https://www.youtube.com/watch?v=h5FIGDn5YM0"
|
||||
target="_blank"
|
||||
>
|
||||
Nx Explainer: Dev Tools for Monorepos, In-Depth with Victor
|
||||
Savkin
|
||||
Nx Explainer: Dev Tools for Monorepos, In-Depth with
|
||||
Victor Savkin
|
||||
</a>
|
||||
</li>
|
||||
<li className="mt-4">
|
||||
@ -489,8 +518,8 @@ export function Node() {
|
||||
>
|
||||
follow Nx Dev Tools on Twitter
|
||||
</a>{' '}
|
||||
to keep up with latest news, feature announcements, and resources
|
||||
from the Nx Core Team.
|
||||
to keep up with latest news, feature announcements, and
|
||||
resources from the Nx Core Team.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -498,6 +527,18 @@ export function Node() {
|
||||
{/*Who is using Nx*/}
|
||||
<NxUsersShowcase />
|
||||
</div>
|
||||
</main>
|
||||
<Footer
|
||||
flavor={{
|
||||
name: storedFlavor || 'react',
|
||||
value: storedFlavor || 'react',
|
||||
}}
|
||||
version={{
|
||||
name: storedVersion || 'Latest',
|
||||
value: storedVersion || 'latest',
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -1,9 +1,31 @@
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { InlineCommand, NxUsersShowcase } from '@nrwl/nx-dev/ui/common';
|
||||
import {
|
||||
Footer,
|
||||
Header,
|
||||
InlineCommand,
|
||||
NxUsersShowcase,
|
||||
} from '@nrwl/nx-dev/ui/common';
|
||||
import React from 'react';
|
||||
import { useStorage } from '../lib/use-storage';
|
||||
|
||||
export function ReactPage() {
|
||||
const { value: storedFlavor } = useStorage('flavor');
|
||||
const { value: storedVersion } = useStorage('version');
|
||||
return (
|
||||
<>
|
||||
<Header
|
||||
showSearch={false}
|
||||
flavor={{
|
||||
name: storedFlavor || 'react',
|
||||
value: storedFlavor || 'react',
|
||||
}}
|
||||
version={{
|
||||
name: storedVersion || 'Latest',
|
||||
value: storedVersion || 'latest',
|
||||
}}
|
||||
/>
|
||||
<main>
|
||||
<div className="w-full overflow-hidden">
|
||||
{/*Intro component*/}
|
||||
<div className="bg-blue-nx-dark text-white">
|
||||
@ -19,6 +41,11 @@ export function ReactPage() {
|
||||
<h2 className="text-3xl sm:text-3xl lg:text-5xl leading-none font-extrabold tracking-tight mb-4">
|
||||
Nx and React
|
||||
</h2>
|
||||
<p className="sm:text-lg mb-16">
|
||||
Nx is a smart and extensible build framework to help you
|
||||
develop, test, build, and scale with React and React
|
||||
frameworks like Gatsby, Next.js, and React Native.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-8 mb-32 flex sm:flex-row flex-col justify-center">
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
@ -27,18 +54,24 @@ export function ReactPage() {
|
||||
advanced CLI and editor plugins.
|
||||
</p>
|
||||
<p className="sm:text-lg mb-6">
|
||||
Develop your applications using your preferred React frameworks,
|
||||
mix and match them, without losing the rich support for
|
||||
Storybook, Cypress, Jest, ESLint and more.
|
||||
Develop your applications using your preferred React
|
||||
frameworks, mix and match them, without losing the rich
|
||||
support for Storybook, Cypress, Jest, ESLint and more.
|
||||
</p>
|
||||
<p className="sm:text-lg mb-6">
|
||||
<b>Nx</b> uses distributed graph-based task execution and
|
||||
computation caching. Keep your CI and local dev experience fast
|
||||
as your repository grows.
|
||||
computation caching. Keep your CI and local dev experience
|
||||
fast as your repository grows.
|
||||
</p>
|
||||
<p className="sm:text-lg mb-6">
|
||||
<b>Nx</b> can be added to any React project{' '}
|
||||
<a href="#create-nx-workspace">in minutes</a>.
|
||||
<a
|
||||
className="underline pointer"
|
||||
href="#create-nx-workspace"
|
||||
>
|
||||
in minutes
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
@ -66,7 +99,8 @@ export function ReactPage() {
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<p className="sm:text-lg mb-6">
|
||||
Get started right away by creating a new React workspace by
|
||||
running the following command in your Terminal or Command prompt:
|
||||
running the following command in your Terminal or Command
|
||||
prompt:
|
||||
</p>
|
||||
|
||||
<div className="w-full">
|
||||
@ -107,9 +141,9 @@ export function ReactPage() {
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<p className="sm:text-lg mb-6">
|
||||
Once you’ve created your React workspace, follow the steps in this
|
||||
tutorial to learn how to add testing, share code, view dependency
|
||||
graphs, and much, much more.
|
||||
Once you’ve created your React workspace, follow the steps in
|
||||
this tutorial to learn how to add testing, share code, view
|
||||
dependency graphs, and much, much more.
|
||||
</p>
|
||||
<div className="inline-flex">
|
||||
<Link href="/latest/react/tutorial/01-create-application">
|
||||
@ -151,28 +185,33 @@ export function ReactPage() {
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*Nx technology*/}
|
||||
<div className="bg-blue-nx-base text-white">
|
||||
<div className="max-w-screen-lg mx-auto px-5 py-5">
|
||||
<div className="py-32 flex sm:flex-row flex-col items-center justify-center">
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
|
||||
Distributed Graph-Based Task Executions and Computation Caching
|
||||
<h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold tracking-tight mb-4">
|
||||
Distributed Graph-Based Task Executions and Computation
|
||||
Caching
|
||||
</h3>
|
||||
<p className="sm:text-lg mb-6">
|
||||
<span className="font-bold">Nx</span> is smart. It analyzes your
|
||||
workspace and figures out what can be affected by every code
|
||||
change. That's why Nx doesn't rebuild and retest everything on
|
||||
every commit —{' '}
|
||||
<span className="font-bold">Nx</span> is smart. It analyzes
|
||||
your workspace and figures out what can be affected by every
|
||||
code change. That's why Nx doesn't rebuild and retest
|
||||
everything on every commit —{' '}
|
||||
<span className="font-bold">
|
||||
it only rebuilds what is necessary
|
||||
</span>
|
||||
.
|
||||
</p>
|
||||
<p className="sm:text-lg mb-6">
|
||||
<span className="font-bold">Nx</span> partitions commands into a
|
||||
graph of smaller tasks. Nx then runs those tasks in parallel, and
|
||||
<span className="font-bold">Nx</span> partitions commands
|
||||
into a graph of smaller tasks. Nx then runs those tasks in
|
||||
parallel, and
|
||||
<span className="font-bold">
|
||||
it can even distribute them across many machines without any
|
||||
configuration
|
||||
it can even distribute them across many machines without
|
||||
any configuration
|
||||
</span>
|
||||
.
|
||||
</p>
|
||||
@ -180,44 +219,27 @@ export function ReactPage() {
|
||||
<span className="font-bold">
|
||||
Nx also uses a distributed computation cache.
|
||||
</span>{' '}
|
||||
If someone has already built or tested similar code, Nx will use
|
||||
their results to speed up the command for everyone else.
|
||||
If someone has already built or tested similar code, Nx will
|
||||
use their results to speed up the command for everyone else.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 flex flex-col justify-between items-center sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<img
|
||||
loading="lazy"
|
||||
className="w-full opacity-25"
|
||||
height="128"
|
||||
width="128"
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/nx.svg"
|
||||
<Image
|
||||
src="/images/distributed-tasks.png"
|
||||
alt="Distributed Graph-Based Task Execution and Computation Caching illustration"
|
||||
width={388}
|
||||
height={300}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*Call out*/}
|
||||
<div className="bg-blue-nx-base text-white">
|
||||
<div className="max-w-7xl mx-auto my-12 py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
|
||||
<h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
|
||||
<span className="block">Ready to dive in?</span>
|
||||
<span className="block">Start using Nx with React today.</span>
|
||||
</h2>
|
||||
<div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
|
||||
<div className="inline-flex rounded-md shadow">
|
||||
<Link href="/latest/react/getting-started/getting-started">
|
||||
<a className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-gray-700 bg-white">
|
||||
Get started with React
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-screen-lg mx-auto px-5 py-5">
|
||||
{/*Nx plugins ecosystem*/}
|
||||
<div className="py-32 flex sm:flex-row flex-col items-center justify-center">
|
||||
<div className="w-full sm:w-2/5 flex flex-col justify-between items-center sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<div className="grid grid-cols-4 sm:grid-cols-2 md:grid-cols-4 gap-16 lg:gap-24">
|
||||
<div className="grid grid-cols-4 gap-16">
|
||||
<img
|
||||
loading="lazy"
|
||||
className="w-full opacity-25"
|
||||
@ -285,10 +307,10 @@ export function ReactPage() {
|
||||
frameworks.
|
||||
</p>
|
||||
<p className="sm:text-lg mb-6">
|
||||
It has support for TypeScript, React, React Native, Cypress, Jest,
|
||||
Prettier, Nest.js, Next.js, Gatsby, Storybook, Ionic, Go, Rust
|
||||
among others. With Nx, you get a consistent dev experience
|
||||
regardless of the tools used.
|
||||
It has support for TypeScript, React, React Native, Cypress,
|
||||
Jest, Prettier, Nest.js, Next.js, Gatsby, Storybook, Ionic,
|
||||
Go, Rust among others. With Nx, you get a consistent dev
|
||||
experience regardless of the tools used.
|
||||
</p>
|
||||
<ul className="sm:text-lg list-disc list-inside">
|
||||
<li>
|
||||
@ -348,16 +370,17 @@ export function ReactPage() {
|
||||
Nx Integrated Development Experience
|
||||
</h3>
|
||||
<p className="sm:text-lg mb-6">
|
||||
Nx provides a modern dev experience that is more integrated. Nx
|
||||
adds a high-quality VS Code plugin which helps you use the build
|
||||
tool effectively, generate components in folders, and much more.
|
||||
Nx provides a modern dev experience that is more integrated.
|
||||
Nx adds a high-quality VS Code plugin which helps you use
|
||||
the build tool effectively, generate components in folders,
|
||||
and much more.
|
||||
</p>
|
||||
<p className="sm:text-lg mb-6">
|
||||
Nx also supports optional free cloud support with Nx Cloud as
|
||||
well as GitHub integration. Share links with your teammates
|
||||
where everyone working on a project can examine detailed build
|
||||
logs and get insights about how to improve your project and
|
||||
build.
|
||||
Nx also supports optional free cloud support with Nx Cloud
|
||||
as well as GitHub integration. Share links with your
|
||||
teammates where everyone working on a project can examine
|
||||
detailed build logs and get insights about how to improve
|
||||
your project and build.
|
||||
</p>
|
||||
</div>
|
||||
<div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
@ -371,6 +394,24 @@ export function ReactPage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*Call out*/}
|
||||
<div className="bg-blue-nx-dark text-white overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto my-12 py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
|
||||
<h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
|
||||
<span className="block">Ready to dive in?</span>
|
||||
<span className="block">Start using Nx with React today.</span>
|
||||
</h2>
|
||||
<div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
|
||||
<div className="inline-flex rounded-md shadow">
|
||||
<Link href="/latest/react/getting-started/getting-started">
|
||||
<a className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-gray-700 bg-white">
|
||||
Get started with React
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-w-screen-lg mx-auto px-5 py-5">
|
||||
{/*Learn more*/}
|
||||
<div className="py-32 flex sm:flex-row flex-col items-start justify-center">
|
||||
@ -381,14 +422,16 @@ export function ReactPage() {
|
||||
</div>
|
||||
<div className="w-full sm:w-3/5 flex flex-col justify-between items-start sm:pl-16 sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<p className="sm:text-lg mb-6">
|
||||
To learn more about Nx and how Nx can increase your dev and build
|
||||
efficiency and modernize your apps stack, check out the following
|
||||
resources:
|
||||
To learn more about Nx and how Nx can increase your dev and
|
||||
build efficiency and modernize your apps stack, check out the
|
||||
following resources:
|
||||
</p>
|
||||
<ul className="sm:text-lg list-disc list-inside">
|
||||
<li>
|
||||
<Link href={'/latest/react/getting-started/intro'}>
|
||||
<a className="underline pointer">Nx React Documentation</a>
|
||||
<a className="underline pointer">
|
||||
Nx React Documentation
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
@ -406,8 +449,8 @@ export function ReactPage() {
|
||||
href="https://www.youtube.com/watch?v=h5FIGDn5YM0"
|
||||
target="_blank"
|
||||
>
|
||||
Nx Explainer: Dev Tools for Monorepos, In-Depth with Victor
|
||||
Savkin
|
||||
Nx Explainer: Dev Tools for Monorepos, In-Depth with
|
||||
Victor Savkin
|
||||
</a>
|
||||
</li>
|
||||
<li className="mt-4">
|
||||
@ -438,8 +481,8 @@ export function ReactPage() {
|
||||
>
|
||||
follow Nx Dev Tools on Twitter
|
||||
</a>{' '}
|
||||
to keep up with latest news, feature announcements, and resources
|
||||
from the Nx Core Team.
|
||||
to keep up with latest news, feature announcements, and
|
||||
resources from the Nx Core Team.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -447,6 +490,18 @@ export function ReactPage() {
|
||||
{/*Who is using Nx*/}
|
||||
<NxUsersShowcase />
|
||||
</div>
|
||||
</main>
|
||||
<Footer
|
||||
flavor={{
|
||||
name: storedFlavor || 'react',
|
||||
value: storedFlavor || 'react',
|
||||
}}
|
||||
version={{
|
||||
name: storedVersion || 'Latest',
|
||||
value: storedVersion || 'latest',
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
BIN
nx-dev/nx-dev/public/images/distributed-tasks.png
Normal file
BIN
nx-dev/nx-dev/public/images/distributed-tasks.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
@ -5,7 +5,12 @@ import Footer from './footer';
|
||||
|
||||
describe('Footer', () => {
|
||||
it('should render successfully', () => {
|
||||
const { baseElement } = render(<Footer />);
|
||||
const { baseElement } = render(
|
||||
<Footer
|
||||
flavor={{ name: 'react', value: 'react' }}
|
||||
version={{ name: 'latest', value: 'latest' }}
|
||||
/>
|
||||
);
|
||||
expect(baseElement).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
import Link from 'next/link';
|
||||
|
||||
export function Footer() {
|
||||
export interface FooterProps {
|
||||
version: { name: string; value: string };
|
||||
flavor: { name: string; value: string };
|
||||
}
|
||||
export function Footer({ version, flavor }: FooterProps) {
|
||||
return (
|
||||
<footer className="mt-32 text-white body-font">
|
||||
<div className="bg-blue-nx-base text-white">
|
||||
@ -37,7 +40,9 @@ export function Footer() {
|
||||
<h3 className="text-xl leading-none tracking-tight mb-4">Help</h3>
|
||||
<ul>
|
||||
<li className="mb-2">
|
||||
<Link href="/latest/react/getting-started/intro">
|
||||
<Link
|
||||
href={`/${version.value}/${flavor.value}/getting-started/intro`}
|
||||
>
|
||||
<a className="cursor-pointer block">Documentation</a>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
@ -5,7 +5,13 @@ import Header from './header';
|
||||
|
||||
describe('Header', () => {
|
||||
it('should render successfully', () => {
|
||||
const { baseElement } = render(<Header />);
|
||||
const { baseElement } = render(
|
||||
<Header
|
||||
showSearch={true}
|
||||
flavor={{ name: 'react', value: 'react' }}
|
||||
version={{ name: 'latest', value: 'latest' }}
|
||||
/>
|
||||
);
|
||||
expect(baseElement).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
@ -4,9 +4,11 @@ import { AlgoliaSearch } from '@nrwl/nx-dev/feature-search';
|
||||
|
||||
export interface HeaderProps {
|
||||
showSearch: boolean;
|
||||
flavor: { name: string; value: string } | null;
|
||||
version: { name: string; value: string } | null;
|
||||
}
|
||||
|
||||
export function Header({ showSearch }: HeaderProps) {
|
||||
export function Header({ flavor, showSearch, version }: HeaderProps) {
|
||||
return (
|
||||
<header className="h-16 px-5 py-5 flex items-center justify-between print:hidden bg-blue-nx-base">
|
||||
<div className="flex items-center justify-between w-full max-w-screen-xl mx-auto space-x-10">
|
||||
@ -49,17 +51,23 @@ export function Header({ showSearch }: HeaderProps) {
|
||||
</div>
|
||||
{/*SEARCH*/}
|
||||
<div className="hidden md:inline">
|
||||
{!!showSearch ? <AlgoliaSearch /> : null}
|
||||
{!!showSearch ? (
|
||||
<AlgoliaSearch flavorId={flavor.value} versionId={version.value} />
|
||||
) : null}
|
||||
</div>
|
||||
{/*NAVIGATION*/}
|
||||
<div className="text-sm flex-shrink-0">
|
||||
<nav className="flex items-justified justify-center space-x-1">
|
||||
<Link href="/getting-started/getting-started">
|
||||
<Link
|
||||
href={`/${version.value}/${flavor.value}/getting-started/getting-started`}
|
||||
>
|
||||
<a className="font-bold px-3 py-2 text-white leading-tight">
|
||||
Get Started
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/core-concepts/plugins">
|
||||
<Link
|
||||
href={`/${version.value}/${flavor.value}/core-concepts/plugins`}
|
||||
>
|
||||
<a className="px-3 py-2 text-white leading-tight">Plugins</a>
|
||||
</Link>
|
||||
<Link href="/community">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user