Skip to content

Added examples to the intro table and updated react email #1878

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.

Sign up for GitHub

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

Merged
merged 3 commits into from
Apr 11, 2025
Merged

Added examples to the intro table and updated react email #1878

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d75ae91
Updated intro list and added task coe
D-K-P Apr 3, 2025
a7d8e00
Merge branch 'main' into docs/guides-improvements
D-K-P Apr 11, 2025
aa7383e
Fixed import name
D-K-P Apr 11, 2025
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
78 changes: 62 additions & 16 deletions docs/guides/examples/react-email.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,12 +144,13 @@ We recommend using our [Cursor rules](https://trigger.dev/changelog/cursor-rules

#### The generated code

```tsx trigger/welcome.tsx
```tsx emails/trigger-welcome-email.tsx
import {
Body,
Button,reac
Button,
Container,
Head,
Heading,
Hr,
Html,
Img,
Expand All @@ -159,11 +160,13 @@ import {
Text,
} from "@react-email/components";

const baseUrl = process.env.VERCEL_URL
? `https://${process.env.VERCEL_URL}`
: "";
const baseUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "";

export const TriggerDevWelcomeEmail = () => (
export interface TriggerWelcomeEmailProps {
name: string;
}

export const TriggerWelcomeEmail = ({ name }: TriggerWelcomeEmailProps) => (
<Html>
<Head />
<Preview>Welcome to Trigger.dev - Your background jobs platform!</Preview>
Expand All @@ -177,13 +180,14 @@ export const TriggerDevWelcomeEmail = () => (
alt="Trigger.dev"
/>
<Hr style={hr} />
<Heading>Welcome, {name}!</Heading>
<Text style={paragraph}>
Thanks for signing up for Trigger.dev! You're now ready to start
creating powerful background jobs and workflows.
Thanks for signing up for Trigger.dev! You're now ready to start creating powerful
background jobs and workflows.
</Text>
<Text style={paragraph}>
You can monitor your jobs, view runs, and manage your projects right
from your dashboard.
You can monitor your jobs, view runs, and manage your projects right from your
dashboard.
</Text>
<Button style={button} href="https://cloud.trigger.dev/dashboard">
View your Trigger.dev Dashboard
Expand All @@ -201,9 +205,8 @@ export const TriggerDevWelcomeEmail = () => (
.
</Text>
<Text style={paragraph}>
You can create your first job using our SDK, set up integrations,
and configure triggers to automate your workflows. Take a look at
our{" "}
You can create your first job using our SDK, set up integrations, and configure triggers
to automate your workflows. Take a look at our{" "}
<Link style={anchor} href="https://trigger.dev/docs/examples">
examples
</Link>{" "}
Expand All @@ -217,8 +220,7 @@ export const TriggerDevWelcomeEmail = () => (
to connect with other developers and get help when you need it.
</Text>
<Text style={paragraph}>
We're here to help you build amazing things. If you have any
questions, check out our{" "}
We're here to help you build amazing things. If you have any questions, check out our{" "}
<Link style={anchor} href="https://trigger.dev/docs">
documentation
</Link>{" "}
Expand All @@ -233,7 +235,7 @@ export const TriggerDevWelcomeEmail = () => (
</Html>
);

export default TriggerDevWelcomeEmail;
export default TriggerWelcomeEmail;

const main = {
backgroundColor: "#0E0C15",
Expand Down Expand Up @@ -288,6 +290,50 @@ const footer = {
};
```

And then to trigger the email, you can use the following task:

```tsx trigger/triggerWelcomeEmail.tsx
import { logger, task } from "@trigger.dev/sdk/v3";
import { Resend } from "resend";
import TriggerWelcomeEmail from "emails/triggerdotdev-welcome-email";

// Initialize Resend client
const resend = new Resend(process.env.RESEND_API_KEY);

export const sendEmail = task({
id: "trigger-welcome-email",
run: async (payload: { to: string; name: string; subject: string; from?: string }) => {
try {
to: payload.to,
});

const { data, error } = await resend.emails.send({
// The from address needs to be a verified email address
from: payload.from || "[email protected]", // Default from address
to: payload.to,
subject: payload.subject,
react: <TriggerWelcomeEmail name={payload.name} />,
});

if (error) {
logger.error("Failed to send email", { error });
throw new Error(`Failed to send email: ${error.message}`);
}

logger.info("Email sent successfully", { emailId: data?.id });

return {
id: data?.id,
status: "sent",
};
} catch (error) {
logger.error("Unexpected error sending email", { error });
throw error;
}
},
});
```

## Learn more

### React Email docs
Expand Down
2 changes: 2 additions & 0 deletions docs/guides/introduction.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,9 @@ Task code you can copy and paste to use in your project. They can all be extende
| [PDF to image](/guides/examples/pdf-to-image) | Use `MuPDF` to turn a PDF into images and save them to Cloudflare R2. |
| [React to PDF](/guides/examples/react-pdf) | Use `react-pdf` to generate a PDF and save it to Cloudflare R2. |
| [Puppeteer](/guides/examples/puppeteer) | Use Puppeteer to generate a PDF or scrape a webpage. |
| [React email](/guides/examples/react-email) | Send an email using React Email. |
| [Resend email sequence](/guides/examples/resend-email-sequence) | Send a sequence of emails over several days using Resend with Trigger.dev. |
| [Satori](/guides/examples/satori) | Generate OG images using React Satori. |
| [Scrape Hacker News](/guides/examples/scrape-hacker-news) | Scrape Hacker News using BrowserBase and Puppeteer, summarize the articles with ChatGPT and send an email of the summary every weekday using Resend. |
| [Sentry error tracking](/guides/examples/sentry-error-tracking) | Automatically send errors to Sentry from your tasks. |
| [Sharp image processing](/guides/examples/sharp-image-processing) | Use Sharp to process an image and save it to Cloudflare R2. |
Expand Down