Skip to content

Commit d16cfc9

Browse files
tylootyloo
committed
chore: added newsletter form
Signed-off-by: tyloo <[email protected]>
1 parent 93fbecf commit d16cfc9

File tree

10 files changed

+236
-4
lines changed

10 files changed

+236
-4
lines changed

‎src/app/page.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import NewsletterForm from '@/components/newsletter-form'
12
import Intro from '@/components/sections/intro'
23
import RecentPosts from '@/components/sections/recent-posts'
34
import RecentProjects from '@/components/sections/recent-projects'
@@ -11,6 +12,8 @@ export default async function HomePage() {
1112
<RecentPosts />
1213

1314
<RecentProjects />
15+
16+
<NewsletterForm />
1417
</div>
1518
</section>
1619
)

‎src/app/posts/[slug]/page.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ export default async function PostPage({
4646
alt={title || ''}
4747
className='object-cover'
4848
fill
49+
sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw'
50+
priority
4951
/>
5052
</div>
5153
)}

‎src/app/projects/[slug]/page.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@ export default async function ProjectPage({
4646
alt={title || ''}
4747
className='object-cover'
4848
fill
49+
sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw'
50+
priority
4951
/>
5052
</div>
5153
)}

‎src/components/newsletter-form.tsx

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
'use client'
2+
3+
import { z } from 'zod'
4+
import Link from 'next/link'
5+
import { toast } from 'sonner'
6+
import { SubmitHandler, useForm } from 'react-hook-form'
7+
import { zodResolver } from '@hookform/resolvers/zod'
8+
import ReCAPTCHA from 'react-google-recaptcha'
9+
import { NewsletterFormSchema } from '@/lib/schemas'
10+
import { Button } from '@/components/ui/button'
11+
import { Input } from '@/components/ui/input'
12+
import { useRef, useState } from 'react'
13+
import { Card, CardContent } from '@/components/ui/card'
14+
import { subscribe } from '@/lib/actions'
15+
16+
type Inputs = z.infer<typeof NewsletterFormSchema>
17+
18+
export default function NewsletterForm() {
19+
const captchaRef = useRef<ReCAPTCHA>(null)
20+
const [captchaEnabled, setCaptchaEnabled] = useState(false)
21+
22+
const {
23+
watch,
24+
register,
25+
handleSubmit,
26+
reset,
27+
formState: { errors, isSubmitting }
28+
} = useForm<Inputs>({
29+
resolver: zodResolver(NewsletterFormSchema),
30+
defaultValues: {
31+
email: '',
32+
captcha: ''
33+
}
34+
})
35+
36+
const [email] = watch(['email'])
37+
38+
if (email && !captchaEnabled) {
39+
setCaptchaEnabled(true)
40+
}
41+
42+
const processForm: SubmitHandler<Inputs> = async data => {
43+
const result = await subscribe(data)
44+
45+
if (result?.error) {
46+
toast.error('An error occurred! Please try again.')
47+
return
48+
}
49+
50+
toast.success('Subscribed successfully!')
51+
reset()
52+
}
53+
54+
return (
55+
<section>
56+
<Card className='rounded-lg border-0 dark:border'>
57+
<CardContent className='flex flex-col gap-8 pt-6 md:flex-row md:justify-between md:pt-8'>
58+
<div>
59+
<h2 className='text-2xl font-bold'>Subscribe to my newsletter</h2>
60+
<p className='text-muted-foreground'>
61+
Get updates on my work and projects.
62+
</p>
63+
</div>
64+
65+
<form
66+
onSubmit={handleSubmit(processForm)}
67+
className='flex flex-col items-start gap-3'
68+
>
69+
<div className='w-full'>
70+
<Input
71+
type='email'
72+
id='email'
73+
autoComplete='email'
74+
placeholder='Email'
75+
className='w-full'
76+
{...register('email')}
77+
/>
78+
79+
{errors.email?.message && (
80+
<p className='ml-1 mt-2 text-sm text-rose-400'>
81+
{errors.email.message}
82+
</p>
83+
)}
84+
</div>
85+
86+
<div className='w-full'>
87+
<Button
88+
type='submit'
89+
disabled={isSubmitting}
90+
className='w-full disabled:opacity-50'
91+
>
92+
{isSubmitting ? 'Submitting...' : 'Subscribe'}
93+
</Button>
94+
</div>
95+
96+
<div>
97+
<p className='text-xs text-muted-foreground'>
98+
We care about your data. Read our{' '}
99+
<Link href='/privacy' className='font-bold'>
100+
privacy&nbsp;policy.
101+
</Link>
102+
</p>
103+
</div>
104+
105+
{captchaEnabled && (
106+
<ReCAPTCHA
107+
ref={captchaRef}
108+
size='invisible'
109+
sitekey={process.env.NEXT_PUBLIC_CAPTCHA!}
110+
/>
111+
)}
112+
</form>
113+
</CardContent>
114+
</Card>
115+
</section>
116+
)
117+
}

‎src/components/providers.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client'
22

33
import { ThemeProvider, useTheme } from 'next-themes'
4-
import { Toaster } from './ui/sonner'
4+
import { Toaster } from '@/components/ui/sonner'
55

66
export default function Providers({ children }: { children: React.ReactNode }) {
77
return (

‎src/components/sections/intro.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,9 @@ export default function Intro() {
1616
</div>
1717
<div className='relative'>
1818
<Image
19-
className='flex-1 rounded-lg'
2019
src={authorImage}
2120
alt="Julien 'Tyloo' Bonvarlet"
21+
className='flex-1 rounded-lg'
2222
width={200}
2323
height={267}
2424
priority

‎src/components/sections/projects.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ export default function Projects({
1919
src={project.image}
2020
alt={project.title || ''}
2121
fill
22+
sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw'
2223
className='rounded-lg object-cover object-center transition-transform duration-500 group-hover:scale-105'
24+
priority
2325
/>
2426
</div>
2527
)}

‎src/components/ui/card.tsx

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import * as React from "react"
2+
3+
import { cn } from "@/lib/utils"
4+
5+
const Card = React.forwardRef<
6+
HTMLDivElement,
7+
React.HTMLAttributes<HTMLDivElement>
8+
>(({ className, ...props }, ref) => (
9+
<div
10+
ref={ref}
11+
className={cn(
12+
"rounded-xl border bg-card text-card-foreground shadow",
13+
className
14+
)}
15+
{...props}
16+
/>
17+
))
18+
Card.displayName = "Card"
19+
20+
const CardHeader = React.forwardRef<
21+
HTMLDivElement,
22+
React.HTMLAttributes<HTMLDivElement>
23+
>(({ className, ...props }, ref) => (
24+
<div
25+
ref={ref}
26+
className={cn("flex flex-col space-y-1.5 p-6", className)}
27+
{...props}
28+
/>
29+
))
30+
CardHeader.displayName = "CardHeader"
31+
32+
const CardTitle = React.forwardRef<
33+
HTMLParagraphElement,
34+
React.HTMLAttributes<HTMLHeadingElement>
35+
>(({ className, ...props }, ref) => (
36+
<h3
37+
ref={ref}
38+
className={cn("font-semibold leading-none tracking-tight", className)}
39+
{...props}
40+
/>
41+
))
42+
CardTitle.displayName = "CardTitle"
43+
44+
const CardDescription = React.forwardRef<
45+
HTMLParagraphElement,
46+
React.HTMLAttributes<HTMLParagraphElement>
47+
>(({ className, ...props }, ref) => (
48+
<p
49+
ref={ref}
50+
className={cn("text-sm text-muted-foreground", className)}
51+
{...props}
52+
/>
53+
))
54+
CardDescription.displayName = "CardDescription"
55+
56+
const CardContent = React.forwardRef<
57+
HTMLDivElement,
58+
React.HTMLAttributes<HTMLDivElement>
59+
>(({ className, ...props }, ref) => (
60+
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
61+
))
62+
CardContent.displayName = "CardContent"
63+
64+
const CardFooter = React.forwardRef<
65+
HTMLDivElement,
66+
React.HTMLAttributes<HTMLDivElement>
67+
>(({ className, ...props }, ref) => (
68+
<div
69+
ref={ref}
70+
className={cn("flex items-center p-6 pt-0", className)}
71+
{...props}
72+
/>
73+
))
74+
CardFooter.displayName = "CardFooter"
75+
76+
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

‎src/lib/actions.ts

+30-1
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22

33
import { z } from 'zod'
44
import { Resend } from 'resend'
5-
import { ContactFormSchema } from '@/lib/schemas'
5+
import { ContactFormSchema, NewsletterFormSchema } from '@/lib/schemas'
66
import ContactFormEmail from '@/emails/contact-form-email'
77

88
type ContactFormInputs = z.infer<typeof ContactFormSchema>
9+
type NewsletterFormInputs = z.infer<typeof NewsletterFormSchema>
910
const resend = new Resend(process.env.RESEND_API_KEY)
1011

1112
async function checkRecaptcha(recaptcha: string): Promise<boolean> {
@@ -58,3 +59,31 @@ export async function sendEmail(data: ContactFormInputs) {
5859
return { error }
5960
}
6061
}
62+
63+
export async function subscribe(data: NewsletterFormInputs) {
64+
const result = NewsletterFormSchema.safeParse(data)
65+
66+
if (result.error) {
67+
return { error: result.error.format() }
68+
}
69+
70+
try {
71+
checkRecaptcha(result.data.captcha)
72+
73+
const { email } = result.data
74+
const { data, error } = await resend.contacts.create({
75+
email: email,
76+
audienceId: process.env.RESEND_AUDIENCE_ID as string
77+
})
78+
79+
if (!data || error) {
80+
throw new Error('Failed to subscribe')
81+
}
82+
83+
// TODO: Send a welcome email
84+
85+
return { success: true }
86+
} catch (error) {
87+
return { error }
88+
}
89+
}

‎src/lib/schemas.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,6 @@ export const ContactFormSchema = z.object({
1111
})
1212

1313
export const NewsletterFormSchema = z.object({
14-
email: z.string().email('Invalid email.')
14+
email: z.string().email('Invalid email.'),
15+
captcha: z.string().min(1, 'Captcha is required.')
1516
})

0 commit comments

Comments
 (0)