Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Docs] Update overview pages #18710

Merged
merged 6 commits into from
Dec 12, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/content/docs/browser-rendering/faq.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

:::
5 changes: 3 additions & 2 deletions src/content/docs/browser-rendering/get-started/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
15 changes: 4 additions & 11 deletions src/content/docs/browser-rendering/how-to/pdf-generation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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" }
```

Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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
Expand Down
61 changes: 42 additions & 19 deletions src/content/docs/browser-rendering/index.mdx
Original file line number Diff line number Diff line change
@@ -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" />
Expand All @@ -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>
5 changes: 3 additions & 2 deletions src/content/docs/browser-rendering/platform/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
67 changes: 35 additions & 32 deletions src/content/docs/browser-rendering/platform/puppeteer.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
```

Expand Down Expand Up @@ -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
}
]
```

Expand All @@ -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
}
]
```

Expand All @@ -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
}
```

Expand Down
23 changes: 11 additions & 12 deletions src/content/docs/firewall/index.mdx
Original file line number Diff line number Diff line change
@@ -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

Expand All @@ -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/)
5 changes: 3 additions & 2 deletions src/content/docs/firewall/troubleshooting/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
Loading
Loading