HTML and plain text for new post mail notifications

src/email_client.rs

@@ -33,12 +33,8 @@ impl EmailClient {
     ) -> Result<(), reqwest::Error> {
         let url = self.base_url.join("email").unwrap();
         let request_body = SendEmailRequest {
-            from: EmailField {
+            from: self.sender.as_ref(),
-                email: self.sender.as_ref(),
+            to: recipient.as_ref(),
-            },
-            to: vec![EmailField {
-                email: recipient.as_ref(),
-            }],
             subject,
             text: text_content,
             html: html_content,
@@ -61,18 +57,13 @@ impl EmailClient {
 
 #[derive(serde::Serialize)]
 struct SendEmailRequest<'a> {
-    from: EmailField<'a>,
+    from: &'a str,
-    to: Vec<EmailField<'a>>,
+    to: &'a str,
     subject: &'a str,
     text: &'a str,
     html: &'a str,
 }
 
-#[derive(serde::Serialize)]
-struct EmailField<'a> {
-    email: &'a str,
-}
-
 #[cfg(test)]
 mod tests {
     use crate::{

src/routes/admin/newsletters.rs

@@ -112,7 +112,7 @@ pub async fn publish_newsletter(
 
 fn validate_form(form: &BodyData) -> Result<(), &'static str> {
     if form.title.is_empty() {
-        return Err("The title was empty");
+        return Err("The title was empty.");
     }
     if form.html.is_empty() || form.text.is_empty() {
         return Err("The content was empty.");

src/routes/admin/posts.rs

@@ -3,7 +3,7 @@ use crate::{
     idempotency::{IdempotencyKey, save_response, try_processing},
     routes::{AdminError, AppError, enqueue_delivery_tasks, insert_newsletter_issue},
     startup::AppState,
-    templates::MessageTemplate,
+    templates::{MessageTemplate, NewPostEmailTemplate},
 };
 use anyhow::Context;
 use askama::Template;
@@ -34,7 +34,9 @@ fn validate_form(form: &CreatePostForm) -> Result<(), anyhow::Error> {
 #[tracing::instrument(name = "Creating a post", skip(connection_pool, form))]
 pub async fn create_post(
     State(AppState {
-        connection_pool, ..
+        connection_pool,
+        base_url,
+        ..
     }): State<AppState>,
     Extension(AuthenticatedUser { user_id, .. }): Extension<AuthenticatedUser>,
     Form(form): Form<CreatePostForm>,
@@ -57,7 +59,7 @@ pub async fn create_post(
         .await
         .context("Failed to insert new post in the database.")?;
 
-    let newsletter_uuid = create_newsletter(&mut transaction, &form.title, &form.content, &post_id)
+    let newsletter_uuid = create_newsletter(&mut transaction, &base_url, &form.title, &post_id)
         .await
         .context("Failed to create newsletter.")?;
 
@@ -103,14 +105,21 @@ pub async fn insert_post(
 
 #[tracing::instrument(
     name = "Creating newsletter for new post",
-    skip(transaction, title, content, _post_id)
+    skip(transaction, post_title, post_id)
 )]
 pub async fn create_newsletter(
     transaction: &mut Transaction<'static, Postgres>,
-    title: &str,
+    base_url: &str,
-    content: &str,
+    post_title: &str,
-    _post_id: &Uuid,
+    post_id: &Uuid,
 ) -> Result<Uuid, sqlx::Error> {
-    // We need to send a special link with a unique ID to determine if the user clicked it or not.
+    let template = NewPostEmailTemplate {
-    insert_newsletter_issue(transaction, title, content, content).await
+        base_url,
+        post_title,
+        post_id,
+        post_excerpt: "",
+    };
+    let html_content = template.render().unwrap();
+    let text_content = template.text_version();
+    insert_newsletter_issue(transaction, post_title, &text_content, &html_content).await
 }

src/templates.rs

@@ -1,6 +1,6 @@
-use askama::Template;
-
 use crate::domain::PostEntry;
+use askama::Template;
+use uuid::Uuid;
 
 #[derive(Template)]
 pub enum MessageTemplate {
@@ -49,3 +49,43 @@ pub struct ConfirmTemplate;
 #[derive(Template)]
 #[template(path = "../templates/404.html")]
 pub struct NotFoundTemplate;
+
+#[derive(Template)]
+#[template(path = "../templates/email/new_post.html")]
+pub struct NewPostEmailTemplate<'a> {
+    pub base_url: &'a str,
+    pub post_title: &'a str,
+    pub post_id: &'a Uuid,
+    pub post_excerpt: &'a str,
+}
+
+impl<'a> NewPostEmailTemplate<'a> {
+    pub fn text_version(&self) -> String {
+        format!(
+            r#"New post available!
+
+Hello there!
+I just published a new post that I think you'll find interesting:
+
+"{}"
+
+Read the full post: {}/posts/{}
+
+This post covers practical insights and real-world examples that I hope will be valuable for your backend development journey.
+
+Thanks for being a subscriber!
+
+Best regards,
+Alphonse
+
+---
+
+zero2prod - Building better backends with Rust
+Visit the blog: {}
+Unsubscribe: {}/unsubscribe
+
+You're receiving this because you subscribed to the zero2prod newsletter."#,
+            self.post_title, self.base_url, self.post_id, self.base_url, self.base_url,
+        )
+    }
+}

templates/email/new_post.html

@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="description" content="zero2prod newsletter" />
+        <meta name="keywords" content="newsletter, rust, axum, htmx" />
+        <title>{{ post_title }}</title>
+        <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            line-height: 1.6;
+            color: #374151;
+            margin: 0;
+            padding: 0;
+            background-color: #f9fafb;
+        }
+        .container {
+            max-width: 600px;
+            margin: 0 auto;
+            background-color: #ffffff;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+        .header {
+            background: linear-gradient(135deg, #3b82f6, #6366f1);
+            color: white;
+            padding: 32px 24px;
+            text-align: center;
+        }
+        .header h1 {
+            margin: 0;
+            font-size: 24px;
+            font-weight: 700;
+        }
+        .header p {
+            margin: 8px 0 0 0;
+            opacity: 0.9;
+            font-size: 16px;
+        }
+        .content {
+            padding: 32px 24px;
+        }
+        .post-preview {
+            background-color: #f8fafc;
+            border-left: 4px solid #3b82f6;
+            padding: 24px;
+            margin: 24px 0;
+            border-radius: 0 6px 6px 0;
+        }
+        .post-title {
+            font-size: 20px;
+            font-weight: 600;
+            color: #1f2937;
+            margin: 0 0 12px 0;
+            line-height: 1.3;
+        }
+        .post-excerpt {
+            color: #6b7280;
+            margin: 0;
+            font-size: 15px;
+        }
+        .cta-button {
+            display: inline-block;
+            background: linear-gradient(135deg, #3b82f6, #6366f1);
+            color: white;
+            padding: 14px 28px;
+            text-decoration: none;
+            border-radius: 6px;
+            font-weight: 600;
+            margin: 24px 0;
+            transition: transform 0.2s;
+        }
+        .cta-button:hover {
+            transform: translateY(-1px);
+        }
+        .footer {
+            background-color: #f8fafc;
+            padding: 24px;
+            border-top: 1px solid #e5e7eb;
+            text-align: center;
+        }
+        .footer p {
+            margin: 0;
+            font-size: 14px;
+            color: #6b7280;
+        }
+        .footer a {
+            color: #3b82f6;
+            text-decoration: none;
+        }
+        .unsubscribe {
+            font-size: 12px;
+            color: #9ca3af;
+            margin-top: 16px;
+        }
+        
+        @media only screen and (max-width: 600px) {
+            .container {
+                margin: 0;
+                border-radius: 0;
+            }
+            .header, .content, .footer {
+                padding: 24px 16px;
+            }
+            .header h1 {
+                font-size: 20px;
+            }
+            .post-preview {
+                padding: 16px;
+                margin: 16px 0;
+            }
+            .post-title {
+                font-size: 18px;
+            }
+        }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <div class="header">
+                <h1>A new post is available!</h1>
+                <p>Fresh insights on Rust backend development</p>
+            </div>
+            <div class="content">
+                <p>Hello there!</p>
+                <p>I just published a new post that I think you'll find interesting:</p>
+                <div class="post-preview">
+                    <h2 class="post-title">{{ post_title }}</h2>
+                    {% if !post_excerpt.is_empty() %}<p class="post-excerpt">{{ post_excerpt }}</p>{% endif %}
+                </div>
+                <a href="{{ base_url }}/posts/{{ post_id }}" class="cta-button">Read the full post →</a>
+                <p>
+                    This post covers practical insights and real-world examples that I hope will be valuable for your backend development journey.
+                </p>
+                <p>Thanks for being a subscriber!</p>
+                <p>
+                    Best regards,
+                    <br>
+                    <strong>Alphonse</strong>
+                </p>
+            </div>
+            <div class="footer">
+                <p>
+                    <strong>zero2prod</strong>
+                    <br>
+                    Building better backends with Rust
+                </p>
+                <p>
+                    <a href="{{ base_url }}">Visit the blog</a> •
+                    <a href="{{ base_url }}/unsubscribe">Unsubscribe</a>
+                </p>
+                <p class="unsubscribe">You're receiving this because you subscribed to the zero2prod newsletter.</p>
+            </div>
+        </div>
+    </body>
+</html>