better-svelte-email 0.0.3 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Body.svelte +14 -5
- package/dist/components/Body.svelte.d.ts +6 -12
- package/dist/components/Button.svelte +11 -4
- package/dist/components/Button.svelte.d.ts +5 -15
- package/dist/components/Column.svelte +19 -0
- package/dist/components/Column.svelte.d.ts +10 -0
- package/dist/components/Container.svelte +10 -3
- package/dist/components/Container.svelte.d.ts +5 -11
- package/dist/components/Hr.svelte +14 -0
- package/dist/components/Hr.svelte.d.ts +4 -0
- package/dist/components/Html.svelte +3 -3
- package/dist/components/Html.svelte.d.ts +1 -1
- package/dist/components/Link.svelte +26 -0
- package/dist/components/Link.svelte.d.ts +9 -0
- package/dist/components/Row.svelte +30 -0
- package/dist/components/Row.svelte.d.ts +8 -0
- package/dist/components/Section.svelte +14 -5
- package/dist/components/Section.svelte.d.ts +5 -11
- package/dist/components/Text.svelte +13 -3
- package/dist/components/Text.svelte.d.ts +6 -12
- package/dist/components/index.d.ts +7 -3
- package/dist/components/index.js +7 -3
- package/dist/emails/apple-receipt.svelte +260 -0
- package/dist/emails/apple-receipt.svelte.d.ts +18 -0
- package/dist/emails/demo-email.svelte +31 -31
- package/dist/emails/test-email.svelte +7 -3
- package/dist/emails/vercel-invite-user.svelte +133 -0
- package/dist/emails/vercel-invite-user.svelte.d.ts +14 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.js +2 -2
- package/dist/preprocessor/index.js +27 -15
- package/dist/preprocessor/parser.d.ts +5 -2
- package/dist/preprocessor/parser.js +87 -21
- package/dist/preprocessor/transformer.js +3 -3
- package/dist/preprocessor/types.d.ts +21 -0
- package/dist/preview/Preview.svelte +231 -0
- package/dist/preview/Preview.svelte.d.ts +7 -0
- package/dist/preview/index.d.ts +85 -0
- package/dist/preview/index.js +183 -0
- package/package.json +3 -1
|
@@ -0,0 +1,260 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import {
|
|
3
|
+
Body,
|
|
4
|
+
Column,
|
|
5
|
+
Container,
|
|
6
|
+
Head,
|
|
7
|
+
Hr,
|
|
8
|
+
Html,
|
|
9
|
+
Link,
|
|
10
|
+
Row,
|
|
11
|
+
Section,
|
|
12
|
+
Text
|
|
13
|
+
} from '../components/index.js';
|
|
14
|
+
|
|
15
|
+
const baseUrl = '/';
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<Html>
|
|
19
|
+
<Head />
|
|
20
|
+
|
|
21
|
+
<Body style="background-color:rgb(255,255,255); font-family:'Helvetica Neue';">
|
|
22
|
+
<!-- Preview text for email clients -->
|
|
23
|
+
<span style="display:none;">Apple Receipt</span>
|
|
24
|
+
|
|
25
|
+
<Container style="margin-left:auto;margin-right:auto; width:660px; padding-left:0px;padding-right:0px; padding-top:1.25rem;padding-bottom:1.25rem; padding-bottom:3rem;">
|
|
26
|
+
<Section>
|
|
27
|
+
<Row>
|
|
28
|
+
<Column>
|
|
29
|
+
<img src="{baseUrl}apple-logo.png" width="42" height="42" alt="Apple Logo" />
|
|
30
|
+
</Column>
|
|
31
|
+
|
|
32
|
+
<Column align="right" style="display:table-cell;">
|
|
33
|
+
<Text style="margin:0px; font-size:32px; font-weight:300; color:rgb(136,136,136);">Receipt</Text>
|
|
34
|
+
</Column>
|
|
35
|
+
</Row>
|
|
36
|
+
</Section>
|
|
37
|
+
|
|
38
|
+
<Section>
|
|
39
|
+
<Text style="margin-top:2.25rem;margin-bottom:2.25rem; text-align:center; font-size:0.875rem;line-height:1.25rem; font-weight:500; color:rgb(17,17,17);">
|
|
40
|
+
Save 3% on all your Apple purchases with Apple Card.<sup style="font-weight:300;">1</sup>
|
|
41
|
+
<Link href="https://www.apple.com/apple-card/" style="color:rgb(17,17,17); text-decoration-line:underline;">
|
|
42
|
+
Apply and use in minutes
|
|
43
|
+
</Link>
|
|
44
|
+
<sup style="font-weight:300;">2</sup>
|
|
45
|
+
</Text>
|
|
46
|
+
</Section>
|
|
47
|
+
|
|
48
|
+
<Section
|
|
49
|
+
style="border-collapse:collapse; border-spacing:0px 0px; border-radius:3px; background-color:rgb(250,250,250); font-size:0.75rem;line-height:1rem; color:rgb(51,51,51);"
|
|
50
|
+
>
|
|
51
|
+
<Row style="min-height:46px;">
|
|
52
|
+
<Column colspan={2}>
|
|
53
|
+
<Section>
|
|
54
|
+
<Row>
|
|
55
|
+
<Column style="min-height:44px; border-right-width:1px; border-bottom-width:1px; border-style:solid; border-color:rgb(255,255,255); padding-left:1.25rem;">
|
|
56
|
+
<Text style="margin:0px; padding:0px; font-size:10px; line-height:1.4; color:rgb(102,102,102);">APPLE ID</Text>
|
|
57
|
+
<Link
|
|
58
|
+
style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4; color:rgb(17,85,204); text-decoration-line:underline;"
|
|
59
|
+
href="mailto:alan.turing@gmail.com"
|
|
60
|
+
>
|
|
61
|
+
alan.turing@gmail.com
|
|
62
|
+
</Link>
|
|
63
|
+
</Column>
|
|
64
|
+
</Row>
|
|
65
|
+
|
|
66
|
+
<Row>
|
|
67
|
+
<Column style="min-height:44px; border-right-width:1px; border-bottom-width:1px; border-style:solid; border-color:rgb(255,255,255); padding-left:1.25rem;">
|
|
68
|
+
<Text style="margin:0px; padding:0px; font-size:10px; line-height:1.4; color:rgb(102,102,102);">INVOICE DATE</Text>
|
|
69
|
+
<Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4;">18 Jan 2023</Text>
|
|
70
|
+
</Column>
|
|
71
|
+
</Row>
|
|
72
|
+
|
|
73
|
+
<Row>
|
|
74
|
+
<Column style="min-height:44px; border-right-width:1px; border-bottom-width:1px; border-style:solid; border-color:rgb(255,255,255); padding-left:1.25rem;">
|
|
75
|
+
<Text style="margin:0px; padding:0px; font-size:10px; line-height:1.4; color:rgb(102,102,102);">ORDER ID</Text>
|
|
76
|
+
<Link
|
|
77
|
+
style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4; color:rgb(17,85,204); text-decoration-line:underline;"
|
|
78
|
+
href="https://www.apple.com/"
|
|
79
|
+
>
|
|
80
|
+
ML4F5L8522
|
|
81
|
+
</Link>
|
|
82
|
+
</Column>
|
|
83
|
+
<Column style="min-height:44px; border-right-width:1px; border-bottom-width:1px; border-style:solid; border-color:rgb(255,255,255); padding-left:1.25rem;">
|
|
84
|
+
<Text style="margin:0px; padding:0px; font-size:10px; line-height:1.4; color:rgb(102,102,102);">DOCUMENT NO.</Text>
|
|
85
|
+
<Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4;">186623754793</Text>
|
|
86
|
+
</Column>
|
|
87
|
+
</Row>
|
|
88
|
+
</Section>
|
|
89
|
+
</Column>
|
|
90
|
+
<Column colspan={2} style="min-height:44px; border-right-width:1px; border-bottom-width:1px; border-style:solid; border-color:rgb(255,255,255); padding-left:1.25rem;">
|
|
91
|
+
<Text style="margin:0px; padding:0px; font-size:10px; line-height:1.4; color:rgb(102,102,102);">BILLED TO</Text>
|
|
92
|
+
<Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4;">Visa .... 7461 (Apple Pay)</Text>
|
|
93
|
+
<Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4;">Alan Turing</Text>
|
|
94
|
+
<Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4;">2125 Chestnut St</Text>
|
|
95
|
+
<Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4;">San Francisco, CA 94123</Text>
|
|
96
|
+
<Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4;">USA</Text>
|
|
97
|
+
</Column>
|
|
98
|
+
</Row>
|
|
99
|
+
</Section>
|
|
100
|
+
|
|
101
|
+
<Section
|
|
102
|
+
style="margin-top:30px;margin-bottom:30px; min-height:24px; border-collapse:collapse; border-spacing:0px 0px; border-radius:3px; background-color:rgb(250,250,250); font-size:0.75rem;line-height:1rem; color:rgb(51,51,51);"
|
|
103
|
+
>
|
|
104
|
+
<Text style="margin:0px; background-color:rgb(250,250,250); padding-left:0.625rem; font-size:0.875rem;line-height:1.25rem; font-weight:500;">App Store</Text>
|
|
105
|
+
</Section>
|
|
106
|
+
|
|
107
|
+
<Section>
|
|
108
|
+
<Row>
|
|
109
|
+
<Column style="width:4rem;">
|
|
110
|
+
<img
|
|
111
|
+
src="{baseUrl}apple-hbo-max-icon.jpeg"
|
|
112
|
+
width="64"
|
|
113
|
+
height="64"
|
|
114
|
+
alt="HBO Max"
|
|
115
|
+
style="margin-top:0px;margin-bottom:0px; margin-right:0px; margin-left:1.25rem; border-radius:14px; border-width:1px; border-color:rgb(242,242,242);"
|
|
116
|
+
/>
|
|
117
|
+
</Column>
|
|
118
|
+
<Column style="padding-left:22px;">
|
|
119
|
+
<Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4; font-weight:600;">
|
|
120
|
+
HBO Max: Stream TV & Movies
|
|
121
|
+
</Text>
|
|
122
|
+
<Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4; color:rgb(102,102,102);">
|
|
123
|
+
HBO Max Ad-Free (Monthly)
|
|
124
|
+
</Text>
|
|
125
|
+
<Text style="margin:0px; padding:0px; font-size:0.75rem;line-height:1rem; line-height:1.4; color:rgb(102,102,102);">Renews Aug 20, 2023</Text>
|
|
126
|
+
<Link href="https://www.apple.com/" style="font-size:0.75rem;line-height:1rem; color:rgb(0,112,201); text-decoration-line:none;">
|
|
127
|
+
Write a Review
|
|
128
|
+
</Link>
|
|
129
|
+
<span style="margin-left:0.25rem;margin-right:0.25rem; font-weight:200; color:rgb(51,51,51);">|</span>
|
|
130
|
+
<Link href="https://www.apple.com/" style="font-size:0.75rem;line-height:1rem; color:rgb(0,112,201); text-decoration-line:none;">
|
|
131
|
+
Report a Problem
|
|
132
|
+
</Link>
|
|
133
|
+
</Column>
|
|
134
|
+
|
|
135
|
+
<Column style="display:table-cell; width:100px; padding-left:1.25rem;padding-right:1.25rem; padding-right:1.25rem; padding-left:0px; vertical-align:top;" align="right">
|
|
136
|
+
<Text style="margin:0px; font-size:0.75rem;line-height:1rem; font-weight:600;">$14.99</Text>
|
|
137
|
+
</Column>
|
|
138
|
+
</Row>
|
|
139
|
+
</Section>
|
|
140
|
+
|
|
141
|
+
<Hr style="margin-top:30px; margin-bottom:0px;" />
|
|
142
|
+
|
|
143
|
+
<Section>
|
|
144
|
+
<Row>
|
|
145
|
+
<Column style="display:table-cell;" align="right">
|
|
146
|
+
<Text style="margin:0px; padding-right:30px; text-align:right; font-size:10px; font-weight:600; color:rgb(102,102,102);">
|
|
147
|
+
TOTAL
|
|
148
|
+
</Text>
|
|
149
|
+
</Column>
|
|
150
|
+
<Column style="min-height:48px; border-left-width:1px; border-color:rgb(238,238,238); padding-top:3rem;"></Column>
|
|
151
|
+
<Column style="display:table-cell; width:90px;">
|
|
152
|
+
<Text style="margin:0px; margin-right:1.25rem; text-align:right; font-size:1rem;line-height:1.5rem; font-weight:600; white-space:nowrap;">
|
|
153
|
+
$14.99
|
|
154
|
+
</Text>
|
|
155
|
+
</Column>
|
|
156
|
+
</Row>
|
|
157
|
+
</Section>
|
|
158
|
+
|
|
159
|
+
<Hr style="margin-top:0px;margin-bottom:0px; margin-bottom:75px;" />
|
|
160
|
+
|
|
161
|
+
<Section>
|
|
162
|
+
<Row>
|
|
163
|
+
<Column align="center" style="display:block;">
|
|
164
|
+
<img src="{baseUrl}apple-card-icon.png" width="60" height="17" alt="Apple Card" />
|
|
165
|
+
</Column>
|
|
166
|
+
</Row>
|
|
167
|
+
</Section>
|
|
168
|
+
|
|
169
|
+
<Section>
|
|
170
|
+
<Row>
|
|
171
|
+
<Column align="center" style="margin-top:15px; display:block;">
|
|
172
|
+
<Text style="margin:0px; font-size:1.5rem;line-height:2rem; font-weight:500;">Save 3% on all your Apple purchases.</Text>
|
|
173
|
+
</Column>
|
|
174
|
+
</Row>
|
|
175
|
+
</Section>
|
|
176
|
+
|
|
177
|
+
<Section>
|
|
178
|
+
<Row>
|
|
179
|
+
<Column align="center" style="margin-top:0.625rem; display:table-cell;">
|
|
180
|
+
<Link href="https://www.apple.com/" style="color:rgb(0,126,255); text-decoration-line:none;">
|
|
181
|
+
<img
|
|
182
|
+
src="{baseUrl}apple-wallet.png"
|
|
183
|
+
width="28"
|
|
184
|
+
height="28"
|
|
185
|
+
alt="Apple Wallet"
|
|
186
|
+
style="display:inline; padding-right:0.5rem; vertical-align:middle;"
|
|
187
|
+
/>
|
|
188
|
+
<span style="font-size:0.875rem;line-height:1.25rem; font-weight:400; text-decoration-line:none;">Apply and use in minutes</span>
|
|
189
|
+
</Link>
|
|
190
|
+
</Column>
|
|
191
|
+
</Row>
|
|
192
|
+
</Section>
|
|
193
|
+
|
|
194
|
+
<Hr style="margin-top:65px;margin-bottom:65px; margin-bottom:1.25rem;" />
|
|
195
|
+
|
|
196
|
+
<Text style="margin:0px; margin-bottom:1rem; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
|
|
197
|
+
1. 3% savings is earned as Daily Cash and is transferred to your Apple Cash card when
|
|
198
|
+
transactions post to your Apple Card account. If you do not have an Apple Cash card, Daily
|
|
199
|
+
Cash can be applied by you as a credit on your statement balance. 3% is the total amount of
|
|
200
|
+
Daily Cash earned for these purchases. See the Apple Card Customer Agreement for more
|
|
201
|
+
details on Daily Cash and qualifying transactions.
|
|
202
|
+
</Text>
|
|
203
|
+
<Text style="margin:0px; margin-bottom:1rem; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">2. Subject to credit approval.</Text>
|
|
204
|
+
<Text style="margin:0px; margin-bottom:1rem; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
|
|
205
|
+
To access and use all the features of Apple Card, you must add Apple Card to Wallet on an
|
|
206
|
+
iPhone or iPad with iOS or iPadOS 13.2 or later. Update to the latest version of iOS or
|
|
207
|
+
iPadOS by going to Settings > General > Software Update. Tap Download and Install.
|
|
208
|
+
</Text>
|
|
209
|
+
<Text style="margin:0px; margin-bottom:1rem; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
|
|
210
|
+
Available for qualifying applicants in the United States.
|
|
211
|
+
</Text>
|
|
212
|
+
<Text style="margin:0px; margin-bottom:1rem; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
|
|
213
|
+
Apple Card is issued by Goldman Sachs Bank USA, Salt Lake City Branch.
|
|
214
|
+
</Text>
|
|
215
|
+
<Text style="margin:0px; margin-bottom:1rem; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
|
|
216
|
+
If you reside in the US territories, please call Goldman Sachs at 877-255-5923 with
|
|
217
|
+
questions about Apple Card.
|
|
218
|
+
</Text>
|
|
219
|
+
<Text style="margin-top:1.25rem;margin-bottom:1.25rem; text-align:center; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
|
|
220
|
+
Privacy: We use a
|
|
221
|
+
<Link href="https://www.apple.com/" style="color:rgb(0,115,255);">Subscriber ID</Link>
|
|
222
|
+
to provide reports to developers.
|
|
223
|
+
</Text>
|
|
224
|
+
<Text style="margin-top:1.25rem;margin-bottom:1.25rem; text-align:center; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
|
|
225
|
+
Get help with subscriptions and purchases.
|
|
226
|
+
<Link href="https://www.apple.com/" style="color:rgb(0,115,255);">Visit Apple Support.</Link>
|
|
227
|
+
</Text>
|
|
228
|
+
<Text style="margin-top:1.25rem;margin-bottom:1.25rem; text-align:center; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
|
|
229
|
+
Learn how to
|
|
230
|
+
<Link href="https://www.apple.com/">manage your password preferences</Link>
|
|
231
|
+
for iTunes, Apple Books, and App Store purchases.
|
|
232
|
+
</Text>
|
|
233
|
+
|
|
234
|
+
<Text style="margin-top:1.25rem;margin-bottom:1.25rem; text-align:center; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
|
|
235
|
+
You have the option to stop receiving email receipts for your subscription renewals. If you
|
|
236
|
+
have opted out, you can still view your receipts in your account under Purchase History. To
|
|
237
|
+
manage receipts or to opt in again, go to
|
|
238
|
+
<Link href="https://www.apple.com/">Account Settings.</Link>
|
|
239
|
+
</Text>
|
|
240
|
+
|
|
241
|
+
<Section>
|
|
242
|
+
<Row>
|
|
243
|
+
<Column align="center" style="margin-top:2.5rem; display:block;">
|
|
244
|
+
<img src="{baseUrl}apple-logo.png" width="26" height="26" alt="Apple Card" />
|
|
245
|
+
</Column>
|
|
246
|
+
</Row>
|
|
247
|
+
</Section>
|
|
248
|
+
|
|
249
|
+
<Text style="margin-top:0.5rem;margin-bottom:0.5rem; margin-top:0px; text-align:center; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
|
|
250
|
+
<Link href="https://www.apple.com/">Account Settings</Link> •
|
|
251
|
+
<Link href="https://www.apple.com/">Terms of Sale</Link> •
|
|
252
|
+
<Link href="https://www.apple.com/legal/privacy/">Privacy Policy</Link>
|
|
253
|
+
</Text>
|
|
254
|
+
<Text style="margin-top:25px; margin-bottom:0px; text-align:center; font-size:0.75rem;line-height:1rem; color:rgb(102,102,102);">
|
|
255
|
+
Copyright © 2023 Apple Inc. <br />
|
|
256
|
+
<Link href="https://www.apple.com/legal/">All rights reserved</Link>
|
|
257
|
+
</Text>
|
|
258
|
+
</Container>
|
|
259
|
+
</Body>
|
|
260
|
+
</Html>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
2
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
+
$$bindings?: Bindings;
|
|
4
|
+
} & Exports;
|
|
5
|
+
(internal: unknown, props: {
|
|
6
|
+
$$events?: Events;
|
|
7
|
+
$$slots?: Slots;
|
|
8
|
+
}): Exports & {
|
|
9
|
+
$set?: any;
|
|
10
|
+
$on?: any;
|
|
11
|
+
};
|
|
12
|
+
z_$$bindings?: Bindings;
|
|
13
|
+
}
|
|
14
|
+
declare const AppleReceipt: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
15
|
+
[evt: string]: CustomEvent<any>;
|
|
16
|
+
}, {}, {}, string>;
|
|
17
|
+
type AppleReceipt = InstanceType<typeof AppleReceipt>;
|
|
18
|
+
export default AppleReceipt;
|
|
@@ -10,25 +10,25 @@
|
|
|
10
10
|
@media(min-width: 640px){.sm\:bg-green-600{background-color:rgb(22,163,74) !important}}
|
|
11
11
|
</style>
|
|
12
12
|
</Head>
|
|
13
|
-
<Body
|
|
14
|
-
<Container
|
|
13
|
+
<Body style="background-color:rgb(243,244,246); font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";">
|
|
14
|
+
<Container style="margin-left:auto;margin-right:auto; max-width:42rem; background-color:rgb(255,255,255); padding:2rem;">
|
|
15
15
|
<!-- Header -->
|
|
16
|
-
<Section
|
|
17
|
-
<Text as="h1"
|
|
18
|
-
<Text
|
|
16
|
+
<Section style="margin-bottom:1.5rem; border-bottom-width:1px; border-color:rgb(229,231,235); padding-bottom:1.5rem;">
|
|
17
|
+
<Text as="h1" style="margin-bottom:0.5rem; font-size:1.875rem;line-height:2.25rem; font-weight:700; color:rgb(17,24,39);">better-svelte-email Demo</Text>
|
|
18
|
+
<Text style="color:rgb(75,85,99);">
|
|
19
19
|
This email was generated using Tailwind classes and transformed by the preprocessor!
|
|
20
20
|
</Text>
|
|
21
21
|
</Section>
|
|
22
22
|
|
|
23
23
|
<!-- Main Content -->
|
|
24
|
-
<Section
|
|
25
|
-
<Text
|
|
24
|
+
<Section style="margin-bottom:1.5rem;">
|
|
25
|
+
<Text style="margin-bottom:1rem; font-size:1.125rem;line-height:1.75rem; color:rgb(31,41,55);">Hello {userName}! 👋</Text>
|
|
26
26
|
|
|
27
|
-
<Text
|
|
27
|
+
<Text style="margin-bottom:1rem; color:rgb(55,65,81);">{testMessage}</Text>
|
|
28
28
|
|
|
29
|
-
<Container
|
|
30
|
-
<Text
|
|
31
|
-
<ul
|
|
29
|
+
<Container style="margin-bottom:1.5rem; border-radius:0.5rem; background-color:rgb(239,246,255); padding:1rem;">
|
|
30
|
+
<Text style="margin-bottom:0.5rem; font-weight:600; color:rgb(30,58,138);">✨ Features Demonstrated:</Text>
|
|
31
|
+
<ul style="list-style-type:disc; padding-left:1.25rem; color:rgb(30,64,175);">
|
|
32
32
|
<li>Tailwind classes converted to inline styles</li>
|
|
33
33
|
<li>Responsive design with media queries</li>
|
|
34
34
|
<li>Email-safe CSS transformations</li>
|
|
@@ -37,17 +37,17 @@
|
|
|
37
37
|
</Container>
|
|
38
38
|
|
|
39
39
|
<!-- Buttons showcase -->
|
|
40
|
-
<Section
|
|
40
|
+
<Section style="margin-bottom:1.5rem;">
|
|
41
41
|
<Button
|
|
42
42
|
href="https://github.com/Konixy/better-svelte-email"
|
|
43
|
-
class="sm_bg_green_600"
|
|
43
|
+
class="sm_bg_green_600" style="display:inline-block; border-radius:0.25rem; background-color:rgb(37,99,235); padding-left:1.5rem;padding-right:1.5rem; padding-top:0.75rem;padding-bottom:0.75rem; font-weight:600; color:rgb(255,255,255);"
|
|
44
44
|
>
|
|
45
45
|
View on GitHub
|
|
46
46
|
</Button>
|
|
47
47
|
|
|
48
48
|
<Button
|
|
49
49
|
href="https://svelte.dev"
|
|
50
|
-
|
|
50
|
+
style="margin-left:0.75rem; display:inline-block; border-radius:0.25rem; border-width:1px; border-color:rgb(209,213,219); background-color:rgb(255,255,255); padding-left:1.5rem;padding-right:1.5rem; padding-top:0.75rem;padding-bottom:0.75rem; font-weight:600; color:rgb(55,65,81);"
|
|
51
51
|
>
|
|
52
52
|
Learn Svelte 5
|
|
53
53
|
</Button>
|
|
@@ -55,23 +55,23 @@
|
|
|
55
55
|
</Section>
|
|
56
56
|
|
|
57
57
|
<!-- Stats Grid -->
|
|
58
|
-
<Section
|
|
58
|
+
<Section style="margin-bottom:1.5rem;">
|
|
59
59
|
<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
|
|
60
60
|
<tbody>
|
|
61
61
|
<tr>
|
|
62
|
-
<td
|
|
63
|
-
<Text as="div"
|
|
64
|
-
<Text as="div"
|
|
62
|
+
<td style="border-radius:0.5rem; background-color:rgb(250,245,255); padding:1rem; text-align:center;width: 33.33%;" >
|
|
63
|
+
<Text as="div" style="margin-bottom:0.25rem; font-size:1.875rem;line-height:2.25rem; font-weight:700; color:rgb(147,51,234);">52+</Text>
|
|
64
|
+
<Text as="div" style="font-size:0.875rem;line-height:1.25rem; color:rgb(126,34,206);">Tests Passing</Text>
|
|
65
65
|
</td>
|
|
66
66
|
<td style="width: 10px;"></td>
|
|
67
|
-
<td
|
|
68
|
-
<Text as="div"
|
|
69
|
-
<Text as="div"
|
|
67
|
+
<td style="border-radius:0.5rem; background-color:rgb(240,253,244); padding:1rem; text-align:center;width: 33.33%;" >
|
|
68
|
+
<Text as="div" style="margin-bottom:0.25rem; font-size:1.875rem;line-height:2.25rem; font-weight:700; color:rgb(22,163,74);">100%</Text>
|
|
69
|
+
<Text as="div" style="font-size:0.875rem;line-height:1.25rem; color:rgb(21,128,61);">TypeScript</Text>
|
|
70
70
|
</td>
|
|
71
71
|
<td style="width: 10px;"></td>
|
|
72
|
-
<td
|
|
73
|
-
<Text as="div"
|
|
74
|
-
<Text as="div"
|
|
72
|
+
<td style="border-radius:0.5rem; background-color:rgb(255,247,237); padding:1rem; text-align:center;width: 33.33%;" >
|
|
73
|
+
<Text as="div" style="margin-bottom:0.25rem; font-size:1.875rem;line-height:2.25rem; font-weight:700; color:rgb(234,88,12);">0ms</Text>
|
|
74
|
+
<Text as="div" style="font-size:0.875rem;line-height:1.25rem; color:rgb(194,65,12);">Runtime Cost</Text>
|
|
75
75
|
</td>
|
|
76
76
|
</tr>
|
|
77
77
|
</tbody>
|
|
@@ -79,11 +79,11 @@
|
|
|
79
79
|
</Section>
|
|
80
80
|
|
|
81
81
|
<!-- Code Example -->
|
|
82
|
-
<Container
|
|
83
|
-
<Text
|
|
82
|
+
<Container style="margin-bottom:1.5rem; border-radius:0.5rem; background-color:rgb(249,250,251); padding:1rem;">
|
|
83
|
+
<Text style="margin-bottom:0.5rem; font-size:0.875rem;line-height:1.25rem; font-weight:600; color:rgb(55,65,81);">How it works:</Text>
|
|
84
84
|
<pre
|
|
85
|
-
|
|
86
|
-
|
|
85
|
+
style="overflow-x:auto; border-radius:0.25rem; background-color:rgb(17,24,39); padding:0.75rem; font-size:0.75rem;line-height:1rem; color:rgb(243,244,246);margin: 0;"
|
|
86
|
+
><code
|
|
87
87
|
>// Input
|
|
88
88
|
<Button class="bg-blue-500 text-white p-4">
|
|
89
89
|
Click Me
|
|
@@ -97,9 +97,9 @@
|
|
|
97
97
|
</Container>
|
|
98
98
|
|
|
99
99
|
<!-- Footer -->
|
|
100
|
-
<Section
|
|
101
|
-
<Text
|
|
102
|
-
<Text
|
|
100
|
+
<Section style="border-top-width:1px; border-color:rgb(229,231,235); padding-top:1.5rem; text-align:center;">
|
|
101
|
+
<Text style="margin-bottom:0.5rem; font-size:0.875rem;line-height:1.25rem; color:rgb(75,85,99);">Built with Svelte 5 & Tailwind CSS</Text>
|
|
102
|
+
<Text style="font-size:0.75rem;line-height:1rem; color:rgb(107,114,128);">
|
|
103
103
|
You're receiving this email because you tested the better-svelte-email demo.
|
|
104
104
|
</Text>
|
|
105
105
|
</Section>
|
|
@@ -5,9 +5,13 @@
|
|
|
5
5
|
<Html>
|
|
6
6
|
<Head />
|
|
7
7
|
<Body>
|
|
8
|
-
<Container
|
|
9
|
-
<Text
|
|
10
|
-
<Button
|
|
8
|
+
<Container style="background-color:rgb(243,244,246);padding: 2rem;" >
|
|
9
|
+
<Text style="font-size:1.125rem;line-height:1.75rem; font-weight:700; color:rgb(37,99,235);">Hello World</Text>
|
|
10
|
+
<Button
|
|
11
|
+
style="border-radius:0.25rem; background-color:rgb(59,130,246); padding-left:1rem;padding-right:1rem; padding-top:0.5rem;padding-bottom:0.5rem; color:rgb(255,255,255);width: 33.33%"
|
|
12
|
+
|
|
13
|
+
href="https://example.com"
|
|
14
|
+
>
|
|
11
15
|
Click Me
|
|
12
16
|
</Button>
|
|
13
17
|
</Container>
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import {
|
|
3
|
+
Body,
|
|
4
|
+
Button,
|
|
5
|
+
Column,
|
|
6
|
+
Container,
|
|
7
|
+
Head,
|
|
8
|
+
Hr,
|
|
9
|
+
Html,
|
|
10
|
+
Row,
|
|
11
|
+
Section,
|
|
12
|
+
Text
|
|
13
|
+
} from '../components/index.js';
|
|
14
|
+
|
|
15
|
+
// Props with default values
|
|
16
|
+
let {
|
|
17
|
+
username = 'alanturing',
|
|
18
|
+
userImage = '/vercel-user.png',
|
|
19
|
+
invitedByUsername = 'Alan',
|
|
20
|
+
invitedByEmail = 'alan.turing@example.com',
|
|
21
|
+
teamName = 'Enigma',
|
|
22
|
+
teamImage = '/vercel-team.png',
|
|
23
|
+
inviteLink = 'https://vercel.com/teams/invite/foo',
|
|
24
|
+
inviteFromIp = '204.13.186.218',
|
|
25
|
+
inviteFromLocation = 'São Paulo, Brazil'
|
|
26
|
+
}: {
|
|
27
|
+
username?: string;
|
|
28
|
+
userImage?: string;
|
|
29
|
+
invitedByUsername?: string;
|
|
30
|
+
invitedByEmail?: string;
|
|
31
|
+
teamName?: string;
|
|
32
|
+
teamImage?: string;
|
|
33
|
+
inviteLink?: string;
|
|
34
|
+
inviteFromIp?: string;
|
|
35
|
+
inviteFromLocation?: string;
|
|
36
|
+
} = $props();
|
|
37
|
+
|
|
38
|
+
const previewText = `Join ${invitedByUsername} on Vercel`;
|
|
39
|
+
const baseUrl = '/';
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<Html>
|
|
43
|
+
<Head />
|
|
44
|
+
<Body style="margin-left:auto;margin-right:auto; margin-top:auto;margin-bottom:auto; background-color:rgb(255,255,255); padding-left:0.5rem;padding-right:0.5rem; font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";">
|
|
45
|
+
<!-- Preview text -->
|
|
46
|
+
<span style="display:none;">{previewText}</span>
|
|
47
|
+
|
|
48
|
+
<Container
|
|
49
|
+
data-testid="container"
|
|
50
|
+
style="margin-left:auto;margin-right:auto; margin-top:2.5rem;margin-bottom:2.5rem; max-width:465px; border-radius:0.25rem; border-width:1px; border-style:solid; border-color:rgb(234,234,234); padding:1.25rem;"
|
|
51
|
+
>
|
|
52
|
+
<Section style="margin-top:2rem;">
|
|
53
|
+
<img
|
|
54
|
+
src="{baseUrl}vercel-logo.png"
|
|
55
|
+
width="40"
|
|
56
|
+
height="37"
|
|
57
|
+
alt="Vercel"
|
|
58
|
+
style="margin-left:auto;margin-right:auto; margin-top:0px;margin-bottom:0px;"
|
|
59
|
+
/>
|
|
60
|
+
</Section>
|
|
61
|
+
|
|
62
|
+
<Text as="h1" style="margin-left:0px;margin-right:0px; margin-top:30px;margin-bottom:30px; padding:0px; text-align:center; font-size:1.5rem;line-height:2rem; font-weight:400; color:rgb(0,0,0);">
|
|
63
|
+
Join <strong>{teamName}</strong> on <strong>Vercel</strong>
|
|
64
|
+
</Text>
|
|
65
|
+
|
|
66
|
+
<Text style="font-size:0.875rem;line-height:1.25rem; line-height:1.5rem; color:rgb(0,0,0);">
|
|
67
|
+
Hello {username},
|
|
68
|
+
</Text>
|
|
69
|
+
|
|
70
|
+
<Text style="font-size:0.875rem;line-height:1.25rem; line-height:1.5rem; color:rgb(0,0,0);">
|
|
71
|
+
<strong>{invitedByUsername}</strong>
|
|
72
|
+
(<a href="mailto:{invitedByEmail}" style="color:rgb(37,99,235); text-decoration-line:none;">
|
|
73
|
+
{invitedByEmail}
|
|
74
|
+
</a>) has invited you to the <strong>{teamName}</strong> team on
|
|
75
|
+
<strong>Vercel</strong>.
|
|
76
|
+
</Text>
|
|
77
|
+
|
|
78
|
+
<Section>
|
|
79
|
+
<Row>
|
|
80
|
+
<Column align="right">
|
|
81
|
+
<img
|
|
82
|
+
style="border-radius:9999px;"
|
|
83
|
+
src={userImage}
|
|
84
|
+
width="64"
|
|
85
|
+
height="64"
|
|
86
|
+
alt="{username}'s profile picture"
|
|
87
|
+
/>
|
|
88
|
+
</Column>
|
|
89
|
+
<Column align="center">
|
|
90
|
+
<img src="{baseUrl}vercel-arrow.png" width="12" height="9" alt="invited you to" />
|
|
91
|
+
</Column>
|
|
92
|
+
<Column align="left">
|
|
93
|
+
<img
|
|
94
|
+
style="border-radius:9999px;"
|
|
95
|
+
src={teamImage}
|
|
96
|
+
width="64"
|
|
97
|
+
height="64"
|
|
98
|
+
alt="{teamName}'s logo"
|
|
99
|
+
/>
|
|
100
|
+
</Column>
|
|
101
|
+
</Row>
|
|
102
|
+
</Section>
|
|
103
|
+
|
|
104
|
+
<Section style="margin-top:2rem; margin-bottom:2rem; text-align:center;">
|
|
105
|
+
<Button
|
|
106
|
+
style="border-radius:0.25rem; background-color:rgb(0,0,0); padding-left:1.25rem;padding-right:1.25rem; padding-top:0.75rem;padding-bottom:0.75rem; text-align:center; font-size:0.75rem;line-height:1rem; font-weight:600; color:rgb(255,255,255); text-decoration-line:none;"
|
|
107
|
+
href={inviteLink}
|
|
108
|
+
>
|
|
109
|
+
Join the team
|
|
110
|
+
</Button>
|
|
111
|
+
</Section>
|
|
112
|
+
|
|
113
|
+
<Text style="font-size:0.875rem;line-height:1.25rem; line-height:1.5rem; color:rgb(0,0,0);">
|
|
114
|
+
or copy and paste this URL into your browser:
|
|
115
|
+
<a href={inviteLink} style="color:rgb(37,99,235); text-decoration-line:none;">
|
|
116
|
+
{inviteLink}
|
|
117
|
+
</a>
|
|
118
|
+
</Text>
|
|
119
|
+
|
|
120
|
+
<Hr style="margin-left:0px;margin-right:0px; margin-top:26px;margin-bottom:26px; width:100%; border-width:1px; border-style:solid; border-color:rgb(234,234,234);" />
|
|
121
|
+
|
|
122
|
+
<Text style="font-size:0.75rem;line-height:1rem; line-height:1.5rem; color:rgb(102,102,102);">
|
|
123
|
+
This invitation was intended for
|
|
124
|
+
<span style="color:rgb(0,0,0);">{username}</span>. This invite was sent from
|
|
125
|
+
<span style="color:rgb(0,0,0);">{inviteFromIp}</span>
|
|
126
|
+
located in
|
|
127
|
+
<span style="color:rgb(0,0,0);">{inviteFromLocation}</span>. If you were not expecting this
|
|
128
|
+
invitation, you can ignore this email. If you are concerned about your account's safety,
|
|
129
|
+
please reply to this email to get in touch with us.
|
|
130
|
+
</Text>
|
|
131
|
+
</Container>
|
|
132
|
+
</Body>
|
|
133
|
+
</Html>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
type $$ComponentProps = {
|
|
2
|
+
username?: string;
|
|
3
|
+
userImage?: string;
|
|
4
|
+
invitedByUsername?: string;
|
|
5
|
+
invitedByEmail?: string;
|
|
6
|
+
teamName?: string;
|
|
7
|
+
teamImage?: string;
|
|
8
|
+
inviteLink?: string;
|
|
9
|
+
inviteFromIp?: string;
|
|
10
|
+
inviteFromLocation?: string;
|
|
11
|
+
};
|
|
12
|
+
declare const VercelInviteUser: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
13
|
+
type VercelInviteUser = ReturnType<typeof VercelInviteUser>;
|
|
14
|
+
export default VercelInviteUser;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
export
|
|
1
|
+
export * from './components/index.js';
|
|
2
2
|
export { betterSvelteEmailPreprocessor } from './preprocessor/index.js';
|
|
3
3
|
export type { PreprocessorOptions, ComponentTransform } from './preprocessor/index.js';
|
|
4
4
|
export type { ClassAttribute, TransformResult, MediaQueryStyle } from './preprocessor/types.js';
|
|
5
|
-
export {
|
|
5
|
+
export type { TailwindConfig } from 'tw-to-css';
|
|
6
|
+
export { parseAttributes as parseClassAttributes, findHeadComponent } from './preprocessor/parser.js';
|
|
6
7
|
export { createTailwindConverter, transformTailwindClasses, generateMediaQueries, sanitizeClassName } from './preprocessor/transformer.js';
|
|
7
8
|
export { injectMediaQueries } from './preprocessor/head-injector.js';
|
|
8
9
|
export { styleToString, pxToPt } from './utils/index.js';
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// Export email components
|
|
2
|
-
export
|
|
2
|
+
export * from './components/index.js';
|
|
3
3
|
// Export the preprocessor
|
|
4
4
|
export { betterSvelteEmailPreprocessor } from './preprocessor/index.js';
|
|
5
5
|
// Export individual functions for advanced usage
|
|
6
|
-
export { parseClassAttributes, findHeadComponent } from './preprocessor/parser.js';
|
|
6
|
+
export { parseAttributes as parseClassAttributes, findHeadComponent } from './preprocessor/parser.js';
|
|
7
7
|
export { createTailwindConverter, transformTailwindClasses, generateMediaQueries, sanitizeClassName } from './preprocessor/transformer.js';
|
|
8
8
|
export { injectMediaQueries } from './preprocessor/head-injector.js';
|
|
9
9
|
// Export utilities
|