ghost 4.21.0 → 4.22.3

package/core/frontend/helpers/asset.js

@@ -2,7 +2,7 @@
 // Usage: `{{asset "css/screen.css"}}`
 //
 // Returns the path to the specified asset.
-const {metaData} = require('../services/proxy');
+const {metaData, urlUtils} = require('../services/proxy');
 const {SafeString} = require('../services/rendering');
 
 const errors = require('@tryghost/errors');
@@ -22,6 +22,14 @@ module.exports = function asset(path, options) {
             message: tpl(messages.pathIsRequired)
         });
     }
+    if (typeof urlUtils.getSiteUrl() !== 'undefined'
+            && typeof urlUtils.getAdminUrl() !== 'undefined'
+            && urlUtils.getSiteUrl() !== urlUtils.getAdminUrl()) {
+        const target = new URL(getAssetUrl(path, hasMinFile), urlUtils.getSiteUrl());
+        return new SafeString(
+            target.href
+        );
+    }
 
     return new SafeString(
         getAssetUrl(path, hasMinFile)

package/core/frontend/helpers/ghost_head.js

@@ -5,12 +5,16 @@
 const {metaData, settingsCache, config, blogIcon, urlUtils, labs} = require('../services/proxy');
 const {escapeExpression, SafeString} = require('../services/rendering');
 
+// BAD REQUIRE
+// @TODO fix this require
+const cardAssetService = require('../services/card-assets');
+
 const logging = require('@tryghost/logging');
 const _ = require('lodash');
 const debug = require('@tryghost/debug')('ghost_head');
 const templateStyles = require('./tpl/styles');
 
-const getMetaData = metaData.get;
+const {get: getMetaData, getAssetUrl} = metaData;
 
 function writeMetaTag(property, content, type) {
     type = type || property.substring(0, 7) === 'twitter' ? 'name' : 'property';
@@ -193,6 +197,14 @@ module.exports = function ghost_head(options) { // eslint-disable-line camelcase
             if (!_.includes(context, 'amp')) {
                 head.push(getMembersHelper(options.data));
 
+                // @TODO do this in a more "frameworky" way
+                if (cardAssetService.hasFile('js')) {
+                    head.push(`<script async src="${getAssetUrl('public/cards.min.js')}"></script>`);
+                }
+                if (cardAssetService.hasFile('css')) {
+                    head.push(`<link rel="stylesheet" type="text/css" href="${getAssetUrl('public/cards.min.css')}">`);
+                }
+
                 if (!_.isEmpty(globalCodeinjection)) {
                     head.push(globalCodeinjection);
                 }

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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,109 @@
+const Minifier = require('@tryghost/minifier');
+const _ = require('lodash');
+const path = require('path');
+const fs = require('fs').promises;
+const logging = require('@tryghost/logging');
+
+class CardAssetService {
+    constructor(options = {}) {
+        // @TODO: use our config paths concept
+        this.src = options.src || path.join(__dirname, '../../src/cards');
+        this.dest = options.dest || path.join(__dirname, '../../public');
+        this.minifier = new Minifier({src: this.src, dest: this.dest});
+
+        if ('config' in options) {
+            this.config = options.config;
+        }
+
+        this.files = [];
+    }
+
+    generateGlobs() {
+        // CASE: The theme has asked for all card assets to be included by default
+        if (this.config === true) {
+            return {
+                'cards.min.css': 'css/*.css',
+                'cards.min.js': 'js/*.js'
+            };
+        }
+
+        // CASE: the theme has declared an include directive, we should include exactly these assets
+        // Include rules take precedence over exclude rules.
+        if (_.has(this.config, 'include')) {
+            return {
+                'cards.min.css': `css/(${this.config.include.join('|')}).css`,
+                'cards.min.js': `js/(${this.config.include.join('|')}).js`
+            };
+        }
+
+        // CASE: the theme has declared an exclude directive, we should include exactly these assets
+        if (_.has(this.config, 'exclude')) {
+            return {
+                'cards.min.css': `css/!(${this.config.exclude.join('|')}).css`,
+                'cards.min.js': `js/!(${this.config.exclude.join('|')}).js`
+            };
+        }
+
+        // CASE: theme has asked that no assets be included
+        // CASE: we didn't understand config, don't do anything
+        return {};
+    }
+
+    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.');
+            }
+        }
+    }
+
+    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;
+            }
+        }
+
+        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;
+            }
+        }
+    }
+
+    hasFile(type) {
+        return this.files.indexOf(`cards.min.${type}`) > -1;
+    }
+
+    /**
+     * A theme can declare which cards it supports, and we'll do the rest
+     *
+     * @param {Array|boolean} config
+     * @returns
+     */
+    async load(config) {
+        if (config) {
+            this.config = config;
+        }
+
+        await this.clearFiles();
+
+        const globs = this.generateGlobs();
+
+        this.files = await this.minify(globs) || [];
+    }
+}
+
+module.exports = CardAssetService;

package/core/frontend/services/theme-engine/config/defaults.json

@@ -1,3 +1,6 @@
 {
-    "posts_per_page": 5
+    "posts_per_page": 5,
+    "card_assets": {
+        "exclude": ["bookmark", "gallery"]
+    }
 }

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

@@ -1,6 +1,6 @@
 const _ = require('lodash');
 const defaultConfig = require('./defaults');
-const allowedKeys = ['posts_per_page', 'image_sizes'];
+const allowedKeys = ['posts_per_page', 'image_sizes', 'card_assets'];
 
 module.exports.create = function configLoader(packageJson) {
     let config = _.cloneDeep(defaultConfig);

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

@@ -0,0 +1,83 @@
+/* style.css */
+
+.kg-bookmark-card {
+    width: 100%;
+    position: relative;
+}
+
+.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:hover {
+    text-decoration: none;
+}
+
+.kg-bookmark-content {
+    flex-basis: 0;
+    flex-grow: 999;
+    padding: 20px;
+    order: 1;
+}
+
+.kg-bookmark-title {
+    font-weight: 600;
+}
+
+.kg-bookmark-metadata,
+.kg-bookmark-description {
+    margin-top: .5em;
+}
+
+.kg-bookmark-metadata {
+    align-items: center;
+    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-icon {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    vertical-align: text-bottom;
+    margin-right: .5em;
+    margin-bottom: .05em;
+}
+
+.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 {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.kg-bookmark-publisher::before {
+    content: "•";
+    margin: 0 .5em;
+}

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

@@ -0,0 +1,30 @@
+.kg-button-card {
+    display: flex;
+    position: static;
+    align-items: center;
+    width: 100%;
+    justify-content: center;
+}
+
+a.kg-btn {
+    display: flex;
+    position: static;
+    align-items: center;
+    padding: 0 2.0rem;
+    height: 4.0rem;
+    line-height: 4.0rem;
+    font-size: 1.65rem;
+    font-weight: 600;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: opacity 0.2s ease-in-out;
+}
+
+a.kg-btn:hover {
+    opacity: 0.85;
+}
+
+a.kg-btn-accent {
+    background-color: var(--ghost-accent-color);
+    color: #fff;
+}

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

@@ -0,0 +1,12 @@
+.kg-callout-card {
+    display: flex;
+    padding: 16px 24px;
+    background: #f1f3f4;
+    border-radius: 3px;
+}
+
+.kg-callout-emoji {
+    padding-right: 12px;
+    line-height: 1.6;
+    font-size: 2rem;
+}

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

@@ -0,0 +1,36 @@
+.kg-gallery-card {
+    margin: 0 0 1.5em;
+}
+
+.kg-gallery-card figcaption {
+    margin: -1.0em 0 1.5em;
+}
+
+.kg-gallery-container {
+    display: flex;
+    flex-direction: column;
+    margin: 1.5em auto;
+    max-width: 1040px;
+    width: 100vw;
+}
+
+.kg-gallery-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.kg-gallery-image img {
+    display: block;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.kg-gallery-row:not(:first-of-type) {
+    margin: 0.75em 0 0 0;
+}
+
+.kg-gallery-image:not(:first-of-type) {
+    margin: 0 0 0 0.75em;
+}

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

@@ -0,0 +1,85 @@
+a.kg-nft-card {
+    position: static;
+    display: flex;
+    flex: auto;
+    flex-direction: column;
+    text-decoration: none;
+    font-family: -apple-system, BlinkMacSystemFont,
+                'avenir next', avenir,
+                'helvetica neue', helvetica,
+                ubuntu,
+                roboto, noto,
+                'segoe ui', arial,
+                sans-serif;
+    font-size: 1.4rem;
+    font-weight: 400;
+    box-shadow: 0 2px 6px -2px rgb(0 0 0 / 10%), 0 0 1px rgb(0 0 0 / 40%);
+    width: 100%;
+    max-width: 512px;
+    color: #222;
+    background: #fff;
+    border-radius: 5px;
+    transition: none;
+}
+
+a.kg-nft-card:hover {
+    color: #333;
+    opacity: 1.0;
+    transition: none;
+}
+
+a.kg-nft-card * {
+    position: static;
+    line-height: 1;
+}
+
+.kg-nft-metadata {
+    padding: 2.0rem;
+}
+
+.kg-nft-card img {
+    min-width: unset;
+    max-width: unset;
+    margin: -1px;
+    border-radius: 5px 5px 0 0;
+}
+
+.kg-nft-header {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+}
+
+.kg-nft-header h4.kg-nft-title {
+    font-family: inherit;
+    font-size: 1.9rem;
+    font-weight: 700;
+    min-width: unset;
+    max-width: unset;
+    margin: 0;
+    color: #222;
+}
+
+.kg-nft-header svg {
+    width: 100px;
+    height: auto;
+}
+
+.kg-nft-creator {
+    font-family: inherit;
+    margin: 0.8rem 0 0;
+    color: #ababab;
+}
+
+.kg-nft-creator span {
+    font-weight: 500;
+    color: #222;
+}
+
+.kg-nft-card p.kg-nft-description {
+    font-family: inherit;
+    font-size: 1.4rem;
+    line-height: 1.4em;
+    margin: 2.0rem 0 0;
+    color: #222;
+}

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

@@ -0,0 +1,8 @@
+var images = document.querySelectorAll('.kg-gallery-image img');
+images.forEach(function (image) {
+    var container = image.closest('.kg-gallery-image');
+    var width = image.attributes.width.value;
+    var height = image.attributes.height.value;
+    var ratio = width / height;
+    container.style.flex = ratio + ' 1 0%';
+})

package/core/frontend/web/middleware/serve-public-file.js

@@ -7,7 +7,8 @@ const urlUtils = require('../../../shared/url-utils');
 const tpl = require('@tryghost/tpl');
 
 const messages = {
-    imageNotFound: 'Image not found'
+    imageNotFound: 'Image not found',
+    fileNotFound: 'File not found'
 };
 
 function createPublicFileMiddleware(file, type, maxAge) {
@@ -43,6 +44,14 @@ function createPublicFileMiddleware(file, type, maxAge) {
         // modify text files before caching+serving to ensure URL placeholders are transformed
         fs.readFile(filePath, (err, buf) => {
             if (err) {
+                // Downgrade to a simple 404 if the file didn't exist
+                if (err.code === 'ENOENT') {
+                    err = new errors.NotFoundError({
+                        message: tpl(messages.fileNotFound),
+                        code: 'PUBLIC_FILE_NOT_FOUND',
+                        property: err.path
+                    });
+                }
                 return next(err);
             }
 

package/core/frontend/web/routes.js

@@ -1,7 +1,6 @@
 const debug = require('@tryghost/debug')('routing');
 
 const routing = require('../services/routing');
-// NOTE: temporary import from the frontend, will become a backend service soon
 const urlService = require('../../server/services/url');
 const routeSettings = require('../../server/services/route-settings');
 

package/core/frontend/web/site.js

@@ -17,11 +17,15 @@ const themeEngine = require('../services/theme-engine');
 const themeMiddleware = themeEngine.middleware;
 const membersService = require('../../server/services/members');
 const offersService = require('../../server/services/offers');
+const customRedirects = require('../../server/services/redirects');
 const siteRoutes = require('./routes');
 const shared = require('../../server/web/shared');
 const mw = require('./middleware');
+const labs = require('../../shared/labs');
 
 const STATIC_IMAGE_URL_PREFIX = `/${urlUtils.STATIC_IMAGE_URL_PREFIX}`;
+const STATIC_MEDIA_URL_PREFIX = `/${constants.STATIC_MEDIA_URL_PREFIX}`;
+const STATIC_FILES_URL_PREFIX = `/${constants.STATIC_FILES_URL_PREFIX}`;
 
 let router;
 
@@ -89,7 +93,7 @@ module.exports = function setupSiteApp(options = {}) {
 
     // you can extend Ghost with a custom redirects file
     // see https://github.com/TryGhost/Ghost/issues/7707
-    shared.middlewares.customRedirects.use(siteApp);
+    siteApp.use(customRedirects.middleware);
 
     // (Optionally) redirect any requests to /ghost to the admin panel
     siteApp.use(mw.redirectGhostToAdmin());
@@ -106,16 +110,16 @@ module.exports = function setupSiteApp(options = {}) {
     siteApp.use(mw.servePublicFile('public/ghost.css', 'text/css', constants.ONE_HOUR_S));
     siteApp.use(mw.servePublicFile('public/ghost.min.css', 'text/css', constants.ONE_YEAR_S));
 
+    // Card assets
+    siteApp.use(mw.servePublicFile('public/cards.min.css', 'text/css', constants.ONE_YEAR_S));
+    siteApp.use(mw.servePublicFile('public/cards.min.js', 'text/js', constants.ONE_YEAR_S));
+
     // Serve blog images using the storage adapter
     siteApp.use(STATIC_IMAGE_URL_PREFIX, mw.handleImageSizes, storage.getStorage('images').serve());
-
-    // @TODO find this a better home
-    // We do this here, at the top level, because helpers require so much stuff.
-    // Moving this to being inside themes, where it probably should be requires the proxy to be refactored
-    // Else we end up with circular dependencies
-    // themeEngine.loadCoreHelpers();
-    // themeEngine.registerHandlebarsHelpers();
-    // debug('Helpers done');
+    // Serve blog media using the storage adapter
+    siteApp.use(STATIC_MEDIA_URL_PREFIX, labs.enabledMiddleware('mediaAPI'), storage.getStorage('media').serve());
+    // Serve blog files using the storage adapter
+    siteApp.use(STATIC_FILES_URL_PREFIX, labs.enabledMiddleware('filesAPI'), storage.getStorage('files').serve());
 
     // Global handling for member session, ensures a member is logged in to the frontend
     siteApp.use(membersService.middleware.loadMemberSession);

package/core/server/adapters/storage/LocalFilesStorage.js

@@ -0,0 +1,17 @@
+// # Local File System Storage module
+// The (default) module for storing media, using the local file system
+const config = require('../../../shared/config');
+const constants = require('@tryghost/constants');
+const LocalStorageBase = require('./LocalStorageBase');
+
+class LocalFilesStorage extends LocalStorageBase {
+    constructor() {
+        super({
+            storagePath: config.getContentPath('files'),
+            siteUrl: config.getSiteUrl(),
+            staticFileURLPrefix: constants.STATIC_FILES_URL_PREFIX
+        });
+    }
+}
+
+module.exports = LocalFilesStorage;

package/core/server/adapters/storage/LocalImagesStorage.js

@@ -0,0 +1,51 @@
+// # Local File System Image Storage module
+// The (default) module for storing images, using the local file system
+
+const fs = require('fs-extra');
+const path = require('path');
+const config = require('../../../shared/config');
+
+const urlUtils = require('../../../shared/url-utils');
+const LocalStorageBase = require('./LocalStorageBase');
+
+let messages = {
+    notFound: 'Image not found',
+    notFoundWithRef: 'Image not found: {file}',
+    cannotRead: 'Could not read image: {file}'
+};
+
+class LocalImagesStorage extends LocalStorageBase {
+    constructor() {
+        super({
+            storagePath: config.getContentPath('images'),
+            staticFileURLPrefix: urlUtils.STATIC_IMAGE_URL_PREFIX,
+            siteUrl: config.getSiteUrl(),
+            errorMessages: messages
+        });
+    }
+
+    /**
+     * Saves a buffer in the targetPath
+     * @param {Buffer} buffer is an instance of Buffer
+     * @param {String} targetPath path to which the buffer should be written
+     * @returns {Promise<String>} a URL to retrieve the data
+     */
+    async saveRaw(buffer, targetPath) {
+        const storagePath = path.join(this.storagePath, targetPath);
+        const targetDir = path.dirname(storagePath);
+
+        await fs.mkdirs(targetDir);
+        await fs.writeFile(storagePath, buffer);
+
+        // For local file system storage can use relative path so add a slash
+        const fullUrl = (
+            urlUtils.urlJoin('/', urlUtils.getSubdir(),
+                this.staticFileURLPrefix,
+                targetPath)
+        ).replace(new RegExp(`\\${path.sep}`, 'g'), '/');
+
+        return fullUrl;
+    }
+}
+
+module.exports = LocalImagesStorage;

package/core/server/adapters/storage/LocalMediaStorage.js

@@ -0,0 +1,24 @@
+// # Local File System Media Storage module
+// The (default) module for storing media, using the local file system
+const config = require('../../../shared/config');
+const constants = require('@tryghost/constants');
+const LocalStorageBase = require('./LocalStorageBase');
+
+const messages = {
+    notFound: 'Media file not found',
+    notFoundWithRef: 'Media file not found: {file}',
+    cannotRead: 'Could not read media file: {file}'
+};
+
+class LocalMediaStore extends LocalStorageBase {
+    constructor() {
+        super({
+            storagePath: config.getContentPath('media'),
+            staticFileURLPrefix: constants.STATIC_MEDIA_URL_PREFIX,
+            siteUrl: config.getSiteUrl(),
+            errorMessages: messages
+        });
+    }
+}
+
+module.exports = LocalMediaStore;