feat(nxdev): allow to change columns on cards (#13522)

docs/map.json

@@ -29,14 +29,14 @@
               "file": "shared/npm-tutorial/integrated"
             },
             {
-              "name": "React Tutorial",
+              "name": "React Standalone Tutorial",
-              "id": "react-tutorial",
+              "id": "react-standalone-tutorial",
-              "file": "shared/react-tutorial/1-code-generation"
+              "file": "shared/react-standalone-tutorial/1-code-generation"
             },
             {
-              "name": "Angular Tutorial",
+              "name": "Angular Standalone Tutorial",
-              "id": "angular-tutorial",
+              "id": "angular-standalone-tutorial",
-              "file": "shared/angular-tutorial/1-code-generation"
+              "file": "shared/angular-standalone-tutorial/1-code-generation"
             },
             {
               "name": "Node Tutorial",
@@ -83,7 +83,7 @@
           ]
         },
         {
-          "name": "React Tutorial",
+          "name": "React Monorepo Tutorial",
           "id": "react-tutorial",
           "description": "In this tutorial you'll create a frontend-focused workspace with Nx.",
           "itemList": [
@@ -147,7 +147,7 @@
           ]
         },
         {
-          "name": "Angular Tutorial",
+          "name": "Angular Monorepo Tutorial",
           "id": "angular-tutorial",
           "description": "Learn to use Nx with this Angular tutorial where you will learn about all its main feature with a real project.",
           "itemList": [
@@ -179,7 +179,7 @@
           ]
         },
         {
-          "name": "Angular Standalon Tutorial",
+          "name": "Angular Standalone Tutorial",
           "id": "angular-standalone-tutorial",
           "description": "Learn to use Nx with this Angular tutorial where you will learn about all its main feature with a real project.",
           "itemList": [

docs/shared/angular-standalone-tutorial/1-code-generation.md

@@ -6,7 +6,7 @@ description: In this tutorial you'll create a frontend-focused workspace with Nx
 {% callout type="check" title="Standalone Repo" %}
 This tutorial sets up a repo with a single application at the root level that breaks out its code into libraries to add structure.
 
-You can find more information on about other repo styles in [our introduction](/getting-started/intro).
+Looking for a Angular monorepo setup? Check our [Angular monorepo tutorial](/angular-tutorial/1-code-generation).
 {% /callout %}
 
 # Angular Standalone Tutorial - Part 1: Code Generation

docs/shared/angular-tutorial/1-code-generation.md

@@ -1,5 +1,5 @@
 ---
-title: 'Angular Tutorial - Part 1: Code Generation'
+title: 'Angular Monorepo Tutorial - Part 1: Code Generation'
 description: In this tutorial you'll create a frontend-focused workspace with Nx.
 ---
 
@@ -9,7 +9,7 @@ There are two styles of repos: integrated and package-based. This tutorial shows
 You can find more information on the difference between the two in [our introduction](/getting-started/intro).
 {% /callout %}
 
-# Angular Tutorial - Part 1: Code Generation
+# Angular Monorepo Tutorial - Part 1: Code Generation
 
 ## Contents
 

docs/shared/angular-tutorial/2-project-graph.md

@@ -1,4 +1,4 @@
-# Angular Tutorial - Part 2: Project Graph
+# Angular Monorepo Tutorial - Part 2: Project Graph
 
 Run the command: `npx nx graph`. A browser should open up with the following contents:
 

docs/shared/angular-tutorial/3-task-running.md

@@ -1,4 +1,4 @@
-# Angular Tutorial - 3: Task-Running
+# Angular Monorepo Tutorial - 3: Task-Running
 
 Common tasks include:
 

docs/shared/angular-tutorial/4-workspace-optimization.md

@@ -1,4 +1,4 @@
-# Angular Tutorial - Part 4: Workspace Optimization
+# Angular Monorepo Tutorial - Part 4: Workspace Optimization
 
 ## Testing Affected Projects
 

docs/shared/angular-tutorial/5-summary.md

@@ -1,4 +1,4 @@
-# Angular Tutorial - Part 5: Summary
+# Angular Monorepo Tutorial - Part 5: Summary
 
 In this tutorial you:
 

docs/shared/core-tutorial/01-create-blog.md

@@ -3,7 +3,7 @@
 In this tutorial you create multiple projects in a monorepo and take advantage of the core Nx features with a minimum of configuration.
 
 {% callout type="check" title="Package-Based Repo" %}
-This tutorial sets up a [package-based repo](/concepts/integrated-vs-package-based). If you prefer an [integrated repo](/concepts/integrated-vs-package-based), check out the [React](/getting-started/react-tutorial), [Angular](/getting-started/angular-tutorial) or [Node](/getting-started/node-tutorial) tutorials.
+This tutorial sets up a [package-based repo](/concepts/integrated-vs-package-based). If you prefer an [integrated repo](/concepts/integrated-vs-package-based), check out the [React](/react-tutorial/1-code-generation), [Angular](/angular-tutorial/1-code-generation) or [Node](/getting-started/node-tutorial) tutorials.
 {% /callout %}
 
 ## Contents:

docs/shared/getting-started/intro.md

@@ -18,41 +18,54 @@ Get a pre-configured setup. Nx configures your favorite frameworks and lets you
 
 {% /persona %}
 
-{% persona type="lerna" title="Add to an Existing Monorepo" url="/recipes/adopting-nx/adding-to-monorepo" %}
+{% persona type="react" title="Create a Standalone React app" url="/getting-started/react-standalone-tutorial" %}
 
-Incrementally add Nx to your repo and enjoy faster CI runs and local development. All without modifying your existing setup.
+A modern React setup with built-in support for Vite, ESLint, Cypress and more. Think CRA but modern, always up-to-date and scalable.
 
-- [Add Nx to an Existing Monorepo](/recipes/adopting-nx/adding-to-monorepo)
+- [Create a Standalone React app](/getting-started/react-standalone-tutorial)
 
 {% /persona %}
 
-{% persona type="angular" title="Enter Modern Angular" url="/recipes/adopting-nx/migration-angular" %}
+{% persona type="angular" title="Create a Standalone Angular app" url="/getting-started/angular-standalone-tutorial" %}
-Enhance your Angular development experience by leveraging its advanced generators and integrations with modern tooling.
 
-- [Switch from the Angular CLI to Nx](/recipes/adopting-nx/migration-angular)
+A modern Angular development experience powered by advanced generators and integrations with modern tooling.
+
+- [Create a Standalone Angular app](/getting-started/angular-standalone-tutorial)
 
 {% /persona %}
+
 {% /personas %}
 
+## Adopting Nx
+
+Coming from an existing project and want to adopt Nx? We have a few recipes to help you get started.
+
+{% cards cols="4" %}
+
+{% card title="Add to Existing Monorepo" description="Add Nx to your existing NPM/YARN/PNPM workspace" type="documentation" url="/recipes/adopting-nx/adding-to-monorepo" /%}
+
+{% card title="Add to any Project" description="Add Nx to an standalone project" type="documentation" url="/recipes/adopting-nx/adding-to-existing-project" /%}
+
+{% card title="Migrate from CRA" description="Migrate from a CRA setup and automatically switch to Vite" type="documentation" url="/recipes/adopting-nx/migration-cra" /%}
+
+{% card title="Migrate from Angular CLI" description="Automatically migrate from the Angular CLI" type="documentation" url="/recipes/adopting-nx/migration-angular" /%}
+
+{% /cards %}
+
+## Why Nx?
+
+Nx has two main goals:
+
+- **Speed up your existing workflow with minimum effort.**
+- **Provide a first-rate developer experience no matter the size of the repo.**
+
+It achieves speed that via [computation caching](/core-features/cache-task-results), by only [run tasks affected by a given change](/core-features/run-tasks#run-tasks-affected-by-a-pr) and by being able to [distribute your task execution](/core-features/distribute-task-execution) across multiple agents in CI.
+
+High quality DX is implemented via [code generators](/plugin-features/use-code-generators), [IDE extensions](/core-features/integrate-with-editors#integrate-with-editors) and by helping you [keep your codebase evergreen](/core-features/automate-updating-dependencies).
+
+## How does Nx compare to other tools?
+
 If you know other tools in the monorepo space, here is how Nx compares:
 
 - [Monorepo.tools](https://monorepo.tools)
 - [Nx and Turborepo](/more-concepts/turbo-and-nx)
-
-## Nx Has Two Goals
-
-**Speed up your existing workflow with minimum effort.**
-
-- Never rebuild the same code twice by [caching task results](/core-features/cache-task-results).
-- Only [run tasks affected by the current PR](/core-features/run-tasks#run-tasks-affected-by-a-pr).
-- [Distribute your task execution](/core-features/distribute-task-execution) across multiple agents in CI.
-
-These features can be enabled without touching your existing workflows if you use Nx with a [package-based repo](/concepts/integrated-vs-package-based).
-
-**Provide a first-rate developer experience no matter the size of the repo:**
-
-- Encode common coding tasks in [code generators](/plugin-features/use-code-generators) to make them easily repeatable.
-- Offload the maintenance burden of [updating dependencies and configuration files](/core-features/automate-updating-dependencies) to the Nrwl team.
-- [Enforce project boundaries](/core-features/enforce-project-boundaries) based on your own organization structure.
-
-These features and the [integrated repository](/concepts/integrated-vs-package-based) mindset allow large teams to collaborate in a single monorepo without getting in each other's way.

docs/shared/migration/adding-to-existing-project.md

@@ -80,12 +80,6 @@ Here's an example of a `build` and `lint` script being wrapped by Nx:
   "devDependencies": {
     ...
     "nx": "15.3.0"
-  },
-  "nx": {
-    "includeScripts": [
-      "build",
-      "lint"
-    ]
   }
 }
 ```

docs/shared/react-standalone-tutorial/1-code-generation.md

@@ -6,7 +6,8 @@ description: In this tutorial you'll create a frontend-focused workspace with Nx
 {% callout type="check" title="Standalone Repo" %}
 This tutorial sets up a repo with a single application at the root level that breaks out its code into libraries to add structure.
 
-You can find more information on about other repo styles in [our introduction](/getting-started/intro).
+Looking for a React monorepo setup? Check our [React monorepo tutorial](/react-tutorial/1-code-generation).
+
 {% /callout %}
 
 # React Standalone Tutorial - Part 1: Code Generation

docs/shared/react-tutorial/1-code-generation.md

@@ -1,5 +1,5 @@
 ---
-title: 'React Tutorial - Part 1: Code Generation'
+title: 'React Monorepo Tutorial - Part 1: Code Generation'
 description: In this tutorial you'll create a frontend-focused workspace with Nx.
 ---
 
@@ -9,7 +9,7 @@ There are two styles of repos: integrated and package-based. This tutorial shows
 You can find more information on the difference between the two in [our introduction](/getting-started/intro).
 {% /callout %}
 
-# React Tutorial - Part 1: Code Generation
+# React Monorepo Tutorial - Part 1: Code Generation
 
 ## Contents
 

docs/shared/react-tutorial/2-project-graph.md

@@ -1,4 +1,4 @@
-# React Tutorial - Part 2: Project Graph
+# React Monorepo Tutorial - Part 2: Project Graph
 
 Run the command: `npx nx graph`. A browser should open up with the following contents:
 

docs/shared/react-tutorial/3-task-running.md

@@ -1,4 +1,4 @@
-# React Tutorial - 3: Task-Running
+# React Monorepo Tutorial - 3: Task-Running
 
 Common tasks include:
 

docs/shared/react-tutorial/4-workspace-optimization.md

@@ -1,4 +1,4 @@
-# React Tutorial - Part 4: Workspace Optimization
+# React Monorepo Tutorial - Part 4: Workspace Optimization
 
 ## Testing Affected Projects
 

docs/shared/react-tutorial/5-summary.md

@@ -1,4 +1,4 @@
-# React Tutorial - Part 5: Summary
+# React Monorepo Tutorial - Part 5: Summary
 
 In this tutorial you:
 

docs/shared/vite-plugin.md

@@ -1,9 +1,5 @@
 The Nx plugin for [Vite](https://vitejs.dev/) and [Vitest](https://vitest.dev/).
 
-{% callout type="warning" title="Early release plugin" %}
-This Nx plugin is in active development and may not be ready for real-world use. The planned release date for the stable plugin is December, 2022.
-{% /callout %}
-
 [Vite.js](https://vitejs.dev/) is a build tool that aims to provide a faster and leaner development experience for modern web projects.
 
 Why should you use this plugin?

nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx

@@ -6,9 +6,24 @@ import {
 } from '@heroicons/react/24/outline';
 import { ReactNode } from 'react';
 
-export function Cards({ children }: { children: ReactNode }) {
+export function Cards({
+  cols = 2,
+  children,
+}: {
+  cols: number;
+  children: ReactNode;
+}) {
+  const gridColums: { [key: number]: string } = {
+    1: 'lg:grid-cols-1',
+    2: 'lg:grid-cols-2',
+    3: 'lg:grid-cols-3',
+    4: 'lg:grid-cols-4',
+  };
+
   return (
-    <div className="not-prose mt-8 grid grid-cols-1 gap-6 lg:grid-cols-2">
+    <div
+      className={`not-prose mt-8 grid grid-cols-1 gap-6 ${gridColums[cols]}`}
+    >
       {children}
     </div>
   );
@@ -39,11 +54,12 @@ export function Card({
   return (
     <div
       key={title}
-      className="group relative flex items-center rounded-md border border-slate-200 bg-slate-50/40 pr-8 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800"
+      className="group relative flex rounded-md border border-slate-200 bg-slate-50/40 pr-8 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800"
     >
       {!!hasYoutubeId && (
         <img
           className="!m-0 aspect-video rounded-md"
+          alt="Youtube Link"
           src={`https://img.youtube.com/vi/${hasYoutubeId}/default.jpg`}
         />
       )}

nx-dev/ui-markdoc/src/lib/tags/cards.schema.ts

@@ -2,7 +2,12 @@ import { Schema } from '@markdoc/markdoc';
 
 export const cards: Schema = {
   render: 'Cards',
-  attributes: {},
+  attributes: {
+    cols: {
+      type: 'Number',
+      description: 'The number of colums per row',
+    },
+  },
 };
 
 export const card: Schema = {

nx-dev/ui-markdoc/src/lib/tags/personas.component.tsx

@@ -16,6 +16,7 @@ type PersonaType =
   | 'distribute'
   | 'javascript'
   | 'lerna'
+  | 'react'
   | 'angular'
   | 'integrated';
 const typeMap: Record<
@@ -106,6 +107,19 @@ const typeMap: Record<
       </div>
     ),
   },
+  react: {
+    image: (
+      <svg
+        role="img"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        className="h-6 w-6"
+      >
+        <path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
+      </svg>
+    ),
+  },
   angular: {
     image: (
       <svg