RyderTech/nlcc-itinerary
1
0
Fork 0
Code Issues Pull Requests Packages Activity

fix: Improve rich text formatting in emails and add button hints

Browse Source 
Fix highlighting display in emailed notes and add clear formatting hints to email/download buttons.

Changes:
- Added proper HTML/CSS structure to email template for rich text support
- Added CSS styles for mark (highlight), strong, em, u, s, headings, and lists
- Highlight now renders with yellow background (#fef08a) in emails
- All rich text formatting now properly displays in email clients
- Added formatting hints to buttons: "Email Notes (Formatting included)" and "Download Notes (No formatting)"
- Button hints use smaller text with opacity for subtle visual hierarchy

Email template improvements:
- Proper DOCTYPE and HTML structure
- Style block in head for rich text elements
- Removed white-space: pre-wrap from notes div to allow HTML rendering
- Maintained all existing sermon content styling

This ensures users understand that:
- Email preserves all rich text formatting (bold, italic, highlights, lists, etc.)
- Download converts to plain text for universal compatibility

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Joshua Ryder
2025-11-07 10:16:31 -05:00
parent 0ff37e8999
commit 1515fba6c9
2 changed files with 81 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
pages/[slug].vue
View File

@@ -135,13 +135,19 @@
class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:bg-blue-400 disabled:cursor-not-allowed font-medium transition-colors"
>
<span v-if="emailStatus === 'sending'">Sending...</span>
<span v-else>📧 Email Notes</span>
<span v-else class="flex flex-col items-center">
<span>📧 Email Notes</span>
<span class="text-xs opacity-80 mt-0.5">(Formatting included)</span>
</span>
</button>
<button
@click="downloadNotes"
class="flex-1 px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 font-medium transition-colors"
>
📥 Download Notes
<span class="flex flex-col items-center">
<span>📥 Download Notes</span>
<span class="text-xs opacity-80 mt-0.5">(No formatting)</span>
</span>
</button>
</div>
<p v-if="emailStatus === 'success'" class="mt-2 text-sm text-green-600">

97
server/utils/email.ts
View File

@@ -152,38 +152,85 @@ My Notes:
${userNotes || 'No notes taken'}
`,
html: `
<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px;">
<h1 style="color: #333; border-bottom: 3px solid #4CAF50; padding-bottom: 10px;">Sermon Notes</h1>
<!DOCTYPE html>
<html>
<head>
<style>
/* Rich text formatting styles */
mark {
background-color: #fef08a !important;
padding: 2px 4px;
border-radius: 2px;
}
strong {
font-weight: 700;
}
em {
font-style: italic;
}
u {
text-decoration: underline;
}
s {
text-decoration: line-through;
}
h2 {
font-size: 1.5em;
font-weight: 700;
margin: 1em 0 0.5em;
}
h3 {
font-size: 1.25em;
font-weight: 600;
margin: 0.75em 0 0.5em;
}
ul, ol {
padding-left: 1.5em;
margin: 0.5em 0;
}
li {
margin: 0.25em 0;
}
p {
margin: 0.5em 0;
}
</style>
</head>
<body>
<div style="font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px;">
<h1 style="color: #333; border-bottom: 3px solid #4CAF50; padding-bottom: 10px;">Sermon Notes</h1>
<div style="margin: 20px 0;">
<h2 style="color: #4CAF50; margin-bottom: 5px;">${sermonTitle}</h2>
<p style="color: #666; margin-top: 0;">${sermonDate}</p>
</div>
<div style="margin: 20px 0;">
<h2 style="color: #4CAF50; margin-bottom: 5px;">${sermonTitle}</h2>
<p style="color: #666; margin-top: 0;">${sermonDate}</p>
</div>
<div style="background-color: #E3F2FD; padding: 15px; border-radius: 5px; margin: 20px 0;">
<h3 style="color: #1976D2; margin-top: 0;">Bible References</h3>
<div style="color: #333;">${bibleReferences}</div>
</div>
<div style="background-color: #E3F2FD; padding: 15px; border-radius: 5px; margin: 20px 0;">
<h3 style="color: #1976D2; margin-top: 0;">Bible References</h3>
<div style="color: #333;">${bibleReferences}</div>
</div>
<div style="background-color: #E8F5E9; padding: 15px; border-radius: 5px; margin: 20px 0;">
<h3 style="color: #388E3C; margin-top: 0;">Personal Appliance</h3>
<div style="color: #333; white-space: pre-wrap;">${personalAppliance}</div>
</div>
<div style="background-color: #E8F5E9; padding: 15px; border-radius: 5px; margin: 20px 0;">
<h3 style="color: #388E3C; margin-top: 0;">Personal Appliance</h3>
<div style="color: #333; white-space: pre-wrap;">${personalAppliance}</div>
</div>
<div style="background-color: #F3E5F5; padding: 15px; border-radius: 5px; margin: 20px 0;">
<h3 style="color: #7B1FA2; margin-top: 0;">Pastor's Challenge</h3>
<div style="color: #333; white-space: pre-wrap;">${pastorsChallenge}</div>
</div>
<div style="background-color: #F3E5F5; padding: 15px; border-radius: 5px; margin: 20px 0;">
<h3 style="color: #7B1FA2; margin-top: 0;">Pastor's Challenge</h3>
<div style="color: #333; white-space: pre-wrap;">${pastorsChallenge}</div>
</div>
<div style="background-color: #FFF9C4; padding: 15px; border-radius: 5px; margin: 20px 0;">
<h3 style="color: #F57F17; margin-top: 0;">My Notes</h3>
<div style="color: #333; white-space: pre-wrap;">${userNotes || '<em>No notes taken</em>'}</div>
</div>
<div style="background-color: #FFF9C4; padding: 15px; border-radius: 5px; margin: 20px 0;">
<h3 style="color: #F57F17; margin-top: 0;">My Notes</h3>
<div style="color: #333;">${userNotes || '<em>No notes taken</em>'}</div>
</div>
<div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #ddd; color: #666; font-size: 12px;">
<p>This email was sent from New Life Christian Church.</p>
<div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #ddd; color: #666; font-size: 12px;">
<p>This email was sent from New Life Christian Church.</p>
</div>
</div>
</div>
</body>
</html>
`,
}