Skip to content

Commit

Permalink
Merge pull request #2 from andrecasal:dev
Browse files Browse the repository at this point in the history
Dev
  • Loading branch information
andrecasal committed Jul 29, 2023
2 parents 17d3033 + 5fc68b9 commit 49e803a
Show file tree
Hide file tree
Showing 25 changed files with 4,538 additions and 284 deletions.
6 changes: 4 additions & 2 deletions .env.example
Original file line number Diff line number Diff line change
Expand Up @@ -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"
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,13 @@ node_modules
/test-results/
/playwright-report/
/playwright/.cache/
/tests/fixtures/email/
/tests/fixtures/emails/
/tests/fixtures/subscriptions/
/coverage

/other/cache.db

.react-email

# Easy way to create temporary files/folders that won't accidentally be added to git
*.local.*
12 changes: 6 additions & 6 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"prisma.prisma",
"bradlc.vscode-tailwindcss"
]
"recommendations": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"prisma.prisma",
"bradlc.vscode-tailwindcss"
]
}
17 changes: 17 additions & 0 deletions .vscode/launch.json
Original file line number Diff line number Diff line change
@@ -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"
}
]
}
60 changes: 60 additions & 0 deletions app/components/email-root.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
97 changes: 60 additions & 37 deletions app/components/newsletter.tsx
Original file line number Diff line number Diff line change
@@ -1,55 +1,78 @@
/* import { useForm } from '@conform-to/react' */
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 { cn } from '~/utils/misc.ts'
import { Form, useActionData, 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'

type NewsletterProps = {
className?: string
title: string
description: string
}

const Newsletter = ({ className, title, description }: NewsletterProps) => {
const actionData = useActionData<typeof action>()
const navigation = useNavigation()
const [form, { name, email }] = useForm({
lastSubmission: actionData?.submission,
shouldValidate: 'onBlur',
onValidate: ({ formData }) => parse(formData, { schema: newsletterSchema }),
})

const Newsletter = ({ className, title, description }: { className?: string; title: string; description: string }) => {
return (
<>
<div className={cn('mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2', className)}>
<div className="flex flex-col justify-between">
<Text heading="h2" size="3xl" className="sm:text-size-4xl">
{title}
</Text>
<Text size="lg" className="mt-4 text-muted-400">
{description}
</Text>
<div className="flex flex-col gap-y-4">
<div className="mt-6 flex gap-x-4">
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2">
<div className="flex flex-col justify-between">
<Text heading="h2" size="3xl" className="sm:text-size-4xl">
Get exclusive web dev tips that I only share with email subscribers
</Text>
<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>
<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">
Name
</Label>
<Input id="name" name="name" type="text" required placeholder="Enter your name" />
<Input id="name" type="text" placeholder="Enter your name" name="name" required defaultValue={name.defaultValue} />
<Text size="sm" className="text-danger-foreground">
{name.error}
</Text>
</div>
<div>
<Label htmlFor="email-address" className="sr-only">
Email address
</Label>
<Input id="email-address" name="email" type="email" autoComplete="email" required placeholder="Enter your email" />
<Input id="email-address" type="email" placeholder="Enter your email" name="email" autoComplete="email" required defaultValue={email.defaultValue} />
<Text size="sm" className="text-danger-foreground">
{email.error}
</Text>
</div>
<Button type="submit">I want my tips</Button>
</div>
</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">
<blockquote className="flex p-12 text-xl font-semibold leading-8 tracking-tight text-muted-900 xl:grow xl:items-center">
<p>“I thought the website was good. But the newsletter? Even better!”</p>
</blockquote>
<figcaption className="flex items-center gap-x-4 border-t border-muted-900/10 px-6 py-4">
{/* <img
className="h-10 w-10 flex-none rounded-full bg-muted-50"
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=1024&amp;h=1024&amp;q=80"
alt=""
/> */}
<div className="flex-auto">
<Text size="sm" className="font-semibold">
Keeran Flanegan
</Text>
</div>
</figcaption>
</figure>
</div>
<Button type="submit" disabled={navigation.state === 'submitting'}>
I want my tips
</Button>
</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">
<blockquote className="flex p-12 text-xl font-semibold leading-8 tracking-tight text-muted-900 xl:grow xl:items-center">
<p>“I thought the website was good. But the newsletter? Even better!”</p>
</blockquote>
<figcaption className="flex items-center gap-x-4 border-t border-muted-900/10 px-6 py-4">
<div className="flex-auto">
<Text size="sm" className="font-semibold">
Keeran Flanegan
</Text>
</div>
</figcaption>
</figure>
</div>
</>
</div>
)
}

Expand Down
2 changes: 1 addition & 1 deletion app/routes/_auth+/signup/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { SignupEmail } from './email.server.tsx'

export const onboardingOTPQueryParam = 'code'
export const onboardingEmailQueryParam = 'email'
export const verificationType = 'onboarding'
export const verificationType = 'signup'

const signupSchema = z.object({
email: emailSchema,
Expand Down
14 changes: 14 additions & 0 deletions app/routes/_marketing+/components/bg-spicy.tsx
Original file line number Diff line number Diff line change
@@ -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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions app/routes/_marketing+/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { LinksFunction, V2_MetaFunction } from '@remix-run/node'
import HeroAndre from './components/hero-andre.tsx'
import Brands from './components/brands.tsx'
/* import { Newsletter } from '~/components/newsletter.tsx' */
import { Newsletter } from '~/components/newsletter.tsx'
import { Container } from '~/components/ui/container.tsx'
import { Icon } from '~/components/ui/icon.tsx'
import { Text } from '~/components/ui/text.tsx'
Expand Down Expand Up @@ -87,11 +87,11 @@ export default function Index() {
</dl>
</div>
</div>
{/* <Newsletter
<Newsletter
className="mt-32 sm:mt-56"
title="Get exclusive web dev tips that I only share with email subscribers"
description="Golden nuggets of code knowledge you can read in 5 minutes. Delivered to your inbox every 2 weeks."
/> */}
/>
</Container>
</>
)
Expand Down
15 changes: 0 additions & 15 deletions app/routes/_marketing+/newsletter.tsx

This file was deleted.

39 changes: 39 additions & 0 deletions app/routes/_marketing+/newsletter/email/verify.server.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
Loading

0 comments on commit 49e803a

Please sign in to comment.