diff --git a/Gemfile.lock b/Gemfile.lock index f9aab626..25830e6d 100644 --- a/Gemfile.lock +++ b/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) diff --git a/app/assets/builds/pages_core/mailer.css b/app/assets/builds/pages_core/mailer.css new file mode 100644 index 00000000..b1682a31 --- /dev/null +++ b/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; + } diff --git a/app/assets/stylesheets/pages_core/admin.postcss.css b/app/assets/stylesheets/pages_core/admin.css similarity index 100% rename from app/assets/stylesheets/pages_core/admin.postcss.css rename to app/assets/stylesheets/pages_core/admin.css diff --git a/app/assets/stylesheets/pages_core/mailer.css b/app/assets/stylesheets/pages_core/mailer.css new file mode 100644 index 00000000..a194edc2 --- /dev/null +++ b/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; + } +} diff --git a/app/mailers/admin_mailer.rb b/app/mailers/admin_mailer.rb index e9ef8d55..7e8bf91c 100644 --- a/app/mailers/admin_mailer.rb +++ b/app/mailers/admin_mailer.rb @@ -2,23 +2,19 @@ class AdminMailer < ApplicationMailer default from: proc { "\"Pages\" " } - 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 diff --git a/app/views/admin_mailer/account_recovery.html.erb b/app/views/admin_mailer/account_recovery.html.erb new file mode 100644 index 00000000..a4d78824 --- /dev/null +++ b/app/views/admin_mailer/account_recovery.html.erb @@ -0,0 +1,20 @@ +

+ Recover your account +

+

+ Hi, <%= @user.name %>! +

+

+ We've received a request to recover your account on + <%= PagesCore.config(:site_name) %>. +

+

+ Please click the following link to continue:
+ <%= link_to(@url, @url) %> +

+

+ The link will expire in 24 hours. +

+

+ If you do not want to recover your password, please ignore this email. +

diff --git a/app/views/admin_mailer/account_recovery.text.erb b/app/views/admin_mailer/account_recovery.text.erb deleted file mode 100644 index 6054a119..00000000 --- a/app/views/admin_mailer/account_recovery.text.erb +++ /dev/null @@ -1,10 +0,0 @@ -Hi, <%= @user.name %>! - -We've received a request to recover your account on <%= PagesCore.config(:site_name) %>. - -Please click the following link to continue: -<%= @url %> - -The link will expire in 24 hours. - -If you do not want to recover your password, please ignore this email. diff --git a/app/views/admin_mailer/invite.html.erb b/app/views/admin_mailer/invite.html.erb new file mode 100644 index 00000000..d4f1fad3 --- /dev/null +++ b/app/views/admin_mailer/invite.html.erb @@ -0,0 +1,11 @@ +

+ Welcome! +

+

+ <%= @invite.user.name %> has invited you to Pages on + <%= PagesCore.config(:site_name) %>.
+ Click the button below to create your account and get started. +

+
+ <%= link_to("Create account", @url, class: "primary button") %> +
diff --git a/app/views/admin_mailer/invite.text.erb b/app/views/admin_mailer/invite.text.erb deleted file mode 100644 index d67b1e96..00000000 --- a/app/views/admin_mailer/invite.text.erb +++ /dev/null @@ -1,7 +0,0 @@ -Welcome! - -<%= @invite.user.name %> has invited you to Pages on <%= PagesCore.config(:site_name) %>. - -Click the link below to create your account and get started. - -<%= @url %> diff --git a/app/views/layouts/pages_core/mailer.html.erb b/app/views/layouts/pages_core/mailer.html.erb new file mode 100644 index 00000000..4c0b743d --- /dev/null +++ b/app/views/layouts/pages_core/mailer.html.erb @@ -0,0 +1,11 @@ + + + + + <%= stylesheet_link_tag "pages_core/mailer" %> + + + + <%= yield %> + + diff --git a/lib/pages_core.rb b/lib/pages_core.rb index 31dca2ea..483e05f2 100644 --- a/lib/pages_core.rb +++ b/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" diff --git a/lib/pages_core/engine.rb b/lib/pages_core/engine.rb index e107e987..41b4f626 100644 --- a/lib/pages_core/engine.rb +++ b/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 diff --git a/package.json b/package.json index cf8ff2e1..72119e7f 100644 --- a/package.json +++ b/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" }, diff --git a/pages_core.gemspec b/pages_core.gemspec index fe96469e..7dbf7a90 100644 --- a/pages_core.gemspec +++ b/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"