Update navigation with dashbutton (#25646)

* Update navigation with dashbutton

* Apply suggestions from code review

Co-authored-by: ToriLindsay <[email protected]>

---------

Co-authored-by: ToriLindsay <[email protected]>

Author: angelampcosta

src/content/docs/analytics/account-and-zone-analytics/zone-analytics.mdx

@@ -7,7 +7,7 @@ sidebar:
 
 ---
 
-import { Badge } from "~/components";
+import { Badge, DashButton  } from "~/components";
 
 
 The Cloudflare zone analytics is a major component of the overall Cloudflare Analytics product line.  Specifically, this app gives you access to a wide range of metrics, collected at the website or domain level.
@@ -24,11 +24,9 @@ captures and processes.
 
 ## View your website analytics
 
-To view metrics for your website:
+To view metrics for your website, in the Cloudflare dashboard, go to the **Analytis & Logs** page.
 
-1. Log in to the Cloudflare dashboard.
-2. Select the appropriate Cloudflare **account** for your site, then pick the **domain**.
-3. Next, select **Analytics & Logs**.
+   <DashButton url="/?to=/:account/:zone/analytics" />
 
 Once it loads, you can find tabs for **Traffic**, **Security**, **Performance**, **DNS**, **Workers**, and **Logs** (Enterprise domains only). To understand the various metrics available, refer to *Review your website metrics* below.
 

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

@@ -3,7 +3,7 @@ title: Cache Reserve
 pcx_content_type: concept
 ---
 
-import { Render, TabItem, Tabs, APIRequest } from "~/components";
+import { Render, TabItem, Tabs, APIRequest, DashButton } from "~/components";
 
 <Render file="smart-shield-callout" product="smart-shield" />
 
@@ -25,9 +25,11 @@ A paid Cache Reserve Plan is required for the enablement.
 
 <Tabs syncKey="dashPlusAPI"> <TabItem label="Dashboard">
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select a domain.
-2. Go to **Caching** > **Cache Reserve**.
-3. Select **Enable storage sync**.
+1. In the Cloudflare dashboard, go to the **Cache Reserve** page.
+
+   <DashButton url="/?to=/:account/:zone/caching/cache-reserve" />
+
+2. Select **Enable storage sync**.
 
 </TabItem> <TabItem label="API">
 
@@ -165,9 +167,12 @@ Be aware that the deletion may take up to 24 hours to complete.
 
 <Tabs syncKey="dashPlusAPI"> <TabItem label="Dashboard">
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select a domain.
-2. Go to **Caching** > **Cache Reserve**.
-3. In **Delete Cache Reserve Data**, select **Delete Storage**.
+
+1. In the Cloudflare dashboard, go to the **Cache Reserve** page.
+
+   <DashButton url="/?to=/:account/:zone/caching/cache-reserve" />
+
+2. In **Delete Cache Reserve Data**, select **Delete Storage**.
 
 </TabItem> <TabItem label="API">
 

src/content/docs/cache/advanced-configuration/crawler-hints.mdx

@@ -4,7 +4,7 @@ title: Crawler Hints
 
 ---
 
-import { FeatureTable } from "~/components"
+import { FeatureTable, DashButton } from "~/components"
 
 Crawler Hints aims to increase the proportion of relevant crawls and limit crawls that do not find fresh content to reduce the need for repeated crawls.
 
@@ -26,9 +26,11 @@ Crawler Hints also means less traffic hitting your origin, improving resource co
 
 ## Enable Crawler Hints
 
-1. Log in to your [Cloudflare dashboard](https://dash.cloudflare.com) and select your domain.
-2. Go to **Caching** > **Configuration**.
-3. Enable **Crawler Hints**.
+1. In the Cloudflare dashboard, go to the **Configuration** page.
+
+   <DashButton url="/?to=/:account/:zone/caching/configuration" />
+
+2. Enable **Crawler Hints**.
 
 After enabling Crawler Hints, Cloudflare will begin sending hints to search engines about when they should crawl particular parts of your website.
 

src/content/docs/cache/cache-security/cache-deception-armor.mdx

@@ -4,6 +4,8 @@ title: Cache Deception Armor
 
 ---
 
+import { DashButton } from "~/components";
+
 Before learning about Cache Deception Armor, you should first understand how Web Cache Deception attacks work.
 
 ## Web Cache Deception attacks
@@ -30,10 +32,12 @@ In the newsfeed example above, if `http://www.example.com/newsfeed` is a script
 
 To enable Cache Deception Armor, you need to start by creating a [cache rule](/cache/how-to/cache-rules/). Follow the steps below for guidance:
 
-1. Log in to your [Cloudflare dashboard](https://dash.cloudflare.com), and select your account and domain.
-2. Go to **Caching** > **Cache Rules**.
-3. Select **Create rule**.
-4. Under **When incoming requests match**, define the [rule expression](/ruleset-engine/rules-language/expressions/edit-expressions/#expression-builder).
-5. Under **Then**, in the **Cache eligibility** section, select **Eligible for cache**.
-6. Add the **Cache Key** setting to the rule and turn on **Cache deception armor**.
-7. 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 **Cache Rules** page.
+
+   <DashButton url="/?to=/:account/:zone/caching/cache-rules" />
+
+2. Select **Create rule**.
+3. Under **When incoming requests match**, define the [rule expression](/ruleset-engine/rules-language/expressions/edit-expressions/#expression-builder).
+4. Under **Then**, in the **Cache eligibility** section, select **Eligible for cache**.
+5. Add the **Cache Key** setting to the rule and turn on **Cache deception armor**.
+6. To save and deploy your rule, select **Deploy**. If you are not ready to deploy your rule, select **Save as Draft**.

src/content/docs/cache/how-to/always-online.mdx

@@ -4,7 +4,7 @@ pcx_content_type: concept
 
 ---
 
-import { FeatureTable } from "~/components"
+import { FeatureTable, DashButton } from "~/components"
 
 Cloudflare’s Always Online feature is now integrated with the [Internet Archive](https://archive.org/) so that visitors can access a portion of your website even when your origin server is unreachable and a Cloudflare-cached version is unavailable. When your origin is unreachable, Always Online checks Cloudflare’s cache for a stale or expired version of your website. If a version does not exist, Cloudflare goes to the Internet Archive to fetch and serve static portions of your website.
 
@@ -32,10 +32,12 @@ Visitors who interact with dynamic parts of a website, such as a shopping cart o
 
 Here is how to enable Always Online in the dashboard:
 
-1. Log in to your Cloudflare account.
+1. In the Cloudflare dashboard, go to the **Configuration** page.
+
+   <DashButton url="/?to=/:account/:zone/caching/configuration" />
+
 2. Choose the domain that will use Always Online with Internet Archive integration.
-3. Select **Caching** > **Configuration**.
-4. Under **Always Online**, set the toggle to **On**.
+3. Under **Always Online**, set the toggle to **On**.
 
 :::note[Note]
 

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

@@ -7,7 +7,7 @@ head:
 
 ---
 
-import { FeatureTable } from "~/components"
+import { FeatureTable, DashButton } from "~/components"
 
 A Cache Key is an identifier that Cloudflare uses for a file in our cache, and the Cache Key Template defines the identifier for a given HTTP request.
 
@@ -25,14 +25,16 @@ A default cache key includes:
 
 Custom cache keys let you precisely set the cacheability setting for any resource. They provide the benefit of more control, though they may reduce your cache hit rate and result in cache sharding:
 
-1. Log in to your [Cloudflare dashboard](https://dash.cloudflare.com), and select your account and domain.
-2. Go to **Caching** > **Cache Rules**.
-3. Select **Create rule**.
-4. Under **When incoming requests match**, define the [rule expression](/ruleset-engine/rules-language/expressions/edit-expressions/#expression-builder).
-5. Under **Then**, in the **Cache eligibility** section, select **Eligible for cache**.
-6. Add the **Cache Key** setting to the rule and select the appropriate **Query String** setting.
-7. You can also select settings for **Headers**, **Cookie**, **Host**, and **User**.
-8. 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 **Cache Rules** page.
+
+   <DashButton url="/?to=/:account/:zone/caching/cache-rules" />
+
+2. Select **Create rule**.
+3. Under **When incoming requests match**, define the [rule expression](/ruleset-engine/rules-language/expressions/edit-expressions/#expression-builder).
+4. Under **Then**, in the **Cache eligibility** section, select **Eligible for cache**.
+5. Add the **Cache Key** setting to the rule and select the appropriate **Query String** setting.
+6. You can also select settings for **Headers**, **Cookie**, **Host**, and **User**.
+7. To save and deploy your rule, select **Deploy**. If you are not ready to deploy your rule, select **Save as Draft**.
 
 :::note
 When [URL normalization](/rules/normalization/) is enabled, we recommend also enabling [Normalize URLs to origin](/rules/normalization/manage/), especially if you are setting custom cache keys or using cache by device type, which also modifies the cache key. This helps ensure the URL in the cache key matches the URL sent to the origin, preventing cache poisoning and ensuring consistent behavior.

src/content/docs/cache/how-to/cache-rules/create-dashboard.mdx

@@ -8,15 +8,17 @@ head:
     content: Create a cache rule in the dashboard
 ---
 
-import { Render } from "~/components";
-
-1.  Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account and domain.
-2.  Go to **Rules** > **Overview**.
-3.  Next to **Cache Rules**, select **Create 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 **All incoming requests** if you want the rule to apply to all traffic or **Custom filter expression** if you want the rule to only apply to traffic matching the custom expression.
-7.  If you selected **Custom filter expression**, under **When incoming requests match**, define the [rule expression](/ruleset-engine/rules-language/expressions/edit-expressions/#expression-builder). Use the **Field** drop-down list to choose an HTTP property and select an **Operator**. Refer to [Available settings](/cache/how-to/cache-rules/settings/) for the list of available fields and operators.
+import { Render, DashButton } from "~/components";
+
+1. In the Cloudflare dashboard, go to the **Cache Rules** page.
+
+   <DashButton url="/?to=/:account/:zone/caching/cache-rules" />
+
+2.  Select **Create 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 **All incoming requests** if you want the rule to apply to all traffic or **Custom filter expression** if you want the rule to only apply to traffic matching the custom expression.
+6.  If you selected **Custom filter expression**, under **When incoming requests match**, define the [rule expression](/ruleset-engine/rules-language/expressions/edit-expressions/#expression-builder). Use the **Field** drop-down list to choose an HTTP property and select an **Operator**. Refer to [Available settings](/cache/how-to/cache-rules/settings/) for the list of available fields and operators.
 
     <div class="medium-img">
 

src/content/docs/cache/how-to/purge-cache/purge-by-hostname.mdx

@@ -6,18 +6,22 @@ sidebar:
 
 ---
 
+import { DashButton } from "~/components"
+
 Purging by hostname means that all assets at URLs with a host that matches one of the provided values will be instantly purged from the cache.
 
-1. Log in to your [Cloudflare dashboard](https://dash.cloudflare.com/login), and select your account and domain.
-2. Select **Caching** > **Configuration**.
-3. Under **Purge Cache**, select **Custom Purge**. The **Custom Purge** window appears.
-4. Under **Purge by**, select **Hostname**.
-5. Follow the syntax instructions:
+1. In the Cloudflare dashboard, go to the **Configuration** page.
+
+   <DashButton url="/?to=/:account/:zone/caching/configuration" />
+
+2. Under **Purge Cache**, select **Custom Purge**. The **Custom Purge** window appears.
+3. Under **Purge by**, select **Hostname**.
+4. Follow the syntax instructions:
    * One hostname per line.
    * Separated by commas.
    * You can purge up to 30 hostnames at a time.
-6. Enter the appropriate value(s) in the text field using the format shown in the example.
-7. Select **Purge**.
+5. Enter the appropriate value(s) in the text field using the format shown in the example.
+6. Select **Purge**.
 
 For information on rate limits, refer to the [Availability and limits](/cache/how-to/purge-cache/#availability-and-limits) section.
 

src/content/docs/cache/how-to/purge-cache/purge-by-single-file.mdx

@@ -5,6 +5,8 @@ sidebar:
   order: 1
 ---
 
+import { DashButton } from "~/components"
+
 With purge by single-file, cached resources are instantly removed from the stored assets in your Content Delivery Network (CDN) across all data centers. New requests for the purged asset receive the latest version from your origin web server and add it back to your CDN cache within the specific Cloudflare data center that served the request.
 
 For information on single-file purge rate limits, refer to the [limits](/cache/how-to/purge-cache/#single-file-purge-limits) section.
@@ -27,14 +29,16 @@ You can purge objects with these characteristics using an API call to ([purge fi
 Always use UTF-8 encoded URLs for single-file cache purges. Wildcards are not supported on single file purge, and you must use purge by hostname, prefix, or implement cache tags as an alternative solution.
 :::
 
-1. Log in to your [Cloudflare dashboard](https://dash.cloudflare.com/login), and select your account and domain.
-2. Select **Caching** > **Configuration**.
-3. Under **Purge Cache**, select **Custom Purge**. The **Custom Purge** window appears.
-4. Under **Purge by**, select **URL**.
-5. Enter the appropriate value(s) in the text field using the format shown in the example. Be aware that the host part of the URL is not case-sensitive, meaning it will always be converted to lowercase according to RFC standards. However, the path portion is case-sensitive. For example, `https://EXAMPLE.com/helloHI` would be treated as `https://example.com/helloHI`.
-6. Perform any additional instructions to complete the form.
-7. Review your entries.
-8. Select **Purge**.
+1. In the Cloudflare dashboard, go to the **Configuration** page.
+
+   <DashButton url="/?to=/:account/:zone/caching/configuration" />
+
+2. Under **Purge Cache**, select **Custom Purge**. The **Custom Purge** window appears.
+3. Under **Purge by**, select **URL**.
+4. Enter the appropriate value(s) in the text field using the format shown in the example. Be aware that the host part of the URL is not case-sensitive, meaning it will always be converted to lowercase according to RFC standards. However, the path portion is case-sensitive. For example, `https://EXAMPLE.com/helloHI` would be treated as `https://example.com/helloHI`.
+5. Perform any additional instructions to complete the form.
+6. Review your entries.
+7. Select **Purge**.
 
 :::note
 For information on how to use single-file purge to purge assets cached by a Workers fetch, refer to [Single file purge assets cached by a Worker](/workers/reference/how-the-cache-works/#single-file-purge-assets-cached-by-a-worker).

src/content/docs/cache/how-to/purge-cache/purge-by-tags.mdx

@@ -6,6 +6,8 @@ sidebar:
 
 ---
 
+import { DashButton } from "~/components"
+
 Cache-tag purging makes multi-file purging easier because you can instantly bulk purge by adding cache-tags to your assets, such as webpages, image files, and more.
 
 ## General workflow for cache-tags
@@ -46,12 +48,14 @@ When your content reaches our edge network, Cloudflare:
 
 ## Purge using cache-tags
 
-1. Log in to your [Cloudflare dashboard](https://dash.cloudflare.com/login), and select your account and domain.
-2. Select **Caching** > **Configuration**.
-3. Under **Purge Cache**, select **Custom Purge**. The **Custom Purge** window appears.
-4. Under **Purge by**, select **Tag**.
-5. In the text box, enter your tags to use to purge the cached resources. To purge multiple cache-tagged resources, separate each tag with a comma or have one tag per line.
-6. Select **Purge**.
+1. In the Cloudflare dashboard, go to the **Configuration** page.
+
+   <DashButton url="/?to=/:account/:zone/caching/configuration" />
+
+2. Under **Purge Cache**, select **Custom Purge**. The **Custom Purge** window appears.
+3. Under **Purge by**, select **Tag**.
+4. In the text box, enter your tags to use to purge the cached resources. To purge multiple cache-tagged resources, separate each tag with a comma or have one tag per line.
+5. Select **Purge**.
 
 For information on rate limits, refer to the [Availability and limits](/cache/how-to/purge-cache/#availability-and-limits) section.