properly import and optimize/cache images in markdown files

app/contact/actions.ts

@@ -15,7 +15,7 @@ export async function sendMessage(
   try {
     // these are both backups to client-side validations just in case someone squeezes through without them. the codes
     // are identical so they're caught in the same fashion.
-    if (!formData.get("name") || !formData.get("email") || !formData.get("message")) {
+    if (!formData || !formData.get("name") || !formData.get("email") || !formData.get("message")) {
       return { success: false, message: "Please make sure that all fields are properly filled in.", payload: formData };
     }
 
@@ -30,7 +30,7 @@ export async function sendMessage(
     });
     const turnstileData = await turnstileResponse.json();
 
-    if (!turnstileData.success) {
+    if (!turnstileData || !turnstileData.success) {
       return {
         success: false,
         message: "Did you complete the CAPTCHA? (If you're human, that is...)",
@@ -44,13 +44,14 @@ export async function sendMessage(
       from: `${formData.get("name")} <${process.env.RESEND_DOMAIN ? `noreply@${process.env.RESEND_DOMAIN}` : "onboarding@resend.dev"}>`,
       replyTo: `${formData.get("name")} <${formData.get("email")}>`,
       to: [config.authorEmail],
-      subject: `[${config.siteDomain}] Contact Form Submission`,
+      subject: `[${config.siteName}] Contact Form Submission`,
       text: formData.get("message") as string,
     });
 
     return { success: true, message: "Thanks! You should hear from me soon.", payload: formData };
   } catch (error) {
     console.error(error);
+
     return {
       success: false,
       message: "Internal server error... Try again later or shoot me an old-fashioned email?",

app/contact/form.tsx

@@ -27,8 +27,8 @@ const ContactForm = () => {
         placeholder="Name"
         required
         className={styles.input}
-        defaultValue={(formState.payload?.get("name") || "") as string}
-        disabled={formState.success}
+        defaultValue={(formState?.payload?.get("name") || "") as string}
+        disabled={formState?.success}
       />
 
       <input
@@ -38,8 +38,8 @@ const ContactForm = () => {
         required
         inputMode="email"
         className={styles.input}
-        defaultValue={(formState.payload?.get("email") || "") as string}
-        disabled={formState.success}
+        defaultValue={(formState?.payload?.get("email") || "") as string}
+        disabled={formState?.success}
       />
 
       <TextareaAutosize
@@ -48,8 +48,8 @@ const ContactForm = () => {
         minRows={5}
         required
         className={styles.input}
-        defaultValue={(formState.payload?.get("message") || "") as string}
-        disabled={formState.success}
+        defaultValue={(formState?.payload?.get("message") || "") as string}
+        disabled={formState?.success}
       />
 
       <div
@@ -72,7 +72,7 @@ const ContactForm = () => {
           Markdown syntax
         </Link>{" "}
         is allowed here, e.g.: <strong>**bold**</strong>, <em>_italics_</em>, [
-        <Link href="https://jarv.is" underline={false} openInNewTab>
+        <Link href="https://jarv.is" plain>
           links
         </Link>
         ](https://jarv.is), and <code>`code`</code>.
@@ -86,7 +86,7 @@ const ContactForm = () => {
       />
 
       <div className={styles.actionRow}>
-        {!formState.success && (
+        {!formState?.success && (
           <button type="submit" disabled={pending} className={styles.submitButton}>
             {pending ? (
               <span>Sending...</span>
@@ -98,10 +98,10 @@ const ContactForm = () => {
           </button>
         )}
 
-        {formState.message && (
-          <div className={clsx(styles.result, formState.success ? styles.success : styles.error)}>
-            {formState.success ? <GoCheck className={styles.resultIcon} /> : <GoX className={styles.resultIcon} />}{" "}
-            {formState.message}
+        {formState?.message && (
+          <div className={clsx(styles.result, formState?.success ? styles.success : styles.error)}>
+            {formState?.success ? <GoCheck className={styles.resultIcon} /> : <GoX className={styles.resultIcon} />}{" "}
+            {formState?.message}
           </div>
         )}
       </div>

app/contact/page.tsx

@@ -31,9 +31,8 @@ export default function Page() {
       >
         <p>
           Fill out this quick form and I'll get back to you as soon as I can! You can also{" "}
-          <Link href="mailto:jake@jarv.is">email me directly</Link>, send me a{" "}
-          <Link href="https://fediverse.jarv.is/@jake">direct message on Mastodon</Link>, or{" "}
-          <Link href="sms:+1-617-917-3737">text me</Link>.
+          <Link href="mailto:jake@jarv.is">email me directly</Link> or send me a{" "}
+          <Link href="https://fediverse.jarv.is/@jake">direct message on Mastodon</Link>.
         </p>
         <p>
           🔐 You can grab my public key here:{" "}