Update: Tutorials Generate Dynamic OG Images Using Workers - Replaced Bun with Npm #19854

mohdlatif · 2025-02-08T20:07:54Z

No description provided.

db-cloudflare · 2025-02-10T09:34:10Z

src/content/docs/workers/tutorials/generate-dynamic-og-images-using-workers/index.mdx

+	return { data, name: font, style, weight };
+}
+
+// ... other font loading strategies available in the full source code


Any code required to create a fully functional app should be visible in the tutorial. If there are code blocks that are optional to finish the app you can include them in the tutorial under a dropdown, but otherwise should be displayed in a code block up front.

harshil1712 · 2025-02-21T14:37:25Z

Hey @mohdlatif, is the tutorial ready for review? I see there is a comment still pending. Can you please address that, so that we can move to the review and it updated? Thank you!

mohdlatif · 2025-02-22T15:52:32Z

Hey @mohdlatif, is the tutorial ready for review? I see there is a comment still pending. Can you please address that, so that we can move to the review and it updated? Thank you!

This should be done today. Thank you for reminding me.

Including missing source code `Any code required to create a fully functional app should be visible in the tutorial`

mohdlatif · 2025-02-22T16:41:01Z

Hi @harshil1712 @db-cloudflare @kodster28,
I have updated the tutorial with the missing source code. All good now?

lauragift21

@mohdlatif, I’ve gone through the tutorial and left some feedback. Let me know if you need any clarifications

lauragift21 · 2025-03-11T19:12:49Z

src/content/docs/workers/tutorials/generate-dynamic-og-images-using-workers/index.mdx

+<PackageManagers
+	type="create"
+	pkg="cloudflare@latest"
+	args="og-image-generator --template cloudflare-workers --pm npm"


I noticed that the command currently used here results in an error. If you intend to create a Hono app, you can use the --framework flag. The correct command should be:

npm create cloudflare@latest -- og-image-generator --framework=hono --experimental

lauragift21 · 2025-03-11T19:18:15Z

src/content/docs/workers/tutorials/generate-dynamic-og-images-using-workers/index.mdx

+<PackageManagers
+	type="create"
+	pkg="cloudflare@latest"
+	args="og-image-generator --template cloudflare-workers --pm npm"


Suggested change

args="og-image-generator --template cloudflare-workers --pm npm"

args="og-image-generator --framework=hono --experimental"

lauragift21 · 2025-03-11T20:15:34Z

src/content/docs/workers/tutorials/generate-dynamic-og-images-using-workers/index.mdx

+
+Generate OG images by making `GET` requests:
+
+```txt


The example request does not include footerText, but it's required in the API. Either make footerText optional in the implementation or update the example to include it.

lauragift21 · 2025-03-11T20:35:01Z

src/content/docs/workers/tutorials/generate-dynamic-og-images-using-workers/index.mdx

+![Style 3 Preview](~/assets/images/workers/tutorials/dynamic-og-images/style-3.png)
+
+```txt
+/og?style=3&mainText=Company%20Update&description=Q4%20Results


The example request does not include footerText, but it's required in the API. Either make footerText optional in the implementation or update the example to include it.

Oxyjun

PCX review

Oxyjun · 2025-03-21T15:37:00Z

src/content/docs/workers/tutorials/generate-dynamic-og-images-using-workers/index.mdx

+
+import { PackageManagers, Render, Tabs, TabItem, WranglerConfig } from "~/components";
+
+Social media thrives on compelling visuals. With Cloudflare Workers, you can effortlessly generate dynamic Open Graph (OG) images that grab attention and boost platform performance. In this tutorial, you'll learn how to create a customizable OG image generator powered by serverless edge computing. Cloudflare Workers enable you to deliver blazing-fast visuals globally, ensuring a seamless experience for your users. Let's dive in to see how you can take your OG images to the next level with Cloudflare Workers.


Suggested change

Social media thrives on compelling visuals. With Cloudflare Workers, you can effortlessly generate dynamic Open Graph (OG) images that grab attention and boost platform performance. In this tutorial, you'll learn how to create a customizable OG image generator powered by serverless edge computing. Cloudflare Workers enable you to deliver blazing-fast visuals globally, ensuring a seamless experience for your users. Let's dive in to see how you can take your OG images to the next level with Cloudflare Workers.

Social media thrives on compelling visuals. With Cloudflare Workers, you can effortlessly generate dynamic Open Graph (OG) images that grab attention and boost platform performance. In this tutorial, you will learn how to create a customizable OG image generator powered by serverless edge computing. Cloudflare Workers enable you to deliver blazing-fast visuals globally, ensuring a seamless experience for your users. Dive in to see how you can take your OG images to the next level with Cloudflare Workers.

Avoiding contractions

Oxyjun · 2025-03-21T15:38:31Z

src/content/docs/workers/tutorials/generate-dynamic-og-images-using-workers/index.mdx

+- Global Reach: Deliver your images with ultra-low latency, no matter where your users are located.
+- Serverless Simplicity: Focus on building features, not managing infrastructure.
+- Unparalleled Performance: Process and serve requests at the edge for blazing-fast load times.


Suggested change

- Global Reach: Deliver your images with ultra-low latency, no matter where your users are located.

- Serverless Simplicity: Focus on building features, not managing infrastructure.

- Unparalleled Performance: Process and serve requests at the edge for blazing-fast load times.

- **Global reach**: Deliver your images with ultra-low latency, no matter where your users are located.

- **Serverless simplicity**: Focus on building features, not managing infrastructure.

- **Unparalleled performance**: Process and serve requests at the edge for blazing-fast load times.

Oxyjun · 2025-03-21T15:38:52Z

src/content/docs/workers/tutorials/generate-dynamic-og-images-using-workers/index.mdx

+- Serverless Simplicity: Focus on building features, not managing infrastructure.
+- Unparalleled Performance: Process and serve requests at the edge for blazing-fast load times.
+
+By leveraging Cloudflare Workers, you get a serverless edge-computing environment that is not only cost-efficient but also perfectly optimized for modern web applications.


Suggested change

By leveraging Cloudflare Workers, you get a serverless edge-computing environment that is not only cost-efficient but also perfectly optimized for modern web applications.

By leveraging Cloudflare Workers, you get a serverless edge-computing environment that is not only cost-efficient, but also perfectly optimized for modern web applications.

Oxyjun · 2025-03-21T15:43:30Z

src/content/docs/workers/tutorials/generate-dynamic-og-images-using-workers/index.mdx

+1. Request Received: A URL with parameters is sent to a Cloudflare Worker.
+2. Content Processed: The Worker extracts text, style, and font configurations from the URL.
+3. Font Loaded: Fonts are retrieved using one of four methods, like Google Fonts or local files.
+4. Image Generated: The image is built using React components styled with Tailwind CSS.
+5. Response Cached: The final image is returned and cached for future requests.


Suggested change

1. Request Received: A URL with parameters is sent to a Cloudflare Worker.

2. Content Processed: The Worker extracts text, style, and font configurations from the URL.

3. Font Loaded: Fonts are retrieved using one of four methods, like Google Fonts or local files.

4. Image Generated: The image is built using React components styled with Tailwind CSS.

5. Response Cached: The final image is returned and cached for future requests.

1. Receives request: A Cloudflare Worker receives a URL with parameters.

2. Processes content: The Worker extracts text, style, and font configurations from the URL.

3. Loads font: The Worker retrieves fonts using one of four methods, like Google Fonts or local files.

4. Generates image: The Worker builds the image using React components styled with Tailwind CSS.

5. Caches response: The Worker returns the final image and caches it for future requests.

Using active voice.

Oxyjun · 2025-03-21T15:49:52Z

src/content/docs/workers/tutorials/generate-dynamic-og-images-using-workers/index.mdx

+- **Edge computing**: Generates images at the edge using Cloudflare Workers
+- **Modern rendering**: Utilizes Vercel's Satori library for high-quality image generation
+- **Flexible styling**: Supports both Tailwind CSS and inline styles
+- **Font versatility**: Multiple font loading strategies for different use cases
+- **Performance optimized**: Built-in caching and optimization
+- **Customizable**: Easy to extend with new styles and font configurations
+- **Developer friendly**: TypeScript support and modular architecture


Suggested change

- **Edge computing**: Generates images at the edge using Cloudflare Workers

- **Modern rendering**: Utilizes Vercel's Satori library for high-quality image generation

- **Flexible styling**: Supports both Tailwind CSS and inline styles

- **Font versatility**: Multiple font loading strategies for different use cases

- **Performance optimized**: Built-in caching and optimization

- **Customizable**: Easy to extend with new styles and font configurations

- **Developer friendly**: TypeScript support and modular architecture

- **Edge computing**: Generates images at the edge using Cloudflare Workers

- **Modern rendering**: Utilizes Vercel's Satori library for high-quality image generation

- **Flexible styling**: Supports both Tailwind CSS and inline styles

- **Font versatility**: Allows multiple font loading strategies for different use cases

- **Performance**: Uses built-in caching and optimization

- **Customizable**: Scales easily with new styles and font configurations

- **Developer friendly**: Offers TypeScript support and modular architecture

Using active voice.

Oxyjun · 2025-03-21T16:12:27Z

src/content/docs/workers/tutorials/generate-dynamic-og-images-using-workers/index.mdx

+- Decrease origin server load
+- Provide consistent performance
+
+Here's how to implement caching with customizable durations:


Suggested change

Here's how to implement caching with customizable durations:

To implement caching with customizable durations:

Oxyjun · 2025-03-21T16:13:10Z

src/content/docs/workers/tutorials/generate-dynamic-og-images-using-workers/index.mdx

+
+## Set up TypeScript type definitions
+
+Let's create our type definitions to ensure smooth TypeScript integration. Create a new file `src/type.d.ts`:


Suggested change

Let's create our type definitions to ensure smooth TypeScript integration. Create a new file `src/type.d.ts`:

Create type definitions to ensure smooth TypeScript integration. Create a new file `src/type.d.ts`:

Oxyjun · 2025-03-21T16:14:12Z

src/content/docs/workers/tutorials/generate-dynamic-og-images-using-workers/index.mdx

+Make sure to configure appropriate cache durations based on your application's needs. The example uses a 24-hour cache duration.
+:::
+
+## Set up TypeScript type definitions


Suggested change

## Set up TypeScript type definitions

## 9. Set up TypeScript type definitions

Should this be step 9?

Oxyjun · 2025-03-21T16:14:20Z

src/content/docs/workers/tutorials/generate-dynamic-og-images-using-workers/index.mdx

+
+With these definitions in place, you will get full TypeScript support and autocompletion throughout your project. This makes development smoother and helps catch potential issues early.
+
+## 9. Deploy your Worker


Suggested change

## 9. Deploy your Worker

## 10. Deploy your Worker

Oxyjun · 2025-03-21T16:15:51Z

src/content/docs/workers/tutorials/generate-dynamic-og-images-using-workers/index.mdx

+- GitHub avatar integration
+- Perfect for developer profiles
+
+:::tip


Suggested change

:::tip

:::note

Not 100% sure we support tip, will find out and edit

kodster28 · 2025-05-28T17:56:27Z

This PR has been sitting for quite a while without any updates (or response to the comments dropped by @Oxyjun).

Going to close it out for now. If you want to continue with the work, you'll need to make a new one.

penalosa and others added 2 commits February 7, 2025 10:51

Re-add OG image tutorial

c9b6dc0

Replace Bun with Npm

4371576

mohdlatif requested review from a team, GregBrimble, ToriLindsay, WalshyDev, irvinebroque and mikenomitch as code owners February 8, 2025 20:07

github-actions bot added the product:workers Related to Workers product label Feb 8, 2025

github-actions bot assigned GregBrimble, irvinebroque, mikenomitch, ToriLindsay and WalshyDev Feb 8, 2025

github-actions bot added the size/l label Feb 8, 2025

mohdlatif mentioned this pull request Feb 8, 2025

Re-add OG image tutorial #19826

Closed

3 tasks

db-cloudflare reviewed Feb 10, 2025

View reviewed changes

kodster28 added developer-spotlight DevRel Tasks that need support from developer relations. labels Feb 11, 2025

Update index.mdx

18200b0

Including missing source code `Any code required to create a fully functional app should be visible in the tutorial`

github-actions bot added size/xl and removed size/l labels Feb 22, 2025

lauragift21 reviewed Mar 11, 2025

View reviewed changes

Oxyjun reviewed Mar 21, 2025

View reviewed changes

kodster28 closed this May 28, 2025

	args="og-image-generator --template cloudflare-workers --pm npm"
	args="og-image-generator --framework=hono --experimental"


		import { PackageManagers, Render, Tabs, TabItem, WranglerConfig } from "~/components";

		Social media thrives on compelling visuals. With Cloudflare Workers, you can effortlessly generate dynamic Open Graph (OG) images that grab attention and boost platform performance. In this tutorial, you'll learn how to create a customizable OG image generator powered by serverless edge computing. Cloudflare Workers enable you to deliver blazing-fast visuals globally, ensuring a seamless experience for your users. Let's dive in to see how you can take your OG images to the next level with Cloudflare Workers.

	By leveraging Cloudflare Workers, you get a serverless edge-computing environment that is not only cost-efficient but also perfectly optimized for modern web applications.
	By leveraging Cloudflare Workers, you get a serverless edge-computing environment that is not only cost-efficient, but also perfectly optimized for modern web applications.

	Here's how to implement caching with customizable durations:
	To implement caching with customizable durations:


		## Set up TypeScript type definitions

		Let's create our type definitions to ensure smooth TypeScript integration. Create a new file `src/type.d.ts`:

	Let's create our type definitions to ensure smooth TypeScript integration. Create a new file `src/type.d.ts`:
	Create type definitions to ensure smooth TypeScript integration. Create a new file `src/type.d.ts`:

	## Set up TypeScript type definitions
	## 9. Set up TypeScript type definitions


		With these definitions in place, you will get full TypeScript support and autocompletion throughout your project. This makes development smoother and helps catch potential issues early.

		## 9. Deploy your Worker

Update: Tutorials Generate Dynamic OG Images Using Workers - Replaced Bun with Npm #19854

Update: Tutorials Generate Dynamic OG Images Using Workers - Replaced Bun with Npm #19854

Uh oh!

Conversation

mohdlatif commented Feb 8, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

harshil1712 commented Feb 21, 2025

Uh oh!

mohdlatif commented Feb 22, 2025

Uh oh!

mohdlatif commented Feb 22, 2025

Uh oh!

lauragift21 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Oxyjun left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kodster28 commented May 28, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

12 participants