ghost 4.22.4 → 4.25.1

package/core/frontend/apps/amp/lib/helpers/amp_content.js

@@ -143,7 +143,7 @@ function getAmperizeHTML(html, post) {
                 if (err) {
                     if (err.src) {
                         // This is a valid 500 GhostError because it means the amperize parser is unable to handle some Ghost HTML.
-                        logging.error(new errors.GhostError({
+                        logging.error(new errors.InternalServerError({
                             message: `AMP HTML couldn't be parsed: ${err.src}`,
                             code: 'AMP_PARSER_ERROR',
                             err: err,
@@ -151,7 +151,7 @@ function getAmperizeHTML(html, post) {
                             help: 'Please share this error on GitHub or https://forum.ghost.org'
                         }));
                     } else {
-                        logging.error(new errors.GhostError({err, code: 'AMP_PARSER_ERROR'}));
+                        logging.error(new errors.InternalServerError({err, code: 'AMP_PARSER_ERROR'}));
                     }
 
                     // save it in cache to prevent multiple calls to Amperize until

package/core/frontend/apps/amp/lib/views/amp.hbs

@@ -281,6 +281,18 @@
         background: var(--ghost-accent-color, #1292EE);
     }
 
+    .post-content blockquote.kg-blockquote-alt {
+        font-size: 2rem;
+        line-height: 1.7;
+        text-align: center;
+        color: #738a94;
+        padding: 1rem 6rem 1.5rem;
+    }
+
+    .post-content blockquote.kg-blockquote-alt::before {
+        display: none;
+    }
+
     .post-content :not(.kg-card):not([id]) + .kg-card {
         margin-top: 40px;
     }
@@ -457,6 +469,14 @@
         margin: 0 .5em;
     }
 
+    .kg-toggle-card-icon {
+        display: none;
+    }
+
+    .kg-toggle-content {
+        margin-top: 0.8rem;
+    }
+
     .kg-nft-card-container {
         position: relative;
         display: flex;
@@ -561,6 +581,56 @@
         color: #fff;
     }
 
+    .kg-callout-card {
+        display: flex;
+        padding: 20px 28px;
+        border-radius: 3px;
+    }
+
+    .kg-callout-card-grey {
+        background: rgba(124, 139, 154, 0.13);
+    }
+
+    .kg-callout-card-white {
+        background: transparent;
+        box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
+    }
+
+    .kg-callout-card-blue {
+        background: rgba(33, 172, 232, 0.12);
+    }
+
+    .kg-callout-card-green {
+        background: rgba(52, 183, 67, 0.12);
+    }
+
+    .kg-callout-card-yellow {
+        background: rgba(240, 165, 15, 0.13);
+    }
+
+    .kg-callout-card-red {
+        background: rgba(209, 46, 46, 0.11);
+    }
+
+    .kg-callout-card-pink {
+        background: rgba(225, 71, 174, 0.11);
+    }
+
+    .kg-callout-card-purple {
+        background: rgba(135, 85, 236, 0.12);
+    }
+
+    .kg-callout-card-accent {
+        background: var(--ghost-accent-color);
+        color: #fff;
+    }
+
+    .kg-callout-emoji {
+        padding-right: 16px;
+        line-height: 1.3;
+        font-size: 1.25em;
+    }
+
     .kg-width-full.kg-card-hascaption {
         display: grid;
         grid-template-columns: inherit;

package/core/frontend/apps/private-blogging/index.js

@@ -24,7 +24,7 @@ let checkSubdir = function checkSubdir() {
         paths = urlUtils.getSubdir().split('/');
 
         if (paths.pop() === PRIVATE_KEYWORD) {
-            logging.error(new errors.GhostError({
+            logging.error(new errors.InternalServerError({
                 message: tpl(messages.urlCannotContainPrivateSubdir.error),
                 context: tpl(messages.urlCannotContainPrivateSubdir.description),
                 help: tpl(messages.urlCannotContainPrivateSubdir.help)

package/core/frontend/helpers/url.js

@@ -6,6 +6,9 @@
 
 const {metaData} = require('../services/proxy');
 const {SafeString} = require('../services/rendering');
+const logging = require('@tryghost/logging');
+const sentry = require('../../shared/sentry');
+const errors = require('@tryghost/errors');
 
 const {getMetaDataUrl} = metaData;
 
@@ -13,7 +16,21 @@ module.exports = function url(options) {
     const absolute = options && options.hash.absolute && options.hash.absolute !== 'false';
     let outputUrl = getMetaDataUrl(this, absolute);
 
-    outputUrl = encodeURI(decodeURI(outputUrl));
+    try {
+        outputUrl = encodeURI(decodeURI(outputUrl));
+    } catch (err) {
+        // Happens when the outputURL contains an invalid URI character like "%%" or "%80"
+
+        // Send the error not to be blind to these
+        const error = new errors.IncorrectUsageError({
+            message: `The url "${outputUrl}" couldn't be escaped correctly`,
+            err: err
+        });
+        sentry.captureException(error);
+        logging.error(error);
+
+        return new SafeString('');
+    }
 
     return new SafeString(outputUrl);
 };

package/core/frontend/services/apps/index.js

@@ -18,7 +18,7 @@ module.exports = {
 
         return Promise.map(appsToLoad, appName => loader.activateAppByName(appName))
             .catch(function (err) {
-                logging.error(new errors.GhostError({
+                logging.error(new errors.InternalServerError({
                     err: err,
                     context: tpl(messages.appWillNotBeLoadedError),
                     help: tpl(messages.appWillNotBeLoadedHelp)

package/core/frontend/services/apps/loader.js

@@ -40,9 +40,9 @@ module.exports = {
 
         // Check for an activate() method on the app.
         if (!_.isFunction(app.activate)) {
-            return Promise.reject(new errors.IncorrectUsageError(
-                tpl(messages.noActivateMethodLoadingAppError, {name: name})
-            ));
+            return Promise.reject(new errors.IncorrectUsageError({
+                message: tpl(messages.noActivateMethodLoadingAppError, {name: name})
+            }));
         }
 
         // Wrapping the activate() with a when because it's possible

package/core/frontend/services/card-assets/index.js

@@ -1,16 +1,4 @@
-const debug = require('@tryghost/debug')('card-assets');
-const themeEngine = require('../theme-engine');
-
 const CardAssetService = require('./service');
 let cardAssetService = new CardAssetService();
 
-const initFn = async () => {
-    const cardAssetConfig = themeEngine.getActive().config('card_assets');
-    debug('initialising with config', cardAssetConfig);
-
-    await cardAssetService.load(cardAssetConfig);
-};
-
 module.exports = cardAssetService;
-
-module.exports.init = initFn;

package/core/frontend/services/card-assets/service.js

@@ -1,3 +1,4 @@
+const debug = require('@tryghost/debug')('card-assets');
 const Minifier = require('@tryghost/minifier');
 const _ = require('lodash');
 const path = require('path');
@@ -52,35 +53,31 @@ class CardAssetService {
     async minify(globs) {
         try {
             return await this.minifier.minify(globs);
-        } catch (err) {
-            // @TODO: Convert this back to a proper error once the underlying bug is fixed
-            if (err.code === 'EACCES') {
-                logging.warn('Ghost was not able to write card asset files due to permissions.');
+        } catch (error) {
+            if (error.code === 'EACCES') {
+                logging.error('Ghost was not able to write card asset files due to permissions.');
+                return;
             }
+
+            throw error;
         }
     }
 
     async clearFiles() {
         this.files = [];
 
-        // @deprecated switch this to use fs.rm when we drop support for Node v12
-        try {
-            await fs.unlink(path.join(this.dest, 'cards.min.css'));
-        } catch (error) {
-            // Don't worry if the file didn't exist or we don't have perms here
-            if (error.code !== 'ENOENT' && error.code !== 'EACCES') {
-                throw error;
-            }
-        }
+        const rmFile = async (name) => {
+            await fs.unlink(path.join(this.dest, name));
+        };
 
-        try {
-            await fs.unlink(path.join(this.dest, 'cards.min.js'));
-        } catch (error) {
-            // Don't worry if the file didn't exist or we don't have perms here
-            if (error.code !== 'ENOENT' && error.code !== 'EACCES') {
-                throw error;
-            }
-        }
+        let promises = [
+            // @deprecated switch this to use fs.rm when we drop support for Node v12
+            rmFile('cards.min.css'),
+            rmFile('cards.min.js')
+        ];
+
+        // We don't care if removing these files fails as it's valid for them to not exist
+        return Promise.allSettled(promises);
     }
 
     hasFile(type) {
@@ -98,10 +95,14 @@ class CardAssetService {
             this.config = cardAssetConfig;
         }
 
+        debug('loading with config', cardAssetConfig);
+
         await this.clearFiles();
 
         const globs = this.generateGlobs();
 
+        debug('globs', globs);
+
         this.files = await this.minify(globs) || [];
     }
 }

package/core/frontend/services/helpers/handlebars.js

@@ -17,7 +17,7 @@ function asyncHelperWrapper(hbsInstance, name, fn) {
         Promise.resolve(fn.call(this, context, options)).then(function asyncHelperSuccess(result) {
             cb(result);
         }).catch(function asyncHelperError(err) {
-            const wrappedErr = err instanceof errors.GhostError ? err : new errors.IncorrectUsageError({
+            const wrappedErr = errors.utils.isGhostError(err) ? err : new errors.IncorrectUsageError({
                 err: err,
                 context: 'registerAsyncThemeHelper: ' + name,
                 errorDetails: {

package/core/frontend/services/theme-engine/middleware/ensure-active-theme.js

@@ -0,0 +1,34 @@
+const errors = require('@tryghost/errors');
+const tpl = require('@tryghost/tpl');
+
+const activeTheme = require('../active');
+const settingsCache = require('../../../../shared/settings-cache');
+
+const messages = {
+    missingTheme: 'The currently active theme "{theme}" is missing.'
+};
+
+// ### Ensure Active Theme
+// Ensure there's a properly set & mounted active theme before attempting to serve a site request
+// If there is no active theme, throw an error
+// Else, ensure the active theme is mounted
+function ensureActiveTheme(req, res, next) {
+    // CASE: this means that the theme hasn't been loaded yet i.e. there is no active theme
+    if (!activeTheme.get()) {
+        // This is the one place we ACTUALLY throw an error for a missing theme as it's a request we cannot serve
+        return next(new errors.InternalServerError({
+            // We use the settingsCache here, because the setting will be set,
+            // even if the theme itself is not usable because it is invalid or missing.
+            message: tpl(messages.missingTheme, {theme: settingsCache.get('active_theme')})
+        }));
+    }
+
+    // If the active theme has not yet been mounted, mount it into express
+    if (!activeTheme.get().mounted) {
+        activeTheme.get().mount(req.app);
+    }
+
+    next();
+}
+
+module.exports = ensureActiveTheme;

package/core/frontend/services/theme-engine/middleware/index.js

@@ -0,0 +1,6 @@
+module.exports = [
+    require('./ensure-active-theme'),
+    require('./update-global-template-options'),
+    require('./update-local-template-data'),
+    require('./update-local-template-options')
+];

package/core/frontend/services/theme-engine/middleware/update-global-template-options.js

@@ -0,0 +1,116 @@
+const hbs = require('../engine');
+const urlUtils = require('../../../../shared/url-utils');
+const {api} = require('../../proxy');
+const settingsCache = require('../../../../shared/settings-cache');
+const customThemeSettingsCache = require('../../../../shared/custom-theme-settings-cache');
+const labs = require('../../../../shared/labs');
+const activeTheme = require('../active');
+
+function calculateLegacyPriceData(products) {
+    const defaultPrice = {
+        amount: 0,
+        currency: 'usd',
+        interval: 'year',
+        nickname: ''
+    };
+
+    function makePriceObject(price) {
+        const numberAmount = 0 + price.amount;
+        const dollarAmount = numberAmount ? Math.round(numberAmount / 100) : 0;
+        return {
+            valueOf() {
+                return dollarAmount;
+            },
+            amount: numberAmount,
+            currency: price.currency,
+            nickname: price.name,
+            interval: price.interval
+        };
+    }
+
+    const defaultProduct = products[0] || {};
+
+    const monthlyPrice = makePriceObject(defaultProduct.monthly_price || defaultPrice);
+
+    const yearlyPrice = makePriceObject(defaultProduct.yearly_price || defaultPrice);
+
+    const priceData = {
+        monthly: monthlyPrice,
+        yearly: yearlyPrice,
+        currency: monthlyPrice ? monthlyPrice.currency : defaultPrice.currency
+    };
+
+    return priceData;
+}
+
+async function getProductAndPricesData() {
+    try {
+        const page = await api.canary.productsPublic.browse({
+            include: ['monthly_price', 'yearly_price'],
+            limit: 'all'
+        });
+
+        return page.products;
+    } catch (err) {
+        return [];
+    }
+}
+
+function getSiteData() {
+    let siteData = settingsCache.getPublic();
+
+    // theme-only computed property added to @site
+    if (settingsCache.get('members_signup_access') === 'none') {
+        const escapedUrl = encodeURIComponent(urlUtils.urlFor({relativeUrl: '/rss/'}, true));
+        siteData.signup_url = `https://feedly.com/i/subscription/feed/${escapedUrl}`;
+    } else {
+        siteData.signup_url = '#/portal';
+    }
+
+    return siteData;
+}
+
+async function updateGlobalTemplateOptions(req, res, next) {
+    // Static information, same for every request unless the settings change
+    // @TODO: bind this once and then update based on events?
+    // @TODO: decouple theme layer from settings cache using the Content API
+    const siteData = getSiteData();
+    const labsData = labs.getAll();
+
+    const themeData = {
+        posts_per_page: activeTheme.get().config('posts_per_page'),
+        image_sizes: activeTheme.get().config('image_sizes')
+    };
+    const themeSettingsData = customThemeSettingsCache.getAll();
+    const productData = await getProductAndPricesData();
+    const priceData = calculateLegacyPriceData(productData);
+
+    let products = null;
+    let product = null;
+    if (productData.length === 1) {
+        product = productData[0];
+    } else {
+        products = productData;
+    }
+
+    // @TODO: only do this if something changed?
+    // @TODO: remove blog in a major where we are happy to break more themes
+    {
+        hbs.updateTemplateOptions({
+            data: {
+                blog: siteData,
+                site: siteData,
+                labs: labsData,
+                config: themeData,
+                price: priceData,
+                product,
+                products,
+                custom: themeSettingsData
+            }
+        });
+    }
+
+    next();
+}
+
+module.exports = updateGlobalTemplateOptions;

package/core/frontend/services/theme-engine/middleware/update-local-template-data.js

@@ -0,0 +1,9 @@
+function updateLocalTemplateData(req, res, next) {
+    // Pass 'secure' flag to the view engine
+    // so that templates can choose to render https or http 'url', see url utility
+    res.locals.secure = req.secure;
+
+    next();
+}
+
+module.exports = updateLocalTemplateData;

package/core/frontend/services/theme-engine/middleware/update-local-template-options.js

@@ -0,0 +1,57 @@
+const _ = require('lodash');
+const hbs = require('../engine');
+const urlUtils = require('../../../../shared/url-utils');
+const customThemeSettingsCache = require('../../../../shared/custom-theme-settings-cache');
+const labs = require('../../../../shared/labs');
+const preview = require('../preview');
+
+function updateLocalTemplateOptions(req, res, next) {
+    const localTemplateOptions = hbs.getLocalTemplateOptions(res.locals);
+
+    // adjust @site.url for http/https based on the incoming request
+    const siteData = {
+        url: urlUtils.urlFor('home', {secure: req.secure, trailingSlash: false}, true)
+    };
+
+    // @TODO: it would be nicer if this was proper middleware somehow...
+    const previewData = preview.handle(req, Object.keys(customThemeSettingsCache.getAll()));
+
+    // strip custom off of preview data so it doesn't get merged into @site
+    const customThemeSettingsPreviewData = previewData.custom;
+    delete previewData.custom;
+    let customData = {};
+    if (labs.isSet('customThemeSettings')) {
+        customData = customThemeSettingsPreviewData;
+    }
+
+    // update site data with any preview values from the request
+    Object.assign(siteData, previewData);
+
+    const member = req.member ? {
+        uuid: req.member.uuid,
+        email: req.member.email,
+        name: req.member.name,
+        firstname: req.member.name && req.member.name.split(' ')[0],
+        avatar_image: req.member.avatar_image,
+        subscriptions: req.member.subscriptions && req.member.subscriptions.map((sub) => {
+            return Object.assign({}, sub, {
+                default_payment_card_last4: sub.default_payment_card_last4 || '****'
+            });
+        }),
+        paid: req.member.status !== 'free'
+    } : null;
+
+    hbs.updateLocalTemplateOptions(res.locals, _.merge({}, localTemplateOptions, {
+        data: {
+            member: member,
+            site: siteData,
+            custom: customData,
+            // @deprecated: a gscan warning for @blog was added before 3.0 which replaced it with @site
+            blog: siteData
+        }
+    }));
+
+    next();
+}
+
+module.exports = updateLocalTemplateOptions;

package/core/frontend/src/cards/css/blockquote.css

@@ -0,0 +1,29 @@
+blockquote.kg-blockquote-alt {
+  background: none;
+  font-size: 2.4rem;
+  line-height: 1.7;
+  text-align: center;
+  color: var(--color-midgrey);
+  padding: 1rem 8rem 1.5rem;
+  border: 0 none;
+}
+
+blockquote.kg-blockquote-alt::before {
+  display: none;
+}
+
+@media (max-width: 800px) {
+  blockquote.kg-blockquote-alt {
+    font-size: 2.2rem;
+    padding-left: 6rem;
+    padding-right: 6rem;
+  }
+}
+
+@media (max-width: 600px) {
+  blockquote.kg-blockquote-alt {
+    font-size: 2rem;
+    padding-left: 3rem;
+    padding-right: 3rem;
+  } 
+}

package/core/frontend/src/cards/css/bookmark.css

@@ -21,6 +21,7 @@
     align-items: flex-start;
     justify-content: flex-start;
     padding: 20px;
+    overflow: hidden;
 }
 
 .kg-bookmark-title {
@@ -49,6 +50,7 @@
     width: 100%;
     font-size: 1.4rem;
     font-weight: 500;
+    white-space: nowrap;
 }
 
 .kg-bookmark-metadata > *:not(img) {
@@ -84,6 +86,11 @@
     margin: 0 6px;
 }
 
+.kg-bookmark-metadata > span:last-of-type {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .kg-bookmark-thumbnail {
     position: relative;
     flex-grow: 1;

package/core/frontend/src/cards/css/button.css

@@ -6,6 +6,10 @@
     justify-content: center;
 }
 
+.kg-button-card.kg-align-left {
+    justify-content: flex-start;
+}
+
 a.kg-btn {
     display: flex;
     position: static;

package/core/frontend/src/cards/css/callout.css

@@ -1,50 +1,58 @@
-.kg-card-callout {
+.kg-callout-card {
     display: flex;
-    align-items: center;
-    padding: 20px 28px;
+    padding: 1.2em 1.6em;
     border-radius: 3px;
 }
 
-.kg-card-callout-grey {
+.kg-callout-card-grey {
     background: rgba(124, 139, 154, 0.13);
 }
 
-.kg-card-callout-white {
+.kg-callout-card-white {
     background: transparent;
     box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
 }
 
-.kg-card-callout-blue {
+.kg-callout-card-blue {
     background: rgba(33, 172, 232, 0.12);
 }
 
-.kg-card-callout-green {
+.kg-callout-card-green {
     background: rgba(52, 183, 67, 0.12);
 }
 
-.kg-card-callout-yellow {
+.kg-callout-card-yellow {
     background: rgba(240, 165, 15, 0.13);
 }
 
-.kg-card-callout-red {
+.kg-callout-card-red {
     background: rgba(209, 46, 46, 0.11);
 }
 
-.kg-card-callout-pink {
+.kg-callout-card-pink {
     background: rgba(225, 71, 174, 0.11);
 }
 
-.kg-card-callout-purple {
+.kg-callout-card-purple {
     background: rgba(135, 85, 236, 0.12);
 }
 
-.kg-card-callout-accent {
+.kg-callout-card-accent {
     background: var(--ghost-accent-color);
     color: #fff;
 }
 
+.kg-callout-card-accent a {
+    color: #fff;
+}
+
 .kg-callout-emoji {
-    padding-right: 12px;
-    line-height: 1.6;
-    font-size: 2rem;
+    padding-right: .8em;
+    line-height: 1.3em;
+    font-size: 1.2em;
 }
+
+.kg-callout-text {
+    font-size: .95em;
+    line-height: 1.5em;
+}

package/core/frontend/src/cards/css/gallery.css

@@ -1,8 +1,12 @@
+.kg-gallery-card {
+    --gap: 1.2rem;
+}
+
 .kg-image-card:not(.kg-card-hascaption) + .kg-image-card,
 .kg-image-card:not(.kg-card-hascaption) + .kg-gallery-card,
 .kg-gallery-card:not(.kg-card-hascaption) + .kg-image-card,
 .kg-gallery-card:not(.kg-card-hascaption) + .kg-gallery-card {
-    margin-top: 1.2rem;
+    margin-top: var(--gap);
 }
 
 .kg-gallery-container {
@@ -23,9 +27,15 @@
 }
 
 .kg-gallery-row:not(:first-of-type) {
-    margin: 1.2rem 0 0;
+    margin: var(--gap) 0 0;
 }
 
 .kg-gallery-image:not(:first-of-type) {
-    margin: 0 0 0 1.2rem;
+    margin: 0 0 0 var(--gap);
 }
+
+@media (max-width: 600px) {
+    .kg-gallery-card {
+        --gap: 0.6rem;
+    }
+}