docs(core): improve visibility of CNW command on intro page

docs/shared/getting-started/installation.md

@@ -5,36 +5,34 @@ Create a new Nx workspace using the following command:
 {% tabs %}
 {% tab label="npm" %}
 
-```shell
+{% terminal-command command="npx create-nx-workspace"  /%}
-npm create nx-workspace
-```
 
 {% /tab %}
 {% tab label="yarn" %}
 
-```shell
+{% terminal-command command="npx create-nx-workspace --pm yarn"  /%}
-yarn create nx-workspace
-```
 
 {% /tab %}
 {% tab label="pnpm" %}
 
-```shell
+{% terminal-command command="npx create-nx-workspace --pm pnpm"  /%}
-pnpm create nx-workspace
-```
 
 {% /tab %}
 {% /tabs %}
 
 This will guide you through the setup, asking whether you want a monorepo or a standalone app and whether you want to start with a blank or a preconfigured setup.
 
-```{% command="npm create nx-workspace" %}
+```{% command="npx create-nx-workspace" %}
-? Choose what to create                 …
+
-Package-based monorepo: Nx makes it fast but lets you run things your way.
+ >  NX   Let's create a new workspace [https://nx.dev/getting-started/intro]
-Integrated monorepo:    Nx configures your favorite frameworks and lets you focus on shipping features.
+
-Standalone React app:   Nx configures Vite (or Webpack), ESLint, and Cypress.
+✔ Where would you like to create your workspace? · myorg
-Standalone Angular app: Nx configures Jest, ESLint, and Cypress.
+? Which stack do you want to use? …
-Standalone Node app:    Nx configures a framework (ex. Express), esbuild, ESlint and Jest.
+None:          Configures a minimal structure without specific frameworks or technologies.
+TS/JS:         Configures a TypeScript/JavaScript package without specific frameworks or platforms.
+React:         Configures a React app with your framework of choice.
+Angular:       Configures a Angular app with modern tooling.
+Node:          Configures a Node API with your framework of choice.
 ```
 
 Once you've created your workspace, you can
@@ -50,9 +48,7 @@ Learn more about [running tasks](/core-features/run-tasks).
 
 If you want to add Nx to an existing repository run:
 
-```shell
+{% terminal-command command="npx nx@latest init" /%}
-npx nx@latest init
-```
 
 You can also manually install the nx NPM package and create a [nx.json](https://nx.dev/reference/nx-json) to configure it. Learn more about [adopting Nx in an existing project](/recipes/adopting-nx)
 
@@ -63,23 +59,17 @@ You can install Nx globally. Depending on your package manager, use one of the f
 {% tabs %}
 {% tab label="npm" %}
 
-```shell
+{% terminal-command command="npm install --global nx@latest" /%}
-npm install --global nx@latest
-```
 
 {% /tab %}
 {% tab label="yarn" %}
 
-```shell
+{% terminal-command command="yarn global add nx@latest" /%}
-yarn global add nx@latest
-```
 
 {% /tab %}
 {% tab label="pnpm" %}
 
-```shell
+{% terminal-command command="pnpm install --global nx@latest" /%}
-pnpm install --global nx@latest
-```
 
 {% /tab %}
 {% /tabs %}

docs/shared/getting-started/intro.md

@@ -1,6 +1,26 @@
 # Intro to Nx
 
-Nx is a powerful open-source build system that provides tools and techniques for enhancing developer productivity, optimizing CI performance, and maintaining code quality. Learn more about [how Nx works](/getting-started/why-nx).
+Nx is a powerful open-source build system that provides tools and techniques for enhancing developer productivity, optimizing CI performance, and maintaining code quality. Find out more about [why you should use Nx](/getting-started/why-nx).
+
+If instead you want to jump right into it, run the following command. It will guide you through the setup:
+
+{% tabs %}
+{% tab label="npm" %}
+
+{% terminal-command command="npx create-nx-workspace"  /%}
+
+{% /tab %}
+{% tab label="yarn" %}
+
+{% terminal-command command="npx create-nx-workspace --pm yarn"  /%}
+
+{% /tab %}
+{% tab label="pnpm" %}
+
+{% terminal-command command="npx create-nx-workspace --pm pnpm"  /%}
+
+{% /tab %}
+{% /tabs %}
 
 You can use Nx to quickly scaffold a new standalone project or even an entire monorepo. It can be incrementally adopted and will grow with your project as it scales.
 
@@ -70,7 +90,11 @@ A modern Node server with scaffolding for Express, Fastify or Koa. There's also
 
 ## Adding Nx to an Existing Project or Monorepo
 
-Coming from an existing project and want to adopt Nx? We have a few recipes to help you get started.
+If you have an existing project and want to adopt Nx or migrate to Nx just run the following command which guides you through the migration process:
+
+{% terminal-command command="npx nx@latest init"  /%}
+
+Alternatively, here are some recipes that give you more details based on the technology stack you're using:
 
 {% cards cols="2" %}
 

nx-dev/ui-markdoc/src/index.ts

@@ -39,6 +39,10 @@ import { Tab, Tabs } from './lib/tags/tabs.component';
 import { tab, tabs } from './lib/tags/tabs.schema';
 import { YouTube } from './lib/tags/youtube.components';
 import { youtube } from './lib/tags/youtube.schema';
+import {
+  TerminalCommand,
+  terminalCommand,
+} from './lib/tags/terminal-command.component';
 
 // TODO fix this export
 export { GithubRepository } from './lib/tags/github-repository.component';
@@ -70,6 +74,7 @@ export const getMarkdocCustomConfig = (
       tabs,
       'title-card': titleCard,
       youtube,
+      'terminal-command': terminalCommand,
     },
   },
   components: {
@@ -92,6 +97,7 @@ export const getMarkdocCustomConfig = (
     Tabs,
     TitleCard,
     YouTube,
+    TerminalCommand,
   },
 });
 

nx-dev/ui-markdoc/src/lib/nodes/fences/terminal-output.component.tsx

@@ -7,7 +7,7 @@ export function TerminalOutput({
   isMessageBelow,
   path,
 }: {
-  content: ReactNode;
+  content: ReactNode | null;
   command: string;
   isMessageBelow: boolean;
   path: string;
@@ -25,19 +25,21 @@ export function TerminalOutput({
           <span className="h-2 w-2 rounded-full bg-yellow-400 dark:bg-yellow-600" />
           <span className="h-2 w-2 rounded-full bg-green-400 dark:bg-green-600" />
         </div>
-        <span>Terminal</span>
+        <span className="h-4"></span>
       </div>
       <div className="overflow-x-auto p-4 pt-2">
         <div className="flex items-center">
           <p className="mt-0.5">
+            {path && (
               <span className="text-purple-600 dark:text-fuchsia-500">
                 {path}
               </span>
+            )}
             <span className="mx-1 text-green-600 dark:text-green-400">❯</span>
           </p>
           <p className="typing mt-0.5 flex-1 pl-2">{command}</p>
         </div>
-        <div className="not-prose mt-2 flex">{content}</div>
+        <div className="not-prose flex">{content}</div>
       </div>
     </div>
   );

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

@@ -0,0 +1,33 @@
+import { Schema } from '@markdoc/markdoc';
+import { TerminalOutput } from '../nodes/fences/terminal-output.component';
+
+export const terminalCommand: Schema = {
+  render: 'TerminalCommand',
+  attributes: {
+    command: {
+      type: 'String',
+      required: true,
+    },
+    path: {
+      type: 'String',
+      required: false,
+    },
+  },
+};
+
+export function TerminalCommand({
+  command,
+  path,
+}: {
+  command: string;
+  path: string;
+}): JSX.Element {
+  return (
+    <TerminalOutput
+      command={command}
+      path={path}
+      content={null}
+      isMessageBelow={false}
+    />
+  );
+}