ghost 4.22.3 → 4.25.0

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/bookmark.css

@@ -1,83 +1,108 @@
-/* style.css */
-
-.kg-bookmark-card {
-    width: 100%;
+.kg-bookmark-card,
+.kg-bookmark-publisher {
     position: relative;
+    width: 100%;
 }
 
-.kg-bookmark-container {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row-reverse;
-    color: currentColor;
-    font-family: inherit;
-    text-decoration: none;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-}
-
+.kg-bookmark-container,
 .kg-bookmark-container:hover {
+    display: flex;
     text-decoration: none;
+    border-radius: 4px;
+    box-shadow: inset 0 0 0 1px rgb(124 139 154 / 25%);
+    overflow: hidden;
 }
 
 .kg-bookmark-content {
-    flex-basis: 0;
-    flex-grow: 999;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    flex-basis: 100%;
+    align-items: flex-start;
+    justify-content: flex-start;
     padding: 20px;
-    order: 1;
+    overflow: hidden;
 }
 
 .kg-bookmark-title {
+    font-size: 1.5rem;
+    line-height: 1.4em;
     font-weight: 600;
 }
 
-.kg-bookmark-metadata,
 .kg-bookmark-description {
-    margin-top: .5em;
+    display: -webkit-box;
+    font-size: 1.4rem;
+    line-height: 1.5em;
+    margin-top: 3px;
+    font-weight: 400;
+    max-height: 44px;
+    overflow-y: hidden;
+    opacity: 0.7;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
 }
 
 .kg-bookmark-metadata {
+    display: flex;
     align-items: center;
+    margin-top: 22px;
+    width: 100%;
+    font-size: 1.4rem;
+    font-weight: 500;
     white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
 }
 
-.kg-bookmark-description {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
+.kg-bookmark-metadata > *:not(img) {
+    opacity: 0.7;
 }
 
 .kg-bookmark-icon {
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    vertical-align: text-bottom;
-    margin-right: .5em;
-    margin-bottom: .05em;
+    width: 20px;
+    height: 20px;
+    margin-right: 6px;
 }
 
-.kg-bookmark-thumbnail {
-    display: flex;
-    flex-basis: 24rem;
-    flex-grow: 1;
-}
-
-.kg-bookmark-thumbnail img {
-    max-width: 100%;
-    height: auto;
-    vertical-align: bottom;
-    object-fit: cover;
+.kg-bookmark-author,
+.kg-bookmark-publisher {
+    display: inline;
 }
 
-.kg-bookmark-author {
-    white-space: nowrap;
+.kg-bookmark-publisher {
     text-overflow: ellipsis;
     overflow: hidden;
+    max-width: 240px;
+    white-space: nowrap;
+    display: block;
+    line-height: 1.65em;
+}
+
+.kg-bookmark-metadata > span:nth-of-type(2) {
+    font-weight: 400;
 }
 
-.kg-bookmark-publisher::before {
+.kg-bookmark-metadata > span:nth-of-type(2):before {
     content: "•";
-    margin: 0 .5em;
+    margin: 0 6px;
+}
+
+.kg-bookmark-metadata > span:last-of-type {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.kg-bookmark-thumbnail {
+    position: relative;
+    flex-grow: 1;
+    min-width: 33%;
+}
+
+.kg-bookmark-thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-radius: 0 4px 4px 0;
 }

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,12 +1,49 @@
 .kg-callout-card {
     display: flex;
-    padding: 16px 24px;
-    background: #f1f3f4;
+    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: 12px;
+    padding-right: 16px;
     line-height: 1.6;
     font-size: 2rem;
 }

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

@@ -1,17 +1,16 @@
 .kg-gallery-card {
-    margin: 0 0 1.5em;
+    --gap: 1.2rem;
 }
 
-.kg-gallery-card figcaption {
-    margin: -1.0em 0 1.5em;
+.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: var(--gap);
 }
 
 .kg-gallery-container {
-    display: flex;
-    flex-direction: column;
-    margin: 1.5em auto;
-    max-width: 1040px;
-    width: 100vw;
+    position: relative;
 }
 
 .kg-gallery-row {
@@ -28,9 +27,15 @@
 }
 
 .kg-gallery-row:not(:first-of-type) {
-    margin: 0.75em 0 0 0;
+    margin: var(--gap) 0 0;
 }
 
 .kg-gallery-image:not(:first-of-type) {
-    margin: 0 0 0 0.75em;
+    margin: 0 0 0 var(--gap);
 }
+
+@media (max-width: 600px) {
+    .kg-gallery-card {
+        --gap: 0.6rem;
+    }
+}

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

@@ -1,4 +1,11 @@
-a.kg-nft-card {
+.kg-nft-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+.kg-nft-card-container {
     position: static;
     display: flex;
     flex: auto;
@@ -22,31 +29,30 @@ a.kg-nft-card {
     transition: none;
 }
 
-a.kg-nft-card:hover {
+.kg-nft-card:hover {
     color: #333;
     opacity: 1.0;
     transition: none;
 }
 
-a.kg-nft-card * {
+.kg-nft-card * {
     position: static;
-    line-height: 1;
 }
 
 .kg-nft-metadata {
     padding: 2.0rem;
+    width: 100%;
 }
 
-.kg-nft-card img {
-    min-width: unset;
-    max-width: unset;
-    margin: -1px;
+.kg-nft-image {
     border-radius: 5px 5px 0 0;
+    width: 100%;
 }
 
 .kg-nft-header {
     display: flex;
     justify-content: space-between;
+    align-items: flex-start;
     gap: 20px;
 }
 
@@ -54,20 +60,23 @@ a.kg-nft-card * {
     font-family: inherit;
     font-size: 1.9rem;
     font-weight: 700;
+    line-height: 1.3em;
     min-width: unset;
     max-width: unset;
     margin: 0;
     color: #222;
 }
 
-.kg-nft-header svg {
+.kg-nft-opensea-logo {
+    margin-top: 2px;
     width: 100px;
-    height: auto;
+    object-fit: scale-down;
 }
 
 .kg-nft-creator {
     font-family: inherit;
-    margin: 0.8rem 0 0;
+    line-height: 1.4em;
+    margin: 0.4rem 0 0;
     color: #ababab;
 }
 

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

@@ -0,0 +1,58 @@
+.kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content{
+    visibility: hidden;
+    opacity: 0;
+    max-height: 0;
+    padding-top: 0px;
+}
+
+.kg-toggle-card[data-kg-toggle-state="close"] svg {
+    transform: unset;
+}
+
+.kg-toggle-card {
+    background: transparent;
+    box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
+    border-radius: 4px;
+    padding: 20px;
+}
+
+.kg-toggle-heading {
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+}
+
+.kg-toggle-card-icon {
+    height: 24px;
+    width: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 16px;
+}
+
+.kg-toggle-heading svg {
+    width: 14px;
+    color: rgba(124, 139, 154, 0.5);
+    transition: transform 0.3s;
+    transform: rotate(-180deg);
+}
+
+.kg-toggle-heading-text {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.kg-toggle-content {
+    transition: all .3s;
+    padding-top: 1.5rem;
+    max-height: 100vh;
+    overflow: hidden;
+    opacity: 1;
+}
+
+.kg-toggle-content > *+* {
+
+}

package/core/frontend/src/cards/js/toggle.js

@@ -0,0 +1,16 @@
+const toggleHeadingElements = document.getElementsByClassName("kg-toggle-heading");
+
+const toggleFn = function(event) {
+    const targetElement = event.target;
+    const parentElement = targetElement.closest('.kg-toggle-card');
+    var toggleState = parentElement.getAttribute("data-kg-toggle-state");
+    if (toggleState === 'close') {
+        parentElement.setAttribute('data-kg-toggle-state', 'open');
+    } else {
+        parentElement.setAttribute('data-kg-toggle-state', 'close');
+    }
+};
+
+for (let i = 0; i < toggleHeadingElements.length; i++) {
+    toggleHeadingElements[i].addEventListener('click', toggleFn, false);
+}

package/core/frontend/web/middleware/error-handler.js

@@ -0,0 +1,93 @@
+const hbs = require('express-hbs');
+const _ = require('lodash');
+const tpl = require('@tryghost/tpl');
+const sentry = require('../../../shared/sentry');
+
+const config = require('../../../shared/config');
+const helpers = require('../../services/routing/helpers');
+
+// @TODO: make this properly shared code
+const shared = require('../../../server/web/shared/middleware/error-handler');
+
+const messages = {
+    oopsErrorTemplateHasError: 'Oops, seems there is an error in the error template.',
+    encounteredError: 'Encountered the error: ',
+    whilstTryingToRender: 'whilst trying to render an error page for the error: '
+};
+
+const escapeExpression = hbs.Utils.escapeExpression;
+
+/**
+ * This is a bare minimum setup, which allows us to render the error page
+ * It uses the {{asset}} helper, and nothing more
+ */
+const createHbsEngine = () => {
+    const engine = hbs.create();
+    engine.registerHelper('asset', require('../../helpers/asset'));
+
+    return engine.express4();
+};
+
+const errorFallbackMessage = err => `<h1>${tpl(messages.oopsErrorTemplateHasError)}</h1>
+     <p>${tpl(messages.encounteredError)}</p>
+     <pre>${escapeExpression(err.message || err)}</pre>
+     <br ><p>${tpl(messages.whilstTryingToRender)}</p>
+     ${err.statusCode} <pre>${escapeExpression(err.message || err)}</pre>`;
+
+const themeErrorRenderer = (err, req, res, next) => {
+    // If the error code is explicitly set to STATIC_FILE_NOT_FOUND,
+    // Skip trying to render an HTML error, and move on to the basic error renderer
+    // We do this because customised 404 templates could reference the image that's missing
+    // A better long term solution might be to do this based on extension
+    if (err.code === 'STATIC_FILE_NOT_FOUND') {
+        return next(err);
+    }
+
+    // Renderer begin
+    // Format Data
+    const data = {
+        message: err.message,
+        // @deprecated Remove in Ghost 5.0
+        code: err.statusCode,
+        statusCode: err.statusCode,
+        errorDetails: err.errorDetails || []
+    };
+
+    // Template
+    // @TODO: very dirty !!!!!!
+    helpers.templates.setTemplate(req, res);
+
+    // It can be that something went wrong with the theme or otherwise loading handlebars
+    // This ensures that no matter what res.render will work here
+    // @TODO: split the error handler for assets, admin & theme to refactor this away
+    if (_.isEmpty(req.app.engines)) {
+        res._template = 'error';
+        req.app.engine('hbs', createHbsEngine());
+        req.app.set('view engine', 'hbs');
+        req.app.set('views', config.get('paths').defaultViews);
+    }
+
+    // @TODO use renderer here?!
+    // Render Call - featuring an error handler for what happens if rendering fails
+    res.render(res._template, data, (_err, html) => {
+        if (!_err) {
+            return res.send(html);
+        }
+
+        // re-attach new error e.g. error template has syntax error or misusage
+        req.err = _err;
+
+        // And then try to explain things to the user...
+        // Cheat and output the error using handlebars escapeExpression
+        return res.status(500).send(errorFallbackMessage(_err));
+    });
+};
+
+module.exports.handleThemeResponse = [
+    // Make sure the error can be served
+    shared.prepareError,
+    // Handle the error in Sentry
+    sentry.errorHandler,
+    // Render the error using theme template
+    themeErrorRenderer
+];

package/core/frontend/web/middleware/handle-image-sizes.js

@@ -1,6 +1,6 @@
 const _ = require('lodash');
 const path = require('path');
-const {GhostError} = require('@tryghost/errors');
+const {NoContentError} = require('@tryghost/errors');
 const imageTransform = require('@tryghost/image-transform');
 const storage = require('../../../server/adapters/storage');
 const activeTheme = require('../../services/theme-engine/active');
@@ -102,10 +102,7 @@ module.exports = function (req, res, next) {
             })
             .then((originalImageBuffer) => {
                 if (originalImageBuffer.length <= 0) {
-                    throw new GhostError({
-                        errorType: 'NoContentError',
-                        statusCode: 204
-                    });
+                    throw new NoContentError();
                 }
                 return imageTransform.resizeFromBuffer(originalImageBuffer, imageDimensionConfig);
             })
@@ -115,7 +112,7 @@ module.exports = function (req, res, next) {
     }).then(() => {
         next();
     }).catch(function (err) {
-        if (err.code === 'SHARP_INSTALLATION' || err.errorType === 'NoContentError') {
+        if (err.code === 'SHARP_INSTALLATION' || err.code === 'IMAGE_PROCESSING' || err.errorType === 'NoContentError') {
             return redirectToOriginal();
         }
         next(err);

package/core/frontend/web/middleware/index.js

@@ -1,4 +1,5 @@
 module.exports = {
+    errorHandler: require('./error-handler'),
     handleImageSizes: require('./handle-image-sizes'),
     redirectGhostToAdmin: require('./redirect-ghost-to-admin'),
     serveFavicon: require('./serve-favicon'),