docs(core): feature Nx Cloud sections more prominently in CLI tutorials (#27077)
Updated these tutorials: - https://nx-dev-git-docs-cli-tutorials-promote-cloud-nrwl.vercel.app/getting-started/tutorials/npm-workspaces-tutorial - https://nx-dev-git-docs-cli-tutorials-promote-cloud-nrwl.vercel.app/getting-started/tutorials/react-standalone-tutorial - https://nx-dev-git-docs-cli-tutorials-promote-cloud-nrwl.vercel.app/getting-started/tutorials/react-monorepo-tutorial - https://nx-dev-git-docs-cli-tutorials-promote-cloud-nrwl.vercel.app/getting-started/tutorials/angular-standalone-tutorial - https://nx-dev-git-docs-cli-tutorials-promote-cloud-nrwl.vercel.app/getting-started/tutorials/angular-monorepo-tutorial - https://nx-dev-git-docs-cli-tutorials-promote-cloud-nrwl.vercel.app/getting-started/tutorials/vue-standalone-tutorial - https://nx-dev-git-docs-cli-tutorials-promote-cloud-nrwl.vercel.app/getting-started/tutorials/gradle-tutorial - https://nx-dev-git-docs-cli-tutorials-promote-cloud-nrwl.vercel.app/recipes/adopting-nx/adding-to-monorepo - https://nx-dev-git-docs-cli-tutorials-promote-cloud-nrwl.vercel.app/recipes/adopting-nx/adding-to-existing-project
This commit is contained in:
Jack Hsu
GitHub
parent
fc60f6b187
commit
3890edc560
@ -1,6 +1,6 @@
|
||||
# Adding Nx to your Existing Project
|
||||
|
||||
Nx can be added to any type of project, not just monorepos. The main benefit is to get caching abilities for the package
|
||||
Nx can be added to any type of project, not just monorepos. A large benefit of Nx is its caching feature for package
|
||||
scripts. Each project usually has a set of scripts in the `package.json`:
|
||||
|
||||
```json {% fileName="package.json" %}
|
||||
@ -14,12 +14,14 @@ scripts. Each project usually has a set of scripts in the `package.json`:
|
||||
}
|
||||
```
|
||||
|
||||
You can make these scripts faster by leveraging Nx's caching capabilities. For example:
|
||||
You can make these scripts faster by leveraging Nx's [caching capabilities](/features/cache-task-results). For example:
|
||||
|
||||
- You change some spec files: in that case the `build` task can be cached and doesn't have to re-run.
|
||||
- You update your docs, changing a couple of markdown files: then there's no need to re-run builds, tests, linting on
|
||||
your CI. All you might want to do is trigger the Docusaurus build.
|
||||
|
||||
Additionally, Nx also [speeds up your CI ⚡](#fast-ci) with [remote caching](/ci/features/remote-cache) and [distributed task execution](/ci/features/distribute-task-execution).
|
||||
|
||||
## Install Nx on a Non-Monorepo Project
|
||||
|
||||
Run the following command:
|
||||
@ -284,7 +286,7 @@ Now if you run `npm run test` or `nx test` twice, the results will be retrieved
|
||||
this example are as cautious as possible, so you can significantly improve the value of the cache
|
||||
by [customizing Nx Inputs](/recipes/running-tasks/configure-inputs) for each task.
|
||||
|
||||
## Set Up CI for Your Workspace
|
||||
## Fast CI ⚡ {% highlightColor="green" %}
|
||||
|
||||
This tutorial walked you through how Nx can improve the local development experience, but the biggest difference Nx makes is in CI. As repositories get bigger, making sure that the CI is fast, reliable and maintainable can get very challenging. Nx provides a solution.
|
||||
|
||||
@ -293,7 +295,7 @@ This tutorial walked you through how Nx can improve the local development experi
|
||||
- Nx Agents [efficiently distribute tasks across machines](/ci/concepts/parallelization-distribution) ensuring constant CI time regardless of the repository size. The right number of machines is allocated for each PR to ensure good performance without wasting compute.
|
||||
- Nx Atomizer [automatically splits](/ci/features/split-e2e-tasks) large e2e tests to distribute them across machines. Nx can also automatically [identify and rerun flaky e2e tests](/ci/features/flaky-tasks).
|
||||
|
||||
### Connect to Nx Cloud
|
||||
### Connect to Nx Cloud {% highlightColor="green" %}
|
||||
|
||||
Nx Cloud is a companion app for your CI system that provides remote caching, task distribution, e2e tests deflaking, better DX and more.
|
||||
|
||||
@ -325,7 +327,7 @@ git pull
|
||||
|
||||
You should now have an `nxCloudAccessToken` property specified in the `nx.json` file.
|
||||
|
||||
### Create a CI Workflow
|
||||
### Create a CI Workflow {% highlightColor="green" %}
|
||||
|
||||
Use the following command to generate a CI workflow file.
|
||||
|
||||
@ -362,7 +364,7 @@ jobs:
|
||||
- run: npx nx affected -t lint test build
|
||||
```
|
||||
|
||||
### Open a Pull Request
|
||||
### Open a Pull Request {% highlightColor="green" %}
|
||||
|
||||
Commit the changes and open a new PR on GitHub.
|
||||
|
||||
|
||||
@ -6,14 +6,12 @@ powering Nx underneath. As a result, Lerna gets all the modern features such as
|
||||
on [https://lerna.js.org/upgrade](https://lerna.js.org/upgrade).
|
||||
{% /callout %}
|
||||
|
||||
Nx has first-class support for [monorepos](/getting-started/tutorials/npm-workspaces-tutorial). As a result, if you have
|
||||
Nx has first-class support for [monorepos](/getting-started/tutorials/npm-workspaces-tutorial). If you have
|
||||
an existing NPM/Yarn or PNPM-based monorepo setup, you can easily add Nx to get
|
||||
|
||||
- fast [task scheduling](/features/run-tasks)
|
||||
- support for [task pipelines](/concepts/task-pipeline-configuration)
|
||||
- [caching](/features/cache-task-results)
|
||||
- [remote caching with Nx Cloud](/ci/features/remote-cache)
|
||||
- [distributed task execution with Nx Cloud](/ci/features/distribute-task-execution)
|
||||
- high-performance task [caching](/features/cache-task-results)
|
||||
- [fast CI ⚡](#fast-ci) with [remote caching](/ci/features/remote-cache) and [distributed task execution](/ci/features/distribute-task-execution)
|
||||
|
||||
This is a low-impact operation because all that needs to be done is to install the `nx` package at the root level and
|
||||
add an `nx.json` for configuring caching and task pipelines.
|
||||
@ -307,7 +305,7 @@ pnpm run -r test
|
||||
|
||||
This allows for incrementally adopting Nx in your existing workspace.
|
||||
|
||||
## Set Up CI for Your Workspace
|
||||
## Fast CI ⚡ {% highlightColor="green" %}
|
||||
|
||||
This tutorial walked you through how Nx can improve the local development experience, but the biggest difference Nx makes is in CI. As repositories get bigger, making sure that the CI is fast, reliable and maintainable can get very challenging. Nx provides a solution.
|
||||
|
||||
@ -316,7 +314,7 @@ This tutorial walked you through how Nx can improve the local development experi
|
||||
- Nx Agents [efficiently distribute tasks across machines](/ci/concepts/parallelization-distribution) ensuring constant CI time regardless of the repository size. The right number of machines is allocated for each PR to ensure good performance without wasting compute.
|
||||
- Nx Atomizer [automatically splits](/ci/features/split-e2e-tasks) large e2e tests to distribute them across machines. Nx can also automatically [identify and rerun flaky e2e tests](/ci/features/flaky-tasks).
|
||||
|
||||
### Connect to Nx Cloud
|
||||
### Connect to Nx Cloud {% highlightColor="green" %}
|
||||
|
||||
Nx Cloud is a companion app for your CI system that provides remote caching, task distribution, e2e tests deflaking, better DX and more.
|
||||
|
||||
@ -348,7 +346,7 @@ git pull
|
||||
|
||||
You should now have an `nxCloudAccessToken` property specified in the `nx.json` file.
|
||||
|
||||
### Create a CI Workflow
|
||||
### Create a CI Workflow {% highlightColor="green" %}
|
||||
|
||||
Use the following command to generate a CI workflow file.
|
||||
|
||||
@ -385,7 +383,7 @@ jobs:
|
||||
- run: npx nx affected -t lint test build
|
||||
```
|
||||
|
||||
### Open a Pull Request
|
||||
### Open a Pull Request {% highlightColor="green" %}
|
||||
|
||||
Commit the changes and open a new PR on GitHub.
|
||||
|
||||
|
||||
@ -7,12 +7,13 @@ description: In this tutorial you'll create a frontend-focused workspace with Nx
|
||||
|
||||
In this tutorial you'll learn how to use Angular with Nx in a [monorepo (integrated) setup](/concepts/integrated-vs-package-based#integrated-repos).
|
||||
|
||||
What are you going to learn?
|
||||
What will you learn?
|
||||
|
||||
- how to create a new Angular application
|
||||
- how to run a single task (i.e. serve your app) or run multiple tasks in parallel
|
||||
- how to leverage code generators to scaffold components
|
||||
- how to modularize your codebase and impose architectural constraints for better maintainability
|
||||
- [how to speed up CI with Nx Cloud ⚡](#fast-ci)
|
||||
|
||||
{% callout type="info" title="Looking for an Angular standalone app?" %}
|
||||
Note, this tutorial sets up a repo with applications and libraries in their own subfolders. If you are looking for an Angular standalone app setup then check out our [Angular standalone app tutorial](/getting-started/tutorials/angular-standalone-tutorial).
|
||||
@ -1238,7 +1239,11 @@ If you have the ESLint plugin installed in your IDE you should immediately see a
|
||||
|
||||
Learn more about how to [enforce module boundaries](/features/enforce-module-boundaries).
|
||||
|
||||
## Set Up CI for Your Angular Monorepo
|
||||
## Fast CI ⚡ {% highlightColor="green" %}
|
||||
|
||||
{% callout type="check" title="Repository with Nx" %}
|
||||
Make sure you have completed the previous sections of this tutorial before starting this one. If you want a clean starting point, you can check out the [reference code](https://github.com/nrwl/nx-recipes/tree/main/angular-monorepo) as a starting point.
|
||||
{% /callout %}
|
||||
|
||||
{% video-link link="https://youtu.be/ZzTP4bVJEnI?t=791" /%}
|
||||
|
||||
@ -1249,7 +1254,7 @@ This tutorial walked you through how Nx can improve the local development experi
|
||||
- Nx Agents [efficiently distribute tasks across machines](/ci/concepts/parallelization-distribution) ensuring constant CI time regardless of the repository size. The right number of machines is allocated for each PR to ensure good performance without wasting compute.
|
||||
- Nx Atomizer [automatically splits](/ci/features/split-e2e-tasks) large e2e tests to distribute them across machines. Nx can also automatically [identify and rerun flaky e2e tests](/ci/features/flaky-tasks).
|
||||
|
||||
### Connect to Nx Cloud
|
||||
### Connect to Nx Cloud {% highlightColor="green" %}
|
||||
|
||||
Nx Cloud is a companion app for your CI system that provides remote caching, task distribution, e2e tests deflaking, better DX and more.
|
||||
|
||||
@ -1267,7 +1272,7 @@ npx nx connect
|
||||
|
||||
Once you click the link, follow the steps provided and make sure Nx Cloud is enabled on the main branch of your repository.
|
||||
|
||||
### Configure Your CI Workflow
|
||||
### Configure Your CI Workflow {% highlightColor="green" %}
|
||||
|
||||
When you chose GitHub Actions as your CI provider at the beginning of the tutorial, `create-nx-workspace` created a `.github/workflows/ci.yml` file that contains a CI pipeline that will run the `lint`, `test`, `build` and `e2e` tasks for projects that are affected by any given PR. Since we are using Nx Cloud, the pipeline will also distribute tasks across multiple machines to ensure fast and reliable CI runs.
|
||||
|
||||
@ -1304,7 +1309,7 @@ jobs:
|
||||
- run: npx nx affected -t lint test build
|
||||
```
|
||||
|
||||
### Open a Pull Request
|
||||
### Open a Pull Request {% highlightColor="green" %}
|
||||
|
||||
Commit the changes and open a new PR on GitHub.
|
||||
|
||||
|
||||
@ -2,12 +2,13 @@
|
||||
|
||||
In this tutorial you'll learn how to use Angular with Nx in a ["standalone" (non-monorepo) setup](/concepts/integrated-vs-package-based#standalone-applications). Not to be confused with the "Angular Standalone API", a standalone project in Nx is a non-monorepo setup where you have a single application at the root level. This setup is very similar to what the Angular CLI gives you.
|
||||
|
||||
What are you going to learn?
|
||||
What will you learn?
|
||||
|
||||
- how to create a new standalone (single-project) Nx workspace setup for Angular
|
||||
- how to run a single task (i.e. serve your app) or run multiple tasks in parallel
|
||||
- how to leverage code generators to scaffold components
|
||||
- how to modularize your codebase and impose architectural constraints for better maintainability
|
||||
- [how to speed up CI with Nx Cloud ⚡](#fast-ci)
|
||||
|
||||
{% callout type="info" title="Looking for Angular monorepos?" %}
|
||||
Note, this tutorial sets up a repo with a single application at the root level that breaks out its code into libraries to add structure. If you are looking for an Angular monorepo setup then check out our [Angular monorepo tutorial](/getting-started/tutorials/angular-monorepo-tutorial).
|
||||
@ -1041,7 +1042,11 @@ When you are ready to add another application to the repo, you'll probably want
|
||||
|
||||
You can also go through the full [Angular monorepo tutorial](/getting-started/tutorials/angular-monorepo-tutorial)
|
||||
|
||||
## Set Up CI for the Angular App
|
||||
## Fast CI ⚡ {% highlightColor="green" %}
|
||||
|
||||
{% callout type="check" title="Repository with Nx" %}
|
||||
Make sure you have completed the previous sections of this tutorial before starting this one. If you want a clean starting point, you can check out the [reference code](https://github.com/nrwl/nx-recipes/tree/main/angular-standalone) as a starting point.
|
||||
{% /callout %}
|
||||
|
||||
This tutorial walked you through how Nx can improve the local development experience, but the biggest difference Nx makes is in CI. As repositories get bigger, making sure that the CI is fast, reliable and maintainable can get very challenging. Nx provides a solution.
|
||||
|
||||
@ -1050,7 +1055,7 @@ This tutorial walked you through how Nx can improve the local development experi
|
||||
- Nx Agents [efficiently distribute tasks across machines](/ci/concepts/parallelization-distribution) ensuring constant CI time regardless of the repository size. The right number of machines is allocated for each PR to ensure good performance without wasting compute.
|
||||
- Nx Atomizer [automatically splits](/ci/features/split-e2e-tasks) large e2e tests to distribute them across machines. Nx can also automatically [identify and rerun flaky e2e tests](/ci/features/flaky-tasks).
|
||||
|
||||
### Connect to Nx Cloud
|
||||
### Connect to Nx Cloud {% highlightColor="green" %}
|
||||
|
||||
Nx Cloud is a companion app for your CI system that provides remote caching, task distribution, e2e tests deflaking, better DX and more.
|
||||
|
||||
@ -1068,7 +1073,7 @@ npx nx connect
|
||||
|
||||
Once you click the link, follow the steps provided and make sure Nx Cloud is enabled on the main branch of your repository.
|
||||
|
||||
### Configure Your CI Workflow
|
||||
### Configure Your CI Workflow {% highlightColor="green" %}
|
||||
|
||||
When you chose GitHub Actions as your CI provider at the beginning of the tutorial, `create-nx-workspace` created a `.github/workflows/ci.yml` file that contains a CI pipeline that will run the `lint`, `test`, `build` and `e2e` tasks for projects that are affected by any given PR. Since we are using Nx Cloud, the pipeline will also distribute tasks across multiple machines to ensure fast and reliable CI runs.
|
||||
|
||||
@ -1105,7 +1110,7 @@ jobs:
|
||||
- run: npx nx affected -t lint test build
|
||||
```
|
||||
|
||||
### Open a Pull Request
|
||||
### Open a Pull Request {% highlightColor="green" %}
|
||||
|
||||
Commit the changes and open a new PR on GitHub.
|
||||
|
||||
|
||||
@ -5,8 +5,15 @@ description: In this tutorial you'll add Nx to an existing Gradle repo
|
||||
|
||||
# Gradle Tutorial
|
||||
|
||||
In this tutorial, you'll learn how to add Nx to a repository with an existing Gradle setup. You'll see how Nx can
|
||||
provide immediate value.
|
||||
In this tutorial, you'll learn how to add Nx to a repository with an existing Gradle setup.
|
||||
|
||||
What will you learn?
|
||||
|
||||
- how to add Nx to a Gradle project
|
||||
- how to run a single task (i.e. serve your app) or run multiple tasks in parallel
|
||||
- how to leverage code generators to scaffold components
|
||||
- how to modularize your codebase and impose architectural constraints for better maintainability
|
||||
- [how to speed up CI with Nx Cloud ⚡](#fast-ci)
|
||||
|
||||
## Prerequisites
|
||||
|
||||
@ -31,11 +38,7 @@ node -v
|
||||
|
||||
This tutorial picks up where [Spring framework](https://spring.io/)'s guide for [Multi-Module Projects](https://spring.io/guides/gs/multi-module) leaves off.
|
||||
|
||||
Fork [the sample repository](https://github.com/nrwl/gradle-tutorial):
|
||||
|
||||
[https://github.com/nrwl/gradle-tutorial](https://github.com/nrwl/gradle-tutorial)
|
||||
|
||||
And then clone it on your local machine:
|
||||
Fork [the sample repository](https://github.com/nrwl/gradle-tutorial/fork), and then clone it on your local machine:
|
||||
|
||||
```shell
|
||||
git clone https://github.com/<your-username>/gradle-tutorial.git
|
||||
@ -66,7 +69,11 @@ Root project 'gradle-tutorial'
|
||||
Nx is a build system with built in tooling and advanced CI capabilities. It helps you maintain and scale monorepos,
|
||||
both locally and on CI. We will explore the features of Nx in this tutorial by adding it to the Gradle workspace above.
|
||||
|
||||
To add Nx, run `npx nx@latest init`.
|
||||
To add Nx, run
|
||||
|
||||
```shell {% path="~/gradle-tutorial" %}
|
||||
npx nx@latest init
|
||||
```
|
||||
|
||||
This command will download the latest version of Nx and help set up your repository to take advantage of it. Nx will
|
||||
also detect Gradle is used in the repo so it will propose adding the `@nx/gradle` plugin to integrate Gradle with Nx.
|
||||
@ -260,7 +267,11 @@ To run the `test` tasks for projects affected by this change, run:
|
||||
|
||||
Notice that this command does not run the `test` task for the `library` project, since it could not have been affected by the code change.
|
||||
|
||||
## Set Up CI for Your Gradle Workspace
|
||||
## Fast CI ⚡ {% highlightColor="green" %}
|
||||
|
||||
{% callout type="check" title="Repository with Nx" %}
|
||||
Make sure you have completed the previous sections of this tutorial before starting this one. If you want a clean starting point, you can check out the [reference code](https://github.com/nrwl/nx-recipes/tree/main/gradle) as a starting point.
|
||||
{% /callout %}
|
||||
|
||||
This tutorial walked you through how Nx can improve the local development experience, but the biggest difference Nx makes is in CI. As repositories get bigger, making sure that the CI is fast, reliable and maintainable can get very challenging. Nx provides a solution.
|
||||
|
||||
@ -269,7 +280,7 @@ This tutorial walked you through how Nx can improve the local development experi
|
||||
- Nx Agents [efficiently distribute tasks across machines](/ci/concepts/parallelization-distribution) ensuring constant CI time regardless of the repository size. The right number of machines is allocated for each PR to ensure good performance without wasting compute.
|
||||
- Nx Atomizer [automatically splits](/ci/features/split-e2e-tasks) large e2e tests to distribute them across machines. Nx can also automatically [identify and rerun flaky e2e tests](/ci/features/flaky-tasks).
|
||||
|
||||
### Connect to Nx Cloud
|
||||
### Connect to Nx Cloud {% highlightColor="green" %}
|
||||
|
||||
Nx Cloud is a companion app for your CI system that provides remote caching, task distribution, e2e tests deflaking, better DX and more.
|
||||
|
||||
@ -282,7 +293,7 @@ Now that we're working on the CI pipeline, it is important for your changes to b
|
||||
Now connect your repository to Nx Cloud with the following command:
|
||||
|
||||
```shell
|
||||
npx nx connect
|
||||
./nx connect
|
||||
```
|
||||
|
||||
A browser window will open to register your repository in your [Nx Cloud](https://cloud.nx.app) account. The link is also printed to the terminal if the windows does not open, or you closed it before finishing the steps. The app will guide you to create a PR to enable Nx Cloud on your repository.
|
||||
@ -301,7 +312,7 @@ git pull
|
||||
|
||||
You should now have an `nxCloudAccessToken` property specified in the `nx.json` file.
|
||||
|
||||
### Create a CI Workflow
|
||||
### Create a CI Workflow {% highlightColor="green" %}
|
||||
|
||||
Let's create a branch to add a CI workflow.
|
||||
|
||||
@ -312,16 +323,26 @@ git checkout -b add-workflow
|
||||
And use the following command to generate a CI workflow file.
|
||||
|
||||
```shell
|
||||
npx nx generate ci-workflow --ci=github
|
||||
./nx generate ci-workflow --ci=github
|
||||
```
|
||||
|
||||
This generator creates a `.github/workflows/ci.yml` file that contains a CI pipeline that will run the `lint`, `test`, `build` and `e2e` tasks for projects that are affected by any given PR. Since we are using Nx Cloud, the pipeline will also distribute tasks across multiple machines to ensure fast and reliable CI runs.
|
||||
|
||||
The key lines in the CI pipeline are:
|
||||
|
||||
```yml {% fileName=".github/workflows/ci.yml" highlightLines=["10-14", "21-22"] %}
|
||||
```yml {% fileName=".github/workflows/ci.yml" highlightLines=["21-24", "38-39"] %}
|
||||
name: CI
|
||||
# ...
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
pull_request:
|
||||
|
||||
permissions:
|
||||
actions: read
|
||||
contents: read
|
||||
|
||||
jobs:
|
||||
main:
|
||||
runs-on: ubuntu-latest
|
||||
@ -329,22 +350,29 @@ jobs:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
|
||||
# This enables task distribution via Nx Cloud
|
||||
# Run this command as early as possible, before dependencies are installed
|
||||
# Learn more at https://nx.dev/ci/reference/nx-cloud-cli#npx-nxcloud-startcirun
|
||||
# Connect your workspace by running "nx connect" and uncomment this
|
||||
- run: npx nx-cloud start-ci-run --distribute-on="3 linux-medium-js" --stop-agents-after="build"
|
||||
- uses: actions/setup-node@v3
|
||||
- run: npx nx-cloud start-ci-run --distribute-on="3 linux-medium-jvm" --stop-agents-after="build"
|
||||
|
||||
- name: Set up JDK 17 for x64
|
||||
uses: actions/setup-java@v4
|
||||
with:
|
||||
node-version: 20
|
||||
cache: 'npm'
|
||||
- run: npm ci --legacy-peer-deps
|
||||
java-version: '17'
|
||||
distribution: 'temurin'
|
||||
architecture: x64
|
||||
|
||||
- name: Setup Gradle
|
||||
uses: gradle/gradle-build-action@v2
|
||||
|
||||
- uses: nrwl/nx-set-shas@v4
|
||||
|
||||
# Nx Affected runs only tasks affected by the changes in this PR/commit. Learn more: https://nx.dev/ci/features/affected
|
||||
- run: npx nx affected -t lint test build
|
||||
- run: ./nx affected -t test build
|
||||
```
|
||||
|
||||
### Open a Pull Request
|
||||
### Open a Pull Request {% highlightColor="green" %}
|
||||
|
||||
Commit the changes and open a new PR on GitHub.
|
||||
|
||||
|
||||
@ -5,12 +5,16 @@ description: In this tutorial you'll add Nx to an existing NPM workspaces repo
|
||||
|
||||
# NPM Workspaces Tutorial
|
||||
|
||||
In this tutorial, you'll learn how to add Nx to a repository with an existing NPM workspaces setup. You'll see how Nx can provide immediate value with very little configuration and then you can gradually enable more features.
|
||||
In this tutorial, you'll learn how to add Nx to a repository with an existing [NPM workspaces](https://docs.npmjs.com/cli/using-npm/workspaces) setup.
|
||||
|
||||
- Add Nx to the repository with a single command
|
||||
- Configure caching for your existing tasks
|
||||
- Configure a task pipeline
|
||||
- Use Nx Plugins to automatically configure caching
|
||||
What will you learn?
|
||||
|
||||
- how to add Nx to the repository with a single command
|
||||
- how to configure caching for your tasks
|
||||
- how to configure a task pipeline
|
||||
- how to configure projects automatically with Nx Plugins
|
||||
- how to manage your releases with `nx release`
|
||||
- [how to speed up CI with Nx Cloud ⚡](#fast-ci)
|
||||
|
||||
<!-- ## Final Source Code
|
||||
|
||||
@ -20,10 +24,10 @@ Here's the source code of the final result for this tutorial.
|
||||
|
||||
## Starting Repository
|
||||
|
||||
To get started, check out [the sample repository](https://github.com/nrwl/tuskydesign) on your local machine:
|
||||
To get started, fork [the sample repository](https://github.com/nrwl/tuskydesign/fork) and clone it on your local machine:
|
||||
|
||||
```shell
|
||||
git clone https://github.com/nrwl/tuskydesign.git
|
||||
git clone https://github.com/<your-username>/tuskydesign.git
|
||||
```
|
||||
|
||||
The repository has two React packages (under `packages/buttons` and `packages/forms`) that are used in a `demo` application (located in `apps/demo`) that was designed to be used with the Vite CLI. The root `package.json` has a `workspaces` property that tells NPM how to find the projects in the repository.
|
||||
@ -63,10 +67,12 @@ When the `buttons` and `forms` projects are built first, the `demo` app can buil
|
||||
|
||||
Now that you have a basic understanding of the repository we're working with, let's see how Nx can help us.
|
||||
|
||||
## Add Nx
|
||||
## Smart Monorepo
|
||||
|
||||
Nx offers many features, but at its core, it is a task runner. Out of the box, it can cache your tasks and ensure those tasks are run in the correct order. After the initial set up, you can incrementally add on other features that would be helpful in your organization.
|
||||
|
||||
### Add Nx
|
||||
|
||||
To enable Nx in your repository, run a single command:
|
||||
|
||||
```shell {% path="~/tuskydesigns" %}
|
||||
@ -85,10 +91,10 @@ Second, the script asks a series of questions to help set up caching for you.
|
||||
- `Which scripts are cacheable?` - Choose `typecheck`, `build` and `lint`
|
||||
- `Does the "typecheck" script create any outputs?` - Enter nothing
|
||||
- `Does the "build" script create any outputs?` - Enter `dist`
|
||||
- `Does the "lint" script create any outputs?` - Enter nothing
|
||||
- `Does the "lint" script creggggggate any outputs?` - Enter nothing
|
||||
- `Would you like remote caching to make your build faster?` - Choose `Skip for now`
|
||||
|
||||
## Explore Your Workspace
|
||||
### Explore Your Workspace
|
||||
|
||||
If you run `nx graph` as instructed, you'll see the dependencies between your projects.
|
||||
|
||||
@ -101,7 +107,7 @@ npx nx graph --focus=@tuskdesign/demo
|
||||
|
||||
Nx uses this graph to determine the order tasks are run and enforce module boundaries. You can also leverage this graph to gain an accurate understanding of the architecture of your codebase. Part of what makes this graph invaluable is that it is derived directly from your codebase, so it will never become out of date.
|
||||
|
||||
## Caching Pre-configured
|
||||
### Caching Pre-configured
|
||||
|
||||
Nx has been configured to run your `build`, `typecheck` and `lint` tasks. You can run a single task like this:
|
||||
|
||||
@ -151,7 +157,7 @@ Nx read the output from the cache instead of running the command for 3 out of 3
|
||||
|
||||
You can see the same caching behavior working when you run `npx nx lint` or `npx nx typecheck`.
|
||||
|
||||
## Use Task Pipelines
|
||||
### Use Task Pipelines
|
||||
|
||||
You may be wondering why the caching message in the previous section mentioned 3 tasks when you only ran the `build` task from the terminal. When we said that `build` tasks must be run in order during the setup script, Nx created a simple task pipeline. You can see the configuration for it in the `nx.json` file:
|
||||
|
||||
@ -171,6 +177,12 @@ This configuration means that if you run `build` on any project, Nx will first r
|
||||
npx nx graph
|
||||
```
|
||||
|
||||
Alternatively, you can pass the `--graph` option to the run command to inspect the task graph.
|
||||
|
||||
```shell {% path="~/tuskydesigns" %}
|
||||
npx nx run @tuskdesign/demo:build --graph
|
||||
```
|
||||
|
||||
{% graph height="200px" title="Build Task Pipeline" type="task" jsonFile="shared/tutorials/npm-workspaces-build-tasks1.json" %}
|
||||
{% /graph %}
|
||||
|
||||
@ -186,7 +198,7 @@ Nx read the output from the cache instead of running the command for 3 out of 3
|
||||
|
||||
Not only does the build complete successfully, but it finishes instantly and the `packages/forms/dist` folder is put back in place thanks to the caching.
|
||||
|
||||
## Create a Task Pipeline
|
||||
### Create a Task Pipeline
|
||||
|
||||
You may have noticed in the `apps/demo/package.json` file, there is a `prebuild` script that runs `typecheck` before the `build` script in order to catch any type errors. Let's set up this same behavior in the Nx task pipeline as well.
|
||||
|
||||
@ -212,7 +224,7 @@ You may have noticed in the `apps/demo/package.json` file, there is a `prebuild`
|
||||
|
||||
The `dependsOn` line makes Nx run the `typecheck` task for the current project and the `build` task for any dependencies before running the current project's `build` task. Now `nx build` will run the `typecheck` task just like `npm run build` does.
|
||||
|
||||
## Use Nx Plugins to Enhance Vite Tasks with Caching
|
||||
### Use Nx Plugins to Enhance Vite Tasks with Caching
|
||||
|
||||
You may remember that we defined the `outputs` property in `nx.json` when we were answering questions in the `nx init` script. The value is currently hard-coded so that if you change the output path in your `vite.config.ts`, you have to remember to also change the `outputs` array in the `build` task configuration. This is where plugins can help. They directly infer information from the actual tooling configuration files (`vite.config.ts` in this case).
|
||||
|
||||
@ -285,11 +297,15 @@ Now if you look at project details view again, you'll see that the `outputs` pro
|
||||
|
||||
You can also add the `@nx/eslint` plugin to see how it infers `lint` tasks based on the ESLint configuration files.
|
||||
|
||||
## Summary
|
||||
### Checkpoint
|
||||
|
||||
After following this tutorial, the repository is still using all the same tools to run tasks, but now Nx runs those tasks in a smarter way. The tasks are efficiently cached so that there is no repeated work and the cache configuration settings are automatically synced with your tooling configuration files by Nx plugins. Also, any task dependencies are automatically executed whenever needed because we configured task pipelines for the projects.
|
||||
At this point, the repository is still using all the same tools to run tasks, but now Nx runs those tasks in a smarter way. The tasks are efficiently cached so that there is no repeated work and the cache configuration settings are automatically synced with your tooling configuration files by Nx plugins. Also, any task dependencies are automatically executed whenever needed because we configured task pipelines for the projects.
|
||||
|
||||
The final task graph for `demo` app's `build` task looks like this:
|
||||
Open up the task graph for `demo` app's `build` task again to see the changes.
|
||||
|
||||
```shell {% path="~/tuskydesigns" %}
|
||||
npx nx run @tuskdesign/demo:build --graph
|
||||
```
|
||||
|
||||
{% graph height="200px" title="Build Task Pipeline" type="task" jsonFile="shared/tutorials/npm-workspaces-build-tasks2.json" %}
|
||||
{% /graph %}
|
||||
@ -324,24 +340,27 @@ nx release --first-release
|
||||
|
||||
After this first release, you can remove the `--first-release` flag and just run `nx release --dry-run`. There is also a [dedicated feature page](/features/manage-releases) that goes into more detail about how to use the `nx release` command.
|
||||
|
||||
## Set Up CI for Your NPM Workspace
|
||||
## Fast CI ⚡ {% highlightColor="green" %}
|
||||
|
||||
This tutorial walked you through how Nx can improve the local development experience, but the biggest difference Nx makes is in CI. As repositories get bigger, making sure that the CI is fast, reliable and maintainable can get very challenging. Nx provides a solution.
|
||||
{% callout type="check" title="Forked repository with Nx" %}
|
||||
Make sure you have completed the previous sections of this tutorial before starting this one. If you want a clean starting point, you can fork the [sample repository with Nx already added](https://github.com/nrwl/nx-recipes/tree/main/npm-workspaces).
|
||||
{% /callout %}
|
||||
|
||||
So far in this tutorial you've seen how Nx improves the local development experience, but the biggest difference Nx makes is in CI. As repositories get bigger, making sure that the CI is fast, reliable and maintainable can get very challenging. Nx provides a solution.
|
||||
|
||||
- Nx reduces wasted time in CI with the [`affected` command](/ci/features/affected).
|
||||
- Nx Replay's [remote caching](/ci/features/remote-cache) will reuse task artifacts from different CI executions making sure you will never run the same computation twice.
|
||||
- Nx Agents [efficiently distribute tasks across machines](/ci/concepts/parallelization-distribution) ensuring constant CI time regardless of the repository size. The right number of machines is allocated for each PR to ensure good performance without wasting compute.
|
||||
- Nx Agents [efficiently distribute tasks across machines](/ci/features/distribute-task-execution) ensuring constant CI time regardless of the repository size. The right number of machines is allocated for each PR to ensure good performance without wasting compute.
|
||||
- Nx Atomizer [automatically splits](/ci/features/split-e2e-tasks) large e2e tests to distribute them across machines. Nx can also automatically [identify and rerun flaky e2e tests](/ci/features/flaky-tasks).
|
||||
|
||||
### Connect to Nx Cloud
|
||||
### Connect to Nx Cloud {% highlightColor="green" %}
|
||||
|
||||
Nx Cloud is a companion app for your CI system that provides remote caching, task distribution, e2e tests deflaking, better DX and more.
|
||||
|
||||
Now that we're working on the CI pipeline, it is important for your changes to be pushed to a GitHub repository.
|
||||
|
||||
1. Commit your existing changes with `git add . && git commit -am "updates"`
|
||||
2. [Create a new GitHub repository](https://github.com/new)
|
||||
3. Follow GitHub's instructions to push your existing code to the repository
|
||||
2. Push your changes to your forked GitHub repository with `git push`
|
||||
|
||||
Now connect your repository to Nx Cloud with the following command:
|
||||
|
||||
@ -365,7 +384,7 @@ git pull
|
||||
|
||||
You should now have an `nxCloudAccessToken` property specified in the `nx.json` file.
|
||||
|
||||
### Create a CI Workflow
|
||||
### Create a CI Workflow {% highlightColor="green" %}
|
||||
|
||||
Use the following command to generate a CI workflow file.
|
||||
|
||||
@ -373,7 +392,7 @@ Use the following command to generate a CI workflow file.
|
||||
npx nx generate ci-workflow --ci=github
|
||||
```
|
||||
|
||||
This generator creates a `.github/workflows/ci.yml` file that contains a CI pipeline that will run the `lint`, `test`, `build` and `e2e` tasks for projects that are affected by any given PR. Since we are using Nx Cloud, the pipeline will also distribute tasks across multiple machines to ensure fast and reliable CI runs.
|
||||
This generator creates a `.github/workflows/ci.yml` file that contains a CI pipeline that will run the `lint`, `test`, `build` and `e2e` tasks for projects that are affected by any given PR. Since we are using Nx Cloud, the pipeline will also [distribute tasks across multiple machines](/ci/features/distribute-task-execution) to ensure fast and reliable CI runs.
|
||||
|
||||
The key lines in the CI pipeline are:
|
||||
|
||||
@ -402,7 +421,7 @@ jobs:
|
||||
- run: npx nx affected -t lint test build
|
||||
```
|
||||
|
||||
### Open a Pull Request
|
||||
### Open a Pull Request {% highlightColor="green" %}
|
||||
|
||||
Commit the changes and open a new PR on GitHub.
|
||||
|
||||
@ -424,6 +443,7 @@ For more information about how Nx can improve your CI pipeline, check out one of
|
||||
|
||||
- [Circle CI with Nx](/ci/intro/tutorials/circle)
|
||||
- [GitHub Actions with Nx](/ci/intro/tutorials/github-actions)
|
||||
-
|
||||
|
||||
## Next Steps
|
||||
|
||||
|
||||
@ -7,12 +7,13 @@ description: In this tutorial you'll create a frontend-focused workspace with Nx
|
||||
|
||||
In this tutorial you'll learn how to use React with Nx in a [monorepo (integrated) setup](/concepts/integrated-vs-package-based#integrated-repos).
|
||||
|
||||
What are you going to learn?
|
||||
What will you learn?
|
||||
|
||||
- how to create a new React application
|
||||
- how to run a single task (i.e. serve your app) or run multiple tasks in parallel
|
||||
- how to leverage code generators to scaffold components
|
||||
- how to modularize your codebase and impose architectural constraints for better maintainability
|
||||
- [how to speed up CI with Nx Cloud ⚡](#fast-ci)
|
||||
|
||||
{% callout type="info" title="Looking for a React standalone app?" %}
|
||||
Note, this tutorial sets up a repo with applications and libraries in their own subfolders. If you are looking for a React standalone app setup then check out our [React standalone app tutorial](/getting-started/tutorials/react-standalone-tutorial).
|
||||
@ -1030,7 +1031,11 @@ If you have the ESLint plugin installed in your IDE you should also immediately
|
||||
|
||||
Learn more about how to [enforce module boundaries](/features/enforce-module-boundaries).
|
||||
|
||||
## Set Up CI for Your React Monorepo
|
||||
## Fast CI ⚡ {% highlightColor="green" %}
|
||||
|
||||
{% callout type="check" title="Repository with Nx" %}
|
||||
Make sure you have completed the previous sections of this tutorial before starting this one. If you want a clean starting point, you can check out the [reference code](https://github.com/nrwl/nx-recipes/tree/main/react-monorepo) as a starting point.
|
||||
{% /callout %}
|
||||
|
||||
This tutorial walked you through how Nx can improve the local development experience, but the biggest difference Nx makes is in CI. As repositories get bigger, making sure that the CI is fast, reliable and maintainable can get very challenging. Nx provides a solution.
|
||||
|
||||
@ -1039,7 +1044,7 @@ This tutorial walked you through how Nx can improve the local development experi
|
||||
- Nx Agents [efficiently distribute tasks across machines](/ci/concepts/parallelization-distribution) ensuring constant CI time regardless of the repository size. The right number of machines is allocated for each PR to ensure good performance without wasting compute.
|
||||
- Nx Atomizer [automatically splits](/ci/features/split-e2e-tasks) large e2e tests to distribute them across machines. Nx can also automatically [identify and rerun flaky e2e tests](/ci/features/flaky-tasks).
|
||||
|
||||
### Connect to Nx Cloud
|
||||
### Connect to Nx Cloud {% highlightColor="green" %}
|
||||
|
||||
Nx Cloud is a companion app for your CI system that provides remote caching, task distribution, e2e tests deflaking, better DX and more.
|
||||
|
||||
@ -1057,7 +1062,7 @@ npx nx connect
|
||||
|
||||
Once you click the link, follow the steps provided and make sure Nx Cloud is enabled on the main branch of your repository.
|
||||
|
||||
### Configure Your CI Workflow
|
||||
### Configure Your CI Workflow {% highlightColor="green" %}
|
||||
|
||||
When you chose GitHub Actions as your CI provider at the beginning of the tutorial, `create-nx-workspace` created a `.github/workflows/ci.yml` file that contains a CI pipeline that will run the `lint`, `test`, `build` and `e2e` tasks for projects that are affected by any given PR. Since we are using Nx Cloud, the pipeline will also distribute tasks across multiple machines to ensure fast and reliable CI runs.
|
||||
|
||||
@ -1094,7 +1099,7 @@ jobs:
|
||||
- run: npx nx affected -t lint test build
|
||||
```
|
||||
|
||||
### Open a Pull Request
|
||||
### Open a Pull Request {% highlightColor="green" %}
|
||||
|
||||
Commit the changes and open a new PR on GitHub.
|
||||
|
||||
|
||||
@ -7,12 +7,13 @@ description: In this tutorial you'll create a frontend-focused workspace with Nx
|
||||
|
||||
In this tutorial you'll learn how to use React with Nx in a ["standalone" (non-monorepo) setup](/concepts/integrated-vs-package-based#standalone-applications).
|
||||
|
||||
What are you going to learn?
|
||||
What will you learn?
|
||||
|
||||
- how to add Nx to a React and Vite project
|
||||
- how to run a single task (i.e. serve your app) or run multiple tasks in parallel
|
||||
- how to leverage code generators to scaffold components
|
||||
- how to modularize your codebase and impose architectural constraints for better maintainability
|
||||
- [how to speed up CI with Nx Cloud ⚡](#fast-ci)
|
||||
|
||||
{% callout type="info" title="Looking for React monorepos?" %}
|
||||
Note, this tutorial sets up a repo with a single application at the root level that breaks out its code into libraries to add structure. If you are looking for a React monorepo setup then check out our [React monorepo tutorial](/getting-started/tutorials/react-monorepo-tutorial).
|
||||
@ -971,7 +972,11 @@ When you are ready to add another application to the repo, you'll probably want
|
||||
|
||||
You can also go through the full [React monorepo tutorial](/getting-started/tutorials/react-monorepo-tutorial)
|
||||
|
||||
## Set Up CI for Your React App
|
||||
## Fast CI ⚡ {% highlightColor="green" %}
|
||||
|
||||
{% callout type="check" title="Repository with Nx" %}
|
||||
Make sure you have completed the previous sections of this tutorial before starting this one. If you want a clean starting point, you can check out the [reference code](https://github.com/nrwl/nx-recipes/tree/main/react-app) as a starting point.
|
||||
{% /callout %}
|
||||
|
||||
This tutorial walked you through how Nx can improve the local development experience, but the biggest difference Nx makes is in CI. As repositories get bigger, making sure that the CI is fast, reliable and maintainable can get very challenging. Nx provides a solution.
|
||||
|
||||
@ -980,7 +985,7 @@ This tutorial walked you through how Nx can improve the local development experi
|
||||
- Nx Agents [efficiently distribute tasks across machines](/ci/concepts/parallelization-distribution) ensuring constant CI time regardless of the repository size. The right number of machines is allocated for each PR to ensure good performance without wasting compute.
|
||||
- Nx Atomizer [automatically splits](/ci/features/split-e2e-tasks) large e2e tests to distribute them across machines. Nx can also automatically [identify and rerun flaky e2e tests](/ci/features/flaky-tasks).
|
||||
|
||||
### Connect to Nx Cloud
|
||||
### Connect to Nx Cloud {% highlightColor="green" %}
|
||||
|
||||
Nx Cloud is a companion app for your CI system that provides remote caching, task distribution, e2e tests deflaking, better DX and more.
|
||||
|
||||
@ -1012,7 +1017,7 @@ git pull
|
||||
|
||||
You should now have an `nxCloudAccessToken` property specified in the `nx.json` file.
|
||||
|
||||
### Create a CI Workflow
|
||||
### Create a CI Workflow {% highlightColor="green" %}
|
||||
|
||||
Use the following command to generate a CI workflow file.
|
||||
|
||||
@ -1049,7 +1054,7 @@ jobs:
|
||||
- run: npx nx affected -t lint test build
|
||||
```
|
||||
|
||||
### Open a Pull Request
|
||||
### Open a Pull Request {% highlightColor="green" %}
|
||||
|
||||
Commit the changes and open a new PR on GitHub.
|
||||
|
||||
|
||||
@ -7,12 +7,13 @@ description: In this tutorial you'll create a frontend-focused workspace with Nx
|
||||
|
||||
In this tutorial you'll learn how to use Vue with Nx in a ["standalone" (non-monorepo) setup](/concepts/integrated-vs-package-based#standalone-applications). Not to be confused with the "Vue Standalone API", a standalone project in Nx is a non-monorepo setup where you have a single application at the root level.
|
||||
|
||||
What are you going to learn?
|
||||
What will you learn?
|
||||
|
||||
- how to add Nx to a Vue project
|
||||
- how to run a single task (i.e. serve your app) or run multiple tasks in parallel
|
||||
- how to leverage code generators to scaffold components
|
||||
- how to modularize your codebase and impose architectural constraints for better maintainability
|
||||
- [how to speed up CI with Nx Cloud ⚡](#fast-ci)
|
||||
|
||||
We'll start out this tutorial using Nx together with a Vue application generated with the default `npm create vue` command. Later, we'll add the `@nx/vue` plugin to show the nice enhancements that it can provide. [Visit our "Why Nx" page](/getting-started/why-nx) to learn more about plugins and what role they play in the Nx architecture.
|
||||
|
||||
@ -1027,7 +1028,11 @@ Learn more about how to [enforce module boundaries](/features/enforce-module-bou
|
||||
|
||||
When you are ready to add another application to the repo, you'll probably want to move `myvueapp` to its own folder. To do this, you can run the [`convert-to-monorepo` generator](/nx-api/workspace/generators/convert-to-monorepo) or [manually move the configuration files](/recipes/tips-n-tricks/standalone-to-integrated).
|
||||
|
||||
## Set Up CI for Your Vue App
|
||||
## Fast CI ⚡ {% highlightColor="green" %}
|
||||
|
||||
{% callout type="check" title="Repository with Nx" %}
|
||||
Make sure you have completed the previous sections of this tutorial before starting this one. If you want a clean starting point, you can check out the [reference code](https://github.com/nrwl/nx-recipes/tree/main/vue-app) as a starting point.
|
||||
{% /callout %}
|
||||
|
||||
This tutorial walked you through how Nx can improve the local development experience, but the biggest difference Nx makes is in CI. As repositories get bigger, making sure that the CI is fast, reliable and maintainable can get very challenging. Nx provides a solution.
|
||||
|
||||
@ -1036,7 +1041,7 @@ This tutorial walked you through how Nx can improve the local development experi
|
||||
- Nx Agents [efficiently distribute tasks across machines](/ci/concepts/parallelization-distribution) ensuring constant CI time regardless of the repository size. The right number of machines is allocated for each PR to ensure good performance without wasting compute.
|
||||
- Nx Atomizer [automatically splits](/ci/features/split-e2e-tasks) large e2e tests to distribute them across machines. Nx can also automatically [identify and rerun flaky e2e tests](/ci/features/flaky-tasks).
|
||||
|
||||
### Connect to Nx Cloud
|
||||
### Connect to Nx Cloud {% highlightColor="green" %}
|
||||
|
||||
Nx Cloud is a companion app for your CI system that provides remote caching, task distribution, e2e tests deflaking, better DX and more.
|
||||
|
||||
@ -1068,7 +1073,7 @@ git pull
|
||||
|
||||
You should now have an `nxCloudAccessToken` property specified in the `nx.json` file.
|
||||
|
||||
### Create a CI Workflow
|
||||
### Create a CI Workflow {% highlightColor="green" %}
|
||||
|
||||
Use the following command to generate a CI workflow file.
|
||||
|
||||
@ -1105,7 +1110,7 @@ jobs:
|
||||
- run: npx nx affected -t lint test build
|
||||
```
|
||||
|
||||
### Open a Pull Request
|
||||
### Open a Pull Request {% highlightColor="green" %}
|
||||
|
||||
Commit the changes and open a new PR on GitHub.
|
||||
|
||||
|
||||
@ -7,6 +7,7 @@ interface Heading {
|
||||
id: string;
|
||||
level: number;
|
||||
title: string;
|
||||
highlightColor?: 'blue' | 'yellow' | 'green' | 'red';
|
||||
}
|
||||
|
||||
export function collectHeadings(
|
||||
@ -28,8 +29,7 @@ export function collectHeadings(
|
||||
|
||||
if (typeof title === 'string') {
|
||||
sections.push({
|
||||
id: node.attributes['id'],
|
||||
level: node.attributes['level'],
|
||||
...node.attributes,
|
||||
title,
|
||||
});
|
||||
}
|
||||
@ -89,7 +89,31 @@ export function TableOfContents({
|
||||
'block w-full border-l-4 border-slate-200 py-1 pl-3 transition hover:border-slate-500 dark:border-slate-700/40 dark:hover:border-slate-700',
|
||||
{
|
||||
'border-slate-500 bg-slate-50 dark:border-slate-700 dark:bg-slate-800/60':
|
||||
activeId === item.id && !item.highlightColor,
|
||||
// region Highlight Color
|
||||
'border-blue-200 bg-blue-50 hover:border-blue-500 dark:border-blue-700/40 dark:bg-blue-800/40 dark:hover:border-blue-700':
|
||||
item.highlightColor === 'blue' &&
|
||||
activeId !== item.id,
|
||||
'border-blue-500 bg-blue-100 hover:border-blue-500 dark:border-blue-700 dark:bg-blue-800/60 dark:hover:border-blue-700':
|
||||
item.highlightColor === 'blue' &&
|
||||
activeId === item.id,
|
||||
'border-green-200 bg-green-50 hover:border-green-500 dark:border-green-700/40 dark:bg-green-800/40 dark:hover:border-green-700':
|
||||
item.highlightColor === 'green' &&
|
||||
activeId !== item.id,
|
||||
'border-green-500 bg-green-100 hover:border-green-500 dark:border-green-700 dark:bg-green-800/60 dark:hover:border-green-700':
|
||||
item.highlightColor === 'green' &&
|
||||
activeId === item.id,
|
||||
'border-yellow-200 bg-yellow-50 hover:border-yellow-500 dark:border-yellow-700/40 dark:bg-yellow-800/40 dark:hover:border-yellow-700':
|
||||
item.highlightColor === 'yellow' &&
|
||||
activeId !== item.id,
|
||||
'border-yellow-500 bg-yellow-100 hover:border-yellow-500 dark:border-yellow-700 dark:bg-yellow-800/60 dark:hover:border-yellow-700':
|
||||
item.highlightColor === 'yellow' &&
|
||||
activeId === item.id,
|
||||
'border-red-200 bg-red-50 hover:border-red-500 dark:border-red-700/40 dark:bg-red-800/40 dark:hover:border-red-700':
|
||||
item.highlightColor === 'red' && activeId !== item.id,
|
||||
'border-red-500 bg-red-100 hover:border-red-500 dark:border-red-700 dark:bg-red-800/60 dark:hover:border-red-700':
|
||||
item.highlightColor === 'red' && activeId === item.id,
|
||||
// endregion Highlight Color
|
||||
'pl-6': item.level === 3,
|
||||
}
|
||||
)}
|
||||
|
||||
@ -7,18 +7,30 @@ export function Heading({
|
||||
level = 1,
|
||||
children,
|
||||
className,
|
||||
highlightColor,
|
||||
}: {
|
||||
id: string;
|
||||
level: number;
|
||||
children: ReactNode;
|
||||
className: string;
|
||||
highlightColor?: 'green' | 'blue' | 'yellow' | 'red';
|
||||
}) {
|
||||
const Component: any = `h${level}`;
|
||||
|
||||
return (
|
||||
<Component
|
||||
id={id}
|
||||
className={['group', className].filter(Boolean).join(' ')}
|
||||
className={[
|
||||
'group',
|
||||
highlightColor && 'xl:-ml-5 xl:border-l-4 xl:pl-4',
|
||||
highlightColor === 'blue' && 'xl:border-blue-500',
|
||||
highlightColor === 'green' && 'xl:border-green-500',
|
||||
highlightColor === 'yellow' && 'xl:border-yellow-500',
|
||||
highlightColor === 'red' && 'xl:border-red-500',
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ')}
|
||||
>
|
||||
{children}
|
||||
<Link aria-hidden="true" href={`#${id}`}>
|
||||
|
||||
@ -48,6 +48,7 @@ export const heading: Schema = {
|
||||
id: { type: 'String' },
|
||||
level: { type: 'Number', required: true, default: 1 },
|
||||
className: { type: 'String' },
|
||||
highlightColor: { type: 'String' },
|
||||
},
|
||||
transform(node, config) {
|
||||
const attributes = node.transformAttributes(config);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user