[Docs] Update overview pages (#18710)

pedrosousa · Oxyjun · web-flow · commit 410659bdc59c · 2024-12-12T14:55:48.000Z
---------

Co-authored-by: Jun Lee &lt;junlee@cloudflare.com&gt;
diff --git a/src/content/docs/browser-rendering/faq.mdx b/src/content/docs/browser-rendering/faq.mdx
@@ -47,6 +47,6 @@ const innerHtml = await page.evaluate(() => {
 
 Keep in mind that `page.evaluate` can only return primitive types like strings, numbers, etc.
 
-Returning an `HTMLElement` won't work.
+Returning an `HTMLElement` will not work.
 
 :::
diff --git a/src/content/docs/browser-rendering/get-started/index.mdx b/src/content/docs/browser-rendering/get-started/index.mdx
@@ -3,9 +3,10 @@ pcx_content_type: navigation
 title: Get started
 sidebar:
   order: 2
-
+  group:
+    hideIndex: true
 ---
 
-import { DirectoryListing } from "~/components"
+import { DirectoryListing } from "~/components";
 
 <DirectoryListing />
diff --git a/src/content/docs/browser-rendering/how-to/pdf-generation.mdx b/src/content/docs/browser-rendering/how-to/pdf-generation.mdx
@@ -25,7 +25,7 @@ npm install @cloudflare/puppeteer --save-dev
 
 3. Add your Browser Rendering binding to your new `wrangler.toml` configuration:
 
-```yaml
+```toml
 browser = { binding = "BROWSER" }
 ```
 
@@ -66,15 +66,12 @@ export default {
 Rather than using Browser Rendering to navigate to a user-provided URL, manually generate a webpage, then provide that webpage to the Browser Rendering instance. This allows you to render any design you want.
 
 :::note
-It's worth noting that you can generate your HTML or CSS using any method
-you'd like. For now we're using string interpolation, but this method is
-	fully-compatible with web frameworks capable of rendering HTML on Workers such
-	as React, Remix, and Vue.
+You can generate your HTML or CSS using any method you like. This example uses string interpolation, but the method is also fully compatible with web frameworks capable of rendering HTML on Workers such as React, Remix, and Vue.
 :::
 
 For this example, we're going to take in user-provided content (via a '?name=' parameter), and have that name output in the final PDF document.
 
-To start, let's fill out your 'generateDocument' function with the following:
+To start, fill out your `generateDocument` function with the following:
 
 ```ts
 const generateDocument = (name: string) => {
@@ -128,11 +125,7 @@ const generateDocument = (name: string) => {
 This example HTML document should render a beige background imitating a certificate showing that the user-provided name has successfully rendered a PDF using Cloudflare Workers.
 
 :::note
-It's usually best to avoid directly interpolating user-provided content into
-	an image or PDF renderer in production applications. To render contents like
-	an invoice, it wold be best to validate the data input, and fetch data
-	yourself using tools like [D1](/d1/) or
-	[Workers KV](/kv/).
+It is usually best to avoid directly interpolating user-provided content into an image or PDF renderer in production applications. To render contents like an invoice, it would be best to validate the data input and fetch the data yourself using tools like [D1](/d1/) or [Workers KV](/kv/).
 :::
 
 ## 2. Load HTML and CSS Into Browser
diff --git a/src/content/docs/browser-rendering/index.mdx b/src/content/docs/browser-rendering/index.mdx
@@ -1,19 +1,25 @@
 ---
-title: Overview
+title: Browser Rendering
 pcx_content_type: overview
 sidebar:
   order: 1
 head:
   - tag: title
     content: Browser Rendering
-
 ---
 
-import { CardGrid, Description, LinkTitleCard, Plan, RelatedProduct } from "~/components"
+import {
+	CardGrid,
+	Description,
+	LinkTitleCard,
+	Plan,
+	RelatedProduct,
+} from "~/components";
 
 <Description>
 
 Browser automation for [Cloudflare Workers](/workers/).
+
 </Description>
 
 <Plan type="workers-paid" />
@@ -22,50 +28,67 @@ The Workers Browser Rendering API allows developers to programmatically control
 
 Use Browser Rendering to:
 
-* Take screenshots of pages.
-* Convert a page to a PDF.
-* Test web applications.
-* Gather page load performance metrics.
-* Crawl web pages for information retrieval.
+- Take screenshots of pages.
+- Convert a page to a PDF.
+- Test web applications.
+- Gather page load performance metrics.
+- Crawl web pages for information retrieval.
 
 ## Related products
 
 <RelatedProduct header="Workers" href="/workers/" product="workers">
 
 Build serverless applications and deploy instantly across the globe for exceptional performance, reliability, and scale.
 
-
 </RelatedProduct>
 
 <RelatedProduct header="Durable Objects" href="/durable-objects/" product="durable-objects">
 
 A globally distributed coordination API with strongly consistent storage.
 
-
 </RelatedProduct>
 
 ## More resources
 
 <CardGrid>
 
-<LinkTitleCard title="Get started" href="/browser-rendering/get-started/" icon="open-book">
-Deploy your first Browser Rendering project using Wrangler and Cloudflare's version of Puppeteer.
+<LinkTitleCard
+	title="Get started"
+	href="/browser-rendering/get-started/"
+	icon="open-book"
+>
+	Deploy your first Browser Rendering project using Wrangler and Cloudflare's
+	version of Puppeteer.
 </LinkTitleCard>
 
 <LinkTitleCard title="Learning Path" href="/learning-paths/workers/" icon="pen">
-New to Workers? Get started with the Workers Learning Path.
+	New to Workers? Get started with the Workers Learning Path.
 </LinkTitleCard>
 
-<LinkTitleCard title="Limits" href="/browser-rendering/platform/limits/" icon="document">
-Learn about Browser Rendering limits.
+<LinkTitleCard
+	title="Limits"
+	href="/browser-rendering/platform/limits/"
+	icon="document"
+>
+	Learn about Browser Rendering limits.
 </LinkTitleCard>
 
-<LinkTitleCard title="Developer Discord" href="https://discord.cloudflare.com" icon="discord">
-Connect with the Workers community on Discord to ask questions, show what you are building, and discuss the platform with other developers.
+<LinkTitleCard
+	title="Developer Discord"
+	href="https://discord.cloudflare.com"
+	icon="discord"
+>
+	Connect with the Workers community on Discord to ask questions, show what you
+	are building, and discuss the platform with other developers.
 </LinkTitleCard>
 
-<LinkTitleCard title="@CloudflareDev" href="https://x.com/cloudflaredev" icon="x.com">
-Follow @CloudflareDev on Twitter to learn about product announcements, and what is new in Cloudflare Workers.
+<LinkTitleCard
+	title="@CloudflareDev"
+	href="https://x.com/cloudflaredev"
+	icon="x.com"
+>
+	Follow @CloudflareDev on Twitter to learn about product announcements, and
+	what is new in Cloudflare Workers.
 </LinkTitleCard>
 
 </CardGrid>
diff --git a/src/content/docs/browser-rendering/platform/index.mdx b/src/content/docs/browser-rendering/platform/index.mdx
@@ -3,9 +3,10 @@ pcx_content_type: navigation
 title: Platform
 sidebar:
   order: 3
-
+  group:
+    hideIndex: true
 ---
 
-import { DirectoryListing } from "~/components"
+import { DirectoryListing } from "~/components";
 
 <DirectoryListing />
diff --git a/src/content/docs/browser-rendering/platform/puppeteer.mdx b/src/content/docs/browser-rendering/platform/puppeteer.mdx
@@ -15,7 +15,7 @@ The Workers team forked a version of Puppeteer and patched it to connect to the
 
 Our version is open sourced and can be found in [Cloudflare's fork of Puppeteer](https://github.com/cloudflare/puppeteer). The npm can be installed from [npmjs](https://www.npmjs.com/) as [@cloudflare/puppeteer](https://www.npmjs.com/package/@cloudflare/puppeteer):
 
-```javascript
+```bash
 npm install @cloudflare/puppeteer --save-dev
 ```
 
@@ -83,18 +83,18 @@ In order to facilitate browser session management, we've added new methods to `p
 
 `puppeteer.sessions()` lists the current running sessions. It will return an output similar to this:
 
-```
+```json
 [
-   {
-      "connectionId": "2a2246fa-e234-4dc1-8433-87e6cee80145",
-      "connectionStartTime": 1711621704607,
-      "sessionId": "478f4d7d-e943-40f6-a414-837d3736a1dc",
-      "startTime": 1711621703708
-   },
-   {
-      "sessionId": "565e05fb-4d2a-402b-869b-5b65b1381db7",
-      "startTime": 1711621703808
-   }
+	{
+		"connectionId": "2a2246fa-e234-4dc1-8433-87e6cee80145",
+		"connectionStartTime": 1711621704607,
+		"sessionId": "478f4d7d-e943-40f6-a414-837d3736a1dc",
+		"startTime": 1711621703708
+	},
+	{
+		"sessionId": "565e05fb-4d2a-402b-869b-5b65b1381db7",
+		"startTime": 1711621703808
+	}
 ]
 ```
 
@@ -104,22 +104,22 @@ Notice that the session `478f4d7d-e943-40f6-a414-837d3736a1dc` has an active wor
 
 `puppeteer.history()` lists recent sessions, both open and closed. It's useful to get a sense of your current usage.
 
-```
+```json
 [
-   {
-      "closeReason": 2,
-      "closeReasonText": "BrowserIdle",
-      "endTime": 1711621769485,
-      "sessionId": "478f4d7d-e943-40f6-a414-837d3736a1dc",
-      "startTime": 1711621703708
-   },
-   {
-      "closeReason": 1,
-      "closeReasonText": "NormalClosure",
-      "endTime": 1711123501771,
-      "sessionId": "2be00a21-9fb6-4bb2-9861-8cd48e40e771",
-      "startTime": 1711123430918
-   }
+	{
+		"closeReason": 2,
+		"closeReasonText": "BrowserIdle",
+		"endTime": 1711621769485,
+		"sessionId": "478f4d7d-e943-40f6-a414-837d3736a1dc",
+		"startTime": 1711621703708
+	},
+	{
+		"closeReason": 1,
+		"closeReasonText": "NormalClosure",
+		"endTime": 1711123501771,
+		"sessionId": "2be00a21-9fb6-4bb2-9861-8cd48e40e771",
+		"startTime": 1711123430918
+	}
 ]
 ```
 
@@ -131,12 +131,15 @@ You should also be able to access this information in the dashboard, albeit with
 
 `puppeteer.limits()` lists your active limits:
 
-```
+```json
 {
-   "activeSessions": ["478f4d7d-e943-40f6-a414-837d3736a1dc", "565e05fb-4d2a-402b-869b-5b65b1381db7"],
-   "allowedBrowserAcquisitions": 1,
-   "maxConcurrentSessions": 2,
-   "timeUntilNextAllowedBrowserAcquisition": 0
+	"activeSessions": [
+		"478f4d7d-e943-40f6-a414-837d3736a1dc",
+		"565e05fb-4d2a-402b-869b-5b65b1381db7"
+	],
+	"allowedBrowserAcquisitions": 1,
+	"maxConcurrentSessions": 2,
+	"timeUntilNextAllowedBrowserAcquisition": 0
 }
 ```
 
diff --git a/src/content/docs/firewall/index.mdx b/src/content/docs/firewall/index.mdx
@@ -1,26 +1,25 @@
 ---
-title: Overview
+title: Cloudflare Firewall Rules
 pcx_content_type: overview
 sidebar:
   order: 1
   badge:
     text: Deprecated
 head:
   - tag: title
-    content: Cloudflare Firewall Rules
-
+    content: Cloudflare Firewall Rules (deprecated)
 ---
 
-import { FeatureTable, Render } from "~/components"
+import { FeatureTable, Render } from "~/components";
 
 Cloudflare Firewall Rules allows you to create rules that inspect incoming traffic and block, challenge, log, or allow specific requests.
 
 <Render file="deprecation-notice" />
 
 ## Main features
 
-* **Rule-based protection**: Use pre-defined rulesets provided by Cloudflare, or define your own firewall rules. Create rules in the Cloudflare dashboard or via API.
-* **Complex custom rules**: Each rule's expression can reference multiple fields from all the available HTTP request parameters and fields, allowing you to create complex rules.
+- **Rule-based protection**: Use pre-defined rulesets provided by Cloudflare, or define your own firewall rules. Create rules in the Cloudflare dashboard or via API.
+- **Complex custom rules**: Each rule's expression can reference multiple fields from all the available HTTP request parameters and fields, allowing you to create complex rules.
 
 ## Availability
 
@@ -30,15 +29,15 @@ This table outlines the Firewall Rules features and entitlements available with
 
 ## Next steps
 
-* Unless you are already an advanced user, refer to [Expressions](/ruleset-engine/rules-language/expressions/) and [Actions](/firewall/cf-firewall-rules/actions/) to learn more about the basic elements of firewall rules.
+- Unless you are already an advanced user, refer to [Expressions](/ruleset-engine/rules-language/expressions/) and [Actions](/firewall/cf-firewall-rules/actions/) to learn more about the basic elements of firewall rules.
 
-* To start building your own firewall rules, refer to one of the following pages:
+- To start building your own firewall rules, refer to one of the following pages:
 
-  * [Manage firewall rules in the dashboard](/firewall/cf-dashboard/create-edit-delete-rules/)
-  * [Manage firewall rules via the APIs](/firewall/api/)
+  - [Manage firewall rules in the dashboard](/firewall/cf-dashboard/create-edit-delete-rules/)
+  - [Manage firewall rules via the APIs](/firewall/api/)
 
-* You can also manage firewall rules through Terraform. For more information, refer to [Getting Started with Terraform](https://blog.cloudflare.com/getting-started-with-terraform-and-cloudflare-part-1/).
+- You can also manage firewall rules through Terraform. For more information, refer to [Getting Started with Terraform](https://blog.cloudflare.com/getting-started-with-terraform-and-cloudflare-part-1/).
 
 ## Related resources
 
-* [Cloudflare Rules language](/ruleset-engine/rules-language/)
+- [Cloudflare Rules language](/ruleset-engine/rules-language/)
diff --git a/src/content/docs/firewall/troubleshooting/index.mdx b/src/content/docs/firewall/troubleshooting/index.mdx
@@ -3,10 +3,11 @@ pcx_content_type: navigation
 title: Troubleshooting
 sidebar:
   order: 5
-
+  group:
+    hideIndex: true
 ---
 
-import { DirectoryListing } from "~/components"
+import { DirectoryListing } from "~/components";
 
 The following topics are useful for troubleshooting firewall issues.
 
diff --git a/src/content/docs/spectrum/index.mdx b/src/content/docs/spectrum/index.mdx
diff --git a/src/content/partials/firewall/deprecation-notice.mdx b/src/content/partials/firewall/deprecation-notice.mdx
