jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-18 15:05:32 -04:00
Code Issues Activity

backpedal a bit on caching

Browse Source
This commit is contained in:
Jake Jarvis
2025-04-08 09:38:44 -04:00
parent 53d6f57699
commit 30b6e02b83
17 changed files with 373 additions and 579 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
app/contact/action.ts Normal file
View File

@@ -0,0 +1,122 @@
"use server";
import { headers } from "next/headers";
import * as v from "valibot";
import { Resend } from "resend";
import * as config from "../../lib/config";
const ContactSchema = v.object({
// TODO: replace duplicate error messages with v.message() when released. see:
// https://valibot.dev/api/message/
// https://github.com/fabian-hiller/valibot/blob/main/library/src/methods/message/message.ts
name: v.pipe(v.string("Your name is required."), v.trim(), v.nonEmpty("Your name is required.")),
email: v.pipe(
v.string("Your email address is required."),
v.trim(),
v.nonEmpty("Your email address is required."),
v.email("Invalid email address.")
),
message: v.pipe(
v.string("A message is required."),
v.trim(),
v.nonEmpty("A message is required."),
v.minLength(10, "Your message must be at least 10 characters.")
),
"cf-turnstile-response": v.pipe(
// token wasn't submitted at _all_, most likely a direct POST request by a spam bot
v.string("Shoo, bot."),
// form submitted properly but token was missing, might be a forgetful human
v.nonEmpty("Just do the stinkin CAPTCHA, human! 🤖"),
// very rudimentary length check based on Cloudflare's docs
// https://developers.cloudflare.com/turnstile/troubleshooting/testing/
v.minLength("XXXX.DUMMY.TOKEN.XXXX".length),
// "A Turnstile token can have up to 2048 characters."
// https://developers.cloudflare.com/turnstile/get-started/server-side-validation/
v.maxLength(2048),
v.readonly()
),
});
export type ContactInput = v.InferInput<typeof ContactSchema>;
export type ContactState = {
success: boolean;
message: string;
errors?: v.FlatErrors<typeof ContactSchema>["nested"];
};
export const send = async (state: ContactState, payload: FormData): Promise<ContactState> => {
// TODO: remove after debugging why automated spam entries are causing 500 errors
console.debug("[contact form] received payload:", payload);
if (!process.env.RESEND_API_KEY) {
throw new Error("[contact form] 'RESEND_API_KEY' is not set.");
}
try {
const data = v.safeParse(ContactSchema, Object.fromEntries(payload));
if (!data.success) {
return {
success: false,
message: "Please make sure all fields are filled in.",
errors: v.flatten(data.issues).nested,
};
}
// try to get the client IP (for turnstile accuracy, not logging!) but no biggie if we can't
let remoteip;
try {
remoteip = (await headers()).get("x-forwarded-for");
} catch {} // eslint-disable-line no-empty
// validate captcha
const turnstileResponse = await fetch("https://challenges.cloudflare.com/turnstile/v0/siteverify", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
secret: process.env.TURNSTILE_SECRET_KEY || "1x0000000000000000000000000000000AA",
response: data.output["cf-turnstile-response"],
remoteip,
}),
cache: "no-store",
});
if (!turnstileResponse || !turnstileResponse.ok) {
throw new Error(`[contact form] turnstile validation failed: ${turnstileResponse.status}`);
}
const turnstileData = (await turnstileResponse.json()) as { success: boolean };
if (!turnstileData.success) {
return {
success: false,
message: "Did you complete the CAPTCHA? (If you're human, that is...)",
};
}
if (!process.env.RESEND_FROM_EMAIL) {
// https://resend.com/docs/api-reference/emails/send-email
console.warn("[contact form] 'RESEND_FROM_EMAIL' is not set, falling back to onboarding@resend.dev.");
}
// send email
const resend = new Resend(process.env.RESEND_API_KEY!);
await resend.emails.send({
from: `${data.output.name} <${process.env.RESEND_FROM_EMAIL || "onboarding@resend.dev"}>`,
replyTo: `${data.output.name} <${data.output.email}>`,
to: [config.authorEmail],
subject: `[${config.siteName}] Contact Form Submission`,
text: data.output.message,
});
return { success: true, message: "Thanks! You should hear from me soon." };
} catch (error) {
console.error("[contact form] fatal error:", error);
return {
success: false,
message: "Internal server error. Please try again later or shoot me an email.",
};
}
};

11
app/contact/form.tsx
View File

@@ -6,16 +6,13 @@ import Turnstile from "react-turnstile";
import clsx from "clsx";
import { CheckIcon, XIcon } from "lucide-react";
import Link from "../../components/Link";
import type { ContactInput, ContactState } from "./schema";
import { send, type ContactState, type ContactInput } from "./action";
import styles from "./form.module.css";
const ContactForm = ({
serverAction,
}: {
serverAction: (state: ContactState, payload: FormData) => Promise<ContactState>;
}) => {
const [formState, formAction, pending] = useActionState<ContactState, FormData>(serverAction, {
const ContactForm = () => {
const [formState, formAction, pending] = useActionState<ContactState, FormData>(send, {
success: false,
message: "",
});

85
app/contact/page.tsx
View File

@@ -1,13 +1,8 @@
import { headers } from "next/headers";
import * as v from "valibot";
import { Resend } from "resend";
import PageTitle from "../../components/PageTitle";
import Link from "../../components/Link";
import { addMetadata } from "../../lib/helpers/metadata";
import * as config from "../../lib/config";
import ContactForm from "./form";
import ContactSchema, { type ContactState } from "./schema";
export const metadata = addMetadata({
title: "Contact Me",
@@ -17,84 +12,6 @@ export const metadata = addMetadata({
},
});
const send = async (state: ContactState, payload: FormData): Promise<ContactState> => {
"use server";
// TODO: remove after debugging why automated spam entries are causing 500 errors
console.debug("[contact form] received payload:", payload);
if (!process.env.RESEND_API_KEY) {
throw new Error("[contact form] 'RESEND_API_KEY' is not set.");
}
try {
const data = v.safeParse(ContactSchema, Object.fromEntries(payload));
if (!data.success) {
return {
success: false,
message: "Please make sure all fields are filled in.",
errors: v.flatten(data.issues).nested,
};
}
// try to get the client IP (for turnstile accuracy, not logging!) but no biggie if we can't
let remoteip;
try {
remoteip = (await headers()).get("x-forwarded-for");
} catch {} // eslint-disable-line no-empty
// validate captcha
const turnstileResponse = await fetch("https://challenges.cloudflare.com/turnstile/v0/siteverify", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
secret: process.env.TURNSTILE_SECRET_KEY || "1x0000000000000000000000000000000AA",
response: data.output["cf-turnstile-response"],
remoteip,
}),
cache: "no-store",
});
if (!turnstileResponse || !turnstileResponse.ok) {
throw new Error(`[contact form] turnstile validation failed: ${turnstileResponse.status}`);
}
const turnstileData = (await turnstileResponse.json()) as { success: boolean };
if (!turnstileData.success) {
return {
success: false,
message: "Did you complete the CAPTCHA? (If you're human, that is...)",
};
}
if (!process.env.RESEND_FROM_EMAIL) {
// https://resend.com/docs/api-reference/emails/send-email
console.warn("[contact form] 'RESEND_FROM_EMAIL' is not set, falling back to onboarding@resend.dev.");
}
// send email
const resend = new Resend(process.env.RESEND_API_KEY!);
await resend.emails.send({
from: `${data.output.name} <${process.env.RESEND_FROM_EMAIL || "onboarding@resend.dev"}>`,
replyTo: `${data.output.name} <${data.output.email}>`,
to: [config.authorEmail],
subject: `[${config.siteName}] Contact Form Submission`,
text: data.output.message,
});
return { success: true, message: "Thanks! You should hear from me soon." };
} catch (error) {
console.error("[contact form] fatal error:", error);
return {
success: false,
message: "Internal server error. Please try again later or shoot me an email.",
};
}
};
const Page = () => {
return (
<div
@@ -127,7 +44,7 @@ const Page = () => {
.
</p>
<ContactForm serverAction={send} />
<ContactForm />
</div>
);
};

43
app/contact/schema.ts
View File

@@ -1,43 +0,0 @@
import * as v from "valibot";
export const ContactSchema = v.object({
// TODO: replace duplicate error messages with v.message() when released. see:
// https://valibot.dev/api/message/
// https://github.com/fabian-hiller/valibot/blob/main/library/src/methods/message/message.ts
name: v.pipe(v.string("Your name is required."), v.trim(), v.nonEmpty("Your name is required.")),
email: v.pipe(
v.string("Your email address is required."),
v.trim(),
v.nonEmpty("Your email address is required."),
v.email("Invalid email address.")
),
message: v.pipe(
v.string("A message is required."),
v.trim(),
v.nonEmpty("A message is required."),
v.minLength(10, "Your message must be at least 10 characters.")
),
"cf-turnstile-response": v.pipe(
// token wasn't submitted at _all_, most likely a direct POST request by a spam bot
v.string("Shoo, bot."),
// form submitted properly but token was missing, might be a forgetful human
v.nonEmpty("Just do the stinkin CAPTCHA, human! 🤖"),
// very rudimentary length check based on Cloudflare's docs
// https://developers.cloudflare.com/turnstile/troubleshooting/testing/
v.minLength("XXXX.DUMMY.TOKEN.XXXX".length),
// "A Turnstile token can have up to 2048 characters."
// https://developers.cloudflare.com/turnstile/get-started/server-side-validation/
v.maxLength(2048),
v.readonly()
),
});
export type ContactInput = v.InferInput<typeof ContactSchema>;
export type ContactState = {
success: boolean;
message: string;
errors?: v.FlatErrors<typeof ContactSchema>["nested"];
};
export default ContactSchema;