leaflet.pub
a tool for shared writing and social publishing
added some templated for verifying emails with codes
cozylittle.house
+183
-48
+32
-28
emails/confirmEmail.tsx
emails/leafletConfirmEmail.tsx
+32
-28
emails/confirmEmail.tsx
emails/leafletConfirmEmail.tsx
···
3
3
Column,
4
4
Container,
5
5
Head,
6
-
Heading,
7
6
Hr,
8
7
Html,
9
8
Img,
10
9
Link,
11
-
Text,
12
10
Section,
13
11
Row,
14
12
Button,
15
13
CodeBlock,
16
14
} from "@react-email/components";
15
+
import { Text, Heading } from "./post";
17
16
import { Tailwind, pixelBasedPreset } from "@react-email/components";
18
17
import { LeafletWatermark } from "./post";
19
18
20
-
export const ConfirmEmail = (props: {}) => (
19
+
export const LeafletConfirmEmail = (props: {}) => (
21
20
<Html>
22
21
<Tailwind
23
22
config={{
···
91
90
>
92
91
<Head />
93
92
94
-
<Body className={`bg-bg-leaflet font-sans p-2 sm:px-4 sm:py-6 !m-0 `}>
95
-
<Container className={`bg-transparent rounded-lg border border-border`}>
96
-
<Text>Thank you for subscribing to</Text>
97
-
<Text> [[PUB NAME HERE]]</Text>
98
-
<Text>Here is your verification code</Text>
99
-
<Container>
100
-
<Heading as="h2">000000</Heading>
101
-
</Container>
93
+
<Body className={`bg-bg-page font-sans px-2 py-4 !m-0 `}>
94
+
<Row
95
+
border={1}
96
+
className={`w-fit max-w-full bg-transparent rounded-lg !border !border-border !border-solid text-center px-6 py-6 mb-2`}
97
+
>
98
+
<Column className="border-transparent">
99
+
<Row className="w-fit mt-1 text-center">
100
+
<Img
101
+
width={56}
102
+
height={56}
103
+
src="/static/leaflet.png"
104
+
className="mx-auto mb-2"
105
+
/>
102
106
103
-
<LeafletWatermark />
104
-
</Container>
107
+
<Column>
108
+
<Heading noPadding as="h2">
109
+
Welcome to Leaflet!{" "}
110
+
</Heading>
111
+
</Column>
112
+
</Row>
113
+
<Text className="!mt-6 !mb-1 text-secondary">
114
+
Verify your email with this code
115
+
</Text>
116
+
<Container className="bg-border-light rounded-md w-fit px-2 py-1">
117
+
<Heading noPadding as="h1">
118
+
000000
119
+
</Heading>
120
+
</Container>
121
+
</Column>
122
+
</Row>
105
123
</Body>
106
124
</Tailwind>
107
125
</Html>
108
126
);
109
-
export default ConfirmEmail;
110
-
111
-
const blockPadding = "mt-1 mb-3 sm:mb-4";
112
-
const headerPadding = "mt-1 mb-0";
113
-
114
-
const h1 = `text-xl font-bold ${blockPadding}`;
115
-
const h2 = `text-lg font-bold ${headerPadding}`;
116
-
const h3 = `text-base font-bold text-secondary ${headerPadding}`;
117
-
const primary = `text-base text-primary ${blockPadding}`;
118
-
const secondary = `text-base text-secondary ${blockPadding}`;
119
-
const tertiary = `text-base text-tertiary ${blockPadding}`;
120
-
const list = `my-0 !pl-6`;
121
-
const listItem = `${headerPadding} !ml-2`;
122
-
const link = `text-base text-accent-contrast ${blockPadding}`;
123
-
const image = `${blockPadding} text-center`;
127
+
export default LeafletConfirmEmail;
+17
-16
emails/post.tsx
+17
-16
emails/post.tsx
···
92
92
}}
93
93
>
94
94
<Head />
95
-
<Body className={`bg-bg-leaflet font-sans p-2 sm:px-4 sm:py-6 !m-0 `}>
95
+
<Body className={`bg-bg-page font-sans p-2 sm:px-4 sm:py-6 !m-0 `}>
96
96
<Container className={`bg-transparent rounded-lg border border-border`}>
97
97
<Button href="/" className={`${link} font-bold !my-0`}>
98
98
<Row>
···
117
117
Hello this is a description of everything that is to come
118
118
</Text>
119
119
120
-
<Section className={`!mb-7 !mt-3`}>
120
+
<Section className={`postActions !mb-7 !mt-3`}>
121
121
<Row>
122
122
<Column width="auto">
123
123
<Text className="text-sm text-tertiary">
···
209
209
</Text>
210
210
<BlockNotSupported />
211
211
</Section>
212
-
213
-
<Text noPadding className="text-center leading-5">
214
-
<Button className={`${link} font-bold text-sm leading-5 !my-0`}>
215
-
See Full Post
216
-
</Button>
217
-
</Text>
218
-
<Text
219
-
noPadding
220
-
className="text-sm text-tertiary text-center leading-5"
221
-
>
222
-
<Button className={`leading-5 !my-0`}>Unsubscribe</Button>
223
-
</Text>
212
+
<Section className="pt-4">
213
+
<Text noPadding className="text-center leading-5">
214
+
<Button className={`${link} font-bold text-sm leading-5 !my-0`}>
215
+
See Full Post
216
+
</Button>
217
+
</Text>
218
+
<Text
219
+
noPadding
220
+
className="text-sm text-tertiary text-center leading-5"
221
+
>
222
+
<Button className={`leading-5 !my-0`}>Unsubscribe</Button>
223
+
</Text>
224
+
</Section>
224
225
</Container>
225
-
<Hr className="border-border-light mt-6 mb-3" />
226
+
<Hr className="border-border-light my-3" />
226
227
227
228
<LeafletWatermark />
228
229
</Body>
···
252
253
253
254
const blockPadding = "mt-1 mb-3 sm:mb-4";
254
255
const headingPadding = "mt-1 mb-0";
256
+
const link = `text-base text-accent-contrast ${blockPadding}`;
255
257
256
258
export const Text = (props: {
257
259
children: React.ReactNode;
···
371
373
);
372
374
};
373
375
374
-
const link = `text-base text-accent-contrast ${blockPadding}`;
375
376
const image = `${blockPadding} text-center`;
+134
emails/pubConfirmEmail.tsx
+134
emails/pubConfirmEmail.tsx
···
1
+
import {
2
+
Body,
3
+
Column,
4
+
Container,
5
+
Head,
6
+
Hr,
7
+
Html,
8
+
Img,
9
+
Link,
10
+
Section,
11
+
Row,
12
+
Button,
13
+
CodeBlock,
14
+
} from "@react-email/components";
15
+
import { Text, Heading } from "./post";
16
+
import { Tailwind, pixelBasedPreset } from "@react-email/components";
17
+
import { LeafletWatermark } from "./post";
18
+
19
+
export const PubConfirmEmail = (props: {}) => (
20
+
<Html>
21
+
<Tailwind
22
+
config={{
23
+
presets: [pixelBasedPreset],
24
+
theme: {
25
+
screens: {
26
+
sm: "640px",
27
+
md: "960px",
28
+
lg: "1280px",
29
+
},
30
+
borderRadius: {
31
+
none: "0",
32
+
md: "0.25rem",
33
+
lg: "0.5rem",
34
+
full: "9999px",
35
+
},
36
+
37
+
colors: {
38
+
inherit: "inherit",
39
+
transparent: "transparent",
40
+
current: "currentColor",
41
+
42
+
//TEXT COLORS.
43
+
primary: "rgb(39, 39, 39)",
44
+
secondary:
45
+
"color-mix(in oklab, rgb(39, 39, 39), rgb(255, 255, 255) 25%)",
46
+
tertiary:
47
+
"color-mix(in oklab, rgb(39, 39, 39), rgb(255, 255, 255) 55%)",
48
+
border:
49
+
"color-mix(in oklab, rgb(39, 39, 39), rgb(255, 255, 255) 75%)",
50
+
"border-light":
51
+
"color-mix(in oklab, rgb(39, 39, 39), rgb(255, 255, 255) 85%)",
52
+
53
+
white: "#FFFFFF",
54
+
55
+
//ACCENT COLORS
56
+
"accent-1": "rgb(0, 0, 225)",
57
+
"accent-2": "rgb(255, 255, 255;)",
58
+
"accent-contrast": "rgb(0, 0, 225)",
59
+
60
+
//BG COLORS (defined as css variables in global.css)
61
+
"bg-leaflet": "rgb(240, 247, 250)",
62
+
"bg-page": "rgba(255, 255, 255, 1)",
63
+
64
+
// HIGHLIGHT COLORS
65
+
"highlight-1": "rgb(255, 177, 177)",
66
+
"highlight-2": "rgb(253, 245, 203)",
67
+
"highlight-3": "rgb(255, 205, 195)",
68
+
69
+
//DO NOT USE IN PRODUCTION. Test colors to aid development, ie, setting bg color on element to see edges of div. DO. NOT. USE. IN. PRODUCTION
70
+
test: "#E18181",
71
+
"test-blue": "#48D1EF",
72
+
},
73
+
fontSize: {
74
+
xs: ".75rem",
75
+
sm: ".875rem",
76
+
base: "1rem",
77
+
lg: "1.125rem",
78
+
xl: "1.625rem",
79
+
"2xl": "2rem",
80
+
},
81
+
82
+
extend: {
83
+
fontFamily: {
84
+
sans: ["Verdana"],
85
+
serif: ["Georgia"],
86
+
},
87
+
},
88
+
},
89
+
}}
90
+
>
91
+
<Head />
92
+
93
+
<Body className={`bg-bg-page font-sans px-2 py-4 !m-0 `}>
94
+
<Row
95
+
border={1}
96
+
className={`w-fit max-w-full bg-transparent rounded-lg !border !border-border !border-solid text-center px-6 py-6 mb-2`}
97
+
>
98
+
<Column className="border-transparent">
99
+
<Text noPadding className="font-bold text-secondary">
100
+
Thank you for subscribing to
101
+
</Text>
102
+
<Row className="w-fit mt-1">
103
+
<Column width="24px">
104
+
<Img
105
+
width={24}
106
+
height={24}
107
+
src="/static/test.jpg"
108
+
className="rounded-full"
109
+
/>
110
+
</Column>
111
+
<Column width={"8px"} />
112
+
113
+
<Column>
114
+
<Heading noPadding as="h2">
115
+
Leaflet Explorers
116
+
</Heading>
117
+
</Column>
118
+
</Row>
119
+
<Text className="!mt-6 !mb-1 text-secondary">
120
+
Verify your email with this code
121
+
</Text>
122
+
<Container className="bg-border-light rounded-md w-fit px-2 py-1">
123
+
<Heading noPadding as="h1">
124
+
000000
125
+
</Heading>
126
+
</Container>
127
+
</Column>
128
+
</Row>
129
+
<LeafletWatermark />
130
+
</Body>
131
+
</Tailwind>
132
+
</Html>
133
+
);
134
+
export default PubConfirmEmail;
emails/static/leaflet.png
emails/static/leaflet.png
This is a binary file and will not be displayed.
-4
emails/welcome.tsx
-4
emails/welcome.tsx