Skip to content

Commit 190a2fc

Browse files
D-K-PD-K-P
committed
Improved the react email docs and added a video
1 parent 18ad897 commit 190a2fc

2 files changed

Lines changed: 183 additions & 2 deletions

File tree

‎docs/guides/examples/react-email.mdx‎

Lines changed: 183 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ description: "Learn how to send beautiful emails using React Email and Trigger.d
66

77
## Overview
88

9-
This example demonstrates how to use Trigger.dev to send emails using React Email.
9+
This example demonstrates how to use Trigger.dev to send emails using [React Email](https://react.email/).
1010

1111
<Note>
1212
This example uses [Resend](https://resend.com) as the email provider. You can use other email
@@ -98,7 +98,7 @@ export const sendEmail = task({
9898
});
9999
```
100100

101-
## How the email should look
101+
## The email
102102

103103
This example email should look like this:
104104
![React Email](/images/react-email.png)
@@ -121,3 +121,184 @@ To test this task in the [dashboard](https://cloud.trigger.dev), you can use the
121121
## Deploying your task
122122

123123
Deploy the task to production using the Trigger.dev CLI `deploy` command.
124+
125+
## Using Cursor / AI to build your emails
126+
127+
In this video you can see how we use Cursor to build a welcome email.
128+
129+
We recommend using our [Cursor rules](https://trigger.dev/changelog/cursor-rules-writing-tasks/) to help you build your tasks and emails.
130+
131+
#### Video: creating a new email using Cursor
132+
133+
<video
134+
src="https://content.trigger.dev/trigger-welcome-email-cursor.mp4"
135+
controls
136+
muted
137+
autoPlay
138+
loop
139+
/>
140+
141+
#### The generated email template
142+
143+
![Cursor](/images/react-email-welcome.png)
144+
145+
#### The generated code
146+
147+
```tsx trigger/welcome.tsx
148+
import {
149+
Body,
150+
Button,reac
151+
Container,
152+
Head,
153+
Hr,
154+
Html,
155+
Img,
156+
Link,
157+
Preview,
158+
Section,
159+
Text,
160+
} from "@react-email/components";
161+
162+
const baseUrl = process.env.VERCEL_URL
163+
? `https://${process.env.VERCEL_URL}`
164+
: "";
165+
166+
export const TriggerDevWelcomeEmail = () => (
167+
<Html>
168+
<Head />
169+
<Preview>Welcome to Trigger.dev - Your background jobs platform!</Preview>
170+
<Body style={main}>
171+
<Container style={container}>
172+
<Section style={box}>
173+
<Img
174+
src="https://trigger.dev/assets/triggerdev-lockup--light.svg"
175+
width="150"
176+
height="40"
177+
alt="Trigger.dev"
178+
/>
179+
<Hr style={hr} />
180+
<Text style={paragraph}>
181+
Thanks for signing up for Trigger.dev! You're now ready to start
182+
creating powerful background jobs and workflows.
183+
</Text>
184+
<Text style={paragraph}>
185+
You can monitor your jobs, view runs, and manage your projects right
186+
from your dashboard.
187+
</Text>
188+
<Button style={button} href="https://cloud.trigger.dev/dashboard">
189+
View your Trigger.dev Dashboard
190+
</Button>
191+
<Hr style={hr} />
192+
<Text style={paragraph}>
193+
To help you get started, check out our{" "}
194+
<Link style={anchor} href="https://trigger.dev/docs">
195+
documentation
196+
</Link>{" "}
197+
and{" "}
198+
<Link style={anchor} href="https://trigger.dev/docs/quickstart">
199+
quickstart guide
200+
</Link>
201+
.
202+
</Text>
203+
<Text style={paragraph}>
204+
You can create your first job using our SDK, set up integrations,
205+
and configure triggers to automate your workflows. Take a look at
206+
our{" "}
207+
<Link style={anchor} href="https://trigger.dev/docs/examples">
208+
examples
209+
</Link>{" "}
210+
for inspiration.
211+
</Text>
212+
<Text style={paragraph}>
213+
Join our{" "}
214+
<Link style={anchor} href="https://discord.gg/kA47vcd8Qr">
215+
Discord community
216+
</Link>{" "}
217+
to connect with other developers and get help when you need it.
218+
</Text>
219+
<Text style={paragraph}>
220+
We're here to help you build amazing things. If you have any
221+
questions, check out our{" "}
222+
<Link style={anchor} href="https://trigger.dev/docs">
223+
documentation
224+
</Link>{" "}
225+
or reach out to us on Discord.
226+
</Text>
227+
<Text style={paragraph}>— The Trigger.dev team</Text>
228+
<Hr style={hr} />
229+
<Text style={footer}>Trigger.dev Inc.</Text>
230+
</Section>
231+
</Container>
232+
</Body>
233+
</Html>
234+
);
235+
236+
export default TriggerDevWelcomeEmail;
237+
238+
const main = {
239+
backgroundColor: "#0E0C15",
240+
fontFamily:
241+
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Ubuntu,sans-serif',
242+
};
243+
244+
const container = {
245+
backgroundColor: "#1D1B27",
246+
margin: "0 auto",
247+
padding: "20px 0 48px",
248+
marginBottom: "64px",
249+
};
250+
251+
const box = {
252+
padding: "0 48px",
253+
};
254+
255+
const hr = {
256+
borderColor: "#2D2B3B",
257+
margin: "20px 0",
258+
};
259+
260+
const paragraph = {
261+
color: "#E1E1E3",
262+
fontSize: "16px",
263+
lineHeight: "24px",
264+
textAlign: "left" as const,
265+
};
266+
267+
const anchor = {
268+
color: "#A78BFA",
269+
};
270+
271+
const button = {
272+
backgroundColor: "#7C3AED",
273+
borderRadius: "6px",
274+
color: "#fff",
275+
fontSize: "16px",
276+
fontWeight: "bold",
277+
textDecoration: "none",
278+
textAlign: "center" as const,
279+
display: "block",
280+
width: "100%",
281+
padding: "12px",
282+
};
283+
284+
const footer = {
285+
color: "#9CA3AF",
286+
fontSize: "12px",
287+
lineHeight: "16px",
288+
};
289+
```
290+
291+
## Learn more
292+
293+
### React Email docs
294+
295+
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.
296+
297+
<CardGroup cols={2}>
298+
<Card title="Components" icon="puzzle-piece" href="https://react.email/components">
299+
Pre-built components you can copy and paste into your emails.
300+
</Card>
301+
<Card title="Templates" icon="rectangle-list" href="https://react.email/templates">
302+
Extensive pre-built templates ready to use.
303+
</Card>
304+
</CardGroup>

‎docs/images/react-email-welcome.png‎

52.3 KB
Loading

0 commit comments

Comments
 (0)