add newsletter subscriptions

andrecasal · Jul 29, 2023 · f141d30 · f141d30
1 parent 80e0af3
commit f141d30
Show file tree

Hide file tree

Showing 22 changed files with 4,149 additions and 286 deletions.
diff --git a/.env.example b/.env.example
@@ -4,6 +4,8 @@ DATABASE_URL="file:./data.db?connection_limit=1"
 CACHE_DATABASE_PATH="./other/cache.db"
 SESSION_SECRET="super-duper-s3cret"
 INTERNAL_COMMAND_TOKEN="some-made-up-token"
-MAIL_SERVICE_API_KEY="your-mail-service-api-key"
-MAIL_SERVICE_API_ENDPOINT="https://api.resend.com"
+TRANSACTIONAL_EMAIL_SERVICE_API_KEY="your-transactional-email-service-api-key"
+TRANSACTIONAL_EMAIL_SERVICE_API_ENDPOINT="https://api.resend.com/emails"
+MARKETING_EMAIL_SERVICE_API_KEY="your-marketing-email-service-api-key"
+MARKETING_EMAIL_SERVICE_API_ENDPOINT="https://connect.mailerlite.com/"
 SENTRY_DSN="your-dsn"
diff --git a/.gitignore b/.gitignore
@@ -17,5 +17,7 @@ node_modules
 
 /other/cache.db
 
+.react-email
+
 # Easy way to create temporary files/folders that won't accidentally be added to git
 *.local.*
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,17 @@
+{
+	// Use IntelliSense to learn about possible attributes.
+	// Hover to view descriptions of existing attributes.
+	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"name": "Attach",
+			"port": 9229,
+			"request": "attach",
+			"skipFiles": [
+				"<node_internals>/**"
+			],
+			"type": "node"
+		}
+	]
+}
diff --git a/app/components/email-root.tsx b/app/components/email-root.tsx
@@ -0,0 +1,60 @@
+import {
+	Preview, // A preview text that will be displayed in the inbox of the recipient before they open the email
+	Tailwind, // A React component to wrap emails with Tailwind CSS
+	Html, // <html> tag
+	Head, // <head> tag
+	Body, // <body> tag
+	Container, // <table>, <tbody>, and <tr> tags with align="center" and max-width: 37.5em
+	Row, // <table>, <tbody>, and <tr> tags
+	Section, // <table>, <tbody>, <tr>, and <td> tags
+	//Column, // <td> tag
+	//Heading, // <h1> - <h6> tags
+	Hr, // <hr> tag
+	//Img, // <img> tag
+	// Note: All email clients can display .png, .gif, and .jpg images. Unfortunately, .svg images are not well supported, regardless of how they’re referenced, so avoid using these. See Can I Email for more information.
+	Link, // <a> tag, needs href and optional target
+	//Button, // A link that is styled to look like a button.
+	// Semantics: Quite often in the email world we talk about buttons, when actually we mean links. Behind the scenes this is a <a> tag, that is styled like a <button> tag.
+	Text, // <p> tag
+} from '@react-email/components'
+import { type ReactNode } from 'react'
+
+export const EmailRoot = ({ subjectLine, previewText, children }: { subjectLine: string; previewText: string; children: ReactNode }) => {
+	return (
+		<Html lang="en" dir="ltr">
+			<Head>
+				<title>{subjectLine}</title>
+				<Preview>{previewText}</Preview>
+			</Head>
+			<Tailwind>
+				<Body className="bg-white py-4 font-sans text-base">
+					<Container>
+						{children}
+						<Hr className="mt-14" />
+						<Section className="mt-14">
+							<Row>
+								<Link href="https://andrecasal.com" target="_blank" className="relative -m-3 block rounded-md p-3 text-4xl font-semibold text-gray-900">
+									André Casal
+								</Link>
+							</Row>
+							<Row>
+								<Text className="mb-10 mt-2 text-lg leading-8 text-gray-600">Modern full-stack web development.</Text>
+							</Row>
+							<Row>
+								<Link href="https://twitter.com/theandrecasal" target="_blank" className="mr-4 text-[#ca8b04]">
+									Twitter
+								</Link>
+								<Link href="https://github.com/andrecasal" target="_blank" className="mx-4 text-[#ca8b04]">
+									GitHub
+								</Link>
+								<Link href="https://www.youtube.com/@andrecasal" target="_blank" className="ml-4 text-[#ca8b04]">
+									YouTube
+								</Link>
+							</Row>
+						</Section>
+					</Container>
+				</Body>
+			</Tailwind>
+		</Html>
+	)
+}
diff --git a/app/components/newsletter.tsx b/app/components/newsletter.tsx
@@ -3,7 +3,7 @@ import { Button } from '~/components/ui/button.tsx'
 import { Text } from '~/components/ui/text.tsx'
 import { Input } from '~/components/ui/input.tsx'
 import { Label } from '~/components/ui/label.tsx'
-import { useFetcher } from '@remix-run/react'
+import { Form, useActionData, useFormAction, useNavigation } from '@remix-run/react'
 import { useForm } from '@conform-to/react'
 import { type action, newsletterSchema } from '~/routes/_marketing+/newsletter/index.tsx'
 import { parse } from '@conform-to/zod'
@@ -15,9 +15,12 @@ type NewsletterProps = {
 }
 
 const Newsletter = ({ className, title, description }: NewsletterProps) => {
-	const fetcher = useFetcher<typeof action>()
+	const actionData = useActionData<typeof action>()
+	const formAction = useFormAction()
+	const navigation = useNavigation()
+	const isSubmitting = navigation.formAction === formAction
 	const [form, { name, email }] = useForm({
-		lastSubmission: fetcher.data?.submission,
+		lastSubmission: actionData?.submission,
 		shouldValidate: 'onBlur',
 		onValidate: ({ formData }) => parse(formData, { schema: newsletterSchema }),
 	})
@@ -31,7 +34,7 @@ const Newsletter = ({ className, title, description }: NewsletterProps) => {
 				<Text size="lg" className="mt-4 text-muted-400">
 					Golden nuggets of code knowledge you can read in 5 minutes. Delivered to your inbox every 2 weeks.
 				</Text>
-				<fetcher.Form method="post" action="/newsletter" className="flex flex-col gap-y-4" {...form.props}>
+				<Form method="post" action="/newsletter" className="flex flex-col gap-y-4" {...form.props}>
 					<div className="mt-6 flex gap-x-4">
 						<div>
 							<Label htmlFor="name" className="sr-only">
@@ -52,10 +55,10 @@ const Newsletter = ({ className, title, description }: NewsletterProps) => {
 							</Text>
 						</div>
 					</div>
-					<Button type="submit" disabled={fetcher.state === 'submitting'}>
+					<Button type="submit" disabled={isSubmitting}>
 						I want my tips
 					</Button>
-				</fetcher.Form>
+				</Form>
 			</div>
 			<div className="space-y-8 xl:contents xl:space-y-0">
 				<figure className="col-span-2 flex flex-col rounded-2xl shadow-lg ring-1 ring-muted-900/5 xl:col-start-2 xl:row-end-1">

diff --git a/app/routes/_marketing+/components/bg-spicy.tsx b/app/routes/_marketing+/components/bg-spicy.tsx
@@ -0,0 +1,14 @@
+import type { HTMLAttributes, PropsWithChildren } from 'react'
+import spicy from '../images/pickled-stardust.jpg'
+import { cn } from '~/utils/misc.ts'
+
+const BackgroundSpicy = ({ className, children, ...props }: PropsWithChildren<HTMLAttributes<HTMLDivElement>>) => {
+	return (
+		<div className={cn('relative isolate', className)} {...props}>
+			<img src={spicy} alt="Spicy" className="absolute inset-0 -z-10 h-full w-full object-cover" aria-hidden="true" />
+			{children}
+		</div>
+	)
+}
+
+export default BackgroundSpicy
diff --git a/app/routes/_marketing+/images/guy-looking-at-vending-machines.jpg b/app/routes/_marketing+/images/guy-looking-at-vending-machines.jpg
diff --git a/app/routes/_marketing+/images/pickled-stardust.jpg b/app/routes/_marketing+/images/pickled-stardust.jpg
diff --git a/app/routes/_marketing+/newsletter/email.server.tsx b/app/routes/_marketing+/newsletter/email.server.tsx
diff --git a/app/routes/_marketing+/newsletter/email/verify.server.tsx b/app/routes/_marketing+/newsletter/email/verify.server.tsx
@@ -0,0 +1,39 @@
+import {
+	//Row, // <table>, <tbody>, and <tr> tags
+	Section, // <table>, <tbody>, <tr>, and <td> tags
+	//Column, // <td> tag
+	Heading, // <h1> - <h6> tags
+	//Hr, // <hr> tag
+	//Img, // <img> tag
+	// Note: All email clients can display .png, .gif, and .jpg images. Unfortunately, .svg images are not well supported, regardless of how they’re referenced, so avoid using these. See Can I Email for more information.
+	Link, // <a> tag
+	Button, // A link that is styled to look like a button.
+	// Semantics: Quite often in the email world we talk about buttons, when actually we mean links. Behind the scenes this is a <a> tag, that is styled like a <button> tag.
+	Text, // <p> tag
+} from '@react-email/components'
+import { EmailRoot } from '~/components/email-root.tsx'
+
+export const VerifyNewsletterSubscriptionEmail = ({ name, onboardingUrl, otp }: { name: string; onboardingUrl: string; otp: string }) => {
+	return (
+		<EmailRoot subjectLine="Confirm your subscription" previewText="This is a test">
+			<Section>
+				<Heading as="h1" className="my-14 text-3xl font-bold">
+					Confirm your subscription
+				</Heading>
+				<Text className="text-base">Hi {name},</Text>
+				<Button href={onboardingUrl} className="mt-2 rounded bg-[#ca8b04] px-8 py-4 text-center text-xl leading-5 text-white hover:bg-[#ca8b04]/90">
+					Confirm your subscription
+				</Button>
+				<Text className="mt-20 text-sm text-gray-400">If that doesn't work, copy and paste this code into the page:</Text>
+				<Text className="mt-6 text-lg font-bold text-gray-400">{otp}</Text>
+				<Text className="mt-20 text-xs text-gray-400">
+					If you didn't subscribe to{' '}
+					<Link href="https://andrecasal.com/newsletter" target="_blank" className="font-semibold text-[#ca8b04]">
+						André Casal's newsletter
+					</Link>
+					, just delete this email and everything will go back to the way it was.
+				</Text>
+			</Section>
+		</EmailRoot>
+	)
+}