docs(core): dedicated node screen (#5746)
This commit is contained in:
Benjamin Cabanes
GitHub
parent
42c0ed8266
commit
038185ef6c
@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import { InlineCommand } from '@nrwl/nx-dev/ui/common';
|
||||
|
||||
export function Index() {
|
||||
return (
|
||||
@ -80,34 +81,16 @@ export function Index() {
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap space-y-4 sm:space-y-0 sm:space-x-4 text-center">
|
||||
<Link href="/react">
|
||||
<Link href="/latest/react/getting-started/getting-started">
|
||||
<a className="w-full sm:w-auto flex-none bg-blue-600 hover:bg-blue-700 text-white text-lg leading-6 font-semibold py-3 px-6 border border-transparen rounded focus:ring-2 focus: ring-offset-2 focus:ring-offset-white focus:ring-blue-700 focus:outline-none transition-colors duration-180">
|
||||
Get Started
|
||||
</a>
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
className="w-full sm:w-auto flex-none bg-white text-gray-400 hover:text-gray-900 font-mono leading-6 py-3 sm:px-6 border border-gray-200 rounded-xl flex items-center justify-center space-x-2 sm:space-x-4 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-300 focus:outline-none transition-colors duration-180"
|
||||
>
|
||||
<span className="text-gray-900">
|
||||
<span
|
||||
className="hidden sm:inline sm:mr-3 text-gray-500"
|
||||
aria-hidden="true"
|
||||
>
|
||||
$
|
||||
</span>
|
||||
npx create-nx-workspace
|
||||
</span>
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
>
|
||||
<path d="M8 16c0 1.886 0 2.828.586 3.414C9.172 20 10.114 20 12 20h4c1.886 0 2.828 0 3.414-.586C20 18.828 20 17.886 20 16v-4c0-1.886 0-2.828-.586-3.414C18.828 8 17.886 8 16 8m-8 8h4c1.886 0 2.828 0 3.414-.586C16 14.828 16 13.886 16 12V8m-8 8c-1.886 0-2.828 0-3.414-.586C4 14.828 4 13.886 4 12V8c0-1.886 0-2.828.586-3.414C5.172 4 6.114 4 8 4h4c1.886 0 2.828 0 3.414.586C16 5.172 16 6.114 16 8" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<InlineCommand
|
||||
language={'bash'}
|
||||
command={'npx create-nx-workspace'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -137,15 +120,17 @@ export function Index() {
|
||||
Angular
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
className="w-full bg-white shadow-sm hover:shadow-md transition-all ease-out duration-180 rounded py-2 px-3 space-x-1 text-base tracking-tight font-bold leading-tight text-center flex flex-col justify-center items-center px-2 py-4 space-y-4"
|
||||
>
|
||||
<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>
|
||||
</a>
|
||||
|
||||
<Link href="/node">
|
||||
<a className="w-full bg-white shadow-sm hover:shadow-md transition-all ease-out duration-180 rounded py-2 px-3 space-x-1 text-base tracking-tight font-bold leading-tight text-center flex flex-col justify-center items-center px-2 py-4 space-y-4">
|
||||
<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>
|
||||
</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 text-gray-900 tracking-tight mb-4">
|
||||
|
||||
412
nx-dev/nx-dev/pages/node.tsx
Normal file
412
nx-dev/nx-dev/pages/node.tsx
Normal file
@ -0,0 +1,412 @@
|
||||
import React from 'react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
InlineCommand,
|
||||
InteractiveSections,
|
||||
NxUsersShowcase,
|
||||
} from '@nrwl/nx-dev/ui/common';
|
||||
|
||||
export function Node() {
|
||||
const sectionItemList = [
|
||||
{
|
||||
title: 'Create Nx Plugins',
|
||||
content: [
|
||||
'Extend the power of Nx with your own custom built plugin that uses',
|
||||
'[@nrwl/devkit](https://www.npmjs.com/package/@nrwl/devkit) and',
|
||||
'[@nrwl/node](https://www.npmjs.com/package/@nrwl/node) or the',
|
||||
'[@nrwl/nx-plugin](https://www.npmjs.com/package/@nrwl/nx-plugin).',
|
||||
].join(' '),
|
||||
},
|
||||
{
|
||||
title: 'Build APIs',
|
||||
content: [
|
||||
'Use the many API frameworks that are available for Node,',
|
||||
' or use the ones provided by Nx for Express and Nest.',
|
||||
].join(' '),
|
||||
},
|
||||
{
|
||||
title: 'Open Source Tool',
|
||||
content: [
|
||||
'Create a workspace that puts emphasis on packages rather than',
|
||||
'libs and apps by using the "oss" preset with "create-nx-workspace".\n\n',
|
||||
'Use TypeScript to build out projects that can scale infinitely.',
|
||||
].join(' '),
|
||||
},
|
||||
{
|
||||
title: 'Nx Uses Computation Caching',
|
||||
content: [
|
||||
'Computation caching is a valuable way to improve performance.',
|
||||
'Computing (tests, arguments, operations, etc.) is expensive and',
|
||||
'time-consuming, but computation caching means you never have to rebuild',
|
||||
'the same code.\n\n',
|
||||
'WebPack, Jest, and TypeScript all perform computation caching.',
|
||||
'Nx builds on inspiration from Bazel and similar tools, and implements',
|
||||
'distributed computation caching in a way that works with any tool and',
|
||||
'requires no configuration. The result is much faster builds and ',
|
||||
'continuous integration.\n\n',
|
||||
'In addition, when connected to Nx Cloud, you can share the computation',
|
||||
'cache with everyone working on the same project.',
|
||||
].join(' '),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
{/*Intro component*/}
|
||||
<div className="bg-gray-50">
|
||||
<div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
|
||||
{/*1*/}
|
||||
<div className="my-32 flex sm:flex-row flex-col justify-center">
|
||||
<div className="w-full sm:w-1/2 lg:w-2/5 flex flex-col justify-between items-start sm:pb-0 pb-10 mt-8 sm:mt-0">
|
||||
<h2 className="text-3xl sm:text-3xl lg:text-5xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
|
||||
Nx and Node
|
||||
</h2>
|
||||
</div>
|
||||
<div className="w-full sm:w-1/2 lg:w-3/5 flex flex-col justify-between 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 text-gray-900 tracking-tight mb-4">
|
||||
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
|
||||
configuration can grind your work to a halt.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*What is Nx*/}
|
||||
<div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
|
||||
<div className="my-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-xl sm:text-2xl lg:text-2xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
|
||||
Nx is a smart and extensible build framework that helps you
|
||||
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...
|
||||
</p>
|
||||
<ul className="sm:text-lg list-disc list-inside">
|
||||
<li>API creation using Express and Nest</li>
|
||||
<li className="mt-4">Better linting</li>
|
||||
<li className="mt-4">Better testing</li>
|
||||
<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
|
||||
</li>
|
||||
</ul>
|
||||
</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">
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/iIh5h_G52kI"
|
||||
title="YouTube video player"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*Call out*/}
|
||||
<div className="bg-gray-50">
|
||||
<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">
|
||||
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">
|
||||
Get started with Node
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-5">
|
||||
{/*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 a Node Workspace <br />
|
||||
with Nx Nest or Express
|
||||
</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 Node workspace. If you’re
|
||||
using Nest run the following command in your Terminal or Command
|
||||
prompt:
|
||||
</p>
|
||||
|
||||
<div className="w-full">
|
||||
<InlineCommand
|
||||
language={'bash'}
|
||||
command={'npx create-nx-workspace --preset=nest'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="sm:text-lg my-6">
|
||||
For Express users, the command will be:
|
||||
</p>
|
||||
|
||||
<div className="w-full">
|
||||
<InlineCommand
|
||||
language={'bash'}
|
||||
command={'npx create-nx-workspace --preset=express'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*More info*/}
|
||||
<div className="mt-16 mb-32 flex sm:flex-row flex-col items-start 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">
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="https://www.youtube.com/embed/UcBSBQYNlhE"
|
||||
title="YouTube video player"
|
||||
frameBorder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowFullScreen
|
||||
className="w-full"
|
||||
/>
|
||||
</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.
|
||||
</p>
|
||||
<div className="inline-flex rounded-md shadow">
|
||||
<Link href="/latest/node/tutorial/01-create-application">
|
||||
<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">
|
||||
Start learning Nx with Node
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
<p className="italic sm:text-lg my-6">
|
||||
If you want to add Nx to an existing Node project,{' '}
|
||||
<Link href="/latest/node/migration/adding-to-monorepo">
|
||||
<a className="underline pointer">check out this guide</a>
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{/*Nx technology*/}
|
||||
<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-6 sm:grid-cols-2 md:grid-cols-3 gap-16 lg:gap-24">
|
||||
<img
|
||||
loading="lazy"
|
||||
className="w-full opacity-25"
|
||||
height="128"
|
||||
width="128"
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/jest.svg"
|
||||
/>
|
||||
<img
|
||||
loading="lazy"
|
||||
className="w-full opacity-25"
|
||||
height="128"
|
||||
width="128"
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/nestjs.svg"
|
||||
/>
|
||||
<img
|
||||
loading="lazy"
|
||||
className="w-full opacity-25"
|
||||
height="128"
|
||||
width="128"
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/express.svg"
|
||||
/>
|
||||
<img
|
||||
loading="lazy"
|
||||
className="w-full opacity-25"
|
||||
height="128"
|
||||
width="128"
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/typescript.svg"
|
||||
/>
|
||||
<img
|
||||
loading="lazy"
|
||||
className="w-full opacity-25"
|
||||
height="128"
|
||||
width="128"
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/eslint.svg"
|
||||
/>
|
||||
<img
|
||||
loading="lazy"
|
||||
className="w-full opacity-25"
|
||||
height="128"
|
||||
width="128"
|
||||
src="https://cdn.jsdelivr.net/npm/simple-icons@v4/icons/visualstudiocode.svg"
|
||||
/>
|
||||
</div>
|
||||
</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">
|
||||
<h3 className="text-xl sm:text-2xl lg:text-2xl leading-none font-extrabold text-gray-900 tracking-tight mb-4">
|
||||
Tools
|
||||
</h3>
|
||||
<p className="sm:text-lg mb-6">
|
||||
Nx provides excellent tooling for Node in many ways, including:
|
||||
</p>
|
||||
<ul className="sm:text-lg list-disc list-inside">
|
||||
<li>
|
||||
<a
|
||||
className="underline pointer"
|
||||
href="https://www.typescriptlang.org/"
|
||||
target="_blank"
|
||||
>
|
||||
TypeScript
|
||||
</a>{' '}
|
||||
extends JavaScript by adding types and saves you time by
|
||||
catching errors and providing fixes before you run code.
|
||||
</li>
|
||||
<li className="mt-4">
|
||||
<a
|
||||
className="underline pointer"
|
||||
href="https://jestjs.io/"
|
||||
target="_blank"
|
||||
>
|
||||
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.
|
||||
</li>
|
||||
<li className="mt-4">
|
||||
<a
|
||||
className="underline pointer"
|
||||
href="https://eslint.org/"
|
||||
target="_blank"
|
||||
>
|
||||
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.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{/*Integrated experience*/}
|
||||
<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-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">
|
||||
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.
|
||||
</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.
|
||||
</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">
|
||||
<Image
|
||||
src="/images/vscode-nxcloud-pr.png"
|
||||
alt="Nx Integrated Development Experience illustration"
|
||||
width={870}
|
||||
height={830}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/*Learn more*/}
|
||||
<div className="py-32 flex sm:flex-row flex-col items-start justify-center">
|
||||
<div className="w-full sm:w-2/5 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">
|
||||
Learn More About Nx
|
||||
</h3>
|
||||
</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:
|
||||
</p>
|
||||
<ul className="sm:text-lg list-disc list-inside">
|
||||
<li>
|
||||
<a
|
||||
className="underline pointer"
|
||||
href="https://egghead.io/playlists/scale-react-development-with-nx-4038"
|
||||
target="_blank"
|
||||
>
|
||||
Free Nx Workspaces video course
|
||||
</a>
|
||||
</li>
|
||||
<li className="mt-4">
|
||||
<a
|
||||
className="underline pointer"
|
||||
href="https://www.youtube.com/watch?v=h5FIGDn5YM0"
|
||||
target="_blank"
|
||||
>
|
||||
Nx Explainer: Dev Tools for Monorepos, In-Depth with Victor
|
||||
Savkin
|
||||
</a>
|
||||
</li>
|
||||
<li className="mt-4">
|
||||
<a
|
||||
className="underline pointer"
|
||||
href="https://go.nrwl.io/nx-office-hours"
|
||||
target="_blank"
|
||||
>
|
||||
Tune into regular Nx Office Hours livestreams
|
||||
</a>
|
||||
</li>
|
||||
<li className="mt-4">
|
||||
<a
|
||||
className="underline pointer"
|
||||
href="https://nx.app"
|
||||
target="_blank"
|
||||
>
|
||||
Nx Cloud
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="sm:text-lg mt-6">
|
||||
You can also{' '}
|
||||
<a
|
||||
className="underline pointer"
|
||||
href="https://twitter.com/NxDevTools"
|
||||
target="_blank"
|
||||
>
|
||||
follow Nx Dev Tools on Twitter
|
||||
</a>{' '}
|
||||
to keep up with latest news, feature announcements, and resources
|
||||
from the Nx Core Team.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/*Who is using Nx*/}
|
||||
<NxUsersShowcase />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Node;
|
||||
BIN
nx-dev/nx-dev/public/images/nx-users/Accenture.png
Normal file
BIN
nx-dev/nx-dev/public/images/nx-users/Accenture.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
nx-dev/nx-dev/public/images/nx-users/AmericanAirlines.png
Normal file
BIN
nx-dev/nx-dev/public/images/nx-users/AmericanAirlines.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
nx-dev/nx-dev/public/images/nx-users/Anthem.png
Normal file
BIN
nx-dev/nx-dev/public/images/nx-users/Anthem.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
nx-dev/nx-dev/public/images/nx-users/Audi.png
Normal file
BIN
nx-dev/nx-dev/public/images/nx-users/Audi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
nx-dev/nx-dev/public/images/nx-users/BlackRock.png
Normal file
BIN
nx-dev/nx-dev/public/images/nx-users/BlackRock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
nx-dev/nx-dev/public/images/nx-users/CapitalOne.png
Normal file
BIN
nx-dev/nx-dev/public/images/nx-users/CapitalOne.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
nx-dev/nx-dev/public/images/nx-users/Cigna.png
Normal file
BIN
nx-dev/nx-dev/public/images/nx-users/Cigna.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
nx-dev/nx-dev/public/images/nx-users/Cisco.png
Normal file
BIN
nx-dev/nx-dev/public/images/nx-users/Cisco.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
nx-dev/nx-dev/public/images/nx-users/Datasite.png
Normal file
BIN
nx-dev/nx-dev/public/images/nx-users/Datasite.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 982 B |
BIN
nx-dev/nx-dev/public/images/nx-users/FICO.png
Normal file
BIN
nx-dev/nx-dev/public/images/nx-users/FICO.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
nx-dev/nx-dev/public/images/nx-users/FedEx.png
Normal file
BIN
nx-dev/nx-dev/public/images/nx-users/FedEx.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
nx-dev/nx-dev/public/images/nx-users/GM.png
Normal file
BIN
nx-dev/nx-dev/public/images/nx-users/GM.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 764 B |
BIN
nx-dev/nx-dev/public/images/nx-users/Microsoft.png
Normal file
BIN
nx-dev/nx-dev/public/images/nx-users/Microsoft.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
nx-dev/nx-dev/public/images/nx-users/RedHat.png
Normal file
BIN
nx-dev/nx-dev/public/images/nx-users/RedHat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
nx-dev/nx-dev/public/images/nx-users/SatcomDirect.png
Normal file
BIN
nx-dev/nx-dev/public/images/nx-users/SatcomDirect.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
nx-dev/nx-dev/public/images/nx-users/TMobile.png
Normal file
BIN
nx-dev/nx-dev/public/images/nx-users/TMobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
nx-dev/nx-dev/public/images/nx-users/Viacom.png
Normal file
BIN
nx-dev/nx-dev/public/images/nx-users/Viacom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
nx-dev/nx-dev/public/images/vscode-nxcloud-pr.png
Normal file
BIN
nx-dev/nx-dev/public/images/vscode-nxcloud-pr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 928 KiB |
@ -13,6 +13,25 @@ svg {
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/*
|
||||
General CSS rules for markdown iframes and img
|
||||
*/
|
||||
iframe[src*='youtube'] {
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.prose iframe,
|
||||
.prose img {
|
||||
display: block;
|
||||
margin: 1.7rem auto;
|
||||
max-width: 560px;
|
||||
}
|
||||
.prose iframe {
|
||||
width: 100%;
|
||||
}
|
||||
.prose img {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
/*
|
||||
Code embed
|
||||
*/
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
export * from './lib/header';
|
||||
export * from './lib/footer';
|
||||
export * from './lib/selector';
|
||||
export * from './lib/inline-command';
|
||||
export * from './lib/interactive-sections';
|
||||
export * from './lib/nx-users-showcase';
|
||||
|
||||
13
nx-dev/ui/common/src/lib/inline-command.spec.tsx
Normal file
13
nx-dev/ui/common/src/lib/inline-command.spec.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
import InlineCommand from './inline-command';
|
||||
|
||||
describe('InlineCommand', () => {
|
||||
it('should render successfully', () => {
|
||||
const { baseElement } = render(
|
||||
<InlineCommand command={'npx create-nx-workspace'} language={'bash'} />
|
||||
);
|
||||
expect(baseElement).toBeTruthy();
|
||||
});
|
||||
});
|
||||
52
nx-dev/ui/common/src/lib/inline-command.tsx
Normal file
52
nx-dev/ui/common/src/lib/inline-command.tsx
Normal file
@ -0,0 +1,52 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import SyntaxHighlighter from 'react-syntax-highlighter';
|
||||
import { CopyToClipboard } from 'react-copy-to-clipboard';
|
||||
|
||||
/* eslint-disable-next-line */
|
||||
export interface InlineCommandProps {
|
||||
language: string;
|
||||
command: string;
|
||||
}
|
||||
|
||||
export function InlineCommand({ language, command }: InlineCommandProps) {
|
||||
const [copied, setCopied] = useState(false);
|
||||
useEffect(() => {
|
||||
let t: NodeJS.Timeout;
|
||||
if (copied) {
|
||||
t = setTimeout(() => {
|
||||
setCopied(false);
|
||||
}, 3000);
|
||||
}
|
||||
return () => {
|
||||
t && clearTimeout(t);
|
||||
};
|
||||
}, [copied]);
|
||||
return (
|
||||
<div className="relative">
|
||||
<CopyToClipboard text={command} onCopy={() => setCopied(true)}>
|
||||
<button
|
||||
type="button"
|
||||
className="max-w-full text-sm flex-none bg-white text-gray-400 hover:text-gray-900 font-mono leading-6 py-1 sm:px-3 border border-gray-200 rounded-xl flex items-center justify-center space-x-2 sm:space-x-4 focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-gray-300 focus:outline-none transition-colors duration-180"
|
||||
>
|
||||
<span className="overflow-auto flex items-center text-gray-900">
|
||||
<span className="hidden sm:inline text-gray-500" aria-hidden="true">
|
||||
$
|
||||
</span>
|
||||
<SyntaxHighlighter
|
||||
showLineNumbers={false}
|
||||
useInlineStyles={false}
|
||||
language={language}
|
||||
children={command}
|
||||
style={'padding: 0;'}
|
||||
/>
|
||||
</span>
|
||||
<svg width="24" height="24" fill="none" stroke="currentColor">
|
||||
<path d="M8 16c0 1.886 0 2.828.586 3.414C9.172 20 10.114 20 12 20h4c1.886 0 2.828 0 3.414-.586C20 18.828 20 17.886 20 16v-4c0-1.886 0-2.828-.586-3.414C18.828 8 17.886 8 16 8m-8 8h4c1.886 0 2.828 0 3.414-.586C16 14.828 16 13.886 16 12V8m-8 8c-1.886 0-2.828 0-3.414-.586C4 14.828 4 13.886 4 12V8c0-1.886 0-2.828.586-3.414C5.172 4 6.114 4 8 4h4c1.886 0 2.828 0 3.414.586C16 5.172 16 6.114 16 8" />
|
||||
</svg>
|
||||
</button>
|
||||
</CopyToClipboard>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default InlineCommand;
|
||||
13
nx-dev/ui/common/src/lib/interactive-sections.spec.tsx
Normal file
13
nx-dev/ui/common/src/lib/interactive-sections.spec.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
import InteractiveSections from './interactive-sections';
|
||||
|
||||
// Mocking matchMedia
|
||||
global.matchMedia = () => void 0;
|
||||
|
||||
describe('InteractiveSections', () => {
|
||||
it('should render successfully', () => {
|
||||
const { baseElement } = render(<InteractiveSections itemList={[]} />);
|
||||
expect(baseElement).toBeTruthy();
|
||||
});
|
||||
});
|
||||
80
nx-dev/ui/common/src/lib/interactive-sections.tsx
Normal file
80
nx-dev/ui/common/src/lib/interactive-sections.tsx
Normal file
@ -0,0 +1,80 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useMediaQuery } from './media-query';
|
||||
import gfm from 'remark-gfm';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
|
||||
/* eslint-disable-next-line */
|
||||
export interface InteractiveSectionsProps {
|
||||
itemList: {
|
||||
title: string;
|
||||
content: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
export function InteractiveSections({ itemList }: InteractiveSectionsProps) {
|
||||
const [selectedItem, setSelectedItem] = useState(0);
|
||||
const isLargeLayout = useMediaQuery('(min-width: 1024px)');
|
||||
return (
|
||||
<section className="my-32 flex sm:flex-row flex-col items-center justify-center">
|
||||
<div className="w-full hidden lg:w-2/6 lg:flex flex-col justify-between items-start lg:pb-0 pb-10 mt-8 lg:mt-0">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="hidden"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
id="selectionArrow"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M13 7l5 5m0 0l-5 5m5-5H6"
|
||||
/>
|
||||
</svg>
|
||||
{itemList.map((item, index) => (
|
||||
<h2
|
||||
key={item.title}
|
||||
onClick={() => setSelectedItem(index)}
|
||||
className="group text-2xl leading-none font-extrabold text-gray-900 tracking-tight py-4 my-2 flex cursor-pointer"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={
|
||||
selectedItem === index
|
||||
? 'h-6 w-6 mr-2'
|
||||
: 'h-6 w-6 mr-2 invisible group-hover:visible'
|
||||
}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<use xlinkHref="#selectionArrow" />
|
||||
</svg>
|
||||
{item.title}
|
||||
</h2>
|
||||
))}
|
||||
</div>
|
||||
<div className="w-full lg:w-4/6 flex flex-col justify-between items-start lg:pl-16 lg:pb-0 pb-10 mt-8 lg:mt-0">
|
||||
{itemList.map((item, index) => (
|
||||
<div
|
||||
key={item.title}
|
||||
hidden={selectedItem !== index && isLargeLayout}
|
||||
className="py-6"
|
||||
>
|
||||
<h2 className="text-xl lg:hidden leading-none font-extrabold text-gray-900 tracking-tight mb-4">
|
||||
{item.title}
|
||||
</h2>
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[gfm]}
|
||||
children={item.content}
|
||||
className="prose text-gray-500 sm:text-lg"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default InteractiveSections;
|
||||
22
nx-dev/ui/common/src/lib/media-query.ts
Normal file
22
nx-dev/ui/common/src/lib/media-query.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
declare const window: any;
|
||||
|
||||
export function useMediaQuery(query: string): boolean {
|
||||
const [matches, setMatches] = useState(false);
|
||||
useEffect(() => {
|
||||
if (!window || !('matchMeda' in window)) return () => setMatches(false);
|
||||
|
||||
const media = window.matchMedia(query);
|
||||
if (media.matches !== matches) {
|
||||
setMatches(media.matches);
|
||||
}
|
||||
const listener = () => {
|
||||
setMatches(media.matches);
|
||||
};
|
||||
media.addListener(listener);
|
||||
return () => media.removeListener(listener);
|
||||
}, [matches, query]);
|
||||
|
||||
return matches;
|
||||
}
|
||||
11
nx-dev/ui/common/src/lib/nx-users-showcase.spec.tsx
Normal file
11
nx-dev/ui/common/src/lib/nx-users-showcase.spec.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
import NxUsersShowcase from './nx-users-showcase';
|
||||
|
||||
describe('NxUsersShowcase', () => {
|
||||
it('should render successfully', () => {
|
||||
const { baseElement } = render(<NxUsersShowcase />);
|
||||
expect(baseElement).toBeTruthy();
|
||||
});
|
||||
});
|
||||
128
nx-dev/ui/common/src/lib/nx-users-showcase.tsx
Normal file
128
nx-dev/ui/common/src/lib/nx-users-showcase.tsx
Normal file
@ -0,0 +1,128 @@
|
||||
export function NxUsersShowcase() {
|
||||
return (
|
||||
<div className="max-w-screen xl:max-w-screen-xl mx-auto px-5 py-32">
|
||||
<div className="flex sm:flex-row flex-col justify-center">
|
||||
<div className="w-full py-6 mt-8">
|
||||
<h2 className="text-xl sm:text-2xl lg:text-3xl leading-none font-extrabold text-gray-900 tracking-tight mb-4 text-center">
|
||||
Who's using Nx?
|
||||
</h2>
|
||||
<p className="sm:w-2/3 sm:mx-auto text-center sm:text-lg">
|
||||
The world’s leading companies use and love Nx.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid items-center justify-items-center grid-cols-3 md:grid-cols-6 gap-8">
|
||||
<img
|
||||
className="opacity-60"
|
||||
src="/images/nx-users/Accenture.png"
|
||||
width={130}
|
||||
height={45}
|
||||
/>
|
||||
<img
|
||||
className="opacity-60"
|
||||
src="/images/nx-users/AmericanAirlines.png"
|
||||
width={140}
|
||||
height={50}
|
||||
/>
|
||||
<img
|
||||
className="opacity-60"
|
||||
src="/images/nx-users/AmericanTireDistributors.png"
|
||||
width={80}
|
||||
height={50}
|
||||
/>
|
||||
<img
|
||||
className="opacity-60"
|
||||
src="/images/nx-users/Anthem.png"
|
||||
width={95}
|
||||
height={80}
|
||||
/>
|
||||
<img
|
||||
className="opacity-60"
|
||||
src="/images/nx-users/Audi.png"
|
||||
width={60}
|
||||
height={50}
|
||||
/>
|
||||
<img
|
||||
className="opacity-60"
|
||||
src="/images/nx-users/BlackRock.png"
|
||||
width={100}
|
||||
height={50}
|
||||
/>
|
||||
<img
|
||||
className="opacity-60"
|
||||
src="/images/nx-users/CapitalOne.png"
|
||||
width={95}
|
||||
height={50}
|
||||
/>
|
||||
<img
|
||||
className="opacity-60"
|
||||
src="/images/nx-users/Cigna.png"
|
||||
width={100}
|
||||
height={50}
|
||||
/>
|
||||
<img
|
||||
className="opacity-60"
|
||||
src="/images/nx-users/Cisco.png"
|
||||
width={70}
|
||||
height={50}
|
||||
/>
|
||||
<img
|
||||
className="opacity-60"
|
||||
src="/images/nx-users/Datasite.png"
|
||||
width={100}
|
||||
height={50}
|
||||
/>
|
||||
<img
|
||||
className="opacity-60"
|
||||
src="/images/nx-users/FedEx.png"
|
||||
width={95}
|
||||
height={50}
|
||||
/>
|
||||
<img
|
||||
className="opacity-60"
|
||||
src="/images/nx-users/FICO.png"
|
||||
width={65}
|
||||
height={50}
|
||||
/>
|
||||
<img
|
||||
className="opacity-60"
|
||||
src="/images/nx-users/GM.png"
|
||||
width={40}
|
||||
height={50}
|
||||
/>
|
||||
<img
|
||||
className="opacity-60"
|
||||
src="/images/nx-users/Microsoft.png"
|
||||
width={85}
|
||||
height={50}
|
||||
/>
|
||||
<img
|
||||
className="opacity-60"
|
||||
src="/images/nx-users/RedHat.png"
|
||||
width={110}
|
||||
height={50}
|
||||
/>
|
||||
<img
|
||||
className="opacity-60"
|
||||
src="/images/nx-users/SatcomDirect.png"
|
||||
width={75}
|
||||
height={50}
|
||||
/>
|
||||
<img
|
||||
className="opacity-60"
|
||||
src="/images/nx-users/TMobile.png"
|
||||
width={125}
|
||||
height={50}
|
||||
/>
|
||||
<img
|
||||
className="opacity-60"
|
||||
src="/images/nx-users/Viacom.png"
|
||||
width={95}
|
||||
height={50}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default NxUsersShowcase;
|
||||
@ -3,7 +3,8 @@
|
||||
"compilerOptions": {
|
||||
"outDir": "../../../../dist/out-tsc",
|
||||
"module": "commonjs",
|
||||
"types": ["jest", "node"]
|
||||
"types": ["jest", "node"],
|
||||
"lib": ["DOM"]
|
||||
},
|
||||
"include": [
|
||||
"**/*.spec.ts",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user