[Rules] Use Steps component (#24989)

Author: pedrosousa

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

@@ -8,10 +8,12 @@ head:
     content: Configure a Cloud Connector rule in the dashboard
 ---
 
-import { Render } from "~/components";
+import { Render, Steps } 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.
 
 2. Go to **Rules** > **Cloud Connector**.
@@ -38,3 +40,5 @@ To configure a Cloud Connector rule in the dashboard:
 7. 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" />
+
+</Steps>

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

@@ -7,8 +7,12 @@ products:
   - Cloud Connector
 ---
 
+import { Steps } 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/).
@@ -26,4 +30,6 @@ To route requests to `/images` on your domain to an AWS S3 bucket:
    Replace `<YOUR_HOSTNAME>` with desired hostname.
 9. Select **Deploy** to activate the rule.
 
+</Steps>
+
 This setup will route all traffic matching `http*://<YOUR_HOSTNAME>/images/*` (HTTPS and HTTP requests) to your S3 bucket. Make sure to replace `<YOUR_HOSTNAME>` with your actual hostname and adjust the example paths according to your setup.

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

@@ -7,8 +7,12 @@ products:
   - Cloud Connector
 ---
 
+import { Steps } 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/).
@@ -23,4 +27,6 @@ To route requests from visitors in the European Union to a Google Cloud Storage
    This expression targets traffic from European Union users.
 9. Select **Deploy** to activate the rule.
 
+</Steps>
+
 This configuration will route traffic from EU visitors to your Google Cloud Storage bucket. Make sure to replace `<YOUR_HOSTNAME>` with your actual hostname and adjust the example paths according to your setup.

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

@@ -7,8 +7,12 @@ products:
   - Cloud Connector
 ---
 
+import { Steps } 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/).
@@ -21,4 +25,6 @@ To serve static assets from an Azure Blob Storage container:
    `http.request.full_uri wildcard "http*://<YOUR_HOSTNAME>/static-assets/*"`<br />
 9. Select **Deploy** to activate the rule.
 
+</Steps>
+
 This setup ensures that all traffic matching `http*://<YOUR_HOSTNAME>/static-assets/*` (HTTPS and HTTP requests) is served from your Azure Blob Storage container. Make sure to replace `<YOUR_HOSTNAME>` with your actual hostname and adjust the example paths according to your setup.

src/content/docs/rules/cloud-connector/providers.mdx

@@ -5,7 +5,7 @@ sidebar:
   order: 5
 ---
 
-import { Render } from "~/components";
+import { Render, Steps } from "~/components";
 
 Cloud Connector currently supports the following cloud providers and services:
 
@@ -43,11 +43,15 @@ The SSL setting applied to requests between Cloud Connector and AWS S3 depends o
 
 ### Get the bucket URL
 
+<Steps>
+
 1. Go to the [Amazon S3 console](https://console.aws.amazon.com/s3/) and select **Buckets** in the navigation pane.
 2. Select the bucket name.
 3. Go to the **Properties** tab.
 4. Select the **Static Website Hosting** card. The **Endpoint** field shows your bucket URL.
 
+</Steps>
+
 For more information, refer to the [Amazon S3 documentation](https://docs.aws.amazon.com/AmazonS3/latest/userguide/EnableWebsiteHosting.html).
 
 <Render file="cloud-connector-limit-bucket-to-cloudflare-ips" product="rules" />
@@ -66,6 +70,8 @@ Cloud Connector supports both subdomain and URI path-style URLs:
 
 ### Get the bucket URL
 
+<Steps>
+
 1. Go to the [Google Cloud console](https://console.cloud.google.com/storage/browser) and select **Buckets**.
 2. Select the bucket name.
 3. For one of the files already in the bucket, select the link icon in the **Public** column to copy the file's public URL to the clipboard. The file URL will have the following format:
@@ -75,6 +81,8 @@ Cloud Connector supports both subdomain and URI path-style URLs:
    To obtain the subdomain bucket URL, refactor the file URL to `<BUCKET_NAME>.storage.googleapis.com` format.<br/>
    To obtain the URI path bucket URL, remove `https://` and `/<BUCKET_NAME>/<OBJECT_NAME>` from the file URL.
 
+</Steps>
+
 If the files in your bucket are not publicly accessible, you must change the bucket permissions. For details, refer to the [Google Cloud Storage documentation](https://cloud.google.com/storage/docs/access-control/making-data-public#buckets).
 
 <Render file="cloud-connector-limit-bucket-to-cloudflare-ips" product="rules" />
@@ -90,10 +98,14 @@ For Azure Blog Storage, Cloud Connector supports only subdomain URLs like `<BUCK
 
 ### Get the bucket URL
 
+<Steps>
+
 1. Go to the [Azure portal](https://portal.azure.com/) and select your storage account.
 2. In the menu pane, under **Settings**, select **Endpoints**.
 3. Get your bucket URL from the **Blob service** endpoint or the **Static website** endpoint.
 
+</Steps>
+
 If the blob container is not configured for public access, you must change the container settings. For details, refer to the [Azure Storage documentation](https://learn.microsoft.com/en-us/azure/storage/blobs/anonymous-read-access-configure?tabs=portal).
 
 <Render file="cloud-connector-limit-bucket-to-cloudflare-ips" product="rules" />

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

@@ -6,7 +6,9 @@ sidebar:
   label: Create a rule in the dashboard
 ---
 
-import { Render } from "~/components";
+import { Render, Steps } 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**.
@@ -19,3 +21,5 @@ import { Render } from "~/components";
 9. 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>

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

@@ -6,7 +6,9 @@ sidebar:
   label: Create a rule in the dashboard
 ---
 
-import { Render } from "~/components";
+import { Render, Steps } 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**.
@@ -19,3 +21,5 @@ import { Render } from "~/components";
 9. 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>

src/content/docs/rules/custom-errors/create-rules.mdx

@@ -5,12 +5,14 @@ sidebar:
   order: 3
 ---
 
-import { APIRequest, Render } from "~/components";
+import { APIRequest, Render, Steps } from "~/components";
 
 ## In the dashboard
 
 ### Create a custom error rule {/* create-a-custom-error-rule-dashboard */}
 
+<Steps>
+
 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and website.
 2. Go to **Rules** > **Overview**.
 3. Select **Create rule** > **Custom Error Rule**.
@@ -33,22 +35,32 @@ import { APIRequest, Render } from "~/components";
 
 9. To save and deploy your rule, select **Deploy**. If you are not ready to deploy your rule, select **Save as Draft**.
 
+</Steps>
+
 ### Create a custom error asset {/* create-a-custom-error-asset-dashboard */}
 
+<Steps>
+
 1. In the **Create Custom Error Asset** sidebar, enter a name for the asset in **Asset name**.
 2. (Optional) Enter a description for the asset in **Description**.
 3. In **URL**, enter the URL of the page you want to fetch and store in Cloudflare's global network. Cloudflare will fetch all the page resources and store a minified version of the page you can use in one or more custom error rules.
 4. Select **Save**.
 
+</Steps>
+
 To review existing custom error assets, go to **Rules** > **Settings** > **Custom Error Assets** tab.
 
 ## Via API
 
 To configure a custom error rule via API:
 
+<Steps>
+
 1. (Optional) [Create a custom error asset](#create-a-custom-error-asset-api) based on a URL you provide.
 2. [Create a custom error rule](#create-a-custom-error-rule-api) in the `http_custom_errors` phase, using the [Rulesets API](/ruleset-engine/rulesets-api/).
 
+</Steps>
+
 ### Create a custom error asset {/* create-a-custom-error-asset-api */}
 
 The following `POST` request creates new a custom error asset in a zone based on the provided URL:
@@ -86,18 +98,22 @@ When creating a custom error rule via API, make sure you:
 
 The first rule in the `http_custom_errors` phase ruleset that matches will be applied. No other rules in the ruleset will be matched or applied. Additionally, custom error rules defined at the zone level will have priority over rules defined at the account level.
 
-### General procedure
+#### General procedure
 
 Follow this workflow to create a custom error rule for a given zone via API:
 
+<Steps>
+
 1. Use the [List zone rulesets](/api/resources/rulesets/methods/list/) operation to check if there is already a ruleset for the `http_custom_errors` phase at the zone level.
 2. If the phase ruleset does not exist, create it using the [Update a zone entry point ruleset](/api/resources/rulesets/subresources/phases/methods/update/) operation, which allows you to create a ruleset if it does not exist and update all the rules in the ruleset. Create the ruleset in the `http_custom_errors` phase.
 
    If the phase ruleset already exists, use the [Update a zone entry point ruleset](/api/resources/rulesets/subresources/phases/methods/update/) operation to replace all the rules in the ruleset, or the [Add rule to ruleset](/ruleset-engine/rulesets-api/add-rule/) operation to add a rule to the existing rules in the ruleset.
 
+</Steps>
+
 To create a custom error rule at the account level, use the corresponding account-level API endpoints.
 
-### Example
+#### Example
 
 This example configures a custom error rule returning a [previously created custom error asset](#create-a-custom-error-asset-api) named `500_error_template` for responses with a `500` HTTP status code.
 
@@ -131,7 +147,7 @@ This example configures a custom error rule returning a [previously created cust
 
 This `PUT` request, corresponding to the [Update a zone entry point ruleset](/api/resources/rulesets/subresources/phases/methods/update/) operation, replaces any existing rules in the `http_custom_errors` phase entry point ruleset.
 
-## Required API token permissions
+### Required API token permissions
 
 The API token used in API requests to manage Custom Error Rules and Custom Error Assets must have at least the following permission:
 

src/content/docs/rules/custom-errors/edit-error-pages.mdx

@@ -5,7 +5,7 @@ sidebar:
   order: 2
 ---
 
-import { Details, DashButton } from "~/components";
+import { Details, DashButton, Steps } from "~/components";
 
 ## Before you start
 
@@ -61,6 +61,8 @@ The following HTML code is an example error page for 5XX errors without styling:
 
 To update an account-level custom error page:
 
+<Steps>
+
 1. In the Cloudflare dashboard, go to the **Settings** page.
 
    <DashButton url="/?to=/:account/configurations" />
@@ -71,17 +73,23 @@ To update an account-level custom error page:
 5. To use Cloudflare's default page, select **Cloudflare default page.** To provide a custom error page, select **Custom page** and enter the URL of the custom error page you created.
 6. Select **Confirm**.
 
+</Steps>
+
 ### Zone-level custom error page
 
 To edit a zone-level custom error page:
 
+<Steps>
+
 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and website.
 2. Go to **Error Pages** and identify your desired custom error page type.
 3. (Optional) To preview the current error page (default or custom), select the link in the **Show** column.
 4. To edit the error page, select the three dots > **Edit** next to the page type you previously identified.
 5. To use Cloudflare's default page, select **Cloudflare default page.** To provide a custom error page, select **Custom page** and enter the URL of the custom error page you created.
 6. Select **Confirm**.
 
+</Steps>
+
 ### Fetch custom error page again
 
 After successfully setting the content of the custom error page in **Error Pages**, you can remove the page from your origin server.

src/content/docs/rules/custom-errors/index.mdx

@@ -8,7 +8,7 @@ head:
     content: Custom Errors
 ---
 
-import { FeatureTable, Render } from "~/components";
+import { FeatureTable, Render, Steps } from "~/components";
 
 Use Custom Errors to return custom content to your website visitors in case of HTTP errors returned by an origin server or by a Cloudflare product (including Workers), or when showing a [security challenge](/cloudflare-challenges/).
 
@@ -25,13 +25,17 @@ Cloudflare has a set of default pages for presenting errors and challenges to yo
 
 When an error of a [specific type](/rules/custom-errors/reference/error-page-types/) occurs, Cloudflare does the following:
 
+<Steps>
+
 1. Search for a configured Error Page at the account level for the specific error.
 2. Search for a configured Error Page at the zone level for the specific error (it will have priority over the account-level Error Page, if any).
 3. Search for a matching custom error rule at the account level. The rule will have priority over 500 and 1000 class Error Pages at the account or zone level.
 4. Search for a matching custom error rule at the zone level. The rule will have priority over 500 and 1000 class Error Pages at the account or zone level and over custom error rules at the account level.
 5. If a security rule like a [WAF custom rule](/waf/custom-rules/) or a [rate limiting rule](/waf/rate-limiting-rules/) triggers a custom block response instead of a default Cloudflare WAF block page, the rule-specific block response will have priority over Error Pages or a matching custom error rule.
 6. If any of the previous configurations apply, serve the custom error content to the visitor. If not, serve the default error page for the specific error type.
 
+</Steps>
+
 :::note
 To customize a challenge page or a block page, use an Error Page, since Custom Error Rules will not be applied to security actions originating from Cloudflare products. Keep in mind that [custom WAF response](/waf/custom-rules/create-dashboard/#configure-a-custom-response-for-blocked-requests) takes precedence over an Error Page and custom error rules.
 :::