turnstile maintenance (#24918)

Author: patriciasantaana

src/content/docs/cloudflare-challenges/concepts/clearance.mdx

@@ -4,7 +4,7 @@ title: Clearance
 sidebar:
   order: 2
 ---
-import { Render } from "~/components";
+import { Render, DashButton, Steps } from "~/components";
 
 ## `cf_clearance` cookies
 
@@ -78,17 +78,24 @@ For more details on managing hostnames, refer to the [Hostname Management docume
 
 #### Enable pre-clearance on a new site
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account.
-2. Go to **Turnstile** > **Add widget**.
-3. Under **Would you like to opt for pre-clearance for this site?** select **Yes**.
-4. Choose the pre-clearance level from the select box.
-5. Select **Create**.
+<Steps>
+  1. In the Cloudflare dashboard, go to the **Turnstile** page.
+    
+      <DashButton url="/?to=/:account/turnstile" />
+  2. Select **Add widget**.
+  3. Under **Would you like to opt for pre-clearance for this site?** select **Yes**.
+  4. Choose the pre-clearance level from the select box.
+  5. Select **Create**.
+</Steps>
 
 #### Enable pre-clearance on an existing site
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account.
-2. Go to **Turnstile**.
-3. Go to the existing widget or site and select **Settings**.
-4. Under **Would you like to opt for pre-clearance for this site?** select **Yes**.
-5. Choose the pre-clearance level from the select box.
-6. Select **Update**.
+<Steps>
+  1. In the Cloudflare dashboard, go to the **Turnstile** page.
+    
+      <DashButton url="/?to=/:account/turnstile" />
+  2. Go to the existing widget or site and select **Settings**.
+  3. Under **Would you like to opt for pre-clearance for this site?** select **Yes**.
+  4. Choose the pre-clearance level from the select box.
+  5. Select **Update**.
+</Steps>

src/content/docs/turnstile/additional-configuration/hostname-management.mdx

@@ -6,6 +6,8 @@ sidebar:
 
 ---
 
+import { DashButton, Steps } from "~/components"
+
 You can associate hostnames with your widget to control where it can be used using Hostname Management. Managing your hostnames ensures that Turnstile works seamlessly with your setup, whether you add standalone hostnames or leverage zones registered to your Cloudflare account.
 
 ## Hostname limits
@@ -22,12 +24,15 @@ You can add a hostname to your Turnstile widget even if it is not on the Cloudfl
 
 To add a custom hostname:
 
-1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
-2. Go to **Turnstile**.
-3. On an existing widget, select **Settings**.
-4. Select **Add Hostnames** under Hostname Management.
-5. Add a custom hostname or choose from an existing hostname.
-6. Select **Add**.
+<Steps>
+  1. In the Cloudflare dashboard, go to the **Turnstile** page.
+    
+      <DashButton url="/?to=/:account/turnstile" />
+  2. On an existing widget, select **Settings**.
+  3. Select **Add Hostnames** under Hostname Management.
+  4. Add a custom hostname or choose from an existing hostname.
+  5. Select **Add**.
+</Steps>
 
 ## Add hostnames with a registered zone
 

src/content/docs/turnstile/extensions/google-firebase.mdx

@@ -7,88 +7,100 @@ sidebar:
 
 ---
 
+import { Steps, DashButton } from "~/components"
+
 Turnstile is [available as an extension](https://extensions.dev/extensions/cloudflare/cloudflare-turnstile-app-check-provider) with [Google's Firebase](https://firebase.google.com/) platform as an [App Check](https://firebase.google.com/docs/app-check) provider. You can leverage Cloudflare Turnstile's bot detection and challenge capabilities to ensure that requests to your Firebase backend services are verified and only authentic human visitors can interact with your application.
 
 Google Firebase is a comprehensive app development platform that provides a variety of tools and services to help developers build, improve, and grow their mobile and web applications.
 
 Firebase App Check helps protect Firebase resources like Cloud Firestore, Realtime Database, Cloud Storage, and Functions from abuse, such as automated fraud attacks and denial of service (DoS) attacks, by ensuring that incoming requests are from legitimate visitors and trusted sources.
 
-## Set up a Google Firebase project
+## 1. Set up a Google Firebase project
 
-1. Create a Firebase project by going to the [Firebase Console](https://console.firebase.google.com/).
-2. Select **Add Project** and follow the prompts to create a new project.
-3. Add an app to your project by selecting your project.
-4. In the project overview, select **Add App** and choose the platform: **Web**.
-5. [Register your app](https://firebase.google.com/docs/web/setup?hl=en&authuser=0#register-app) and follow the guide to get your Firebase configuration.
+<Steps>
+    1. Create a Firebase project by going to the [Firebase Console](https://console.firebase.google.com/).
+    2. Select **Add Project** and follow the prompts to create a new project.
+    3. Add an app to your project by selecting your project.
+    4. In the project overview, select **Add App** and choose the platform: **Web**.
+    5. [Register your app](https://firebase.google.com/docs/web/setup?hl=en&authuser=0#register-app) and follow the guide to get your Firebase configuration.
+</Steps>
 
 :::note
 
 It is important to register your web app first to connect it with Turnstile later.
 :::
 
-## Set up Cloudflare Turnstile
+## 2. Set up Cloudflare Turnstile
 
-1. Create a Cloudflare Turnstile site by going to the [Cloudflare Turnstile dashboard](https://dash.cloudflare.com/?to=/:account/turnstile).
-2. Create a new widget and get the [sitekey and secret key](/turnstile/get-started/#get-a-sitekey-and-secret-key).
-   - The domain you configure with the Turnstile widget should be the domain of your web app.
-   - The [widget mode](/turnstile/concepts/widget/) must be **Invisible**.
+<Steps>
+    1. Create a Cloudflare Turnstile site by going to the [Cloudflare Turnstile dashboard](https://dash.cloudflare.com/?to=/:account/turnstile).
+    2. Create a new widget and get the [sitekey and secret key](/turnstile/get-started/#get-a-sitekey-and-secret-key).
+        - The domain you configure with the Turnstile widget should be the domain of your web app.
+        - The [widget mode](/turnstile/concepts/widget/) must be **Invisible**.
+</Steps>
 
-## Integrate Firebase App Check with Turnstile
+## 3. Integrate Firebase App Check with Turnstile
 
-### Enable App Check in Firebase
+### 3a. Enable App Check in Firebase
 
-1. Go to [Cloudflare Turnstile in the Firebase Extensions hub](https://extensions.dev/extensions/cloudflare/cloudflare-turnstile-app-check-provider).
-2. Install the Cloudflare Turnstile extension to your Firebase project.
-3. Enable [Cloud Functions](https://cloud.google.com/functions?hl=en), [Artifact Registry](https://cloud.google.com/artifact-registry), and [Secret Manager](https://cloud.google.com/security/products/secret-manager?hl=en).
-4. Enter the secret key from Cloudflare Turnstile and your Firebase App ID.
-5. Select **Install extension**.
+<Steps>
+    1. Go to [Cloudflare Turnstile in the Firebase Extensions hub](https://extensions.dev/extensions/cloudflare/cloudflare-turnstile-app-check-provider).
+    2. Install the Cloudflare Turnstile extension to your Firebase project.
+    3. Enable [Cloud Functions](https://cloud.google.com/functions?hl=en), [Artifact Registry](https://cloud.google.com/artifact-registry), and [Secret Manager](https://cloud.google.com/security/products/secret-manager?hl=en).
+    4. Enter the secret key from Cloudflare Turnstile and your Firebase App ID.
+    5. Select **Install extension**.
+</Steps>
 
-### Grant access to the Cloudflare extension
+### 3b. Grant access to the Cloudflare extension
 
-1. Grant access to the Cloudflare extension under the IAM section of your project by selecting **Grant Access** under **View by Principals**.
-2. Select `ext-cloudflare-turnstile` from the dropdown menu.
-3. When filtering the token, select **Service Account Token Creator**.
+<Steps>
+    1. Grant access to the Cloudflare extension under the IAM section of your project by selecting **Grant Access** under **View by Principals**.
+    2. Select `ext-cloudflare-turnstile` from the dropdown menu.
+    3. When filtering the token, select **Service Account Token Creator**.
+</Steps>
 
-### Configure Firebase in your app with Turnstile
+### 3c. Configure Firebase in your app with Turnstile
 
-1. Create an `index.ts` file.
-2. Add your Firebase configuration.
+<Steps>
+    1. Create an `index.ts` file.
+    2. Add your Firebase configuration.
 
-```js
-import { initializeApp } from "firebase/app";
-import { getAppCheck, initializeAppCheck } from "firebase/app-check";
-import {
-    CloudflareProviderOptions,
-} from '@cloudflare/turnstile-firebase-app-check';
-
-const firebaseConfig = {
-apiKey: "YOUR_API_KEY",
-authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
-projectId: "YOUR_PROJECT_ID",
-storageBucket: "YOUR_PROJECT_ID.appspot.com",
-messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
-appId: "YOUR_APP_ID",
-};
-
-const app = initializeApp(firebaseConfig);
-
-// Initialize App Check
-const siteKey = 'YOUR-SITEKEY';
-const HTTP_ENDPOINT = '${function:ext-cloudflare-turnstile-app-check-provider-tokenExchange.url}';
-
-const cpo = new CloudflareProviderOptions(HTTP_ENDPOINT, siteKey);
-const provider = new CustomProvider(cpo);
-
-initializeAppCheck(app, { provider });
-
-// retrieve App Check token from Cloudflare Turnstile
-cpo.getToken().then(({ token }) => {
-    document.getElementById('app-check-token').innerHTML = token;
-});
+        ```js
+        import { initializeApp } from "firebase/app";
+        import { getAppCheck, initializeAppCheck } from "firebase/app-check";
+        import {
+            CloudflareProviderOptions,
+        } from '@cloudflare/turnstile-firebase-app-check';
+
+        const firebaseConfig = {
+        apiKey: "YOUR_API_KEY",
+        authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
+        projectId: "YOUR_PROJECT_ID",
+        storageBucket: "YOUR_PROJECT_ID.appspot.com",
+        messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
+        appId: "YOUR_APP_ID",
+        };
+
+        const app = initializeApp(firebaseConfig);
+
+        // Initialize App Check
+        const siteKey = 'YOUR-SITEKEY';
+        const HTTP_ENDPOINT = '${function:ext-cloudflare-turnstile-app-check-provider-tokenExchange.url}';
+
+        const cpo = new CloudflareProviderOptions(HTTP_ENDPOINT, siteKey);
+        const provider = new CustomProvider(cpo);
+
+        initializeAppCheck(app, { provider });
+
+        // retrieve App Check token from Cloudflare Turnstile
+        cpo.getToken().then(({ token }) => {
+            document.getElementById('app-check-token').innerHTML = token;
+        });
 
-```
+        ```
+</Steps>
 
-### Verify the App Check token in your web application
+### 3d. Verify the App Check token in your web application
 
 To verify the App Check token in your web application, refer to Firebase's [Token Verification guide](https://firebase.google.com/docs/app-check/custom-resource-backend?hl=en#verification).
 

src/content/docs/turnstile/get-started/client-side-rendering/widget-configurations.mdx

@@ -19,10 +19,10 @@ Turnstile widgets can be implemented using implicit or explicit rendering.
 
 		**How it works** 
 		<Steps>
-		1. Add the Turnstile script to your page.
-		2. Include `<div class="cf-turnstile" data-sitekey="your-key"></div>` elements.
-		3. Widgets will render automatically when the page loads.
-		4. Configure the widget using `data-*` attributes on the HTML element.
+			1. Add the Turnstile script to your page.
+			2. Include `<div class="cf-turnstile" data-sitekey="your-key"></div>` elements.
+			3. Widgets will render automatically when the page loads.
+			4. Configure the widget using `data-*` attributes on the HTML element.
 		</Steps>
 
 		```html title="Example" wrap
@@ -35,10 +35,10 @@ Turnstile widgets can be implemented using implicit or explicit rendering.
 
 		**How it works**
 		<Steps>
-		1. Add the Turnstile script with `?render=explicit` parameter.
-		2. Create container elements (without the `cf-turnstile` class).
-		3. Call `turnstile.render()` function when you want to create widgets.
-		4. Configure the widget using JavaScript object parameters.
+			1. Add the Turnstile script with `?render=explicit` parameter.
+			2. Create container elements (without the `cf-turnstile` class).
+			3. Call `turnstile.render()` function when you want to create widgets.
+			4. Configure the widget using JavaScript object parameters.
 		</Steps>
 
 		```html title="Example" wrap

src/content/docs/turnstile/get-started/widget-management/dashboard.mdx

@@ -5,44 +5,29 @@ sidebar:
     order: 1
 ---
 
-import { Steps } from "~/components";
+import { Steps, DashButton } from "~/components";
 
 
 The Cloudflare dashboard provides a user-friendly interface for creating and managing widgets.
 
 ## Create a widget
 
 <Steps>
-    1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account.
-    2. Go to **Turnstile**.
-    3. Select **Add widget**.
-    4. Fill out the required information:
+    1. In the Cloudflare dashboard, go to the **Turnstile** page.
+    
+        <DashButton url="/?to=/:account/turnstile" />
+    2. Select **Add widget**.
+    3. Fill out the required information:
         - **Widget name**: A descriptive name for your widget.
         - **Hostname management**: Domains where the widget will be used.
         - **Widget mode**: Choose from Managed, Non-Interactive, or Invisible.
-    5. (Optional) Configure **Pre-clearance support** for single-page applications.
-    6. Select **Create** to save your widget.
-    7. Copy your sitekey and secret key, and store the secret key securely.
+    4. (Optional) Configure **Pre-clearance support** for single-page applications.
+    5. Select **Create** to save your widget.
+    6. Copy your sitekey and secret key, and store the secret key securely.
 </Steps>
 
 ## Manage existing widgets
 
-### View widget details
+You can view your widget details on the Cloudflare dashboard by selecting any existing widget to access analytics, settings, and performance metrics.
 
-<Steps>
-    1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account.
-    2. Go to **Turnstile**.
-    3. Select any existing widget to view its configuration.
-    4. Access analytics, settings, and performance metrics.
-</Steps>
-
-### Update widget configuration
-
-<Steps>
-    1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account.
-    2. Go to **Turnstile**.
-    3. Select any existing widget to view its configuration.
-    4. Select **Settings**.
-    5. Modify hostnames, mode, or other settings.
-    6. Select **Save** to apply changes.
-</Steps>
+To update the widget configuration, go to any existing widget and select **Settings**. Select **Save** to apply your changes.