chore: fix mailto support for components v2

Author: SapphoSys

src/pages/api/mailto.ts

@@ -1,17 +1,32 @@
 import type { APIRoute } from 'astro';
 
+import { formatDate } from '$utils/helpers/date';
+
 export const prerender = false;
 
-export const GET: APIRoute = async ({ request }) => {
+export const GET: APIRoute = async ({ request, redirect }) => {
   try {
     const url = new URL(request.url);
-    const mailtoUrl = decodeURIComponent(url.searchParams.get('url') || '');
+    const email = url.searchParams.get('email') || '';
+    const name = url.searchParams.get('name') || '';
+    const message = url.searchParams.get('message') || '';
 
-    if (!mailtoUrl || !mailtoUrl.toLowerCase().startsWith('mailto:')) {
-      return new Response('Invalid mailto URL', { status: 400 });
+    if (!email) {
+      return new Response('Missing email', { status: 400 });
     }
 
-    return Response.redirect(mailtoUrl, 302);
+    // Compose subject and body using the date helper for ISO
+    const subject = `Re: Message from ${name}`;
+    const isoDate = formatDate(new Date(), 'iso');
+    const body = `\n\nOn ${isoDate}, ${name} wrote:\n\n${message
+      .split('\n')
+      .map((line) => `> ${line}`)
+      .join('\n')}`;
+
+    // Properly encode subject and body for mailto
+    const mailtoUrl = `mailto:${email}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+
+    return redirect(mailtoUrl);
   } catch (error) {
     console.error('Error processing mailto URL:', error);
     return new Response('Error processing mailto URL', { status: 500 });

src/utils/forms/message.ts

@@ -2,7 +2,6 @@ import { DISCORD_CONTACT_WEBHOOK_URL, TURNSTILE_SECRET_TOKEN } from 'astro:env/s
 
 import { site } from '$utils/config';
 import { CLOUDFLARE_TURNSTILE_URL, MESSAGE_CHARACTER_LIMIT } from '$utils/constants';
-import { formatDate } from '$utils/helpers/date';
 
 export interface MessageDetails {
   name: string;
@@ -16,14 +15,12 @@ export interface SubmissionResult {
 }
 
 const returnEncodedMailtoUrl = (email: string, name: string, message: string) => {
-  const mailtoUrl = `mailto:${encodeURIComponent(email)}?subject=${encodeURIComponent(`Re: Message from ${name}`)}&body=${encodeURIComponent(
-    `%0D%0A%0D%0AOn ${formatDate(new Date(), 'iso')}, ${name} wrote:%0D%0A%0D%0A${message
-      .split('\n')
-      .map((line) => `> ${line}`)
-      .join('%0D%0A')}`
-  )}`;
-
-  return `${site.url}/api/mailto?url=${encodeURIComponent(mailtoUrl)}`;
+  const url = new URL(`${site.url}/api/mailto`);
+  url.searchParams.set('email', email);
+  url.searchParams.set('name', name);
+  url.searchParams.set('message', message);
+
+  return `<${url.href}>`;
 };
 
 const sendDiscordMessage = async (details: MessageDetails, url: string) => {
@@ -55,15 +52,8 @@ const sendDiscordMessage = async (details: MessageDetails, url: string) => {
         accent_color: 0xf38ba8,
         components: [
           {
-            type: 1,
-            components: [
-              {
-                type: 2,
-                label: 'Reply via Email',
-                style: 5,
-                url: returnEncodedMailtoUrl(details.email, details.name, details.message),
-              },
-            ],
+            type: 10,
+            content: `🔗 [Reply via email](${returnEncodedMailtoUrl(details.email, details.name, details.message)})`,
           },
         ],
       },