Polish contact email subject and HTML layout

server.js

@@ -4,6 +4,15 @@ import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { Resend } from 'resend'
 
+function escapeHtml(value) {
+  return String(value)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
 const DATA_DIR = path.join(__dirname, 'data')
@@ -95,13 +104,56 @@ app.post('/api/contact', contactRateLimit, async (req, res) => {
       return
     }
 
+    const trimmedName = name.trim()
+    const trimmedEmail = email.trim()
+    const trimmedMessage = message.trim()
+    const submittedAt = new Date().toLocaleString('en-US', {
+      dateStyle: 'medium',
+      timeStyle: 'short',
+    })
+
     const resend = new Resend(process.env.RESEND_API_KEY)
     const { error } = await resend.emails.send({
       from: process.env.RESEND_FROM ?? 'Verse by Verse <onboarding@resend.dev>',
       to: [process.env.RESEND_TO ?? 'vbvwithnate@outlook.com'],
-      replyTo: email.trim(),
-      subject: `New message from Verse by Verse website — ${name.trim()}`,
-      text: `Name: ${name.trim()}\nEmail: ${email.trim()}\n\nMessage:\n${message.trim()}`,
+      replyTo: trimmedEmail,
+      subject: `Verse by Verse contact form: ${trimmedName}`,
+      text:
+        `New contact form submission\n\n` +
+        `Name: ${trimmedName}\n` +
+        `Email: ${trimmedEmail}\n` +
+        `Submitted: ${submittedAt}\n\n` +
+        `Message:\n${trimmedMessage}`,
+      html:
+        `<div style="background:#f5f1e8;padding:24px;font-family:Georgia,serif;color:#201a10;">` +
+        `<div style="max-width:680px;margin:0 auto;background:#ffffff;border:1px solid #e1d3b2;border-radius:14px;overflow:hidden;">` +
+        `<div style="background:#111111;padding:20px 24px;border-bottom:3px solid #c8860a;">` +
+        `<div style="font-family:Arial,sans-serif;font-size:12px;letter-spacing:0.32em;text-transform:uppercase;color:#c8860a;">Verse by Verse with Nate</div>` +
+        `<h1 style="margin:10px 0 0;color:#f4ead5;font-size:28px;line-height:1.2;">New Contact Form Submission</h1>` +
+        `</div>` +
+        `<div style="padding:24px;">` +
+        `<p style="margin:0 0 18px;font-family:Arial,sans-serif;font-size:15px;line-height:1.6;color:#57452b;">A new message was sent from the website contact form. Reply directly to this email to respond to <strong>${escapeHtml(trimmedName)}</strong>.</p>` +
+        `<table role="presentation" cellpadding="0" cellspacing="0" style="width:100%;border-collapse:collapse;margin-bottom:20px;">` +
+        `<tr>` +
+        `<td style="width:120px;padding:10px 0;font-family:Arial,sans-serif;font-size:13px;font-weight:700;color:#8a6d35;border-bottom:1px solid #efe4cc;">Name</td>` +
+        `<td style="padding:10px 0;font-family:Arial,sans-serif;font-size:15px;color:#201a10;border-bottom:1px solid #efe4cc;">${escapeHtml(trimmedName)}</td>` +
+        `</tr>` +
+        `<tr>` +
+        `<td style="width:120px;padding:10px 0;font-family:Arial,sans-serif;font-size:13px;font-weight:700;color:#8a6d35;border-bottom:1px solid #efe4cc;">Email</td>` +
+        `<td style="padding:10px 0;font-family:Arial,sans-serif;font-size:15px;color:#201a10;border-bottom:1px solid #efe4cc;"><a href="mailto:${escapeHtml(trimmedEmail)}" style="color:#8f5f05;text-decoration:none;">${escapeHtml(trimmedEmail)}</a></td>` +
+        `</tr>` +
+        `<tr>` +
+        `<td style="width:120px;padding:10px 0;font-family:Arial,sans-serif;font-size:13px;font-weight:700;color:#8a6d35;">Submitted</td>` +
+        `<td style="padding:10px 0;font-family:Arial,sans-serif;font-size:15px;color:#201a10;">${escapeHtml(submittedAt)}</td>` +
+        `</tr>` +
+        `</table>` +
+        `<div style="background:#fbf7ef;border:1px solid #efe4cc;border-radius:12px;padding:18px 20px;">` +
+        `<div style="margin:0 0 10px;font-family:Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:#8a6d35;">Message</div>` +
+        `<div style="font-family:Arial,sans-serif;font-size:15px;line-height:1.7;color:#201a10;white-space:pre-wrap;">${escapeHtml(trimmedMessage)}</div>` +
+        `</div>` +
+        `</div>` +
+        `</div>` +
+        `</div>`,
     })
     if (error) throw error