From eb92610df20d4285e8b55e0d404c1903f7bbb0e5 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Thu, 29 Jul 2021 15:25:09 +0100 Subject: [PATCH] Added accent color button styles to labs email template refs https://github.com/TryGhost/Team/issues/928 - duplicated email template so email-cta changes can go into the labs version - added `accentContrastColor` to template settings for using white/black depending on the accent color - added `.gh-btn-accent` styles to the email template (email-cta card already uses those for the button) --- .../services/mega/post-email-serializer.js | 10 +- core/server/services/mega/template-labs.js | 1023 +++++++++++++++++ package.json | 1 + yarn.lock | 9 +- 4 files changed, 1040 insertions(+), 3 deletions(-) create mode 100644 core/server/services/mega/template-labs.js diff --git a/core/server/services/mega/post-email-serializer.js b/core/server/services/mega/post-email-serializer.js index ba2e088d1b..6846ae2c28 100644 --- a/core/server/services/mega/post-email-serializer.js +++ b/core/server/services/mega/post-email-serializer.js @@ -1,8 +1,10 @@ const _ = require('lodash'); const juice = require('juice'); const template = require('./template'); +const labsTemplate = require('./template-labs'); const settingsCache = require('../../../shared/settings-cache'); const urlUtils = require('../../../shared/url-utils'); +const labs = require('../../../shared/labs'); const moment = require('moment-timezone'); const cheerio = require('cheerio'); const api = require('../../api'); @@ -10,6 +12,7 @@ const {URL} = require('url'); const mobiledocLib = require('../../lib/mobiledoc'); const htmlToText = require('html-to-text'); const {isUnsplashImage, isLocalContentImage} = require('@tryghost/kg-default-cards/lib/utils'); +const {textColorForBackgroundColor} = require('@tryghost/color-utils'); const logging = require('@tryghost/logging'); const ALLOWED_REPLACEMENTS = ['first_name']; @@ -154,7 +157,8 @@ const getTemplateSettings = async () => { bodyFontCategory: settingsCache.get('newsletter_body_font_category'), showBadge: settingsCache.get('newsletter_show_badge'), footerContent: settingsCache.get('newsletter_footer_content'), - accentColor: settingsCache.get('accent_color') + accentColor: settingsCache.get('accent_color'), + accentContrastColor: textColorForBackgroundColor(settingsCache.get('accent_color')).hex() }; if (templateSettings.headerImage) { @@ -244,7 +248,9 @@ const serialize = async (postModel, options = {isBrowserPreview: false, apiVersi const templateSettings = await getTemplateSettings(); - let htmlTemplate = template({post, site: getSite(), templateSettings}); + const render = labs.isSet('emailCardSegments') ? labsTemplate : template; + + let htmlTemplate = render({post, site: getSite(), templateSettings}); if (options.isBrowserPreview) { const previewUnsubscribeUrl = createUnsubscribeUrl(null); diff --git a/core/server/services/mega/template-labs.js b/core/server/services/mega/template-labs.js new file mode 100644 index 0000000000..f8566df4a7 --- /dev/null +++ b/core/server/services/mega/template-labs.js @@ -0,0 +1,1023 @@ +/* eslint indent: warn, no-irregular-whitespace: warn */ +const iff = (cond, yes, no) => (cond ? yes : no); +module.exports = ({post, site, templateSettings}) => { + const date = new Date(); + const hasFeatureImageCaption = templateSettings.showFeatureImage && post.feature_image && post.feature_image_caption; + return ` + + + + + +${post.title} + + + + + ${ post.excerpt ? post.excerpt : `${post.title} – ` } + + + + + + + + + + + + + + + + +`; +}; diff --git a/package.json b/package.json index cda4b6a39f..b66d9559c8 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "@tryghost/admin-api-schema": "2.5.0", "@tryghost/bookshelf-plugins": "0.1.4", "@tryghost/bootstrap-socket": "0.2.9", + "@tryghost/color-utils": "^0.1.0", "@tryghost/config-url-helpers": "0.1.0", "@tryghost/constants": "0.1.8", "@tryghost/debug": "0.1.3", diff --git a/yarn.lock b/yarn.lock index 7f3aa4cc96..a7323e1dad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -640,6 +640,13 @@ dependencies: long-timeout "^0.1.1" +"@tryghost/color-utils@^0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@tryghost/color-utils/-/color-utils-0.1.0.tgz#8a1be31f197d5ad899961b24e3db440038eae876" + integrity sha512-FzBH6vazZYNo+FfyltXcRq4vTiBcz0o3Em7iFETQIaMPHVSIBsPjXy5Vvhm7LaT+tyyZInXCsogfKlXynPVOqQ== + dependencies: + color "^3.2.1" + "@tryghost/config-url-helpers@0.1.0": version "0.1.0" resolved "https://registry.yarnpkg.com/@tryghost/config-url-helpers/-/config-url-helpers-0.1.0.tgz#10cb3930c19a72e4967b52c6d6450a05449a3f9d" @@ -2313,7 +2320,7 @@ color-string@^1.6.0: color-name "^1.0.0" simple-swizzle "^0.2.2" -color@^3.1.3: +color@^3.1.3, color@^3.2.1: version "3.2.1" resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164" integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==