Skip to content

Commit 413d3ab

Browse files
committed
update docs w/ resend
1 parent f74bdc8 commit 413d3ab

File tree

3 files changed

+194
-0
lines changed

3 files changed

+194
-0
lines changed

apps/docs/integrations/resend.mdx

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
---
2+
title: "Resend"
3+
description: "Learn how to generate and send invoice PDFs as email attachments using Resend"
4+
icon: "envelope"
5+
---
6+
7+
## Overview
8+
9+
Learn to generate a simple invoice and send it as an email attachment using [Resend](https://resend.com).
10+
11+
## Prerequisites
12+
13+
1. [Publish the invoice template](/usage/publishing-to-the-cloud) to the htmldocs.
14+
15+
2. Install the required dependencies:
16+
17+
<CodeGroup>
18+
```bash npm
19+
npm install resend
20+
```
21+
22+
```bash pnpm
23+
pnpm install resend
24+
```
25+
26+
```bash yarn
27+
yarn install resend
28+
```
29+
30+
```bash bun
31+
bun install resend
32+
```
33+
</CodeGroup>
34+
35+
3. Set up your Resend API key in your environment:
36+
37+
```bash
38+
RESEND_API_KEY=your_resend_api_key
39+
```
40+
41+
## Implementation
42+
43+
Here's a complete example showing how to generate an invoice and send it via email:
44+
45+
```typescript
46+
import { Resend } from 'resend';
47+
48+
const resend = new Resend(process.env.RESEND_API_KEY);
49+
50+
interface BilledTo {
51+
name: string;
52+
address: string;
53+
city: string;
54+
state: string;
55+
zip: string;
56+
phone: string;
57+
}
58+
59+
interface YourCompany {
60+
name: string;
61+
address: string;
62+
city: string;
63+
state: string;
64+
zip: string;
65+
taxId: string;
66+
phone: string;
67+
email: string;
68+
}
69+
70+
interface Service {
71+
name: string;
72+
description?: string;
73+
quantity: number;
74+
rate: number;
75+
}
76+
77+
async function sendInvoiceEmail() {
78+
try {
79+
// 1. Generate the invoice using htmldocs API
80+
const response = await fetch('https://api.htmldocs.com/api/documents/invoice', {
81+
method: 'POST',
82+
headers: {
83+
'Authorization': `Bearer ${process.env.HTMLDOCS_API_KEY}`,
84+
'Content-Type': 'application/json',
85+
},
86+
body: JSON.stringify({
87+
format: 'pdf',
88+
props: {
89+
billedTo: {
90+
name: "Acme Corp",
91+
address: "123 Business Ave",
92+
city: "San Francisco",
93+
state: "CA",
94+
zip: "94107",
95+
phone: "555-0123"
96+
},
97+
yourCompany: {
98+
name: "Your Company",
99+
address: "456 Banana Rd.",
100+
city: "San Francisco",
101+
state: "CA",
102+
zip: "94107",
103+
taxId: "00XXXXX1234X0XX",
104+
phone: "123-456-7890",
105+
106+
},
107+
services: [
108+
{
109+
name: "Premium License",
110+
description: "Annual subscription",
111+
quantity: 1,
112+
rate: 999.00
113+
}
114+
]
115+
}
116+
})
117+
});
118+
119+
if (!response.ok) {
120+
const errorData = await response.json().catch(() => null);
121+
throw new Error(
122+
`Failed to generate invoice: ${response.status} ${response.statusText}${
123+
errorData ? ` - ${JSON.stringify(errorData)}` : ''
124+
}`
125+
);
126+
}
127+
128+
const documentBuffer = await response.arrayBuffer();
129+
130+
// 2. Send email with the generated invoice
131+
const data = await resend.emails.send({
132+
133+
134+
subject: 'Invoice for Your Recent Services',
135+
attachments: [
136+
{
137+
content: Buffer.from(documentBuffer),
138+
filename: 'invoice.pdf',
139+
},
140+
],
141+
html: `
142+
<div style="font-family: sans-serif; max-width: 600px; margin: 0 auto;">
143+
<h2 style="color: #1a1a1a;">Your Invoice</h2>
144+
145+
<p style="color: #4a4a4a; font-size: 16px; line-height: 1.5;">
146+
Thank you for your business. Please find your invoice attached to this email.
147+
</p>
148+
149+
<p style="color: #4a4a4a; font-size: 16px; line-height: 1.5;">
150+
Payment is due within 15 days from the invoice date. For your convenience,
151+
payment instructions are included in the invoice.
152+
</p>
153+
154+
<p style="color: #4a4a4a; font-size: 16px; line-height: 1.5;">
155+
If you have any questions about this invoice, please contact our billing department
156+
using the contact information provided in the invoice.
157+
</p>
158+
159+
<hr style="border: none; border-top: 1px solid #e1e1e1; margin: 30px 0;" />
160+
161+
<p style="color: #898989; font-size: 14px;">
162+
This is an automated message. Please do not reply to this email.
163+
</p>
164+
</div>
165+
`,
166+
});
167+
168+
console.log('Email sent successfully:', data);
169+
} catch (error) {
170+
if (error instanceof Error) {
171+
console.error('Error:', error.message);
172+
} else {
173+
console.error('Unknown error:', error);
174+
}
175+
throw error; // Re-throw to handle it in the calling code
176+
}
177+
}
178+
```
179+
180+
For more information about document generation, see our [API Reference](/api-reference/generate-document).

apps/docs/mint.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,12 @@
6565
"usage/publishing-to-the-cloud"
6666
]
6767
},
68+
{
69+
"group": "Integrations",
70+
"pages": [
71+
"integrations/resend"
72+
]
73+
},
6874
{
6975
"group": "Components",
7076
"pages": [

apps/docs/usage/publishing-to-the-cloud.mdx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,14 @@ npm i -g htmldocs@latest
1414

1515
This command installs or updates the CLI globally on your system.
1616

17+
If you haven't already, run the following command to create a new htmldocs project:
18+
19+
```bash
20+
npx htmldocs@latest init
21+
```
22+
23+
24+
1725
## Authentication
1826

1927
Before publishing, you'll need to authenticate with the htmldocs cloud platform:

0 commit comments

Comments
 (0)