diff --git a/docs/docs.json b/docs/docs.json
index 14bd127e8f..aa66a25efe 100644
--- a/docs/docs.json
+++ b/docs/docs.json
@@ -332,14 +332,15 @@
"guides/examples/open-ai-with-retrying",
"guides/examples/pdf-to-image",
"guides/examples/puppeteer",
+ "guides/examples/react-pdf",
+ "guides/examples/react-email",
+ "guides/examples/resend-email-sequence",
+ "guides/examples/satori",
"guides/examples/scrape-hacker-news",
"guides/examples/sentry-error-tracking",
"guides/examples/sharp-image-processing",
"guides/examples/supabase-database-operations",
"guides/examples/supabase-storage-upload",
- "guides/examples/react-pdf",
- "guides/examples/react-email",
- "guides/examples/resend-email-sequence",
"guides/examples/vercel-ai-sdk",
"guides/examples/vercel-sync-env-vars"
]
diff --git a/docs/guides/examples/react-email.mdx b/docs/guides/examples/react-email.mdx
index 0abd7efb76..afd4060939 100644
--- a/docs/guides/examples/react-email.mdx
+++ b/docs/guides/examples/react-email.mdx
@@ -6,11 +6,11 @@ description: "Learn how to send beautiful emails using React Email and Trigger.d
## Overview
-This example demonstrates how to use Trigger.dev to send emails using React Email.
+This example demonstrates how to use Trigger.dev to send emails using [React Email](https://react.email/).
This example uses [Resend](https://resend.com) as the email provider. You can use other email
- providers like [SendGrid](https://sendgrid.com) or [Loops](https://loops.so) as well. Full list of
+ providers like [Loops](https://loops.so) or [SendGrid](https://sendgrid.com) etc. Full list of
their integrations can be found [here](https://react.email/docs/introduction#integrations).
@@ -98,7 +98,7 @@ export const sendEmail = task({
});
```
-## How the email should look
+## The email
This example email should look like this:

@@ -121,3 +121,184 @@ To test this task in the [dashboard](https://cloud.trigger.dev), you can use the
## Deploying your task
Deploy the task to production using the Trigger.dev CLI `deploy` command.
+
+## Using Cursor / AI to build your emails
+
+In this video you can see how we use Cursor to build a welcome email.
+
+We recommend using our [Cursor rules](https://trigger.dev/changelog/cursor-rules-writing-tasks/) to help you build your tasks and emails.
+
+#### Video: creating a new email template using Cursor
+
+
+
+#### The generated email template
+
+
+
+#### The generated code
+
+```tsx trigger/welcome.tsx
+import {
+ Body,
+ Button,reac
+ Container,
+ Head,
+ Hr,
+ Html,
+ Img,
+ Link,
+ Preview,
+ Section,
+ Text,
+} from "@react-email/components";
+
+const baseUrl = process.env.VERCEL_URL
+ ? `https://${process.env.VERCEL_URL}`
+ : "";
+
+export const TriggerDevWelcomeEmail = () => (
+
+
+
+
+
+
+
+ Thanks for signing up for Trigger.dev! You're now ready to start
+ creating powerful background jobs and workflows.
+
+
+ You can monitor your jobs, view runs, and manage your projects right
+ from your dashboard.
+
+
+
+
+ To help you get started, check out our{" "}
+
+ documentation
+ {" "}
+ and{" "}
+
+ quickstart guide
+
+ .
+
+
+ You can create your first job using our SDK, set up integrations,
+ and configure triggers to automate your workflows. Take a look at
+ our{" "}
+
+ examples
+ {" "}
+ for inspiration.
+
+
+ Join our{" "}
+
+ Discord community
+ {" "}
+ to connect with other developers and get help when you need it.
+
+
+ We're here to help you build amazing things. If you have any
+ questions, check out our{" "}
+
+ documentation
+ {" "}
+ or reach out to us on Discord.
+
+ — The Trigger.dev team
+
+ Trigger.dev Inc.
+
+
+
+
+);
+
+export default TriggerDevWelcomeEmail;
+
+const main = {
+ backgroundColor: "#0E0C15",
+ fontFamily:
+ '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
+};
+
+const container = {
+ backgroundColor: "#1D1B27",
+ margin: "0 auto",
+ padding: "20px 0 48px",
+ marginBottom: "64px",
+};
+
+const box = {
+ padding: "0 48px",
+};
+
+const hr = {
+ borderColor: "#2D2B3B",
+ margin: "20px 0",
+};
+
+const paragraph = {
+ color: "#E1E1E3",
+ fontSize: "16px",
+ lineHeight: "24px",
+ textAlign: "left" as const,
+};
+
+const anchor = {
+ color: "#A78BFA",
+};
+
+const button = {
+ backgroundColor: "#7C3AED",
+ borderRadius: "6px",
+ color: "#fff",
+ fontSize: "16px",
+ fontWeight: "bold",
+ textDecoration: "none",
+ textAlign: "center" as const,
+ display: "block",
+ width: "100%",
+ padding: "12px",
+};
+
+const footer = {
+ color: "#9CA3AF",
+ fontSize: "12px",
+ lineHeight: "16px",
+};
+```
+
+## Learn more
+
+### React Email docs
+
+Check out the [React Email docs](https://react.email/docs) and learn how to set up and use React Email, including how to preview your emails locally.
+
+
+
+ Pre-built components you can copy and paste into your emails.
+
+
+ Extensive pre-built templates ready to use.
+
+
diff --git a/docs/guides/examples/react-pdf.mdx b/docs/guides/examples/react-pdf.mdx
index f19ffb5914..c766705999 100644
--- a/docs/guides/examples/react-pdf.mdx
+++ b/docs/guides/examples/react-pdf.mdx
@@ -6,7 +6,7 @@ description: "This example will show you how to generate a PDF using Trigger.dev
## Overview
-This example demonstrates how to use Trigger.dev to generate a PDF using `react-pdf` and save it to Cloudflare R2.
+This example demonstrates how to use Trigger.dev to generate a PDF using [react-pdf](https://react-pdf.org/) and save it to Cloudflare R2.
## Task code
diff --git a/docs/guides/examples/satori.mdx b/docs/guides/examples/satori.mdx
new file mode 100644
index 0000000000..62a386e20c
--- /dev/null
+++ b/docs/guides/examples/satori.mdx
@@ -0,0 +1,133 @@
+---
+title: "Generate OG Images using Satori"
+sidebarTitle: "Satori OG Images"
+description: "Learn how to generate dynamic Open Graph images using Satori and Trigger.dev."
+---
+
+## Overview
+
+This example demonstrates how to use Trigger.dev to generate dynamic Open Graph (OG) images using Vercel's [Satori](https://github.com/vercel/satori). The task takes a title and image URL as input and generates a beautiful OG image with text overlay.
+
+This can be customized and extended however you like, full list of options can be found [here](https://github.com/vercel/satori).
+
+## Task code
+
+```tsx trigger/generateOgImage.ts
+import { schemaTask } from "@trigger.dev/sdk/v3";
+import { z } from "zod";
+import satori from "satori";
+import sharp from "sharp";
+import { join } from "path";
+import fs from "fs/promises";
+
+export const generateOgImage = schemaTask({
+ id: "generate-og-image",
+ schema: z.object({
+ width: z.number().optional(),
+ height: z.number().optional(),
+ title: z.string(),
+ imageUrl: z.string().url(),
+ }),
+ run: async (payload) => {
+ // Load font
+ const fontResponse = await fetch(
+ "https://github.com/googlefonts/roboto/raw/main/src/hinted/Roboto-Regular.ttf"
+ ).then((res) => res.arrayBuffer());
+
+ // Fetch and convert image to base64
+ const imageResponse = await fetch(payload.imageUrl);
+ const imageBuffer = await imageResponse.arrayBuffer();
+ const imageBase64 = `data:${
+ imageResponse.headers.get("content-type") || "image/jpeg"
+ };base64,${Buffer.from(imageBuffer).toString("base64")}`;
+
+ const markup = (
+
+
+
+ {payload.title}
+
+
+ );
+
+ const svg = await satori(markup, {
+ width: payload.width ?? 1200,
+ height: payload.height ?? 630,
+ fonts: [
+ {
+ name: "Roboto",
+ data: fontResponse,
+ weight: 400,
+ style: "normal",
+ },
+ ],
+ });
+
+ const fileName = `og-${Date.now()}.jpg`;
+ const tempDir = join(process.cwd(), "tmp");
+ await fs.mkdir(tempDir, { recursive: true });
+ const outputPath = join(tempDir, fileName);
+
+ await sharp(Buffer.from(svg))
+ .jpeg({
+ quality: 90,
+ mozjpeg: true,
+ })
+ .toFile(outputPath);
+
+ return {
+ filePath: outputPath,
+ width: payload.width,
+ height: payload.height,
+ };
+ },
+});
+```
+
+## Image example
+
+This image was generated using the above task.
+
+
+
+## Testing your task
+
+To test this task in the [dashboard](https://cloud.trigger.dev), you can use the following payload:
+
+```json
+{
+ "title": "My Awesome OG image",
+ "imageUrl": "",
+ "width": 1200, // optional, defaults to 1200
+ "height": 630 // optional, defaults to 630
+}
+```
diff --git a/docs/guides/introduction.mdx b/docs/guides/introduction.mdx
index 8b7347e63d..a97b7108a8 100644
--- a/docs/guides/introduction.mdx
+++ b/docs/guides/introduction.mdx
@@ -77,6 +77,10 @@ Task code you can copy and paste to use in your project. They can all be extende
| [Vercel AI SDK](/guides/examples/vercel-ai-sdk) | Use Vercel AI SDK to generate text using OpenAI. |
| [Vercel sync environment variables](/guides/examples/vercel-sync-env-vars) | Automatically sync environment variables from your Vercel projects to Trigger.dev. |
+## Cursor rules
+
+If you use Cursor, we have a set of Cursor rules which will help you build your tasks. You can find our installation guide [here](https://trigger.dev/changelog/cursor-rules-writing-tasks/).
+
If you would like to see a guide for your framework, or an example task for your use case, please
request it in our [Discord server](https://trigger.dev/discord) and we'll add it to the list.
diff --git a/docs/images/react-email-welcome.png b/docs/images/react-email-welcome.png
new file mode 100644
index 0000000000..d33477a3ce
Binary files /dev/null and b/docs/images/react-email-welcome.png differ
diff --git a/docs/images/react-satori-og.jpg b/docs/images/react-satori-og.jpg
new file mode 100644
index 0000000000..8ed21195e0
Binary files /dev/null and b/docs/images/react-satori-og.jpg differ