better-svelte-email 0.3.0 → 0.3.3
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/LICENSE +21 -0
- package/README.md +131 -228
- package/dist/preview/EmailPreview.svelte +72 -66
- package/dist/preview/index.js +20 -11
- package/package.json +27 -26
- package/dist/emails/apple-receipt.svelte +0 -387
- package/dist/emails/apple-receipt.svelte.d.ts +0 -18
- package/dist/emails/demo-email.svelte +0 -108
- package/dist/emails/demo-email.svelte.d.ts +0 -13
- package/dist/emails/test-email.svelte +0 -21
- package/dist/emails/test-email.svelte.d.ts +0 -26
- package/dist/emails/vercel-invite-user.svelte +0 -136
- package/dist/emails/vercel-invite-user.svelte.d.ts +0 -14
|
@@ -1,387 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import {
|
|
3
|
-
Body,
|
|
4
|
-
Column,
|
|
5
|
-
Container,
|
|
6
|
-
Head,
|
|
7
|
-
Hr,
|
|
8
|
-
Html,
|
|
9
|
-
Img,
|
|
10
|
-
Link,
|
|
11
|
-
Preview,
|
|
12
|
-
Row,
|
|
13
|
-
Section,
|
|
14
|
-
Text
|
|
15
|
-
} from '../components/index.js';
|
|
16
|
-
|
|
17
|
-
const baseUrl =
|
|
18
|
-
process.env.VERCEL === '1' ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}/` : '/';
|
|
19
|
-
</script>
|
|
20
|
-
|
|
21
|
-
<Html>
|
|
22
|
-
<Head />
|
|
23
|
-
<Body
|
|
24
|
-
style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: #ffffff;"
|
|
25
|
-
>
|
|
26
|
-
<Preview preview="Apple Receipt" />
|
|
27
|
-
<Container style="margin: 0 auto; padding: 20px 0 48px; width: 660px; max-width: 100%;">
|
|
28
|
-
<Section>
|
|
29
|
-
<Row>
|
|
30
|
-
<Column>
|
|
31
|
-
<Img src="{baseUrl}apple-logo.png" width="42" height="42" alt="Apple Logo" />
|
|
32
|
-
</Column>
|
|
33
|
-
<Column style="display: table-cell;" align="right">
|
|
34
|
-
<Text style="font-size: 32px; font-weight: 300; color: #888888;">Receipt</Text>
|
|
35
|
-
</Column>
|
|
36
|
-
</Row>
|
|
37
|
-
</Section>
|
|
38
|
-
|
|
39
|
-
<Section>
|
|
40
|
-
<Text
|
|
41
|
-
style="text-align: center; margin: 36px 0 40px 0; font-size: 14px; font-weight: 500; color: #111111;"
|
|
42
|
-
>
|
|
43
|
-
Save 3% on all your Apple purchases with Apple Card.
|
|
44
|
-
<sup style="font-weight: 300;">1</sup>
|
|
45
|
-
{' '}
|
|
46
|
-
<Link href="https://www.apple.com/apple-card/">Apply and use in minutes</Link>
|
|
47
|
-
<sup style="font-weight: 300;">2</sup>
|
|
48
|
-
</Text>
|
|
49
|
-
</Section>
|
|
50
|
-
|
|
51
|
-
<Section
|
|
52
|
-
style="border-collapse: collapse; border-spacing: 0px; color: rgb(51,51,51); background-color: rgb(250,250,250); border-radius: 3px; font-size: 12px;"
|
|
53
|
-
>
|
|
54
|
-
<Row style="min-height: 46px;">
|
|
55
|
-
<Column colspan={2}>
|
|
56
|
-
<Section>
|
|
57
|
-
<Row>
|
|
58
|
-
<Column
|
|
59
|
-
style="padding-left: 20px; border-style: solid; border-color: white; border-width: 0px 1px 1px 0px; min-height: 44px;"
|
|
60
|
-
>
|
|
61
|
-
<Text
|
|
62
|
-
style="margin: 0; padding: 0; line-height: 1.4; color: rgb(102,102,102); font-size: 10px;"
|
|
63
|
-
>
|
|
64
|
-
APPLE ID
|
|
65
|
-
</Text>
|
|
66
|
-
<Link
|
|
67
|
-
href="mailto:alan.turing@gmail.com"
|
|
68
|
-
style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4; color: #15c; text-decoration: underline;"
|
|
69
|
-
>
|
|
70
|
-
alan.turing@gmail.com
|
|
71
|
-
</Link>
|
|
72
|
-
</Column>
|
|
73
|
-
</Row>
|
|
74
|
-
|
|
75
|
-
<Row>
|
|
76
|
-
<Column
|
|
77
|
-
style="padding-left: 20px; border-style: solid; border-color: white; border-width: 0px 1px 1px 0px; min-height: 44px;"
|
|
78
|
-
>
|
|
79
|
-
<Text
|
|
80
|
-
style="margin: 0; padding: 0; line-height: 1.4; color: rgb(102,102,102); font-size: 10px;"
|
|
81
|
-
>
|
|
82
|
-
INVOICE DATE
|
|
83
|
-
</Text>
|
|
84
|
-
<Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;"
|
|
85
|
-
>18 Jan 2023</Text
|
|
86
|
-
>
|
|
87
|
-
</Column>
|
|
88
|
-
</Row>
|
|
89
|
-
|
|
90
|
-
<Row>
|
|
91
|
-
<Column
|
|
92
|
-
style="padding-left: 20px; border-style: solid; border-color: white; border-width: 0px 1px 1px 0px; min-height: 44px;"
|
|
93
|
-
>
|
|
94
|
-
<Text
|
|
95
|
-
style="margin: 0; padding: 0; line-height: 1.4; color: rgb(102,102,102); font-size: 10px;"
|
|
96
|
-
>
|
|
97
|
-
ORDER ID
|
|
98
|
-
</Text>
|
|
99
|
-
<Link
|
|
100
|
-
href="#"
|
|
101
|
-
style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4; color: #15c; text-decoration: underline;"
|
|
102
|
-
>
|
|
103
|
-
ML4F5L8522
|
|
104
|
-
</Link>
|
|
105
|
-
</Column>
|
|
106
|
-
<Column
|
|
107
|
-
style="padding-left: 20px; border-style: solid; border-color: white; border-width: 0px 1px 1px 0px; min-height: 44px;"
|
|
108
|
-
>
|
|
109
|
-
<Text
|
|
110
|
-
style="margin: 0; padding: 0; line-height: 1.4; color: rgb(102,102,102); font-size: 10px;"
|
|
111
|
-
>
|
|
112
|
-
DOCUMENT NO.
|
|
113
|
-
</Text>
|
|
114
|
-
<Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;"
|
|
115
|
-
>186623754793</Text
|
|
116
|
-
>
|
|
117
|
-
</Column>
|
|
118
|
-
</Row>
|
|
119
|
-
</Section>
|
|
120
|
-
</Column>
|
|
121
|
-
<Column
|
|
122
|
-
colspan={2}
|
|
123
|
-
style="padding-left: 20px; border-style: solid; border-color: white; border-width: 0px 1px 1px 0px; min-height: 44px;"
|
|
124
|
-
>
|
|
125
|
-
<Text
|
|
126
|
-
style="margin: 0; padding: 0; line-height: 1.4; color: rgb(102,102,102); font-size: 10px;"
|
|
127
|
-
>
|
|
128
|
-
BILLED TO
|
|
129
|
-
</Text>
|
|
130
|
-
<Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;">
|
|
131
|
-
Visa .... 7461 (Apple Pay)
|
|
132
|
-
</Text>
|
|
133
|
-
<Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;"
|
|
134
|
-
>Alan Turing</Text
|
|
135
|
-
>
|
|
136
|
-
<Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;"
|
|
137
|
-
>2125 Chestnut St</Text
|
|
138
|
-
>
|
|
139
|
-
<Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;"
|
|
140
|
-
>San Francisco, CA 94123</Text
|
|
141
|
-
>
|
|
142
|
-
<Text style="font-size: 12px; margin: 0; padding: 0; line-height: 1.4;">USA</Text>
|
|
143
|
-
</Column>
|
|
144
|
-
</Row>
|
|
145
|
-
</Section>
|
|
146
|
-
|
|
147
|
-
<Section
|
|
148
|
-
style="border-collapse: collapse; border-spacing: 0px; color: rgb(51,51,51); background-color: rgb(250,250,250); border-radius: 3px; font-size: 12px; margin: 30px 0 15px 0; min-height: 24px;"
|
|
149
|
-
>
|
|
150
|
-
<Text
|
|
151
|
-
style="background: #fafafa; padding-left: 10px; font-size: 14px; font-weight: 500; margin: 0;"
|
|
152
|
-
>
|
|
153
|
-
App Store
|
|
154
|
-
</Text>
|
|
155
|
-
</Section>
|
|
156
|
-
|
|
157
|
-
<Section>
|
|
158
|
-
<Row>
|
|
159
|
-
<Column style="width: 64px;">
|
|
160
|
-
<Img
|
|
161
|
-
src="{baseUrl}apple-hbo-max-icon.jpeg"
|
|
162
|
-
width="64"
|
|
163
|
-
height="64"
|
|
164
|
-
alt="HBO Max"
|
|
165
|
-
style="margin: 0 0 0 20px; border-radius: 14px; border: 1px solid rgb(242,242,242);"
|
|
166
|
-
/>
|
|
167
|
-
</Column>
|
|
168
|
-
<Column style="padding-left: 22px;">
|
|
169
|
-
<Text
|
|
170
|
-
style="font-size: 12px; font-weight: 600; margin: 0; padding: 0; line-height: 1.4;"
|
|
171
|
-
>
|
|
172
|
-
HBO Max: Stream TV & Movies
|
|
173
|
-
</Text>
|
|
174
|
-
<Text
|
|
175
|
-
style="font-size: 12px; color: rgb(102,102,102); margin: 0; padding: 0; line-height: 1.4;"
|
|
176
|
-
>
|
|
177
|
-
HBO Max Ad-Free (Monthly)
|
|
178
|
-
</Text>
|
|
179
|
-
<Text
|
|
180
|
-
style="font-size: 12px; color: rgb(102,102,102); margin: 0; padding: 0; line-height: 1.4;"
|
|
181
|
-
>
|
|
182
|
-
Renews Aug 20, 2023
|
|
183
|
-
</Text>
|
|
184
|
-
<Link
|
|
185
|
-
href="https://www.apple.com/"
|
|
186
|
-
style="font-size: 12px; color: rgb(0,112,201); text-decoration: none;"
|
|
187
|
-
>
|
|
188
|
-
Write a Review
|
|
189
|
-
</Link>
|
|
190
|
-
<span
|
|
191
|
-
style="margin-left: 4px; margin-right: 4px; color: rgb(51,51,51); font-weight: 200;"
|
|
192
|
-
>|</span
|
|
193
|
-
>
|
|
194
|
-
<Link
|
|
195
|
-
href="https://www.apple.com/"
|
|
196
|
-
style="font-size: 12px; color: rgb(0,112,201); text-decoration: none;"
|
|
197
|
-
>
|
|
198
|
-
Report a Problem
|
|
199
|
-
</Link>
|
|
200
|
-
</Column>
|
|
201
|
-
<Column
|
|
202
|
-
align="right"
|
|
203
|
-
style="display: table-cell; padding: 0px 20px 0px 0px; width: 100px; vertical-align: top;"
|
|
204
|
-
>
|
|
205
|
-
<Text style="font-size: 12px; font-weight: 600; margin: 0;">$14.99</Text>
|
|
206
|
-
</Column>
|
|
207
|
-
</Row>
|
|
208
|
-
</Section>
|
|
209
|
-
|
|
210
|
-
<Hr style="margin: 30px 0 0 0;" />
|
|
211
|
-
|
|
212
|
-
<Section style="text-align:right;">
|
|
213
|
-
<Row>
|
|
214
|
-
<Column style="display: table-cell;" align="right">
|
|
215
|
-
<Text
|
|
216
|
-
style="margin: 0; color: rgb(102,102,102); font-size: 10px; font-weight: 600; padding: 0px 30px 0px 0px; text-align: right;"
|
|
217
|
-
>
|
|
218
|
-
TOTAL
|
|
219
|
-
</Text>
|
|
220
|
-
</Column>
|
|
221
|
-
<Column
|
|
222
|
-
style="min-height: 48px; padding-top: 48px; border-left: 1px solid; border-color: rgb(238,238,238);"
|
|
223
|
-
/>
|
|
224
|
-
<Column style="display: table-cell; width: 90px;">
|
|
225
|
-
<Text
|
|
226
|
-
style="margin: 0px 20px 0px 0px; font-size: 16px; font-weight: 600; white-space: nowrap; text-align: right;"
|
|
227
|
-
>
|
|
228
|
-
$14.99
|
|
229
|
-
</Text>
|
|
230
|
-
</Column>
|
|
231
|
-
</Row>
|
|
232
|
-
</Section>
|
|
233
|
-
|
|
234
|
-
<Hr style="margin: 0 0 75px 0;" />
|
|
235
|
-
|
|
236
|
-
<Section>
|
|
237
|
-
<Row>
|
|
238
|
-
<Column align="center" style="display: block;">
|
|
239
|
-
<Img src="{baseUrl}apple-card-icon.png" width="60" height="17" alt="Apple Card" />
|
|
240
|
-
</Column>
|
|
241
|
-
</Row>
|
|
242
|
-
</Section>
|
|
243
|
-
|
|
244
|
-
<Section>
|
|
245
|
-
<Row>
|
|
246
|
-
<Column align="center" style="display: block; margin: 15px 0 0 0;">
|
|
247
|
-
<Text style="font-size: 24px; font-weight: 500;">
|
|
248
|
-
Save 3% on all your Apple purchases.
|
|
249
|
-
</Text>
|
|
250
|
-
</Column>
|
|
251
|
-
</Row>
|
|
252
|
-
</Section>
|
|
253
|
-
|
|
254
|
-
<Section>
|
|
255
|
-
<Row>
|
|
256
|
-
<Column align="center" style="display: table-cell; margin: 10px 0 0 0;">
|
|
257
|
-
<Link
|
|
258
|
-
href="https://www.apple.com/"
|
|
259
|
-
style="color: rgb(0,126,255); text-decoration: none;"
|
|
260
|
-
>
|
|
261
|
-
<Img
|
|
262
|
-
src="{baseUrl}apple-wallet.png"
|
|
263
|
-
width="28"
|
|
264
|
-
height="28"
|
|
265
|
-
alt="Apple Wallet"
|
|
266
|
-
style="display: inherit; padding-right: 8px; vertical-align: middle;"
|
|
267
|
-
/>
|
|
268
|
-
<span style="font-size: 14px; font-weight: 400; text-decoration: none;">
|
|
269
|
-
Apply and use in minutes
|
|
270
|
-
</span>
|
|
271
|
-
</Link>
|
|
272
|
-
</Column>
|
|
273
|
-
</Row>
|
|
274
|
-
</Section>
|
|
275
|
-
|
|
276
|
-
<Hr style="margin: 65px 0 20px 0;" />
|
|
277
|
-
|
|
278
|
-
<Text
|
|
279
|
-
style="font-size: 12px; color: rgb(102,102,102); margin: 0; line-height: auto; margin-bottom: 16px;"
|
|
280
|
-
>
|
|
281
|
-
1. 3% savings is earned as Daily Cash and is transferred to your Apple Cash card when
|
|
282
|
-
transactions post to your Apple Card account. If you do not have an Apple Cash card, Daily
|
|
283
|
-
Cash can be applied by you as a credit on your statement balance. 3% is the total amount of
|
|
284
|
-
Daily Cash earned for these purchases. See the Apple Card Customer Agreement for more
|
|
285
|
-
details on Daily Cash and qualifying transactions.
|
|
286
|
-
</Text>
|
|
287
|
-
|
|
288
|
-
<Text
|
|
289
|
-
style="font-size: 12px; color: rgb(102,102,102); margin: 0; line-height: auto; margin-bottom: 16px;"
|
|
290
|
-
>
|
|
291
|
-
2. Subject to credit approval.
|
|
292
|
-
</Text>
|
|
293
|
-
|
|
294
|
-
<Text
|
|
295
|
-
style="font-size: 12px; color: rgb(102,102,102); margin: 0; line-height: auto; margin-bottom: 16px;"
|
|
296
|
-
>
|
|
297
|
-
To access and use all the features of Apple Card, you must add Apple Card to Wallet on an
|
|
298
|
-
iPhone or iPad with iOS or iPadOS 13.2 or later. Update to the latest version of iOS or
|
|
299
|
-
iPadOS by going to Settings > General > Software Update. Tap Download and Install.
|
|
300
|
-
</Text>
|
|
301
|
-
|
|
302
|
-
<Text
|
|
303
|
-
style="font-size: 12px; color: rgb(102,102,102); margin: 0; line-height: auto; margin-bottom: 16px;"
|
|
304
|
-
>
|
|
305
|
-
Available for qualifying applicants in the United States.
|
|
306
|
-
</Text>
|
|
307
|
-
|
|
308
|
-
<Text
|
|
309
|
-
style="font-size: 12px; color: rgb(102,102,102); margin: 0; line-height: auto; margin-bottom: 16px;"
|
|
310
|
-
>
|
|
311
|
-
Apple Card is issued by Goldman Sachs Bank USA, Salt Lake City Branch.
|
|
312
|
-
</Text>
|
|
313
|
-
|
|
314
|
-
<Text
|
|
315
|
-
style="font-size: 12px; color: rgb(102,102,102); margin: 0; line-height: auto; margin-bottom: 16px;"
|
|
316
|
-
>
|
|
317
|
-
If you reside in the US territories, please call Goldman Sachs at 877-255-5923 with
|
|
318
|
-
questions about Apple Card.
|
|
319
|
-
</Text>
|
|
320
|
-
|
|
321
|
-
<Text
|
|
322
|
-
style="font-size: 12px; color: rgb(102,102,102); margin: 20px 0; line-height: auto; text-align: center;"
|
|
323
|
-
>
|
|
324
|
-
Privacy: We use a
|
|
325
|
-
<Link href="https://www.apple.com/" style="color: rgb(0,115,255);">Subscriber ID</Link>
|
|
326
|
-
to provide reports to developers.
|
|
327
|
-
</Text>
|
|
328
|
-
|
|
329
|
-
<Text
|
|
330
|
-
style="font-size: 12px; color: rgb(102,102,102); margin: 20px 0; line-height: auto; text-align: center;"
|
|
331
|
-
>
|
|
332
|
-
Get help with subscriptions and purchases.
|
|
333
|
-
<Link href="https://www.apple.com/" style="color: rgb(0,115,255);"
|
|
334
|
-
>Visit Apple Support.</Link
|
|
335
|
-
>
|
|
336
|
-
</Text>
|
|
337
|
-
|
|
338
|
-
<Text
|
|
339
|
-
style="font-size: 12px; color: rgb(102,102,102); margin: 20px 0; line-height: auto; text-align: center;"
|
|
340
|
-
>
|
|
341
|
-
Learn how to
|
|
342
|
-
<Link href="https://www.apple.com/" style="color: rgb(0,115,255);">
|
|
343
|
-
manage your password preferences
|
|
344
|
-
</Link>
|
|
345
|
-
for iTunes, Apple Books, and App Store purchases.
|
|
346
|
-
</Text>
|
|
347
|
-
|
|
348
|
-
<Text
|
|
349
|
-
style="font-size: 12px; color: rgb(102,102,102); margin: 20px 0; line-height: auto; text-align: center;"
|
|
350
|
-
>
|
|
351
|
-
You have the option to stop receiving email receipts for your subscription renewals. If you
|
|
352
|
-
have opted out, you can still view your receipts in your account under Purchase History. To
|
|
353
|
-
manage receipts or to opt in again, go to
|
|
354
|
-
<Link href="https://www.apple.com/" style="color: rgb(0,115,255);">Account Settings.</Link>
|
|
355
|
-
</Text>
|
|
356
|
-
|
|
357
|
-
<Section>
|
|
358
|
-
<Row>
|
|
359
|
-
<Column align="center" style="display: block; margin: 40px 0 0 0;">
|
|
360
|
-
<Img src="{baseUrl}apple-logo.png" width="26" height="26" alt="Apple" />
|
|
361
|
-
</Column>
|
|
362
|
-
</Row>
|
|
363
|
-
</Section>
|
|
364
|
-
|
|
365
|
-
<Text
|
|
366
|
-
style="margin: 8px 0 0 0; text-align: center; font-size: 12px; color: rgb(102,102,102);"
|
|
367
|
-
>
|
|
368
|
-
<Link href="https://www.apple.com/" style="color: rgb(0,115,255);">Account Settings</Link>
|
|
369
|
-
•
|
|
370
|
-
<Link href="https://www.apple.com/" style="color: rgb(0,115,255);">Terms of Sale</Link>
|
|
371
|
-
•
|
|
372
|
-
<Link href="https://www.apple.com/legal/privacy/" style="color: rgb(0,115,255);">
|
|
373
|
-
Privacy Policy
|
|
374
|
-
</Link>
|
|
375
|
-
</Text>
|
|
376
|
-
|
|
377
|
-
<Text
|
|
378
|
-
style="margin: 25px 0 0 0; text-align: center; font-size: 12px; color: rgb(102,102,102);"
|
|
379
|
-
>
|
|
380
|
-
Copyright © 2023 Apple Inc.<br />
|
|
381
|
-
<Link href="https://www.apple.com/legal/" style="color: rgb(0,115,255);">
|
|
382
|
-
All rights reserved
|
|
383
|
-
</Link>
|
|
384
|
-
</Text>
|
|
385
|
-
</Container>
|
|
386
|
-
</Body>
|
|
387
|
-
</Html>
|
|
@@ -1,18 +0,0 @@
|
|
|
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;
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import { Html, Head, Body, Container, Section, Text, Button } from '../components/index.js';
|
|
3
|
-
|
|
4
|
-
let { userName = 'User', testMessage = 'This is a test email!' } = $props();
|
|
5
|
-
</script>
|
|
6
|
-
|
|
7
|
-
<Html>
|
|
8
|
-
<Head>
|
|
9
|
-
<style>
|
|
10
|
-
@media(min-width: 640px){.sm\:bg-green-600{background-color:rgb(22,163,74) !important}}
|
|
11
|
-
</style>
|
|
12
|
-
</Head>
|
|
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
|
-
<!-- Header -->
|
|
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
|
-
This email was generated using Tailwind classes and transformed by the preprocessor!
|
|
20
|
-
</Text>
|
|
21
|
-
</Section>
|
|
22
|
-
|
|
23
|
-
<!-- Main Content -->
|
|
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
|
-
|
|
27
|
-
<Text style="margin-bottom:1rem; color:rgb(55,65,81);">{testMessage}</Text>
|
|
28
|
-
|
|
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="display:flex; list-style-type:disc; flex-direction:column; gap:0.25rem; padding-left:1.25rem; color:rgb(30,64,175);">
|
|
32
|
-
<li>Tailwind classes converted to inline styles</li>
|
|
33
|
-
<li>Responsive design with media queries</li>
|
|
34
|
-
<li>Email-safe CSS transformations</li>
|
|
35
|
-
<li>Build-time preprocessing (zero runtime cost)</li>
|
|
36
|
-
</ul>
|
|
37
|
-
</Container>
|
|
38
|
-
|
|
39
|
-
<!-- Buttons showcase -->
|
|
40
|
-
<Section style="margin-bottom:1.5rem;">
|
|
41
|
-
<Button
|
|
42
|
-
href="https://github.com/Konixy/better-svelte-email"
|
|
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
|
-
>
|
|
45
|
-
View on GitHub
|
|
46
|
-
</Button>
|
|
47
|
-
|
|
48
|
-
<Button
|
|
49
|
-
href="https://svelte.dev"
|
|
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
|
-
>
|
|
52
|
-
Learn Svelte 5
|
|
53
|
-
</Button>
|
|
54
|
-
</Section>
|
|
55
|
-
</Section>
|
|
56
|
-
|
|
57
|
-
<!-- Stats Grid -->
|
|
58
|
-
<Section style="margin-bottom:1.5rem;">
|
|
59
|
-
<table width="100%" cellpadding="0" cellspacing="0" role="presentation">
|
|
60
|
-
<tbody>
|
|
61
|
-
<tr>
|
|
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
|
-
</td>
|
|
66
|
-
<td style="width: 10px;"></td>
|
|
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
|
-
</td>
|
|
71
|
-
<td style="width: 10px;"></td>
|
|
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
|
-
</td>
|
|
76
|
-
</tr>
|
|
77
|
-
</tbody>
|
|
78
|
-
</table>
|
|
79
|
-
</Section>
|
|
80
|
-
|
|
81
|
-
<!-- Code Example -->
|
|
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
|
-
<pre
|
|
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
|
-
>// Input
|
|
88
|
-
<Button class="bg-blue-500 text-white p-4">
|
|
89
|
-
Click Me
|
|
90
|
-
</Button>
|
|
91
|
-
|
|
92
|
-
// Output (after preprocessing)
|
|
93
|
-
<Button styleString="background-color: rgb(59, 130, 246); ...">
|
|
94
|
-
Click Me
|
|
95
|
-
</Button></code
|
|
96
|
-
></pre>
|
|
97
|
-
</Container>
|
|
98
|
-
|
|
99
|
-
<!-- Footer -->
|
|
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
|
-
You're receiving this email because you tested the better-svelte-email demo.
|
|
104
|
-
</Text>
|
|
105
|
-
</Section>
|
|
106
|
-
</Container>
|
|
107
|
-
</Body>
|
|
108
|
-
</Html>
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export default DemoEmail;
|
|
2
|
-
type DemoEmail = {
|
|
3
|
-
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
-
$set?(props: Partial<$$ComponentProps>): void;
|
|
5
|
-
};
|
|
6
|
-
declare const DemoEmail: import("svelte").Component<{
|
|
7
|
-
userName?: string;
|
|
8
|
-
testMessage?: string;
|
|
9
|
-
}, {}, "">;
|
|
10
|
-
type $$ComponentProps = {
|
|
11
|
-
userName?: string;
|
|
12
|
-
testMessage?: string;
|
|
13
|
-
};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import { Html, Head, Body, Text, Button, Container, Heading } from '../components/index.js';
|
|
3
|
-
</script>
|
|
4
|
-
|
|
5
|
-
<Html>
|
|
6
|
-
<Head />
|
|
7
|
-
<Body>
|
|
8
|
-
<Container style="background-color:rgb(243,244,246);padding: 2rem;" >
|
|
9
|
-
<Heading as="h1" m="10" style="color:rgb(37,99,235);font-weight: bold;">Title</Heading>
|
|
10
|
-
<Heading as="h2" style="font-weight:600;">Subtitle</Heading>
|
|
11
|
-
<Text style="font-weight: bold;">Basic text</Text>
|
|
12
|
-
<Button
|
|
13
|
-
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%"
|
|
14
|
-
|
|
15
|
-
href="https://example.com"
|
|
16
|
-
>
|
|
17
|
-
Click Me
|
|
18
|
-
</Button>
|
|
19
|
-
</Container>
|
|
20
|
-
</Body>
|
|
21
|
-
</Html>
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
export default TestEmail;
|
|
2
|
-
type TestEmail = SvelteComponent<{
|
|
3
|
-
[x: string]: never;
|
|
4
|
-
}, {
|
|
5
|
-
[evt: string]: CustomEvent<any>;
|
|
6
|
-
}, {}> & {
|
|
7
|
-
$$bindings?: string | undefined;
|
|
8
|
-
};
|
|
9
|
-
declare const TestEmail: $$__sveltets_2_IsomorphicComponent<{
|
|
10
|
-
[x: string]: never;
|
|
11
|
-
}, {
|
|
12
|
-
[evt: string]: CustomEvent<any>;
|
|
13
|
-
}, {}, {}, string>;
|
|
14
|
-
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> {
|
|
15
|
-
new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
|
|
16
|
-
$$bindings?: Bindings;
|
|
17
|
-
} & Exports;
|
|
18
|
-
(internal: unknown, props: {
|
|
19
|
-
$$events?: Events;
|
|
20
|
-
$$slots?: Slots;
|
|
21
|
-
}): Exports & {
|
|
22
|
-
$set?: any;
|
|
23
|
-
$on?: any;
|
|
24
|
-
};
|
|
25
|
-
z_$$bindings?: Bindings;
|
|
26
|
-
}
|