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,136 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import {
|
|
3
|
-
Body,
|
|
4
|
-
Button,
|
|
5
|
-
Column,
|
|
6
|
-
Container,
|
|
7
|
-
Head,
|
|
8
|
-
Heading,
|
|
9
|
-
Hr,
|
|
10
|
-
Html,
|
|
11
|
-
Img,
|
|
12
|
-
Link,
|
|
13
|
-
Preview,
|
|
14
|
-
Row,
|
|
15
|
-
Section,
|
|
16
|
-
Text
|
|
17
|
-
} from '../components/index.js';
|
|
18
|
-
|
|
19
|
-
interface Props {
|
|
20
|
-
username?: string;
|
|
21
|
-
userImage?: string;
|
|
22
|
-
invitedByUsername?: string;
|
|
23
|
-
invitedByEmail?: string;
|
|
24
|
-
teamName?: string;
|
|
25
|
-
teamImage?: string;
|
|
26
|
-
inviteLink?: string;
|
|
27
|
-
inviteFromIp?: string;
|
|
28
|
-
inviteFromLocation?: string;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
let {
|
|
32
|
-
username = 'alanturing',
|
|
33
|
-
userImage = '/vercel-user.png',
|
|
34
|
-
invitedByUsername = 'Alan',
|
|
35
|
-
invitedByEmail = 'alan.turing@example.com',
|
|
36
|
-
teamName = 'Enigma',
|
|
37
|
-
teamImage = '/vercel-team.png',
|
|
38
|
-
inviteLink = 'https://vercel.com',
|
|
39
|
-
inviteFromIp = '204.13.186.218',
|
|
40
|
-
inviteFromLocation = 'São Paulo, Brazil'
|
|
41
|
-
}: Props = $props();
|
|
42
|
-
|
|
43
|
-
const baseUrl =
|
|
44
|
-
process.env.VERCEL === '1' ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}/` : '/';
|
|
45
|
-
|
|
46
|
-
const previewText = `Join ${invitedByUsername} on Vercel`;
|
|
47
|
-
</script>
|
|
48
|
-
|
|
49
|
-
<Html>
|
|
50
|
-
<Head />
|
|
51
|
-
<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";">
|
|
52
|
-
<Preview preview={previewText} />
|
|
53
|
-
<Container
|
|
54
|
-
style="margin-left:auto;margin-right:auto; margin-top:40px;margin-bottom:40px; max-width:465px; border-radius:0.25rem; border-width:1px; border-style:solid; border-color:rgb(234,234,234); padding:20px;"
|
|
55
|
-
>
|
|
56
|
-
<Section style="margin-top:32px;">
|
|
57
|
-
<Img
|
|
58
|
-
src="{baseUrl}vercel-logo.png"
|
|
59
|
-
width="40"
|
|
60
|
-
height="37"
|
|
61
|
-
alt="Vercel Logo"
|
|
62
|
-
style="margin-left:auto;margin-right:auto; margin-top:0px;margin-bottom:0px;"
|
|
63
|
-
/>
|
|
64
|
-
</Section>
|
|
65
|
-
<Heading as="h1" style="margin-left:0px;margin-right:0px; margin-top:30px;margin-bottom:30px; padding:0px; text-align:center; font-size:24px; font-weight:400; color:rgb(0,0,0);">
|
|
66
|
-
Join <strong>{teamName}</strong> on <strong>Vercel</strong>
|
|
67
|
-
</Heading>
|
|
68
|
-
<Text style="font-size:14px; line-height:24px; color:rgb(0,0,0);">
|
|
69
|
-
Hello {username},
|
|
70
|
-
</Text>
|
|
71
|
-
<Text style="font-size:14px; line-height:24px; color:rgb(0,0,0);">
|
|
72
|
-
<strong>{invitedByUsername}</strong> (<Link
|
|
73
|
-
href={`mailto:${invitedByEmail}`}
|
|
74
|
-
style="color:rgb(37,99,235); text-decoration-line:none;"
|
|
75
|
-
>
|
|
76
|
-
{invitedByEmail}
|
|
77
|
-
</Link>) has invited you to the <strong>{teamName}</strong> team on
|
|
78
|
-
<strong>Vercel</strong>.
|
|
79
|
-
</Text>
|
|
80
|
-
<Section>
|
|
81
|
-
<Row>
|
|
82
|
-
<Column align="right">
|
|
83
|
-
<Img
|
|
84
|
-
style="border-radius:9999px;"
|
|
85
|
-
src="{baseUrl}{userImage}"
|
|
86
|
-
width="64"
|
|
87
|
-
height="64"
|
|
88
|
-
alt={`${username}'s profile picture`}
|
|
89
|
-
/>
|
|
90
|
-
</Column>
|
|
91
|
-
<Column align="center">
|
|
92
|
-
<Img
|
|
93
|
-
src="{baseUrl}vercel-arrow.png"
|
|
94
|
-
width="12"
|
|
95
|
-
height="9"
|
|
96
|
-
alt="Arrow indicating invitation"
|
|
97
|
-
/>
|
|
98
|
-
</Column>
|
|
99
|
-
<Column align="left">
|
|
100
|
-
<Img
|
|
101
|
-
style="border-radius:9999px;"
|
|
102
|
-
src="{baseUrl}{teamImage}"
|
|
103
|
-
width="64"
|
|
104
|
-
height="64"
|
|
105
|
-
alt={`${teamName} team logo`}
|
|
106
|
-
/>
|
|
107
|
-
</Column>
|
|
108
|
-
</Row>
|
|
109
|
-
</Section>
|
|
110
|
-
<Section style="margin-top:32px; margin-bottom:32px; text-align:center;">
|
|
111
|
-
<Button
|
|
112
|
-
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:12px; font-weight:600; color:rgb(255,255,255); text-decoration-line:none;"
|
|
113
|
-
href={inviteLink}
|
|
114
|
-
>
|
|
115
|
-
Join the team
|
|
116
|
-
</Button>
|
|
117
|
-
</Section>
|
|
118
|
-
<Text style="font-size:14px; line-height:24px; color:rgb(0,0,0);">
|
|
119
|
-
or copy and paste this URL into your browser:
|
|
120
|
-
<Link href={inviteLink} style="color:rgb(37,99,235); text-decoration-line:none;">
|
|
121
|
-
{inviteLink}
|
|
122
|
-
</Link>
|
|
123
|
-
</Text>
|
|
124
|
-
<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);" />
|
|
125
|
-
<Text style="font-size:12px; line-height:24px; color:rgb(102,102,102);">
|
|
126
|
-
This invitation was intended for
|
|
127
|
-
<span style="color:rgb(0,0,0);">{username}</span>. This invite was sent from
|
|
128
|
-
<span style="color:rgb(0,0,0);">{inviteFromIp}</span>
|
|
129
|
-
located in
|
|
130
|
-
<span style="color:rgb(0,0,0);">{inviteFromLocation}</span>. If you were not expecting this
|
|
131
|
-
invitation, you can ignore this email. If you are concerned about your account's safety,
|
|
132
|
-
please reply to this email to get in touch with us.
|
|
133
|
-
</Text>
|
|
134
|
-
</Container>
|
|
135
|
-
</Body>
|
|
136
|
-
</Html>
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
interface Props {
|
|
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<Props, {}, "">;
|
|
13
|
-
type VercelInviteUser = ReturnType<typeof VercelInviteUser>;
|
|
14
|
-
export default VercelInviteUser;
|