Mailer template

Gemfile.lock

@@ -16,6 +16,7 @@ PATH
       nokogiri
       pastel
       pg_search
+      premailer-rails
       progress_bar
       rails (>= 6.0)
       rails-healthcheck (~> 1.0.3)
@@ -142,6 +143,8 @@ GEM
     country_select (9.0.0)
       countries (> 5.0, < 7.0)
     crass (1.0.6)
+    css_parser (1.17.1)
+      addressable
     date (3.3.4)
     debug_inspector (1.2.0)
     diff-lcs (1.5.1)
@@ -176,6 +179,7 @@ GEM
     globalid (1.2.1)
       activesupport (>= 6.1)
     highline (2.1.0)
+    htmlentities (4.3.4)
     i18n (1.14.5)
       concurrent-ruby (~> 1.0)
     interception (0.5)
@@ -240,6 +244,14 @@ GEM
       activerecord (>= 5.2)
       activesupport (>= 5.2)
     pmap (1.1.1)
+    premailer (1.23.0)
+      addressable
+      css_parser (>= 1.12.0)
+      htmlentities (>= 4.0.0)
+    premailer-rails (1.12.0)
+      actionmailer (>= 3)
+      net-smtp
+      premailer (~> 1.7, >= 1.7.9)
     progress_bar (1.3.3)
       highline (>= 1.6, < 3)
       options (~> 2.3.0)

app/assets/builds/pages_core/mailer.css

@@ -0,0 +1,99 @@
+body,
+input,
+textarea,
+a.button,
+a.button:visited,
+button {
+  font-family: -apple-system, BlinkMacSystemFont, Calibri, sans-serif;
+  color: #111;
+}
+
+body {
+  font-size: 1rem;
+  padding: 2rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+ol,
+p {
+  max-width: 80ch;
+  margin: 0 0 1rem 0;
+}
+
+h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, ul:last-child, ol:last-child, p:last-child {
+    margin-bottom: 0rem;
+  }
+
+h1 {
+  font-size: 2rem;
+  margin-top: 2rem;
+}
+
+h1:first-child {
+    margin-top: 0rem;
+  }
+
+a,
+a:visited {
+  color: #1d7195;
+}
+
+a:hover,
+a:focus {
+  color: #15516a;
+}
+
+button,
+a.button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: inherit;
+  font-size: 1rem;
+  line-height: 1.5;
+  border: 1px solid #aaa;
+  border-radius: 5px;
+  padding: 0.5em 0.75em;
+  background: #e8e8e8;
+  box-shadow: inset 0px 0.75em 0.75em rgba(255, 255, 255, 0.25);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+button.primary, a.button.primary {
+    background: #111;
+    border-color: #111;
+    color: #fff;
+    box-shadow: inset 0px 0.75em 0.75em rgba(255, 255, 255, 0.2);
+  }
+
+button.primary:hover, a.button.primary:hover {
+      box-shadow: inset 0px 0.75em 0.75em rgba(255, 255, 255, 0.1);
+    }
+
+.buttons,
+table {
+  margin: 1.5rem 0;
+}
+
+.buttons:last-child, table:last-child {
+    margin-bottom: 0px;
+  }
+
+table {
+  border-collapse: collapse;
+  border-top: 1px solid #ddd;
+}
+
+table th,
+  table td {
+    text-align: left;
+    padding: 0.5rem 1rem 0.5rem 0;
+    border-bottom: 1px solid #ddd;
+  }

app/assets/stylesheets/pages_core/mailer.css

@@ -0,0 +1,90 @@
+body,
+input,
+textarea,
+a.button,
+a.button:visited,
+button {
+  font-family: -apple-system, BlinkMacSystemFont, Calibri, sans-serif;
+  color: #111;
+}
+
+body {
+  font-size: 1rem;
+  padding: 2rem;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+ol,
+p {
+  max-width: 80ch;
+  margin: 0 0 1rem 0;
+  &:last-child {
+    margin-bottom: 0rem;
+  }
+}
+
+h1 {
+  font-size: 2rem;
+  margin-top: 2rem;
+  &:first-child {
+    margin-top: 0rem;
+  }
+}
+
+a,
+a:visited {
+  color: #1d7195;
+}
+a:hover,
+a:focus {
+  color: #15516a;
+}
+
+button,
+a.button {
+  appearance: none;
+  cursor: inherit;
+  font-size: 1rem;
+  line-height: 1.5;
+  border: 1px solid #aaa;
+  border-radius: 5px;
+  padding: 0.5em 0.75em;
+  background: #e8e8e8;
+  box-shadow: inset 0px 0.75em 0.75em rgba(255, 255, 255, 0.25);
+  text-decoration: none;
+
+  &.primary {
+    background: #111;
+    border-color: #111;
+    color: #fff;
+    box-shadow: inset 0px 0.75em 0.75em rgba(255, 255, 255, 0.2);
+    &:hover {
+      box-shadow: inset 0px 0.75em 0.75em rgba(255, 255, 255, 0.1);
+    }
+  }
+}
+
+.buttons,
+table {
+  margin: 1.5rem 0;
+  &:last-child {
+    margin-bottom: 0px;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  border-top: 1px solid #ddd;
+  th,
+  td {
+    text-align: left;
+    padding: 0.5rem 1rem 0.5rem 0;
+    border-bottom: 1px solid #ddd;
+  }
+}

app/mailers/admin_mailer.rb

@@ -2,23 +2,19 @@
 
 class AdminMailer < ApplicationMailer
   default from: proc { "\"Pages\" <[email protected]>" }
-  layout false
+  layout "pages_core/mailer"
 
   def account_recovery(user, url)
     @user = user
     @url = url
-    mail(
-      to: @user.email,
-      subject: "Recover your account on #{PagesCore.config(:site_name)}"
-    )
+    mail(to: @user.email,
+         subject: "Recover your account on #{PagesCore.config(:site_name)}")
   end
 
   def invite(invite, url)
     @invite = invite
     @url = url
-    mail(
-      to: @invite.email,
-      subject: "#{PagesCore.config(:site_name)} has invited you to Pages"
-    )
+    mail(to: @invite.email,
+         subject: "#{PagesCore.config(:site_name)} has invited you to Pages")
   end
 end

app/views/admin_mailer/account_recovery.html.erb

@@ -0,0 +1,20 @@
+<h1>
+  Recover your account
+</h1>
+<p>
+  Hi, <%= @user.name %>!
+</p>
+<p>
+  We've received a request to recover your account on
+  <%= PagesCore.config(:site_name) %>.
+</p>
+<p>
+  Please click the following link to continue:<br>
+  <%= link_to(@url, @url) %>
+</p>
+<p>
+  The link will expire in 24 hours.
+</p>
+<p>
+  If you do not want to recover your password, please ignore this email.
+</p>

app/views/admin_mailer/invite.html.erb

@@ -0,0 +1,11 @@
+<h1>
+  Welcome!
+</h1>
+<p>
+  <%= @invite.user.name %> has invited you to Pages on
+  <%= PagesCore.config(:site_name) %>.<br>
+  Click the button below to create your account and get started.
+</p>
+<div class="buttons">
+  <%= link_to("Create account", @url, class: "primary button") %>
+</div>

app/views/layouts/pages_core/mailer.html.erb

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <%= stylesheet_link_tag "pages_core/mailer" %>
+  </head>
+
+  <body>
+    <%= yield %>
+  </body>
+</html>

lib/pages_core.rb

@@ -29,6 +29,7 @@
 require "nokogiri"
 require "json"
 require "pg_search"
+require "premailer/rails"
 require "progress_bar"
 require "rails_i18n"
 require "RedCloth"

lib/pages_core/engine.rb

@@ -29,6 +29,7 @@ class Engine < Rails::Engine
       Rails.application.config.assets.precompile += %w[
         pages_core/admin-dist.js
         pages_core/admin.css
+        pages_core/mailer.css
         pages_core/fonts/*.ttf
         pages_core/fonts/*.woff2
         pages/favicon.gif

package.json

@@ -8,9 +8,7 @@
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": [
-    "/dist/**/*"
-  ],
+  "files": ["/dist/**/*"],
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.2.1",
     "@rails/ujs": "7.1.3-2",
@@ -56,7 +54,7 @@
     "build": "run build-debug --minify",
     "build-debug": "esbuild app/javascript/admin-dist.ts --bundle --sourcemap --outdir=app/assets/builds/pages_core --target=es2020,chrome64,edge79,firefox62,safari11.1",
     "build-dist": "tsc",
-    "build:css": "postcss ./app/assets/stylesheets/pages_core/admin.postcss.css -o ./app/assets/builds/pages_core/admin.css",
+    "build:css": "postcss ./app/assets/stylesheets/pages_core/*.css --dir ./app/assets/builds/pages_core",
     "prettier": "prettier app/javascript app/assets/stylesheets --check",
     "prettier:fix": "prettier app/javascript app/assets/stylesheets --write"
   },

pages_core.gemspec

@@ -34,6 +34,7 @@ Gem::Specification.new do |s|
   s.add_dependency "nokogiri"
   s.add_dependency "pastel"
   s.add_dependency "pg_search"
+  s.add_dependency "premailer-rails"
   s.add_dependency "progress_bar"
   s.add_dependency "rails-healthcheck", "~> 1.0.3"
   s.add_dependency "RedCloth", "~> 4.3.2"