[Pages] Adding DashButton for Zone-level directions (#25229)

Author: Oxyjun

src/content/docs/pages/configuration/build-caching.mdx

@@ -3,6 +3,8 @@ pcx_content_type: concept
 title: Build caching
 ---
 
+import { DashButton, Steps } from "~/components";
+
 Improve Pages build times by caching dependencies and build output between builds with a project-wide shared cache.
 
 The first build to occur after enabling build caching on your Pages project will save to cache. Every subsequent build will restore from cache unless configured otherwise.
@@ -52,16 +54,26 @@ The following limits are imposed for build caching:
 
 To enable build caching :
 
-1. Navigate to [Workers & Pages Overview](https://dash.cloudflare.com) on the Dashboard.
+<Steps>
+1. Go to the **Workers & Pages** in the Cloudflare dashboard.
+
+   <DashButton url="/?to=/:account/workers-and-pages" />
+
 2. Find your Pages project.
 3. Go to **Settings** > **Build** > **Build cache**.
 4. Select **Enable** to turn on build caching.
+</Steps>
 
 ## Clear build cache
 
 The build cache can be cleared for a project if needed, such as when debugging build issues. To clear the build cache:
 
-1. Navigate to [Workers & Pages Overview](https://dash.cloudflare.com) on the Dashboard.
+<Steps>
+1. Go to the **Workers & Pages** in the Cloudflare dashboard.
+
+   <DashButton url="/?to=/:account/workers-and-pages" />
+
 2. Find your Pages project.
 3. Go to **Settings** > **Build** > **Build cache**.
 4. Select **Clear Cache** to clear the build cache.
+</Steps>

src/content/docs/pages/configuration/build-watch-paths.mdx

@@ -3,14 +3,22 @@ pcx_content_type: concept
 title: Build watch paths
 ---
 
+import { DashButton, Steps } from "~/components";
+
 When you connect a git repository to Pages, by default a change to any file in the repository will trigger a Pages build. You can configure Pages to include or exclude specific paths to specify if Pages should skip a build for a given path. This can be especially helpful if you are using a monorepo project structure and want to limit the amount of builds being kicked off.
 
 ## Configure paths
 
 To configure which paths are included and excluded:
 
-1. In **Overview**, select your Pages project.
-2. Go to **Settings** > **Build** > **Build watch paths**. Pages will default to setting your project’s includes paths to everything (\[\*]) and excludes paths to nothing (`[]`).
+<Steps>
+1. Go to the **Workers & Pages** in the Cloudflare dashboard.
+
+   <DashButton url="/?to=/:account/workers-and-pages" />
+
+2. Find your Pages project.
+3. Go to **Settings** > **Build** > **Build watch paths**. Pages will default to setting your project's includes paths to everything (\[\*]) and excludes paths to nothing (`[]`).
+</Steps>
 
 The configuration fields can be filled in two ways:
 

src/content/docs/pages/configuration/custom-domains.mdx

@@ -3,7 +3,7 @@ pcx_content_type: how-to
 title: Custom domains
 ---
 
-import { Render, DashButton } from "~/components";
+import { Render, DashButton, Steps } from "~/components";
 
 When deploying your Pages project, you may wish to point custom domains (or subdomains) to your site.
 
@@ -49,31 +49,35 @@ To ensure a custom domain is added successfully, you must go through the [Add a
 
 To detach a custom domain from your Pages project, you must modify your zone's DNS records.
 
-First, log in to the Cloudflare dashboard > select your account in **Account Home** > select your website > **DNS**.
+<Steps>
+1. Go to the **DNS Records** page for your website in the Cloudflare dashboard.
 
-Then, in **DNS** > **Records**:
+   <DashButton url="/?to=/:account/:zone/dns/records" />
 
-1. Locate your Pages project's CNAME record.
-2. Select **Edit**.
-3. Select **Delete**.
+2. Locate your Pages project's CNAME record.
+3. Select **Edit**.
+4. Select **Delete**.
 
-Next, in the Cloudflare dashboard, go to the **Workers & Pages** page.
+5. In the Cloudflare dashboard, go to the **Workers & Pages** page.
 
-<DashButton url="/?to=/:account/workers-and-pages" />
+   <DashButton url="/?to=/:account/workers-and-pages" />
 
-1. Select your Pages project.
-2. Go to **Custom domains**.
-3. Select the **three dot icon** next to your custom domain > **Remove domain**.
+6. Select your Pages project.
+7. Go to **Custom domains**.
+8. Select the **three dot icon** next to your custom domain > **Remove domain**.
+</Steps>
 
 After completing these steps, your Pages project will only be accessible through the `*.pages.dev` subdomain you chose when creating your project.
 
 ## Disable access to `*.pages.dev` subdomain
 
 To disable access to your project's provided `*.pages.dev` subdomain:
 
+<Steps>
 1. Use Cloudflare Access over your previews (`*.{project}.pages.dev`). Refer to [Customize preview deployments access](/pages/configuration/preview-deployments/#customize-preview-deployments-access).
 
 2. Redirect the `*.pages.dev` URL associated with your production Pages project to a custom domain. You can use the account-level [Bulk Redirect](/rules/url-forwarding/bulk-redirects/) feature to redirect your `*.pages.dev` URL to a custom domain.
+</Steps>
 
 ## Caching
 

src/content/docs/pages/configuration/git-integration/index.mdx

@@ -3,6 +3,8 @@ pcx_content_type: concept
 title: Git integration
 ---
 
+import { Steps, DashButton } from "~/components";
+
 You can connect each Cloudflare Pages project to a [GitHub](/pages/configuration/git-integration/github-integration) or [GitLab](/pages/configuration/git-integration/gitlab-integration) repository, and Cloudflare will automatically deploy your code every time you push a change to a branch.
 
 :::note
@@ -50,8 +52,14 @@ This can be useful for managing repository access or troubleshooting installatio
 
 If you are using a Git-integrated project and do not want to trigger deployments every time you push a commit, you can use [branch control](/pages/configuration/branch-build-controls/) to disable/pause builds:
 
-1. Go to the **Settings** of your **Pages project** in the [Cloudflare dashboard](https://dash.cloudflare.com).
-2. Navigate to **Build** > edit **Branch control** > turn off **Enable automatic production branch deployments**.
-3. You can also change your Preview branch to **None (Disable automatic branch deployments)** to pause automatic preview deployments.
+<Steps>
+1. Go to **Workers & Pages** in the Cloudflare dashboard.
+
+   <DashButton url="/?to=/:account/workers-and-pages" />
+
+2. Select your Pages project.
+3. Navigate to **Build** > edit **Branch control** > turn off **Enable automatic production branch deployments**.
+4. You can also change your Preview branch to **None (Disable automatic branch deployments)** to pause automatic preview deployments.
+</Steps>
 
 Then, you can use Wrangler to deploy directly to your Pages project and make changes to your Git repository without automatically triggering a build.

src/content/docs/pages/functions/bindings.mdx

@@ -437,12 +437,13 @@ When developing locally using Wrangler, you can define an AI binding using the `
 
 To configure a Workers AI binding via the Cloudflare dashboard:
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com) and select your account.
-2. In **Account Home**, select **Workers & Pages**.
-3. Select your Pages project > **Settings**.
-4. Select your Pages environment > **Bindings** > **Add** > **Workers AI**.
-5. Give your binding a name under **Variable name**.
-6. Redeploy your project for the binding to take effect.
+1. Go to the **Workers & Pages** page.
+
+   <DashButton url="/?to=/:account/workers-and-pages" />
+2. Select your Pages project > **Settings**.
+3. Select your Pages environment > **Bindings** > **Add** > **Workers AI**.
+4. Give your binding a name under **Variable name**.
+5. Redeploy your project for the binding to take effect.
 
 ### Use Workers AI bindings
 

src/content/docs/pages/how-to/npm-private-registry.mdx

@@ -4,6 +4,8 @@ title: Install private packages
 
 ---
 
+import { Steps, DashButton } from "~/components";
+
 Cloudflare Pages supports custom package registries, allowing you to include private dependencies in your application. While this walkthrough focuses specifically on [npm](https://www.npmjs.com/), the Node package manager and registry, the same approach can be applied to other registry tools.
 
 You will be be adjusting the [environment variables](/pages/configuration/build-configuration/#environment-variables) in your Pages project's **Settings**. An existing website can be modified at any time, but new projects can be initialized with these settings, too. Either way, altering the project settings will not be reflected until its next deployment.
@@ -70,8 +72,13 @@ Your Pages project must then have the matching [environment variables](/pages/co
 
 In the event that your local development no longer works with your new `.npmrc` file, you will need to add some additional changes:
 
+<Steps>
 1. Rename the Pages-compliant `.npmrc` file to `.npmrc.pages`. This should be referencing environment variables.
-
 2. Restore your previous `.npmrc` file – the version that was previously working for you and your teammates.
+3. Go to **Workers & Pages** in the Cloudflare dashboard.
+
+   <DashButton url="/?to=/:account/workers-and-pages" />
 
-3. Go to your Pages project > **Settings** > **Environment variables**, add a new [environment variable](/pages/configuration/build-configuration/#environment-variables) named [`NPM_CONFIG_USERCONFIG`](https://docs.npmjs.com/cli/v6/using-npm/config#npmrc-files) and set its value to `/opt/buildhome/repo/.npmrc.pages`. If your `.npmrc.pages` file is not in your project's root directory, adjust this path accordingly.
+4. Select your Pages project.
+5. Go to **Settings** > **Environment variables**, add a new [environment variable](/pages/configuration/build-configuration/#environment-variables) named [`NPM_CONFIG_USERCONFIG`](https://docs.npmjs.com/cli/v6/using-npm/config#npmrc-files) and set its value to `/opt/buildhome/repo/.npmrc.pages`. If your `.npmrc.pages` file is not in your project's root directory, adjust this path accordingly.
+</Steps>

src/content/docs/pages/how-to/use-direct-upload-with-continuous-integration.mdx

@@ -38,7 +38,13 @@ Now that you have created your API token, you can use it to push your project fr
 
 ### Get project account ID
 
-To find your account ID, log in to the Cloudflare dashboard > select your zone in **Account Home** > find your account ID in **Overview** under **API** on the right-side menu. If you have not added a zone, add one by selecting **Add** > **Connect a domain**. You can purchase a domain from [Cloudflare's registrar](/registrar/).
+To find your account ID, go to the **Zone Overview** page in the Cloudflare dashboard.
+
+   <DashButton url="/?to=/:account/:zone/" />
+
+Find your account ID in the **API** section on the right-hand side menu.
+
+If you have not added a zone, add one by selecting **Add** > **Connect a domain**. You can purchase a domain from [Cloudflare's registrar](/registrar/).
 
 ## Use GitHub Actions
 

src/content/docs/pages/migrations/migrating-from-netlify/index.mdx

@@ -10,6 +10,8 @@ sidebar:
 
 ---
 
+import { DashButton } from "~/components";
+
 In this tutorial, you will learn how to migrate your Netlify application to Cloudflare Pages.
 
 ## Finding your build command and build directory
@@ -93,7 +95,11 @@ If you choose to use a custom domain for your Pages, you can set it to the same
 
 ## Cleaning up your old application and assigning the domain
 
-In the Cloudflare dashboard, go to **DNS** > **Records** and review that you have updated the CNAME record for your domain from Netlify to Cloudflare Pages. With your DNS record updated, requests will go to your Pages application.
+In the Cloudflare dashboard, go to the **DNS Records** page.
+
+<DashButton url="/?to=/:account/:zone/dns/records" />
+
+Review that you have updated the CNAME record for your domain from Netlify to Cloudflare Pages. With your DNS record updated, requests will go to your Pages application.
 
 In **DNS**, your record's **Content** should be your `<SUBDOMAIN>.pages.dev` subdomain.