[Cache] Adds APIRequest component to Cache docs

src/content/docs/cache/advanced-configuration/cache-reserve.mdx

@@ -3,7 +3,7 @@ title: Cache Reserve
 pcx_content_type: concept
 ---
 
-import { Render, TabItem, Tabs } from "~/components";
+import { Render, TabItem, Tabs, APIRequest } from "~/components";
 
 Cache Reserve is a large, persistent data store [implemented on top of R2](/r2/). By pushing a single button in the dashboard, your website’s cacheable content will be written to Cache Reserve. In the same way that [Tiered Cache](/cache/how-to/tiered-cache/) builds a hierarchy of caches between your visitors and your origin, Cache Reserve serves as the ultimate [upper-tier cache](/cache/how-to/tiered-cache/) that will reserve storage space for your assets for as long as you want. This ensures that your content is served from cache longer, shielding your origin from unneeded egress fees.
 
@@ -201,10 +201,12 @@ Be aware that the deletion may take up to 24 hours to complete.
 
 To delete Cache Reserve data via API use the following example requests. For more information, refer to the [API documentation](/api/resources/cache/subresources/cache_reserve/methods/clear/).
 
-```bash title="Request 1: Get Cache Reserve status"
-curl https://api.cloudflare.com/client/v4/zones/{zone_id}/cache/cache_reserve \
---header "Authorization: Bearer <API_TOKEN>"
-```
+**Request 1: Get Cache Reserve status**
+
+<APIRequest
+  path="/zones/{zone_id}/cache/cache_reserve"
+  method="GET"
+/>
 
 ```json title="Response"
 {
@@ -221,11 +223,12 @@ curl https://api.cloudflare.com/client/v4/zones/{zone_id}/cache/cache_reserve \
 
 If Cache Reserve is turned off, you can proceed to the Cache Reserve Clear operation.
 
-```bash title="Request 2: Start Cache Reserve Clear"
-curl --request POST \
-https://api.cloudflare.com/client/v4/zones/{zone_id}/cache/cache_reserve_clear \
---header "Authorization: Bearer <API_TOKEN>"
-```
+**Request 2: Start Cache Reserve Clear**
+
+<APIRequest
+  path="/zones/{zone_id}/cache/cache_reserve_clear"
+  method="POST"
+/>
 
 ```json title="Response"
 {

src/content/docs/cache/advanced-configuration/vary-for-images.mdx

@@ -4,7 +4,7 @@ pcx_content_type: concept
 
 ---
 
-import { Details, FeatureTable } from "~/components"
+import { Details, FeatureTable, APIRequest } from "~/components"
 
 `Vary` is an HTTP response header that allows origins to serve variants of the same content that can be used depending on the browser sending the request.
 
@@ -44,42 +44,43 @@ Vary for Images is enabled through Cloudflare’s API by creating a variants rul
 
 ### Create a variants rule
 
-```bash
-curl --request PATCH \
-"https://api.cloudflare.com/client/v4/zones/{zone_id}/cache/variants" \
---header "X-Auth-Email: <EMAIL>" \
---header "X-Auth-Key: <API_KEY>" \
---header "Content-Type: application/json" \
---data '{"value":{"jpeg":["image/webp","image/avif"],"jpg":["image/webp","image/avif"]}}'
-```
+<APIRequest
+  path="/zones/{zone_id}/cache/variants"
+  method="PATCH"
+  json={{
+    value: {
+      jpeg: ["image/webp", "image/avif"],
+      jpg: ["image/webp", "image/avif"]
+    }
+  }}
+/>
 
 ### Modify to only allow WebP variants
 
-```bash
-curl --request PATCH \
-"https://api.cloudflare.com/client/v4/zones/{zone_id}/cache/variants" \
---header "X-Auth-Email: <EMAIL>" \
---header "X-Auth-Key: <API_KEY>" \
---header "Content-Type: application/json" \
---data '{"value":{"jpeg":["image/webp"],"jpg":["image/webp"]}}'
-```
+<APIRequest
+  path="/zones/{zone_id}/cache/variants"
+  method="PATCH"
+  json={{
+    value: {
+      jpeg: ["image/webp"],
+      jpg: ["image/webp"]
+    }
+  }}
+/>
 
 ### Delete the rule
 
-```bash
-curl --request DELETE \
-"https://api.cloudflare.com/client/v4/zones/{zone_id}/cache/variants" \
---header "X-Auth-Email: <EMAIL>" \
---header "X-Auth-Key: <API_KEY>"
-```
+<APIRequest
+  path="/zones/{zone_id}/cache/variants"
+  method="DELETE"
+/>
 
 ### Get the rule
 
-```bash
-curl "https://api.cloudflare.com/client/v4/zones/{zone_id}/cache/variants" \
---header "X-Auth-Email: <EMAIL>" \
---header "X-Auth-Key: <API_KEY>"
-```
+<APIRequest
+  path="/zones/{zone_id}/cache/variants"
+  method="GET"
+/>
 
 To learn more about purging varied images, refer to [Purge varied images](/cache/how-to/purge-cache/purge-varied-images/).
 

src/content/docs/cache/how-to/purge-cache/purge-cache-key.mdx

@@ -6,6 +6,8 @@ sidebar:
 
 ---
 
+import { APIRequest } from "~/components";
+
 Instantly purge resources that use Cache Keys via the [Cloudflare API](/api/resources/cache/methods/purge/). If you use [Cloudflare's Purge by URL](/api/resources/cache/methods/purge/#purge-cached-content-by-url), include the headers and query strings that are in your custom Cache Key.
 
 Currently, it is not possible to purge a URL stored through Cache API that uses a custom cache key set by a Worker. Instead, use a [custom key created by Cache Rules](/cache/how-to/cache-rules/settings/#cache-key). Alternatively, purge your assets using purge everything, purge by tag, purge by host or purge by prefix.
@@ -18,34 +20,55 @@ For a Cache Key based on device type, purge the asset by passing the `CF-Device-
 
 Refer to the example API request below to instantly purge all mobile assets on the root webpage.
 
-```bash
-curl "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
---header "X-Auth-Email: <EMAIL>" \
---header "X-Auth-Key: <API_KEY>" \
---header "Content-Type: application/json" \
---data '{"files":[{"url":"http://my.website.com/","headers":{"CF-Device-Type":"mobile"}}]}'
-```
+<APIRequest
+  path="/zones/{zone_id}/purge_cache"
+  method="POST"
+  json={{
+    files: [
+      {
+        url: "http://my.website.com/",
+        headers: {
+          "CF-Device-Type": "mobile"
+        }
+      }
+    ]
+  }}
+/>
 
 ## Purge by geo
 
 Instantly purge resources for a location-based Cache Key by specifying the two-letter country code. Spain is used in the example below.
 
-```bash
-curl "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
---header "X-Auth-Email: <EMAIL>" \
---header "X-Auth-Key: <API_KEY>" \
---header "Content-Type: application/json" \
---data '{"files":[{"url":"http://my.website.com/", "headers":{"CF-IPCountry":"ES"}}]}'
-```
+<APIRequest
+  path="/zones/{zone_id}/purge_cache"
+  method="POST"
+  json={{
+    files: [
+      {
+        url: "http://my.website.com/",
+        headers: {
+          "CF-IPCountry": "ES"
+        }
+      }
+    ]
+  }}
+/>
 
 ## Purge by language
 
 For a Cache Key based on language, purge the asset by passing the `accept-language` header. Refer to the example API request below to instantly purge all assets in Chinese (PRC).
 
-```bash
-curl "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
---header "X-Auth-Email: <EMAIL>" \
---header "X-Auth-Key: <API_KEY>" \
---header "Content-Type: application/json" \
---data '{"files":[{"url":"http://my.website.com/", "headers":{"accept-language":"zh-CN"}}]}'
-```
+<APIRequest
+  path="/zones/{zone_id}/purge_cache"
+  method="POST"
+  json={{
+    files: [
+      {
+        url: "http://my.website.com/",
+        headers: {
+          "accept-language": "zh-CN"
+        }
+      }
+    ]
+  }}
+/>

src/content/docs/cache/how-to/tiered-cache.mdx

@@ -4,7 +4,7 @@ pcx_content_type: concept
 
 ---
 
-import { Details, FeatureTable } from "~/components"
+import { Details, FeatureTable, APIRequest } from "~/components";
 
 Tiered Cache uses the size of Cloudflare’s network to reduce requests to customer origins by dramatically increasing cache hit ratios. With data centers around the world, Cloudflare caches content very close to end users. However, if a piece of content is not in cache, the Cloudflare edge data centers must contact the origin server to receive the cacheable content.
 
@@ -77,44 +77,40 @@ You can enable Tiered Cache in the dashboard or via API.
 
 To enable Tiered Cache via API use the following cURL example:
 
-```bash
-curl --request PATCH \
-https://api.cloudflare.com/client/v4/zones/{zone_id}/argo/tiered_caching \
---header "X-Auth-Email: <EMAIL>" \
---header "X-Auth-Key: <API_KEY>" \
---header 'Content-Type: application/json' \
---data '{ "value": "on" }'
-```
+<APIRequest
+  path="/zones/{zone_id}/argo/tiered_caching"
+  method="PATCH"
+  json={{
+    value: "on"
+  }}
+/>
 
 You can also configure Tiered Cache Topology via API, for instance:
 
 
 <Details header="Enable Smart Tiered Cache">
 
-```bash
-curl --request PATCH \
-https://api.cloudflare.com/client/v4/zones/{zone_id}/cache/tiered_cache_smart_topology_enable \
---header "X-Auth-Email: <EMAIL>" \
---header "X-Auth-Key: <API_KEY>" \
---header "Content-Type: application/json" \
---data '{ "value": "on" }'
-```
+<APIRequest
+  path="/zones/{zone_id}/cache/tiered_cache_smart_topology_enable"
+  method="PATCH"
+  json={{
+    value: "on"
+  }}
+/>
 
 
 </Details>
 
 
 <Details header="Enable Regional Tiered Cache">
 
-```bash
-curl --request PATCH \
-https://api.cloudflare.com/client/v4/zones/{zone_id}/cache/regional_tiered_cache \
---header "X-Auth-Email: <EMAIL>" \
---header "X-Auth-Key: <API_KEY>" \
---header 'Content-Type: application/json' \
---data '{ "value": "on" }'
-```
-
+<APIRequest
+  path="/zones/{zone_id}/cache/regional_tiered_cache"
+  method="PATCH"
+  json={{
+    value: "on"
+  }}
+/>
 
 </Details>