#58 Mail Previews and Templates

Summary

Using ActionMailer::Preview preview email samples without sending them. Using Zurb's Foundation for Emails, learn how to use email templates with the Ink framework.
rails email tests framework 8:31

Resources

Summary

# Terminal
rails g mailer contact

# Gemfile
gem 'inky-rb', require: 'inky'
gem 'premailer-rails'

# Terminal
rails g inky:install

# config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( foundation_emails.css )

# tests/mailers/previews/contact_mailer_preview.rb
# Preview all emails at http://localhost:3000/rails/mailers/contact_mailer
class ContactMailerPreview < ActionMailer::Preview
  # Preview this email at http://localhost:3000/rails/mailers/contact_mailer/feedback
  def feedback
    user = User.all.sample
    message = "Test message."
    ContactMailer.feedback(user, message)
  end
end

# mailer.html.erb
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width" />

    <%= stylesheet_link_tag "foundation_emails" %>
  </head>

  <body>
    <table class="body" data-made-with-foundation>
      <tr>
        <td class="center" align="center" valign="top">
          <center>
            <%= yield %>
          </center>
        </td>
      </tr>
    </table>
  </body>
</html>

# contact_mailer/feedback.html.inky
<container>
  <row class="header">
    <columns>
      <spacer size="16"></spacer>
     
      <h4 class="text-center">
        <%= @greeting %>
        <%= @user.first_name %>
        <%= @user.last_name %>,
      </h4>
    </columns>
  </row>
  <row>
    <columns>
      <spacer size="32"></spacer>
      <center>
        <img src="http://placehold.it/250x250">
      </center>
      <spacer size="16"></spacer>
      <h1 class="text-center">Forgot Your Password?</h1>
      <spacer size="16"></spacer>
      <p class="text-center"><%= @message %></p>
      <button class="large expand" href="#">Reset Password</button>
      <hr/>
      <p><small>You're getting this email because you've signed up for email updates. If you want to opt-out of future emails, <a href="#">unsubscribe here</a>.</small></p>
    </columns>
  </row>
  <spacer size="16"></spacer>
</container>