From 48f9d28f58d0b22de97524f30eba19d2405f2eb0 Mon Sep 17 00:00:00 2001
From: Jared Palmer <hello@jaredpalmer.com>
Date: Fri, 22 Aug 2025 15:42:03 -0400
Subject: [PATCH] Clean up email template CSS and remove inline styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replaced inline styles with CSS classes in new-template.ts
- Replaced inline styles with CSS classes in old-template.ts
- Added structured CSS classes for story elements, containers, and wrappers
- Verified juice properly inlines all CSS styles for email compatibility
- Improved code maintainability by separating styling from markup

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 lib/email/templates/new-template.ts | 111 +++++++++++++++++++++++-----
 lib/email/templates/old-template.ts |  18 +++--
 2 files changed, 107 insertions(+), 22 deletions(-)

diff --git a/lib/email/templates/new-template.ts b/lib/email/templates/new-template.ts
index bb08738..e5bc698 100644
--- a/lib/email/templates/new-template.ts
+++ b/lib/email/templates/new-template.ts
@@ -59,36 +59,36 @@ const renderElements = (elements: EmailElement[]): string => {
         case 'url':
           // Modern story structure with better spacing
           return `
-            <table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin-bottom: 30px;">
+            <table class="story-container" width="100%" border="0" cellpadding="0" cellspacing="0">
               <tr>
-                <td style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
-                  <h3 style="margin: 0 0 8px 0; font-size: 20px; font-weight: 600; line-height: 1.3; mso-line-height-rule: exactly;">
-                    <a href="${element.url || '#'}" style="color: #111111; text-decoration: none;">${element.title || 'Untitled'}</a>
+                <td class="story-cell">
+                  <h3 class="story-title">
+                    <a href="${element.url || '#'}" class="story-title-link">${element.title || 'Untitled'}</a>
                   </h3>
-                  <p style="margin: 0 0 8px 0; font-size: 16px; line-height: 1.5; color: #666666; mso-line-height-rule: exactly;">
+                  <p class="story-description">
                     ${element.description || element.content || ''}
                   </p>
-                  <p style="margin: 0; font-size: 14px; color: #999999; mso-line-height-rule: exactly;">
+                  <p class="story-meta">
                     ${element.author ? `<span>${element.author}</span> · ` : ''}
-                    <a href="${element.url || '#'}" style="color: #0070ff; text-decoration: none;">Read more ›</a>
+                    <a href="${element.url || '#'}" class="story-readmore">Read more ›</a>
                   </p>
                 </td>
               </tr>
             </table>`
         case 'markdown':
           return `
-            <table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin-bottom: 30px;">
+            <table class="markdown-container" width="100%" border="0" cellpadding="0" cellspacing="0">
               <tr>
-                <td style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
+                <td class="markdown-cell">
                   ${renderMarkdown(element.content || '')}
                 </td>
               </tr>
             </table>`
         case 'html':
           return `
-            <table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; margin-bottom: 30px;">
+            <table class="html-container" width="100%" border="0" cellpadding="0" cellspacing="0">
               <tr>
-                <td style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;">
+                <td class="html-cell">
                   ${element.content || ''}
                 </td>
               </tr>
@@ -162,9 +162,34 @@ export function createNewTemplate({
       line-height: 100%;
     }
     /* Container styles */
+    .wrapper {
+      -webkit-font-smoothing: antialiased;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+      font-size: 16px;
+      max-width: 550px;
+      width: 100% !important;
+    }
+    .wrapper-cell {
+      border-collapse: collapse;
+      mso-table-lspace: 0pt;
+      mso-table-rspace: 0pt;
+    }
     .container {
       width: 100%;
       max-width: 550px;
+      border-collapse: collapse;
+    }
+    .header-cell {
+      border-collapse: collapse;
+      mso-table-lspace: 0pt;
+      mso-table-rspace: 0pt;
+      padding: 30px 20px;
+    }
+    .content-cell {
+      border-collapse: collapse;
+      mso-table-lspace: 0pt;
+      mso-table-rspace: 0pt;
+      padding: 0 20px;
     }
     .padding {
       padding: 0 20px;
@@ -278,6 +303,58 @@ export function createNewTemplate({
       line-height: 1.4;
       color: #0070ff;
     }
+    /* Story container styles */
+    .story-container {
+      border-collapse: collapse;
+      margin-bottom: 30px;
+    }
+    .story-cell {
+      border-collapse: collapse;
+      mso-table-lspace: 0pt;
+      mso-table-rspace: 0pt;
+      padding: 0;
+    }
+    .story-title {
+      margin: 0 0 8px 0;
+      font-size: 20px;
+      font-weight: 600;
+      line-height: 1.3;
+      mso-line-height-rule: exactly;
+    }
+    .story-title-link {
+      color: #111111;
+      text-decoration: none;
+    }
+    .story-description {
+      margin: 0 0 8px 0;
+      font-size: 16px;
+      line-height: 1.5;
+      color: #666666;
+      mso-line-height-rule: exactly;
+    }
+    .story-meta {
+      margin: 0;
+      font-size: 14px;
+      color: #999999;
+      mso-line-height-rule: exactly;
+    }
+    .story-readmore {
+      color: #0070ff;
+      text-decoration: none;
+    }
+    /* Element container styles */
+    .markdown-container,
+    .html-container {
+      border-collapse: collapse;
+      margin-bottom: 30px;
+    }
+    .markdown-cell,
+    .html-cell {
+      border-collapse: collapse;
+      mso-table-lspace: 0pt;
+      mso-table-rspace: 0pt;
+      padding: 0;
+    }
     /* Markdown content now wrapped in tables */
     .markdown-p {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -503,24 +580,24 @@ export function createNewTemplate({
   </head>
   <body id="body" style="margin: 0; padding: 0;">
     <!-- Preheader text optimized for inbox preview -->
-    <div style="color: transparent; visibility: hidden; opacity: 0; font-size: 0px; border: 0; max-height: 1px; width: 1px; margin: 0px; padding: 0px; border-width: 0px !important; display: none !important; line-height: 0px !important;">
+    <div class="preheader">
       <span>${meta.preheader || meta.subject || ''}</span>
       &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;
       &nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;&nbsp;&zwnj;
     </div>
     
     <!-- Simplified container structure -->
-    <table id="wrapper" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="-webkit-font-smoothing: antialiased; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; max-width: 550px; width: 100% !important;">
+    <table id="wrapper" class="wrapper" width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
       <!--[if mso]>
       <tr><td>
       <table border="0" cellpadding="0" cellspacing="0" width="550">
       <![endif]-->
       <tr>
-        <td style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt;">
-          <table border="0" cellpadding="0" cellspacing="0" width="100%" class="container" style="border-collapse: collapse;">
+        <td class="wrapper-cell">
+          <table border="0" cellpadding="0" cellspacing="0" width="100%" class="container">
             <!-- Header -->
             <tr>
-              <td align="center" style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 30px 20px;">
+              <td align="center" class="header-cell">
                 <h1><a class="logo" href="${preset.url}">${preset.title}</a></h1>
                 <p class="tagline">${preset.subtitle}</p>
                 <p class="date">${formatDate(meta.date || new Date().toISOString())}</p>
@@ -529,7 +606,7 @@ export function createNewTemplate({
             
             <!-- Content -->
             <tr>
-              <td style="border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0 20px;" class="padding">
+              <td class="content-cell padding">
                 ${renderElements(elements)}
               </td>
             </tr>
diff --git a/lib/email/templates/old-template.ts b/lib/email/templates/old-template.ts
index 87f4e90..20cd1ee 100644
--- a/lib/email/templates/old-template.ts
+++ b/lib/email/templates/old-template.ts
@@ -58,18 +58,20 @@ const renderElements = (elements: EmailElement[]): string => {
       switch (element.kind) {
         case 'url':
           const cta = 'Read More'
-          return `<h3><a class="story-title" href="${element.url || '#'}">${element.title || 'Untitled'}</a></h3>
+          return `<div class="story-wrapper">
+            <h3><a class="story-title" href="${element.url || '#'}">${element.title || 'Untitled'}</a></h3>
             <p class="story-excerpt"><a class="story-excerpt-link" href="${element.url || '#'}">${element.description || element.content || ''}</a></p>
-            <p class="story-author"><a class="story-author-link" href="${element.url || '#'}">${cta}<span class="more"> · ${element.author || ''}</span></a></p>`
+            <p class="story-author"><a class="story-author-link" href="${element.url || '#'}">${cta}<span class="more"> · ${element.author || ''}</span></a></p>
+          </div>`
         case 'markdown':
           return `<div class="markdown-content">${renderMarkdown(element.content || '')}</div>`
         case 'html':
-          return element.content || ''
+          return `<div class="html-content">${element.content || ''}</div>`
         default:
           return ''
       }
     })
-    .join(' ')
+    .join('')
 }
 
 export function createOldTemplate({ 
@@ -226,6 +228,9 @@ export function createOldTemplate({
       color: inherit;
       text-decoration: none;
     }
+    .story-wrapper {
+      margin-bottom: 36px;
+    }
     .story-title {
       text-decoration: none;
       color: #141823;
@@ -238,7 +243,7 @@ export function createOldTemplate({
       color: #595f6c;
     }
     .story-author {
-      margin-bottom: 36px;
+      margin-bottom: 0;
     }
     .story-author-link {
       text-decoration: none;
@@ -247,6 +252,9 @@ export function createOldTemplate({
     .story-author .more {
       color: #595f6c;
     }
+    .html-content {
+      margin-bottom: 36px;
+    }
     .logo {
       color: #141823;
       font-size: 38px;