[Rules] Use DashButton in zone-level instructions (#25380)

Author: pedrosousa

src/content/docs/rules/cloud-connector/create-dashboard.mdx

@@ -8,36 +8,36 @@ head:
     content: Configure a Cloud Connector rule in the dashboard
 ---
 
-import { Render, Steps } from "~/components";
+import { Render, Steps, DashButton } from "~/components";
 
 To configure a Cloud Connector rule in the dashboard:
 
 <Steps>
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com) and select your account and domain.
+1. In the Cloudflare dashboard, go to the **Cloud Connector** page.
 
-2. Go to **Rules** > **Cloud Connector**.
+   <DashButton url="/?to=/:account/:zone/rules/cloud-connector" />
 
-3. Select your [cloud provider](/rules/cloud-connector/providers/) (Cloudflare R2 or an external provider).
+2. Select your [cloud provider](/rules/cloud-connector/providers/) (Cloudflare R2 or an external provider).
 
-4. If you selected Cloudflare R2 in the previous step, select your bucket and your custom domain, and select **Next**.<br/>
+3. If you selected Cloudflare R2 in the previous step, select your bucket and your custom domain, and select **Next**.<br/>
    If you selected a different storage provider, enter the bucket URL and select **Next**.
 
    :::caution
    The bucket URL must follow a [specific format](/rules/cloud-connector/providers/) according to your provider.
    :::
 
-5. Enter a descriptive name for the rule in **Cloud Connector name**.
+4. Enter a descriptive name for the rule in **Cloud Connector name**.
 
-6. Under **If**, select **Custom filter expression** and [enter an expression](/ruleset-engine/rules-language/expressions/edit-expressions/) to define the traffic that will be redirected to the bucket. For example:
+5. Under **If**, select **Custom filter expression** and [enter an expression](/ruleset-engine/rules-language/expressions/edit-expressions/) to define the traffic that will be redirected to the bucket. For example:
    - To route all requests matching `http*://example.com/images/*` (HTTPS and HTTP requests) you could enter the following expression:<br/>
      `http.request.full_uri wildcard "http*://example.com/images/*"`
    - To route all requests matching `http*://images.example.com/*` (HTTPS and HTTP requests) you could enter the following expression:<br/>
      `http.request.full_uri wildcard "http*://images.example.com/*"`
 
    Alternatively, select **All incoming requests** to redirect all incoming traffic for your zone to the storage bucket you selected.
 
-7. To save and deploy your rule, select **Deploy**. If you are not ready to deploy the rule, select **Save as Draft**.
+6. To save and deploy your rule, select **Deploy**. If you are not ready to deploy the rule, select **Save as Draft**.
 
    <Render file="rules-creation-dash-dns-popup" product="rules" />
 

src/content/docs/rules/cloud-connector/examples/route-images-to-s3.mdx

@@ -7,28 +7,30 @@ products:
   - Cloud Connector
 ---
 
-import { Steps } from "~/components";
+import { Steps, DashButton } from "~/components";
 
 To route requests to `/images` on your domain to an AWS S3 bucket:
 
 <Steps>
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account and domain.
-2. Go to **Rules** > **Cloud Connector**.
-3. Select **Amazon Web Services - S3** as your [cloud provider](/rules/cloud-connector/providers/).
-4. Enter the bucket URL. You can structure the URL in two ways:
+1. In the Cloudflare dashboard, go to the **Cloud Connector** page.
+
+   <DashButton url="/?to=/:account/:zone/rules/cloud-connector" />
+
+2. Select **Amazon S3** as your [cloud provider](/rules/cloud-connector/providers/).
+3. Enter the bucket URL. You can structure the URL in two ways:
    - **Subdomain-style URL**: Set the hostname to `<BUCKET_NAME>.s3.amazonaws.com`. In this case, your files should be organized in the root of the bucket, meaning the URI path will map directly to the file. For example, `https://<YOUR_HOSTNAME>/images/file.jpg` will map to `https://<BUCKET_NAME>.s3.amazonaws.com/images/file.jpg`.
    - **URI path-style URL**: Set the hostname to `s3.amazonaws.com`. Here, your bucket must include a folder named `images`, and files should be placed inside this folder. The URI path will then include the bucket name, like `https://<YOUR_HOSTNAME>/<BUCKET_NAME>/images/file.jpg` mapping to `https://s3.amazonaws.com/<BUCKET_NAME>/images/file.jpg`.
-5. _(Optional)_ Use [URL Rewrite Rules](/rules/transform/url-rewrite/) to adjust the URL structure. For example, you can [create a URL rewrite](/rules/transform/url-rewrite/create-dashboard/) that changes `/images` to `/<BUCKET_NAME>/images` to match the URI path-style URL structure.
-6. _(Optional)_ Use [Cache Rules](/cache/how-to/cache-rules/) to adjust the caching behavior for objects returned from the bucket. For example, you can [create a cache rule](/cache/how-to/cache-rules/create-dashboard/) that caches every returned object matching the `/images/*` URI path for seven days:
+4. (Optional) Use [URL Rewrite Rules](/rules/transform/url-rewrite/) to adjust the URL structure. For example, you can [create a URL rewrite](/rules/transform/url-rewrite/create-dashboard/) that changes `/images` to `/<BUCKET_NAME>/images` to match the URI path-style URL structure.
+5. (Optional) Use [Cache Rules](/cache/how-to/cache-rules/) to adjust the caching behavior for objects returned from the bucket. For example, you can [create a cache rule](/cache/how-to/cache-rules/create-dashboard/) that caches every returned object matching the `/images/*` URI path for seven days:
    - **If incoming requests match** > Custom filter expression: `(starts_with(http.request.uri.path, "/images/"))`
    - **Cache eligibility**: Eligible for cache
      - **Edge TTL** > Ignore cache-control header and use this TTL: _7 days_
-7. Select **Next** and enter a descriptive name like `Route images to S3` in **Cloud Connector name**.
-8. Under **If**, select **Custom filter expression** and enter the following expression:<br />
+6. Select **Next** and enter a descriptive name like `Route images to S3` in **Cloud Connector name**.
+7. Under **If**, select **Custom filter expression** and enter the following expression:<br />
    `http.request.full_uri wildcard "http*://<YOUR_HOSTNAME>/images/*"`<br />
    Replace `<YOUR_HOSTNAME>` with desired hostname.
-9. Select **Deploy** to activate the rule.
+8. Select **Deploy** to activate the rule.
 
 </Steps>
 

src/content/docs/rules/cloud-connector/examples/send-eu-visitors-to-gcs.mdx

@@ -7,25 +7,27 @@ products:
   - Cloud Connector
 ---
 
-import { Steps } from "~/components";
+import { Steps, DashButton } from "~/components";
 
 To route requests from visitors in the European Union to a Google Cloud Storage bucket:
 
 <Steps>
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account and domain.
-2. Go to **Rules** > **Cloud Connector**.
-3. Select **Google Cloud Platform - Cloud Storage** as your [cloud provider](/rules/cloud-connector/providers/).
-4. Enter the bucket URL. You can structure the URL in two ways:
+1. In the Cloudflare dashboard, go to the **Cloud Connector** page.
+
+   <DashButton url="/?to=/:account/:zone/rules/cloud-connector" />
+
+2. Select **Google Cloud Storage** as your [cloud provider](/rules/cloud-connector/providers/).
+3. Enter the bucket URL. You can structure the URL in two ways:
    - **Subdomain-style URL**: For `<BUCKET_NAME>.storage.googleapis.com`, your files should be organized in the root of the bucket. For example, `https://<YOUR_HOSTNAME>/index.html` will map to `https://<BUCKET_NAME>.storage.googleapis.com/index.html`.
    - **URI path-style URL**: If you set the hostname to `storage.googleapis.com`, your bucket must include folders corresponding to the intended URI paths. For example, if you want `https://<YOUR_HOSTNAME>/eu/index.html` to map to a file in your bucket, the file should be placed at `https://storage.googleapis.com/<BUCKET_NAME>/eu/index.html`.
-5. _(Optional)_ Use [URL Rewrite Rules](/rules/transform/url-rewrite/) to adjust the URL structure. For example, you can [create a URL rewrite](/rules/transform/url-rewrite/create-dashboard/) that changes `/eu` to `/<BUCKET_NAME>` to match the URI path-style URL structure.
-6. _(Optional)_ Use [Cache Rules](/cache/how-to/cache-rules/) to adjust the caching behavior for objects returned from the bucket. For example, you can [create a cache rule](/cache/how-to/cache-rules/create-dashboard/) that caches every returned object matching the `/eu` URI path for seven days (defined through the **Edge TTL** setting).
-7. Select **Next** and enter a descriptive name like `Route EU visitors to GCP` in **Cloud Connector name**.
-8. Under **If**, select **Custom filter expression** and enter the following expression:
+4. (Optional) Use [URL Rewrite Rules](/rules/transform/url-rewrite/) to adjust the URL structure. For example, you can [create a URL rewrite](/rules/transform/url-rewrite/create-dashboard/) that changes `/eu` to `/<BUCKET_NAME>` to match the URI path-style URL structure.
+5. (Optional) Use [Cache Rules](/cache/how-to/cache-rules/) to adjust the caching behavior for objects returned from the bucket. For example, you can [create a cache rule](/cache/how-to/cache-rules/create-dashboard/) that caches every returned object matching the `/eu` URI path for seven days (defined through the **Edge TTL** setting).
+6. Select **Next** and enter a descriptive name like `Route EU visitors to GCP` in **Cloud Connector name**.
+7. Under **If**, select **Custom filter expression** and enter the following expression:
    `(ip.src.is_in_european_union)`<br />
    This expression targets traffic from European Union users.
-9. Select **Deploy** to activate the rule.
+8. Select **Deploy** to activate the rule.
 
 </Steps>
 

src/content/docs/rules/cloud-connector/examples/serve-static-assets-from-azure.mdx

@@ -7,23 +7,25 @@ products:
   - Cloud Connector
 ---
 
-import { Steps } from "~/components";
+import { Steps, DashButton } from "~/components";
 
 To serve static assets from an Azure Blob Storage container:
 
 <Steps>
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account and domain.
-2. Navigate to **Rules** > **Cloud Connector**.
-3. Select **Microsoft Azure - Blob Storage** as your [cloud provider](/rules/cloud-connector/providers/).
-4. Enter the bucket URL. Use the following URL structure:
+1. In the Cloudflare dashboard, go to the **Cloud Connector** page.
+
+   <DashButton url="/?to=/:account/:zone/rules/cloud-connector" />
+
+2. Select **Microsoft Azure** as your [cloud provider](/rules/cloud-connector/providers/).
+3. Enter the bucket URL. Use the following URL structure:
    - **Subdomain-style URL**: Set the hostname to `<BUCKET_NAME>.blob.core.windows.net`. In this case, your bucket should include a folder named `static-assets`, and files should be placed inside this folder. For example, `https://<YOUR_HOSTNAME>/static-assets/style.css` will map to `https://<BUCKET_NAME>.blob.core.windows.net/static-assets/style.css`.
-5. _(Optional)_ Use [URL Rewrite Rules](/rules/transform/url-rewrite/) to adjust the URL structure. For example, you can [create a URL rewrite](/rules/transform/url-rewrite/create-dashboard/) that changes `/static-assets` to `/my-pages-project/static-assets` to match the file structure of your object storage bucket.
-6. _(Optional)_ Use [Cache Rules](/cache/how-to/cache-rules/) to adjust the caching behavior for objects returned from the bucket. For example, you can [create a cache rule](/cache/how-to/cache-rules/create-dashboard/) that caches every returned object matching the `/static-assets` URI path for seven days (defined through the **Edge TTL** setting).
-7. Click **Next** and enter a descriptive name like `Serve static assets from Azure` in **Cloud Connector name**.
-8. Under **If**, select **Custom filter expression** and enter the following expression:
+4. (Optional) Use [URL Rewrite Rules](/rules/transform/url-rewrite/) to adjust the URL structure. For example, you can [create a URL rewrite](/rules/transform/url-rewrite/create-dashboard/) that changes `/static-assets` to `/my-pages-project/static-assets` to match the file structure of your object storage bucket.
+5. (Optional) Use [Cache Rules](/cache/how-to/cache-rules/) to adjust the caching behavior for objects returned from the bucket. For example, you can [create a cache rule](/cache/how-to/cache-rules/create-dashboard/) that caches every returned object matching the `/static-assets` URI path for seven days (defined through the **Edge TTL** setting).
+6. Click **Next** and enter a descriptive name like `Serve static assets from Azure` in **Cloud Connector name**.
+7. Under **If**, select **Custom filter expression** and enter the following expression:
    `http.request.full_uri wildcard "http*://<YOUR_HOSTNAME>/static-assets/*"`<br />
-9. Select **Deploy** to activate the rule.
+8. Select **Deploy** to activate the rule.
 
 </Steps>
 

src/content/docs/rules/compression-rules/create-dashboard.mdx

@@ -6,20 +6,22 @@ sidebar:
   label: Create a rule in the dashboard
 ---
 
-import { Render, Steps } from "~/components";
+import { Render, Steps, DashButton } from "~/components";
 
 <Steps>
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com) and select your account and domain.
-2. Go to **Rules** > **Overview**.
-3. Select **Create rule** > **Compression Rule**.
-4. (Optional) Select one of the rule templates that address common use cases. Then, review and adjust the proposed rule configuration.
-5. Enter a descriptive name for the rule in **Rule name**.
-6. Under **When incoming requests match**, select if you wish to apply the rule to [default content types](/speed/optimization/content/compression/#compression-between-cloudflare-and-website-visitors) (content types that Cloudflare compresses by default), or to requests that match a custom filter expression.
-7. (Optional) To define a custom expression, use the Expression Builder (specifying one or more values for **Field**, **Operator**, and **Value**) or manually enter an expression using the Expression Editor. For more information, refer to [Edit rule expressions](/ruleset-engine/rules-language/expressions/edit-expressions/).
-8. Under **Compression options**, set the [compression options](/rules/compression-rules/settings/#dashboard-configuration-settings).
-9. To save and deploy your rule, select **Deploy**. If you are not ready to deploy your rule, select **Save as Draft**.
+1. In the Cloudflare dashboard, go to the Rules **Overview** page.
+
+   <DashButton url="/?to=/:account/:zone/rules/overview" />
+
+2. Select **Create rule** > **Compression Rule**.
+3. (Optional) Select one of the rule templates that address common use cases. Then, review and adjust the proposed rule configuration.
+4. Enter a descriptive name for the rule in **Rule name**.
+5. Under **When incoming requests match**, select if you wish to apply the rule to [default content types](/speed/optimization/content/compression/#compression-between-cloudflare-and-website-visitors) (content types that Cloudflare compresses by default), or to requests that match a custom filter expression.
+6. (Optional) To define a custom expression, use the Expression Builder (specifying one or more values for **Field**, **Operator**, and **Value**) or manually enter an expression using the Expression Editor. For more information, refer to [Edit rule expressions](/ruleset-engine/rules-language/expressions/edit-expressions/).
+7. Under **Compression options**, set the [compression options](/rules/compression-rules/settings/#dashboard-configuration-settings).
+8. To save and deploy your rule, select **Deploy**. If you are not ready to deploy your rule, select **Save as Draft**.
 
    <Render file="rules-creation-dash-dns-popup" product="rules" />
 
-</Steps>
+</Steps>

src/content/docs/rules/configuration-rules/create-dashboard.mdx

@@ -6,20 +6,22 @@ sidebar:
   label: Create a rule in the dashboard
 ---
 
-import { Render, Steps } from "~/components";
+import { Render, Steps, DashButton } from "~/components";
 
 <Steps>
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com) and select your account and domain.
-2. Go to **Rules** > **Overview**.
-3. Select **Create rule** > **Configuration Rule**.
-4. (Optional) Select one of the rule templates that address common use cases. Then, review and adjust the proposed rule configuration.
-5. Enter a descriptive name for the rule in **Rule name**.
-6. Under **When incoming requests match**, select if you wish to apply the rule to all incoming requests or only to requests that match a custom filter expression.
-7. (Optional) To define a custom expression, use the Expression Builder (specifying one or more values for **Field**, **Operator**, and **Value**) or manually enter an expression using the Expression Editor. For more information, refer to [Edit expressions in the dashboard](/ruleset-engine/rules-language/expressions/edit-expressions/).
-8. Under **Then the settings are**, add the [configuration settings](/rules/configuration-rules/settings/) you wish to change for requests matching the rule expression.
-9. To save and deploy your rule, select **Deploy**. If you are not ready to deploy your rule, select **Save as Draft**.
+1. In the Cloudflare dashboard, go to the Rules **Overview** page.
+
+   <DashButton url="/?to=/:account/:zone/rules/overview" />
+
+2. Select **Create rule** > **Configuration Rule**.
+3. (Optional) Select one of the rule templates that address common use cases. Then, review and adjust the proposed rule configuration.
+4. Enter a descriptive name for the rule in **Rule name**.
+5. Under **When incoming requests match**, select if you wish to apply the rule to all incoming requests or only to requests that match a custom filter expression.
+6. (Optional) To define a custom expression, use the Expression Builder (specifying one or more values for **Field**, **Operator**, and **Value**) or manually enter an expression using the Expression Editor. For more information, refer to [Edit expressions in the dashboard](/ruleset-engine/rules-language/expressions/edit-expressions/).
+7. Under **Then the settings are**, add the [configuration settings](/rules/configuration-rules/settings/) you wish to change for requests matching the rule expression.
+8. To save and deploy your rule, select **Deploy**. If you are not ready to deploy your rule, select **Save as Draft**.
 
    <Render file="rules-creation-dash-dns-popup" product="rules" />
 
-</Steps>
+</Steps>