components + light reorg

Author: patriciasantaana

src/content/docs/api-shield/get-started.mdx

@@ -7,7 +7,7 @@ sidebar:
 
 ---
 
-import { GlossaryTooltip, Render } from "~/components"
+import { GlossaryTooltip, Render, Steps } from "~/components"
 
 This guide will help you set up API Shield to identify and address API security best practices.
 

src/content/docs/api-shield/index.mdx

@@ -12,7 +12,6 @@ head:
 import { Description, Feature, Plan, RelatedProduct, Render } from "~/components"
 
 <Description>
-
 Identify and address your API vulnerabilities. 
 </Description>
 

src/content/docs/api-shield/management-and-monitoring/api-routing.mdx

@@ -7,7 +7,7 @@ sidebar:
 
 ---
 
-import { Render } from "~/components"
+import { Render, Steps } from "~/components"
 
 API Shield Routing enables customers to create a unified external-facing API that routes requests to different back-end services that may have different paths and hosts than the existing zone and DNS configuration.
 
@@ -34,11 +34,13 @@ Once your Source Endpoints are added to Endpoint Management, use the following s
 
 ### Remove a route
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account and domain.
+<Steps>
+1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
 2. Select **Security** > **API Shield**.
 3. In **Endpoint Management**, select an existing endpoint and expand its details.
 4. Under **Routing**, select **Edit routing**.
 5. Select **Delete route**.
+</Steps>
 
 ### Test a route
 

src/content/docs/api-shield/management-and-monitoring/developer-portal.mdx

@@ -7,27 +7,26 @@ sidebar:
 
 ---
 
-import { GlossaryTooltip } from "~/components"
+import { GlossaryTooltip, Steps } from "~/components"
 
 Once <GlossaryTooltip term="API endpoint">endpoints</GlossaryTooltip> are saved into Endpoint Management, API Shield doubles as an API catalog. API Shield can build an interactive documentation portal with the knowledge it has of your APIs, or you can upload a new OpenAPI schema file to build a documentation portal ad-hoc.
 
-## Process
+To create a developer portal:
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account and domain.
+<Steps>
+1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
 2. Go to **Security** > **API Shield** > **Settings**.
 3. Under **Create a developer portal**, select **Create site**.
 4. Upload an OpenAPI v3.0 schema file or choose to select an existing schema from API Shield.
+   :::note
+   If you do not have a schema to upload or to select from a pre-existing schema, export your Endpoint Management schema. For best results, include the learned parameters.
 
-  :::note
-
-  If you do not have a schema to upload or to select from a pre-existing schema, export your Endpoint Management schema. For best results, include the learned parameters.
-
-  Only <GlossaryTooltip term="API schema">API schemas</GlossaryTooltip> uploaded to Schema validation 2.0 are available when selecting existing schemas
-  :::
-
+   Only <GlossaryTooltip term="API schema">API schemas</GlossaryTooltip> uploaded to Schema validation 2.0 are available when selecting existing schemas
+   :::
 5. Select **Download project files** to save a local copy of the files that will be uploaded to Cloudflare Pages. Downloading the project files can be helpful if you wish to modify the project in any way and then upload the new version manually to Pages.
 6. Select **Create pages project** to begin project creation. A new Pages project will be automatically created and your API schema will be automatically uploaded to the project along with other supporting static content.
 7. Select **Deploy site**.
+</Steps>
 
 ### Custom domains
 

src/content/docs/api-shield/management-and-monitoring/endpoint-labels.mdx

@@ -7,7 +7,7 @@ sidebar:
   label: Labeling service
 ---
 
-import { Render } from "~/components";
+import { Render, Steps } from "~/components";
 
 API Shield's labeling service will help you organize your endpoints and address vulnerabilities in your API. The labeling service comes with managed and user-defined labels.
 
@@ -81,39 +81,47 @@ Cloudflare will only add authentication labels to endpoints with successful resp
 
 ## Create a label
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account and domain.
+<Steps>
+1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
 2. Go to **Security** > **Settings** > **Labels**.
 3. Under **Security labels**, select **Create label**.
 4. Name the label and add an optional label description.
 5. Apply the label to your selected endpoints.
 6. Select **Create label**.
+</Steps>
 
-Alternatively, you can create a user-defined label via Endpoint Management in API Shield.
+Alternatively, you can create a user-defined label via Endpoint Management in API Shield:
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account and domain.
+<Steps>
+1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
 2. Go to **Security** > **Settings** > **Labels**.
 3. Choose the endpoint that you want to label.
 4. Select **Edit labels**.
 5. Under **User**, select **Create user label**.
 6. Enter the label name.
 7. Select **Create**.
+</Steps>
 
 ## Apply a label to an individual endpoint
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account and domain.
+<Steps>
+1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
 2. Go to **Security** > **API Shield** > **Endpoint Management**.
 3. Choose the endpoint that you want to label.
 4. Select **Edit labels**.
 5. Add the label(s) that you want to use for the endpoint from the list of managed and user-defined labels.
 6. Select **Save labels**.
+</Steps>
 
 ## Bulk apply labels to multiple endpoints
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account and domain.
+<Steps>
+1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
 2. Go to **Security** > **Settings** > **Labels**.
 3. On the existing label that you want to apply to multiple endpoints, select **Bulk apply**.
 4. Choose the endpoints that you want to label by selecting its checkbox.
 5. Select **Save label**.
+</Steps>
 
 ## Availability
 

src/content/docs/api-shield/management-and-monitoring/endpoint-management/index.mdx

@@ -7,7 +7,7 @@ sidebar:
 
 ---
 
-import { GlossaryTooltip, Plan } from "~/components"
+import { GlossaryTooltip, Plan, Steps } from "~/components"
 
 <Plan type="all" />
 
@@ -26,47 +26,55 @@ When an endpoint is using [Cloudflare Workers](/workers/), the metrics data will
 
 ## Access
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account and domain.
+<Steps>
+1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login), and select your account and domain.
 2. Select **Security** > **API Shield**.
 3. Add your endpoints [manually](#add-endpoints-manually), from [Schema validation](#add-endpoints-from-schema-validation), or from [API Discovery](#add-endpoints-from-api-discovery).
+</Steps>
 
-## Add endpoints from API Discovery
+### Add endpoints from API Discovery
 
 There are two ways to add API endpoints from Discovery.
 
-### Add from the Endpoint Management Tab
+#### Add from the Endpoint Management Tab
 
+<Steps>
 1. From Endpoint Management, select **Add endpoints** > **Select from Discovery** tab.
 2. Select the discovered endpoints you would like to add.
 3. Select **Add endpoints**.
+</Steps>
 
-### Add from the Discovery Tab
+#### Add from the Discovery Tab
 
+<Steps>
 1. From Endpoint Management, select the **Discovery** tab.
 2. Select the discovered endpoints you would like to add.
 3. Select **Save selected endpoints**.
+</Steps>
 
-## Add endpoints from Schema validation
+### Add endpoints from Schema validation
 
+<Steps>
 1. Add a schema by [configuring Schema validation](/api-shield/security/schema-validation/).
 2. On **Review schema endpoints**, save new endpoints to endpoint management by checking the box.
 3. Select **Save as draft** or **Save and Deploy**. Endpoints will be saved regardless of whether the Schema is saved as a draft or published.
+</Steps>
 
 API Shield will look for duplicate endpoints that have the same host, method, and path. Duplicate endpoints will not be saved to endpoint management.
 
 :::note
-
 If you deselect **Save new endpoints to endpoint management**, the endpoints will not be added.
 :::
 
-## Add endpoints manually
+### Add endpoints manually
 
+<Steps>
 1. From Endpoint Management, select **Add endpoints** > **Manually add**.
 2. Choose the method from the dropdown menu and add the path and hostname for the endpoint.
 3. Select **Add endpoints**.
+</Steps>
 
 :::note
-
 By selecting multiple checkboxes, you can add several endpoints from Discovery at once instead of individually.
 :::
 
@@ -94,12 +102,14 @@ foo-{hostVar1}.example.com
 
 For more information on how Cloudflare uses variables in API Shield, refer to the examples from [API Discovery](/api-shield/security/api-discovery/).
 
-## Delete endpoints manually
+### Delete endpoints manually
 
 You can delete endpoints one at a time or in bulk.
 
+<Steps>
 1. From Endpoint Management, select the checkboxes for the endpoints that you want to delete.
 2. Select **Delete endpoints**.
+</Steps>
 
 ## Endpoint Analysis
 

src/content/docs/api-shield/management-and-monitoring/endpoint-management/schema-learning.mdx

@@ -6,18 +6,22 @@ sidebar:
   order: 2
 ---
 
+import { Steps } from "~/components"
+
 Cloudflare learns schema parameters via traffic inspection. For all endpoints saved to Endpoint Management, you can export the learned schema in OpenAPI `v3.0.0` format by hostname.
 
 To protect your API with a learned schema, refer to [Schema validation](/api-shield/security/schema-validation/#add-validation-by-applying-a-learned-schema-to-an-entire-hostname).
 
 ## Export a schema
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account and domain.
+<Steps>
+1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
 2. Select **Security** > **API Shield**.
 3. Navigate to **Endpoint Management**.
 4. Select **Export schema** and choose a hostname to export.
 5. Select whether to include [learned parameters](/api-shield/management-and-monitoring/#learned-schemas-will-always-include) and [rate limit recommendations](/api-shield/security/volumetric-abuse-detection/)
 6. Select **Export schema** and choose a location to save the file.
+</Steps>
 
 :::note
 The schema is saved as a JSON file in OpenAPI `v3.0.0` format.

src/content/docs/api-shield/security/authentication-posture.mdx

@@ -7,7 +7,7 @@ sidebar:
 
 ---
 
-import { GlossaryTooltip, Render } from "~/components"
+import { GlossaryTooltip, Render, Steps } from "~/components"
 
 Authentication Posture helps users identify authentication misconfigurations for APIs and alerts of their presence.
 
@@ -21,21 +21,23 @@ After configuring [session identifiers](/api-shield/get-started/#session-identif
 
 <Render file="label-methodology" />
 
-To examine an endpoint's authentication details in the Cloudflare dashboard:
+### Examine an endpoint's authentication details
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account and domain.
+<Steps>
+1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
 2. Go to **Security** > **API Shield** > **Endpoint Management**.
 3. Filter Endpoint Management by the `cf-risk-missing-auth` or `cf-risk-mixed-auth` labels.
 4. Select an endpoint to see its authentication posture details on the endpoint details page.
 5. Choose between the 24-hour and 7-day view options, and note any authentication changes over time.
+</Steps>
 
 The main authentication widget displays how many successful requests over the last seven days had session identifiers included with them, and which identifiers were included with the traffic. 
 
 The authentication-over-time chart shows a detailed breakdown over time of how clients successfully interacted with your API and which identifiers were used. A large increase in unauthenticated traffic may signal a security incident. Similarly, any successful unauthenticated traffic on an endpoint that is expected to be 100% authenticated can be a cause for concern.
 
 Work with your development team to understand which authentication policies may need to be corrected on your API to stop unauthenticated traffic.
 
-## Stop unauthenticated traffic with Cloudflare
+### Stop unauthenticated traffic with Cloudflare
 
 You can use the `cf.api_gateway.auth_id_present` field in [custom rules](/waf/custom-rules/) to trigger when the API Shield configured session identifiers are present or absent on a request. Since this rule would cover your entire zone, Cloudflare recommends adding a host and path match in the rule to pinpoint the protection to exactly what is needed.
 

src/content/docs/api-shield/security/graphql-protection/configure.mdx renamed to src/content/docs/api-shield/security/graphql-protection/api.mdx

@@ -1,7 +1,10 @@
 ---
-title: Configure GraphQL malicious query protection
+title: Configure GraphQL malicious query protection via the API
 pcx_content_type: how-to
 type: overview
+sidebar:
+   order: 2
+   label: API
 head:
   - tag: title
     content: Configure GraphQL malicious query protection

src/content/docs/api-shield/security/jwt-validation/configure.mdx renamed to src/content/docs/api-shield/security/jwt-validation/api.mdx

@@ -1,12 +1,13 @@
 ---
-title: Configure JWT validation
+title: Configure JWT validation via the API
 pcx_content_type: how-to
 type: overview
 sidebar:
-  order: 1
+  order: 2
+  label: API
 head:
   - tag: title
-    content: Configure JWT validation
+    content: Configure JWT validation via the API
 
 ---