Convert all existing config

Author: penalosa

src/components/WranglerConfig.astro

@@ -45,10 +45,10 @@ if (language === "toml") {
 ---
 
 <Tabs syncKey="wranglerConfig">
-	<TabItem label="wrangler.json" icon="seti:json">
-		<Code lang="jsonc" code={json} />
-	</TabItem>
 	<TabItem label="wrangler.toml" icon="setting">
 		<Code lang="toml" code={toml} />
 	</TabItem>
+	<TabItem label="wrangler.json" icon="seti:json">
+		<Code lang="jsonc" code={json} />
+	</TabItem>
 </Tabs>

src/content/docs/analytics/analytics-engine/get-started.mdx

@@ -6,21 +6,26 @@ sidebar:
 head:
   - tag: title
     content: Get started with Workers Analytics Engine
-
 ---
 
-import { DirectoryListing } from "~/components"
+import { DirectoryListing } from "~/components";
 
 ## 1. Name your dataset and add it to your Worker
 
 Add the following to your `wrangler.toml` file to create a [binding](/workers/runtime-apis/bindings/) to a Workers Analytics Engine dataset. A dataset is like a table in SQL: the rows and columns should have consistent meaning.
 
+import { WranglerConfig } from "~/components";
+
+<WranglerConfig>
+
 ```toml
 [[analytics_engine_datasets]]
 binding = "<BINDING_NAME>"
 dataset = "<DATASET_NAME>"
 ```
 
+</WranglerConfig>
+
 ## 2. Write data points from your Worker
 
 You can write data points to your Worker by calling the `writeDataPoint()` method that is exposed on the binding that you just created.
@@ -38,14 +43,14 @@ async fetch(request, env) {
 
 :::note
 
-You do not need to await `writeDataPoint()` — it will return immediately, and the Workers runtime handles writing your data in the background. 
+You do not need to await `writeDataPoint()` — it will return immediately, and the Workers runtime handles writing your data in the background.
 :::
 
 A data point is a structured event that consists of:
 
-* **Blobs** (strings) — The dimensions used for grouping and filtering. Sometimes called labels in other metrics systems.
-* **Doubles** (numbers) — The numeric values that you want to record in your data point.
-* **Indexes** — (strings) — Used as a [sampling](/analytics/analytics-engine/sql-api/#sampling) key.
+- **Blobs** (strings) — The dimensions used for grouping and filtering. Sometimes called labels in other metrics systems.
+- **Doubles** (numbers) — The numeric values that you want to record in your data point.
+- **Indexes** — (strings) — Used as a [sampling](/analytics/analytics-engine/sql-api/#sampling) key.
 
 In the example above, suppose you are collecting air quality samples. Each data point written represents a reading from your weather sensor. The blobs define city, state, and sensor model — the dimensions you want to be able to filter queries on later. The doubles define the numeric temperature and air pressure readings. And the index is the ID of your customer. You may want to include [context about the incoming request](/workers/runtime-apis/request/), such as geolocation, to add additional data to your datapoint.
 
@@ -55,8 +60,8 @@ Currently, the `writeDataPoint()` API accepts ordered arrays of values. This mea
 
 You can query the data you have written in two ways:
 
-* [**SQL API**](/analytics/analytics-engine/sql-api) — Best for writing your own queries and integrating with external tools like Grafana.
-* [**GraphQL API**](/analytics/graphql-api/) — This is the same API that powers the Cloudflare dashboard.
+- [**SQL API**](/analytics/analytics-engine/sql-api) — Best for writing your own queries and integrating with external tools like Grafana.
+- [**GraphQL API**](/analytics/graphql-api/) — This is the same API that powers the Cloudflare dashboard.
 
 For the purpose of this example, we will use the SQL API.
 
@@ -81,7 +86,7 @@ LIMIT 10
 
 :::note
 
-We are using a custom averaging function to take [sampling](/analytics/analytics-engine/sql-api/#sampling) into account. 
+We are using a custom averaging function to take [sampling](/analytics/analytics-engine/sql-api/#sampling) into account.
 :::
 
 You can run this query by making an HTTP request to the SQL API:
@@ -117,6 +122,4 @@ Refer to [Querying Workers Analytics Engine from Grafana](/analytics/analytics-e
 
 ## Further reading
 
-<DirectoryListing 
-folder="analytics/analytics-engine"
-/>
+<DirectoryListing folder="analytics/analytics-engine" />

src/content/docs/analytics/analytics-engine/worker-querying.mdx

@@ -48,11 +48,17 @@ First the environment variables are set up with the account ID and API token.
 
 The account ID is set in `wrangler.toml`:
 
+import { WranglerConfig } from "~/components";
+
+<WranglerConfig>
+
 ```toml
 [vars]
 ACCOUNT_ID = "<account_id>"
 ```
 
+</WranglerConfig>
+
 The API_TOKEN can be set as a secret, using the wrangler command line tool, by running the following and entering your token string:
 
 ```sh

src/content/docs/browser-rendering/get-started/browser-rendering-with-DO.mdx

@@ -75,6 +75,10 @@ Configure your `browser-worker` project's [`wrangler.toml`](/workers/wrangler/co
 
 Update your `wrangler.toml` configuration file with the Browser Rendering API binding, the R2 bucket you created and a Durable Object:
 
+import { WranglerConfig } from "~/components";
+
+<WranglerConfig>
+
 ```toml
 name = "rendering-api-demo"
 main = "src/index.js"
@@ -103,6 +107,8 @@ new_classes = ["Browser"] # Array of new classes
 
 ```
 
+</WranglerConfig>
+
 ## 6. Code
 
 The code below uses Durable Object to instantiate a browser using Puppeteer. It then opens a series of web pages with different resolutions, takes a screenshot of each, and uploads it to R2.

src/content/docs/browser-rendering/get-started/screenshots.mdx

@@ -62,6 +62,10 @@ Configure your `browser-worker` project's [`wrangler.toml`](/workers/wrangler/co
 
 Update your `wrangler.toml` configuration file with the Browser Rendering API binding and the KV namespaces you created:
 
+import { WranglerConfig } from "~/components";
+
+<WranglerConfig>
+
 ```toml
 name = "browser-worker"
 main = "src/index.js"
@@ -74,6 +78,8 @@ kv_namespaces = [
 ]
 ```
 
+</WranglerConfig>
+
 ## 5. Code
 
 <Tabs> <TabItem label="JavaScript" icon="seti:javascript">

src/content/docs/browser-rendering/platform/wrangler.mdx

@@ -24,6 +24,10 @@ To deploy a Browser Rendering Worker, you must declare a [browser binding](/work
 If you are using [Puppeteer](/browser-rendering/platform/puppeteer/) in your Worker code, then you also need to add "nodejs_compat_v2" to the compatibility_flags in your Worker's `wrangler.toml` configuration. More information [here](/workers/runtime-apis/nodejs/#enable-nodejs-with-workers), including for [pages functions](/workers/runtime-apis/nodejs/#enable-nodejs-with-pages-functions).
 :::
 
+import { WranglerConfig } from "~/components";
+
+<WranglerConfig>
+
 ```toml
 # Top-level configuration
 name = "browser-rendering"
@@ -34,6 +38,8 @@ compatibility_flags = ["nodejs_compat_v2"]
 browser = { binding = "MYBROWSER" }
 ```
 
+</WranglerConfig>
+
 After the binding is declared, access the DevTools endpoint using `env.MYBROWSER` in your Worker code:
 
 ```javascript

src/content/docs/cloudflare-for-platforms/workers-for-platforms/configuration/outbound-workers.mdx

@@ -1,7 +1,6 @@
 ---
 pcx_content_type: concept
 title: Outbound Workers
-
 ---
 
 Outbound Workers sit between your customer’s Workers and the public Internet. They give you visibility into all outgoing `fetch()` requests from user Workers.
@@ -12,9 +11,9 @@ Outbound Workers sit between your customer’s Workers and the public Internet.
 
 Outbound Workers can be used to:
 
-* Log all subrequests to identify malicious domains or usage patterns.
-* Create, allow, or block lists for hostnames requested by user Workers.
-* Configure authentication to your APIs behind the scenes (without end developers needing to set credentials).
+- Log all subrequests to identify malicious domains or usage patterns.
+- Create, allow, or block lists for hostnames requested by user Workers.
+- Configure authentication to your APIs behind the scenes (without end developers needing to set credentials).
 
 ## Use Outbound Workers
 
@@ -25,47 +24,53 @@ To use Outbound Workers:
 
 Make sure that you have `[email protected]` or later [installed](/workers/wrangler/install-and-update/).
 
+import { WranglerConfig } from "~/components";
+
+<WranglerConfig>
+
 ```toml
 [[dispatch_namespaces]]
 binding = "dispatcher"
 namespace = "<NAMESPACE_NAME>"
 outbound = {service = "<SERVICE_NAME>", parameters = ["params_object"]}
 ```
 
+</WranglerConfig>
+
 3. Edit your dynamic dispatch Worker to call the Outbound Worker and declare variables to pass on `dispatcher.get()`.
 
 ```js
 export default {
 	async fetch(request, env) {
-	  try {
-
-    // parse the URL, read the subdomain
-		let workerName = new URL(request.url).host.split('.')[0];
-
-		let context_from_dispatcher = {
-			'customer_name': workerName,
-			'url': request.url,
-		  }
-
-		let userWorker = env.dispatcher.get(
-		  workerName,
-		  {},
-		  {// outbound arguments. object name must match parameters in the binding
-			outbound: {
-			 params_object: context_from_dispatcher,
-			   }
-			 }
-		);
-		return await userWorker.fetch(request);
-	  } catch (e) {
-		if (e.message.startsWith('Worker not found')) {
-		  // we tried to get a worker that doesn't exist in our dispatch namespace
-		  return new Response('', { status: 404 });
+		try {
+			// parse the URL, read the subdomain
+			let workerName = new URL(request.url).host.split(".")[0];
+
+			let context_from_dispatcher = {
+				customer_name: workerName,
+				url: request.url,
+			};
+
+			let userWorker = env.dispatcher.get(
+				workerName,
+				{},
+				{
+					// outbound arguments. object name must match parameters in the binding
+					outbound: {
+						params_object: context_from_dispatcher,
+					},
+				},
+			);
+			return await userWorker.fetch(request);
+		} catch (e) {
+			if (e.message.startsWith("Worker not found")) {
+				// we tried to get a worker that doesn't exist in our dispatch namespace
+				return new Response("", { status: 404 });
+			}
+			return new Response(e.message, { status: 500 });
 		}
-		 return new Response(e.message, { status: 500 });
-	  }
-	}
-}
+	},
+};
 ```
 
 4. The Outbound Worker will now be invoked on any `fetch()` requests from a user Worker. The user Worker will trigger a [FetchEvent](/workers/runtime-apis/handlers/fetch/) on the Outbound Worker. The variables declared in the binding can be accessed in the Outbound Worker through `env.<VAR_NAME>`.
@@ -74,47 +79,44 @@ The following is an example of an Outbound Worker that logs the fetch request fr
 
 ```js
 export default {
-  // this event is fired when the dispatched Workers make a subrequest
-  async fetch(request, env, ctx) {
-    // env contains the values we set in `dispatcher.get()`
-    const customer_name = env.customer_name;
-    const original_url = env.url;
-
-    // log the request
-    ctx.waitUntil(fetch(
-      'https://logs.example.com',
-      {
-        method: 'POST',
-        body: JSON.stringify({
-          customer_name,
-          original_url,
-        }),
-      },
-    ));
-
-    const url = new URL(original_url);
-    if (url.host === 'api.example.com') {
-      // pre-auth requests to our API
-      const jwt = make_jwt_for_customer(customer_name);
-
-      let headers = new Headers(request.headers);
-      headers.set('Authorization', `Bearer ${jwt}`);
-
-      // clone the request to set new headers using existing body
-      let new_request = new Request(request, {headers});
-
-      return fetch(new_request)
-    }
-
-    return fetch(request)
-  }
+	// this event is fired when the dispatched Workers make a subrequest
+	async fetch(request, env, ctx) {
+		// env contains the values we set in `dispatcher.get()`
+		const customer_name = env.customer_name;
+		const original_url = env.url;
+
+		// log the request
+		ctx.waitUntil(
+			fetch("https://logs.example.com", {
+				method: "POST",
+				body: JSON.stringify({
+					customer_name,
+					original_url,
+				}),
+			}),
+		);
+
+		const url = new URL(original_url);
+		if (url.host === "api.example.com") {
+			// pre-auth requests to our API
+			const jwt = make_jwt_for_customer(customer_name);
+
+			let headers = new Headers(request.headers);
+			headers.set("Authorization", `Bearer ${jwt}`);
+
+			// clone the request to set new headers using existing body
+			let new_request = new Request(request, { headers });
+
+			return fetch(new_request);
+		}
+
+		return fetch(request);
+	},
 };
 ```
 
 :::note
 
-
 Outbound Workers do not intercept fetch requests made from [Durable Objects](/durable-objects/) or [mTLS certificate bindings](/workers/runtime-apis/bindings/mtls/).
 
-
 :::

src/content/docs/cloudflare-for-platforms/workers-for-platforms/get-started/configuration.mdx

@@ -99,12 +99,18 @@ cd my-dispatcher
 
 Open the `wrangler.toml` file in your project directory, and add the dispatch namespace binding:
 
+import { WranglerConfig } from "~/components";
+
+<WranglerConfig>
+
 ```toml
 [[dispatch_namespaces]]
 binding = "DISPATCHER"
 namespace = "testing"
 ```
 
+</WranglerConfig>
+
 Add the following to the index.js file:
 
 ```js