ghost 4.21.0 → 4.22.0

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,101 @@
+const Minifier = require('@tryghost/minifier');
+const _ = require('lodash');
+const path = require('path');
+const fs = require('fs').promises;
+
+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) {
+        return await this.minifier.minify(globs);
+    }
+
+    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
+            if (error.code !== 'ENOENT') {
+                throw error;
+            }
+        }
+
+        try {
+            await fs.unlink(path.join(this.dest, 'cards.min.js'));
+        } catch (error) {
+            // Don't worry if the file didn't exist
+            if (error.code !== 'ENOENT') {
+                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/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/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/site.js

@@ -17,11 +17,14 @@ 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}`;
 
 let router;
 
@@ -89,7 +92,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 +109,14 @@ 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());
 
     // Global handling for member session, ensures a member is logged in to the frontend
     siteApp.use(membersService.middleware.loadMemberSession);

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

@@ -0,0 +1,50 @@
+// # 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,
+            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,23 @@
+// # Local File System Video 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,
+            errorMessages: messages
+        });
+    }
+}
+
+module.exports = LocalMediaStore;

package/core/server/adapters/storage/{LocalFileStorage.js → LocalStorageBase.js}

@@ -1,12 +1,11 @@
-// # Local File System Image Storage module
-// The (default) module for storing images, using the local file system
+// # Local File Base Storage module
+// The (default) module for storing files using the local file system
 const serveStatic = require('../../../shared/express').static;
 
 const fs = require('fs-extra');
 const path = require('path');
 const Promise = require('bluebird');
 const moment = require('moment');
-const config = require('../../../shared/config');
 const tpl = require('@tryghost/tpl');
 const logging = require('@tryghost/logging');
 const errors = require('@tryghost/errors');
@@ -15,68 +14,57 @@ const urlUtils = require('../../../shared/url-utils');
 const StorageBase = require('ghost-storage-base');
 
 const messages = {
-    imageNotFound: 'Image not found',
-    imageNotFoundWithRef: 'Image not found: {img}',
-    cannotReadImage: 'Could not read image: {img}'
+    notFound: 'File not found',
+    notFoundWithRef: 'File not found: {file}',
+    cannotRead: 'Could not read file: {file}'
 };
 
-class LocalFileStore extends StorageBase {
-    constructor() {
-        super();
-
-        this.storagePath = config.getContentPath('images');
-    }
-
+class LocalStorageBase extends StorageBase {
     /**
-     * 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
+     *
+     * @param {Object} options
+     * @param {String} options.storagePath
+     * @param {String} [options.staticFileURLPrefix]
+     * @param {Object} [options.errorMessages]
+     * @param {String} [options.errorMessages.notFound]
+     * @param {String} [options.errorMessages.notFoundWithRef]
+     * @param {String} [options.errorMessages.cannotRead]
      */
-    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(),
-                urlUtils.STATIC_IMAGE_URL_PREFIX,
-                targetPath)
-        ).replace(new RegExp(`\\${path.sep}`, 'g'), '/');
+    constructor({storagePath, staticFileURLPrefix, errorMessages}) {
+        super();
 
-        return fullUrl;
+        this.storagePath = storagePath;
+        this.staticFileURLPrefix = staticFileURLPrefix;
+        this.errorMessages = errorMessages || messages;
     }
 
     /**
-     * Saves the image to storage (the file system)
-     * - image is the express image object
-     * - returns a promise which ultimately returns the full url to the uploaded image
+     * Saves the file to storage (the file system)
+     * - returns a promise which ultimately returns the full url to the uploaded file
      *
-     * @param {StorageBase.Image} image
+     * @param {StorageBase.Image} file
      * @param {String} targetDir
      * @returns {Promise<String>}
      */
-    async save(image, targetDir) {
+    async save(file, targetDir) {
         let targetFilename;
 
         // NOTE: the base implementation of `getTargetDir` returns the format this.storagePath/YYYY/MM
         targetDir = targetDir || this.getTargetDir(this.storagePath);
 
-        const filename = await this.getUniqueFileName(image, targetDir);
+        const filename = await this.getUniqueFileName(file, targetDir);
 
         targetFilename = filename;
         await fs.mkdirs(targetDir);
 
-        await fs.copy(image.path, targetFilename);
+        await fs.copy(file.path, targetFilename);
 
         // The src for the image must be in URI format, not a file system path, which in Windows uses \
         // For local file system storage can use relative path so add a slash
         const fullUrl = (
-            urlUtils.urlJoin('/', urlUtils.getSubdir(),
-                urlUtils.STATIC_IMAGE_URL_PREFIX,
+            urlUtils.urlJoin('/',
+                urlUtils.getSubdir(),
+                this.staticFileURLPrefix,
                 path.relative(this.storagePath, targetFilename))
         ).replace(new RegExp(`\\${path.sep}`, 'g'), '/');
 
@@ -103,7 +91,7 @@ class LocalFileStore extends StorageBase {
      * @returns {serveStaticContent}
      */
     serve() {
-        const {storagePath} = this;
+        const {storagePath, errorMessages} = this;
 
         return function serveStaticContent(req, res, next) {
             const startedAtMoment = moment();
@@ -114,14 +102,14 @@ class LocalFileStore extends StorageBase {
                     maxAge: constants.ONE_YEAR_MS,
                     fallthrough: false,
                     onEnd: () => {
-                        logging.info('LocalFileStorage.serve', req.path, moment().diff(startedAtMoment, 'ms') + 'ms');
+                        logging.info('LocalStorageBase.serve', req.path, moment().diff(startedAtMoment, 'ms') + 'ms');
                     }
                 }
             )(req, res, (err) => {
                 if (err) {
                     if (err.statusCode === 404) {
                         return next(new errors.NotFoundError({
-                            message: tpl(messages.imageNotFound),
+                            message: tpl(errorMessages.notFound),
                             code: 'STATIC_FILE_NOT_FOUND',
                             property: err.path
                         }));
@@ -152,8 +140,8 @@ class LocalFileStore extends StorageBase {
     }
 
     /**
-     * Reads bytes from disk for a target image
-     * - path of target image (without content path!)
+     * Reads bytes from disk for a target file
+     * - path of target file (without content path!)
      *
      * @param options
      */
@@ -171,7 +159,7 @@ class LocalFileStore extends StorageBase {
                     if (err.code === 'ENOENT' || err.code === 'ENOTDIR') {
                         return reject(new errors.NotFoundError({
                             err: err,
-                            message: tpl(messages.imageNotFoundWithRef, {img: options.path})
+                            message: tpl(this.errorMessages.notFoundWithRef, {file: options.path})
                         }));
                     }
 
@@ -185,7 +173,7 @@ class LocalFileStore extends StorageBase {
 
                     return reject(new errors.GhostError({
                         err: err,
-                        message: tpl(messages.cannotReadImage, {img: options.path})
+                        message: tpl(this.errorMessages.cannotRead, {file: options.path})
                     }));
                 }
 
@@ -195,4 +183,4 @@ class LocalFileStore extends StorageBase {
     }
 }
 
-module.exports = LocalFileStore;
+module.exports = LocalStorageBase;

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

@@ -1,7 +1,7 @@
 const adapterManager = require('../../services/adapter-manager');
 
 /**
- * @param {'images'|'videos'|'audios'} [feature] - name for the "feature" to enable through adapter, e.g.: images or videos storage
+ * @param {'images'|'media'|'files'} [feature] - name for the "feature" to enable through adapter, e.g.: images or media storage
  * @returns {Object} adapter instance
  */
 function getStorage(feature) {

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

@@ -12,7 +12,7 @@ const urlUtils = require('../../../shared/url-utils');
  * @description Takes a url or filepath and returns a filepath with is readable
  * for the local file storage.
  */
-exports.getLocalFileStoragePath = function getLocalFileStoragePath(imagePath) {
+exports.getLocalImagesStoragePath = function getLocalImagesStoragePath(imagePath) {
     // The '/' in urlJoin is necessary to add the '/' to `content/images`, if no subdirectory is setup
     const urlRegExp = new RegExp(`^${urlUtils.urlJoin(
         urlUtils.urlFor('home', true),
@@ -43,7 +43,7 @@ exports.getLocalFileStoragePath = function getLocalFileStoragePath(imagePath) {
  */
 
 exports.isLocalImage = function isLocalImage(imagePath) {
-    const localImagePath = this.getLocalFileStoragePath(imagePath);
+    const localImagePath = this.getLocalImagesStoragePath(imagePath);
 
     if (localImagePath !== imagePath) {
         return true;