docs(core): restructure & update intro page

Co-authored-by: Isaac Mann <[email protected]>

docs/README.md

@@ -201,7 +201,7 @@ Yarn related information.
 
 ##### Youtube
 
-Embed a YouTube video directly with the following shortcode, control the title and the associated width.
+Embed a YouTube video directly with the following shortcode, control the title and the associated width. `src` can be the Youtube URL from the browser, the "share" button (short YT url) or the embed URL.
 
 ```markdown
 {% youtube

docs/changelog/15_0_0.md

@@ -4,16 +4,21 @@
 
 Here are some of our feature highlights:
 
-{% cards cols="2" %}
-{% card title="Combine the Power of Nx Graph and Nx Console"  type="video" url="https://youtu.be/ZST_rmhzRXI" /%}
-{% /cards %}
+{% youtube
+src="https://youtu.be/ZST_rmhzRXI"
+title="Nx Console Run UI Form"
+width="100%" /%}
 
 ## Breaking Changes
 
 Use [the `nx migrate` command](/core-features/automate-updating-dependencies) to automatically account for these breaking changes.
 
-{% cards cols="2" %}
+{% cards cols="1" smCols="2" mdCols="3" %}
+
 {% card title="Removed UMD format support for rollup" type="external" url="https://github.com/nrwl/nx/pull/12426" /%}
+
 {% card title="Removed --only-failed option" type="external" url="https://github.com/nrwl/nx/pull/12471" /%}
+
 {% card title="Infer projects from package.json and project.json" description="Nx will now also include folders with package.json/project.json in its graph of projects. You can ignore any unwanted projects by adding the directory to .nxignore." type="external" url="https://github.com/nrwl/nx/releases/tag/15.0.0" /%}
+
 {% /cards %}

docs/changelog/15_3_0.md

@@ -8,7 +8,7 @@ title="What's new in Nx 15.3?"
 /%}
 Here are some of our feature highlights:
 
-{% cards cols="2" %}
+{% cards cols="1" smCols="2" mdCols="2" lgCols="3" %}
 {% card title="Introducing the Nx Task Graph Visualization"  type="video" url="https://youtu.be/wOE3r4299fs" /%}
 {% card title="Standalone Applications with Nx"  type="video" url="https://youtu.be/qEaVzh-oBBc" /%}
 {% card title="Add Nx to any Project"  type="video" url="https://youtu.be/VmGCZ77ao_I" /%}

docs/changelog/15_4_0.md

@@ -9,6 +9,6 @@ title="Nx 15.4 is out! Here's all you need to know"
 
 Here are some of our feature highlights:
 
-{% cards cols="2" %}
+{% cards cols="2" smCol="2" mdCol="2" lgCol="2" %}
 {% card title="One Command to Run Multiple Tasks in Parallel"  type="video" url="https://youtu.be/ROTO89i5m_4" /%}
 {% /cards %}

docs/generated/manifests/menus.json

@@ -33,7 +33,7 @@
             "disableCollapsible": false
           },
           {
-            "name": "5 min Tutorials",
+            "name": "Tutorials",
             "path": "/getting-started/tutorials",
             "id": "tutorials",
             "isExternal": false,
@@ -109,7 +109,7 @@
         "disableCollapsible": false
       },
       {
-        "name": "5 min Tutorials",
+        "name": "Tutorials",
         "path": "/getting-started/tutorials",
         "id": "tutorials",
         "isExternal": false,

docs/generated/manifests/nx.json

@@ -37,7 +37,7 @@
       },
       {
         "id": "tutorials",
-        "name": "5 min Tutorials",
+        "name": "Tutorials",
         "description": "Get started with basic information, concepts and tutorials.",
         "file": "",
         "itemList": [
@@ -133,7 +133,7 @@
   },
   "/getting-started/tutorials": {
     "id": "tutorials",
-    "name": "5 min Tutorials",
+    "name": "Tutorials",
     "description": "Get started with basic information, concepts and tutorials.",
     "file": "",
     "itemList": [

docs/map.json

@@ -29,7 +29,7 @@
               "file": "shared/getting-started/why-nx"
             },
             {
-              "name": "5 min Tutorials",
+              "name": "Tutorials",
               "id": "tutorials",
               "description": "Get started with basic information, concepts and tutorials.",
               "itemList": [

docs/nx-cloud/intro/nx-cloud.md

@@ -1,5 +1,10 @@
 # What is Nx Cloud?
 
+{% youtube
+src="https://www.youtube.com/embed/NZF0ZJpgaJM?si=1KJRAWJJmfw9c0c0"
+title="What is Nx Cloud?"
+width="100%" /%}
+
 Nx partitions a command into smaller tasks and runs them in parallel, in the correct order. Nx Cloud takes it one step further and [runs any command across multiple machines](/core-features/distribute-task-execution), while giving you a consolidated view of the command as if it ran locally.
 
 Nx caches the output of any previously run command such as testing and building, so it can replay the cached results instead of rerunning it. Nx Cloud allows you to [share the computation cache](/core-features/remote-cache) across everyone in your team and CI.

docs/shared/getting-started/intro.md

@@ -1,100 +1,91 @@
 # 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. Find out more about [why you should use Nx](/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. [Check out our video](/getting-started/why-nx) to learn more about what Nx is about.
 
-If instead you want to jump right into it, run the following command. It will guide you through the setup:
+## Core Features
 
-{% tabs %}
-{% tab label="npm" %}
+- **Run Tasks Efficiently**: Nx [runs tasks in parallel](/core-features/run-tasks) and orders the tasks based on the dependencies between them.
+- **Cache Locally & Remotely**: With [local](/core-features/cache-task-results) and [remote caching](/core-features/remote-cache), Nx prevents unnecessary re-runs of tasks, saving you valuable dev time.
+- **Automate Dependency Updates**: if you leverage Nx plugins you gain additional features such as [code generation](/core-features/plugin-features/use-code-generators) and tools to [automatically upgrade](core-features/automate-updating-dependencies) your codebase and dependencies.
+- **Make it Your Own**: Nx is highly customizable and extensible. Fine-tune it by [creating your own plugins](/extending-nx/intro/getting-started) and optionally [share them with the community](/extending-nx/tutorials/publish-plugin#publish-your-nx-plugin).
 
-```shell
-npx create-nx-workspace
-```
-
-{% /tab %}
-{% tab label="yarn" %}
+<!-- - **Monorepo and Single Projects**: Nx supports both, monorepos as well as single-project (standalone) workspaces. -->
 
-```shell
-npx create-nx-workspace --pm yarn
-```
+Find out more about [why you should use Nx](/getting-started/why-nx) or browse our [core features](/core-features).
 
-{% /tab %}
-{% tab label="pnpm" %}
+## Try Nx Yourself!
 
 ```shell
-npx create-nx-workspace --pm pnpm
+npx create-nx-workspace@latest
 ```
 
-{% /tab %}
-{% /tabs %}
-
-You can use Nx to quickly scaffold a new project or even an entire monorepo. It can be incrementally adopted and will grow with your project as it scales.
-
-{% cards cols="3" %}
-
-{% title-card title="New Monorepo" url="#get-started-with-the-basics" /%}
-{% title-card title="Choose a Stack" url="#learn-about-nx-and-your-favorite-stack" /%}
-{% title-card title="Add to an Existing Project" url="#adding-nx-to-an-existing-project" /%}
-
-{% /cards %}
-
-## Get Started with the Basics
-
-Its modular architecture lets you adopt Nx for package-based monorepos in combination with NPM, Yarn or PNPM, or create a fully integrated monorepo using Nx plugins. Learn more with the tutorials below.
+## Learn Nx
 
-{% personas %}
-{% persona type="javascript" title="New Package-Based Repo" url="/getting-started/tutorials/package-based-repo-tutorial" %}
-Create a monorepo with Yarn, NPM or PNPM. Nx makes it fast, but lets you run things your way.
+{% cards cols="2" lgCols="6" mdCols="4" smCols="2" %}
 
-- [Get started with your package-based repo](/getting-started/tutorials/package-based-repo-tutorial)
+{% link-card title="Nx in 10 minutes!" type="video" url="https://youtu.be/-_4WMl-Fn0w" icon="nx" /%}
 
-{% /persona %}
+{% link-card title="What is Nx Cloud?" type="video" url="https://youtu.be/NZF0ZJpgaJM" icon="nxcloud" /%}
 
-{% persona type="integrated" title="New Integrated Repo" url="/getting-started/tutorials/integrated-repo-tutorial" %}
+{% link-card title="PNPM Monorepos with Nx" type="video" url="https://youtu.be/ngdoUQBvAjo" icon="pnpm" /%}
 
-Get a pre-configured setup. Nx configures your favorite frameworks and lets you focus on shipping features.
-
-- [Get started with your integrated repo](/getting-started/tutorials/integrated-repo-tutorial)
-
-{% /persona %}
-
-{% /personas %}
+{% link-card title="More On Youtube" type="video" url="https://www.youtube.com/@nxdevtools" icon="youtube" /%}
 
 {% /cards %}
 
-## Learn About Nx and Your Favorite Stack
-
-Nx works well not just for monorepos. Nx plugins help you scaffold new projects with pre-configured tooling and modularize your codebase with local libraries.
-
-{% cards cols="3" %}
-
-{% persona type="react" title="Create a React app" url="/getting-started/tutorials/react-standalone-tutorial" %}
+{% cards cols="2" lgCols="6" mdCols="5" smCols="2" %}
 
-A modern React setup with built-in support for Vite, ESLint, Cypress, and more. Think CRA but modern, always up-to-date and scalable.
+{% link-card title="Package Based Monorepos" type="tutorial" url="/getting-started/tutorials/package-based-repo-tutorial" icon="jsMono" /%}
 
-- [Create a React app](/getting-started/tutorials/react-standalone-tutorial)
+{% link-card title="Integrated Monorepos" type="tutorial" url="/getting-started/tutorials/integrated-repo-tutorial" icon="nx" /%}
 
-{% /persona %}
+{% link-card title="Single React App" type="tutorial" url="/getting-started/tutorials/react-standalone-tutorial" icon="react" /%}
 
-{% persona type="angular" title="Create an Angular app" url="/getting-started/tutorials/angular-standalone-tutorial" %}
+{% link-card title="Single Angular App" type="tutorial" url="/getting-started/tutorials/angular-standalone-tutorial" icon="angular" /%}
 
-A modern Angular development experience powered by advanced generators and integrations with modern tooling.
+{% link-card title="Single Node App" type="tutorial" url="/getting-started/tutorials/node-server-tutorial" icon="node" /%}
 
-- [Create an Angular app](/getting-started/tutorials/angular-standalone-tutorial)
+<!-- {% link-card title="React Monorepo" type="tutorial" url="/getting-started/tutorials/react-standalone-tutorial" icon="reactMono" /%}
 
-{% /persona %}
+{% link-card title="Angular Monorepo" type="tutorial" url="/getting-started/tutorials/angular-standalone-tutorial" icon="angularMono" /%}
 
-{% persona type="node" title="Create a Node server" url="/getting-started/tutorials/node-server-tutorial" %}
+{% link-card title="Node Monorepo" type="tutorial" url="/getting-started/tutorials/node-server-tutorial" icon="nodeMono" /%} -->
 
-A modern Node server with scaffolding for Express, Fastify or Koa. There's also Docker support built-in.
-
-- [Create a Node server](/getting-started/tutorials/node-server-tutorial)
+{% /cards %}
 
-{% /persona %}
+## Pick Your Stack!
+
+{% cards cols="3" lgCols="8" mdCols="6" smCols="5" moreLink="/showcase/example-repos" %}
+
+{% link-card title="Express" appearance="small" url="/packages/express" icon="express" /%}
+{% link-card title="Vue" appearance="small" url="/showcase/example-repos/add-vue" icon="vue" /%}
+{% link-card title="Next" appearance="small" url="/packages/next" icon="nextjs" /%}
+{% link-card title="Nuxt" appearance="small" url="/showcase/example-repos/add-nuxt" icon="nuxt" /%}
+{% link-card title="Nest" appearance="small" url="/packages/nest" icon="nestjs" /%}
+{% link-card title="Remix" appearance="small" url="/recipes/react/remix" icon="remix" /%}
+{% link-card title="Expo" appearance="small" url="/packages/expo" icon="expo" /%}
+{% link-card title="React Native" appearance="small" url="/packages/react-native" icon="react" /%}
+{% link-card title="Fastify" appearance="small" url="/showcase/example-repos/mongo-fastify" icon="fastify" /%}
+{% link-card title="Deno" appearance="small" url="https://github.com/nrwl/nx-labs/tree/main/packages/deno" icon="deno" /%}
+{% link-card title="Svelte" appearance="small" url="/showcase/example-repos/add-svelte" icon="svelte" /%}
+{% link-card title="Solid" appearance="small" url="/showcase/example-repos/add-solid" icon="solid" /%}
+{% link-card title="Lit" appearance="small" url="/showcase/example-repos/add-lit" icon="lit" /%}
+{% link-card title="Astro" appearance="small" url="/showcase/example-repos/add-astro" icon="astro" /%}
+{% link-card title="Qwik" appearance="small" url="/showcase/example-repos/add-qwik" icon="qwik" /%}
+
+{% link-card title="Rust" appearance="small" url="/showcase/example-repos/add-rust" icon="rust" /%}
+{% link-card title="Go" appearance="small" url="https://github.com/nrwl/nx-recipes/blob/main/go/README.md" icon="go" /%}
+{% link-card title=".NET" appearance="small" url="https://github.com/nrwl/nx-recipes/tree/main/dot-net-standalone" icon="dotnet" /%}
+{% link-card title="Cypress" appearance="small" url="/packages/cypress" icon="cypress" /%}
+{% link-card title="Playwright" appearance="small" url="/packages/playwright" icon="playwright" /%}
+{% link-card title="Vite" appearance="small" url="/packages/vite" icon="vite" /%}
+{% link-card title="Storybook" appearance="small" url="/packages/storybook" icon="storybook" /%}
+{% link-card title="Jest" appearance="small" url="/packages/jest" icon="jest" /%}
+{% link-card title="Rspack" appearance="small" url="packages/rspack" icon="rspack" /%}
 
 {% /cards %}
 
-## Adding Nx to an Existing Project
+## Have an Existing Project? Add Nx to it!
 
 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:
 
@@ -104,22 +95,23 @@ 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" %}
+{% cards cols="2" mdCols="4" smCols="2" moreLink="/recipes/adopting-nx" %}
 
-{% persona type="extend" title="Add to Existing Monorepo" url="/recipes/adopting-nx/adding-to-monorepo" %}
-Add Nx to your existing NPM/YARN/PNPM workspace
-{% /persona %}
+{% link-card title="Add to Existing Monorepo" appearance="small" url="/recipes/adopting-nx/adding-to-monorepo" icon="pnpm" /%}
 
-{% persona title="Add to any Project" type="extend" url="/recipes/adopting-nx/adding-to-existing-project" %}
-Add Nx to a project
-{% /persona %}
+{% link-card title="Add to Any Project" appearance="small" url="/recipes/adopting-nx/adding-to-existing-project" icon="nx" /%}
 
-{% persona title="Migrate from CRA" type="react" url="/recipes/react/migration-cra" %}
-Migrate from a CRA setup and automatically switch to Vite
-{% /persona %}
+{% link-card title="Migrate from CRA" appearance="small" url="/recipes/react/migration-cra" icon="cra" /%}
 
-{% persona title="Migrate from Angular CLI" type="angular" url="/recipes/angular/migration/angular" %}
-Automatically migrate from the Angular CLI
-{% /persona %}
+{% link-card title="Migrate from Angular CLI" appearance="small" url="/recipes/angular/migration/angular" icon="angular" /%}
 
 {% /cards %}
+
+## Connect With Us
+
+Connect on our channels and with the Nx Community to ask questions, get help and keep up to date with the latest news.
+
+- Join our [Discord Community](http://go.nx.dev/community)
+- Subscribe to our [Youtube Channel](https://www.youtube.com/@nxdevtools)
+- Follow us on [Twitter](https://twitter.com/nxdevtools)
+- Subscribe [to our tech newsletter](https://go.nrwl.io/nx-newsletter)

docs/shared/plugins/intro.md

@@ -2,12 +2,12 @@
 
 Nx plugins contain [generators](/core-features/plugin-features/use-code-generators) and [executors](/core-features/plugin-features/use-task-executors) that extend the capabilities of an Nx workspace. They can be shared as npm packages or referenced locally within the same repo.
 
-{% cards cols="2" %}
+{% cards cols="4" %}
 
-{% title-card title="Use a Plugin" url="#use-a-plugin" /%}
-{% title-card title="Create a Local Plugin" url="#create-a-local-plugin" /%}
-{% title-card title="Maintain a Published Plugin" url="#maintain-a-published-plugin" /%}
-{% title-card title="Advanced Plugins" url="#advanced-plugins" /%}
+{% link-card title="Use a Plugin" url="#use-a-plugin" /%}
+{% link-card title="Create a Plugin" url="#create-a-local-plugin" /%}
+{% link-card title="Maintain a Published Plugin" url="#maintain-a-published-plugin" /%}
+{% link-card title="Advanced Plugins" url="#advanced-plugins" /%}
 
 {% /cards %}
 

docs/shared/recipes/add-stack/add-solid.md

@@ -2,11 +2,11 @@
 
 The code for this example is available on GitHub:
 
-{% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/solidjs" %}
+{% github-repository url="https://github.com/nrwl/nx-recipes/tree/main/solidjs" /%}
 
 **Supported Features**
 
-Because we are not using an Nx plugin for Solid, there are few items we'll have to configure manually. We'll have to
+Because we are not using an Nx plugin for Solid, there are a few items we'll have to configure manually. We'll have to
 configure our own build system. There are no pre-created Solid-specific code generators. And we'll have to take care of
 updating any framework dependencies as needed.
 

docs/shared/reference/sitemap.md

@@ -4,7 +4,7 @@
     - [Intro to Nx](/getting-started/intro)
     - [Installation](/getting-started/installation)
     - [Why Nx?](/getting-started/why-nx)
-    - [5 min Tutorials](/getting-started/tutorials)
+    - [Tutorials](/getting-started/tutorials)
       - [Package-Based Monorepo](/getting-started/tutorials/package-based-repo-tutorial)
       - [Integrated Monorepo](/getting-started/tutorials/integrated-repo-tutorial)
       - [React Standalone](/getting-started/tutorials/react-standalone-tutorial)

nx-dev/nx-dev/styles/main.css

@@ -116,3 +116,24 @@ iframe[src*='youtube'] {
   opacity: 1;
   visibility: visible;
 }
+
+/* Dark mode */
+html.dark .adaptive-icon {
+  /* fill: white; */
+  filter: invert(1);
+}
+
+.adaptive-icon {
+  fill: black;
+}
+
+/* [data-theme='light'] .adaptive-icon {
+  fill: white;
+} */
+
+/* Light mode */
+/* @media (prefers-color-scheme: light) {
+  .adaptive-icon {
+    fill: #000000;
+  }
+} */