a tool for shared writing and social publishing

added some templated for verifying emails with codes

+183 -48
+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
··· 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
··· 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

This is a binary file and will not be displayed.

-4
emails/welcome.tsx
··· 1 - // this should be the email template for your email code! 2 - // we would need it when you make an account with us and also when you subscribe to the pub 3 - // should it be the same? probably not? 4 - // one says "welcome to leaflet" and the other is "thanks for subbing to [pub here]"