ghost 5.2.2 → 5.3.0

package/core/built/assets/{vendor.min-ba66b98f7c24fa40e061c7ffc94f4e23.css → vendor.min-4a6661c574707ceca220aa2e76558995.css}

@@ -1271,7 +1271,8 @@ ol .occluded-content {
 }
 
 .epm-animating .epm-modal-container {
-  overflow: unset;
+  overflow: visible;
+  overflow: initial;
 }
 
 .epm-modal {

package/core/frontend/helpers/comment_count.js

@@ -0,0 +1,25 @@
+const {SafeString} = require('../services/handlebars');
+const {labs} = require('../services/proxy');
+
+function commentCount(options) {
+    return new SafeString(`
+       <span data-ghost-comment-count="${this.id}" style="display:none">
+           ${options.fn(this)}
+       </span>`
+    );
+}
+
+module.exports = async function commentsLabsWrapper() {
+    const self = this;
+    const args = arguments;
+
+    return labs.enabledHelper({
+        flagKey: 'comments',
+        flagName: 'Comments',
+        helperName: 'comments'
+    }, () => {
+        return commentCount.apply(self, args);
+    });
+};
+
+module.exports.async = true;

package/core/frontend/helpers/comments.js

@@ -0,0 +1,67 @@
+const {SafeString} = require('../services/handlebars');
+const {config, urlUtils, getFrontendKey, labs} = require('../services/proxy');
+
+async function comments(options) {
+    // todo: For now check on the comment id to exclude normal pages (we probably have a better way to do this)
+
+    const commentId = this.comment_id;
+        
+    if (!commentId) {
+        return;
+    }
+    
+    let colorScheme = 'auto';
+    if (options.hash.color_scheme === 'dark' || options.hash.color_scheme === 'light') {
+        colorScheme = options.hash.color_scheme;
+    }
+
+    let avatarSaturation = parseInt(options.hash.avatar_saturation);
+    if (isNaN(avatarSaturation)) {
+        avatarSaturation = 50;
+    }
+
+    let accentColor = '';
+    if (options.data.site.accent_color) {
+        accentColor = options.data.site.accent_color;
+    }
+
+    const frontendKey = await getFrontendKey();
+
+    const data = {
+        'ghost-comments': urlUtils.getSiteUrl(),
+        api: urlUtils.urlFor('api', {type: 'content'}, true),
+        admin: urlUtils.urlFor('admin', true),
+        key: frontendKey,
+        'post-id': this.id,
+        'sentry-dsn': '', /* todo: insert sentry dsn key here */
+        'color-scheme': colorScheme,
+        'avatar-saturation': avatarSaturation,
+        'accent-color': accentColor,
+        'app-version': config.get('comments:version')
+    };
+
+    let dataAttributes = '';
+
+    Object.entries(data).forEach(([key, value]) => {
+        dataAttributes += `data-${key}="${value}" `;
+    });
+
+    return new SafeString(`
+        <script defer src="${config.get('comments:url')}" ${dataAttributes} crossorigin="anonymous"></script>
+    `);
+}
+
+module.exports = async function commentsLabsWrapper() {
+    const self = this;
+    const args = arguments;
+
+    return labs.enabledHelper({
+        flagKey: 'comments',
+        flagName: 'Comments',
+        helperName: 'comments'
+    }, () => {
+        return comments.apply(self, args);
+    });
+};
+
+module.exports.async = true;

package/core/frontend/helpers/date.js

@@ -45,7 +45,9 @@ module.exports = function (...attrs) {
     // i18n: Making dates, including month names, translatable to any language.
     // Documentation: http://momentjs.com/docs/#/i18n/
     // Locales: https://github.com/moment/moment/tree/develop/locale
-    dateMoment.locale(locale);
+    if (locale && locale.match('^[^/\\\\]*$') !== null) {
+        dateMoment.locale(locale);
+    }
 
     if (timeago) {
         date = dateMoment.tz(timezone).from(timeNow);

package/core/frontend/helpers/ghost_head.js

@@ -57,6 +57,14 @@ function getMembersHelper(data, frontendKey) {
     return membersHelper;
 }
 
+function getSearchHelper(frontendKey) {
+    const adminUrl = urlUtils.getAdminUrl() || urlUtils.getSiteUrl();
+
+    let helper = `<script defer src="${config.get('sodoSearch:url')}" data-sodo-search="${adminUrl}" data-version="${config.get('sodoSearch:version')}" data-key="${frontendKey}" crossorigin="anonymous"></script>`;
+
+    return helper;
+}
+
 /**
  * **NOTE**
  * Express adds `_locals`, see https://github.com/expressjs/express/blob/4.15.4/lib/response.js#L962.
@@ -193,6 +201,7 @@ module.exports = async function ghost_head(options) { // eslint-disable-line cam
         // no code injection for amp context!!!
         if (!_.includes(context, 'amp')) {
             head.push(getMembersHelper(options.data, frontendKey));
+            head.push(getSearchHelper(frontendKey));
 
             // @TODO do this in a more "frameworky" way
             if (cardAssetService.hasFile('js')) {
@@ -202,6 +211,10 @@ module.exports = async function ghost_head(options) { // eslint-disable-line cam
                 head.push(`<link rel="stylesheet" type="text/css" href="${getAssetUrl('public/cards.min.css')}">`);
             }
 
+            if (labs.isSet('comments') && settingsCache.get('enable_comments') !== 'off') {
+                head.push(`<script defer src="${getAssetUrl('public/comment-counts.min.js')}" data-ghost-comments-counts-api="${urlUtils.getSiteUrl(true)}members/api/comments/counts/"></script>`);
+            }
+
             if (!_.isEmpty(globalCodeinjection)) {
                 head.push(globalCodeinjection);
             }

package/core/frontend/services/admin-auth-assets/index.js

@@ -0,0 +1,4 @@
+const AdminAuthAssetsService = require('./service');
+let adminAuthAssets = new AdminAuthAssetsService();
+
+module.exports = adminAuthAssets;

package/core/frontend/services/admin-auth-assets/service.js

@@ -0,0 +1,93 @@
+// const debug = require('@tryghost/debug')('comments-counts-assets');
+const Minifier = require('@tryghost/minifier');
+const path = require('path');
+const fs = require('fs').promises;
+const logging = require('@tryghost/logging');
+const config = require('../../../shared/config');
+
+class AdminAuthAssetsService {
+    constructor(options = {}) {
+        /** @private */
+        this.src = options.src || path.join(config.get('paths').assetSrc, 'admin-auth');
+        /** @private */
+        this.dest = options.dest || path.join(config.getContentPath('public'), 'admin-auth');
+        /** @private */
+        this.minifier = new Minifier({src: this.src, dest: this.dest});
+    }
+
+    /**
+     * @private
+     */
+    generateGlobs() {
+        return {
+            'admin-auth.min.js': '*.js'
+        };
+    }
+
+    /**
+     * @private
+     * @returns {Promise<void>}
+     */
+    async minify(globs) {
+        try {
+            await this.minifier.minify(globs);
+        } catch (error) {
+            if (error.code === 'EACCES') {
+                logging.error('Ghost was not able to write admin-auth asset files due to permissions.');
+                return;
+            }
+
+            throw error;
+        }
+    }
+
+    /**
+     * @private
+     * @returns {Promise<void>}
+     */
+    async copyStatic() {
+        try {
+            await fs.copyFile(path.join(this.src, 'index.html'), path.join(this.dest, 'index.html'));
+        } catch (error) {
+            if (error.code === 'EACCES') {
+                logging.error('Ghost was not able to write admin-auth asset files due to permissions.');
+                return;
+            }
+
+            throw error;
+        }
+    }
+
+    /**
+     * @private
+     * @returns {Promise<void>}
+     */
+    async clearFiles() {
+        const rmFile = async (name) => {
+            await fs.unlink(path.join(this.dest, name));
+        };
+
+        let promises = [
+            // @deprecated switch this to use fs.rm when we drop support for Node v12
+            rmFile('admin-auth.min.js'),
+            rmFile('index.html')
+        ];
+
+        // We don't care if removing these files fails as it's valid for them to not exist
+        await Promise.allSettled(promises);
+    }
+
+    /**
+     * Minify, move into the destination directory, and clear existing asset files.
+     *
+     * @returns {Promise<void>}
+     */
+    async load() {
+        const globs = this.generateGlobs();
+        await this.clearFiles();
+        await this.minify(globs);
+        await this.copyStatic();
+    }
+}
+
+module.exports = AdminAuthAssetsService;

package/core/frontend/services/comment-counts-assets/index.js

@@ -0,0 +1,4 @@
+const CommentCountsAssetsService = require('./service');
+let commentCountsAssets = new CommentCountsAssetsService();
+
+module.exports = commentCountsAssets;

package/core/frontend/services/comment-counts-assets/service.js

@@ -0,0 +1,59 @@
+// const debug = require('@tryghost/debug')('comments-counts-assets');
+const Minifier = require('@tryghost/minifier');
+const path = require('path');
+const fs = require('fs').promises;
+const logging = require('@tryghost/logging');
+const config = require('../../../shared/config');
+
+class CommentCountsAssetsService {
+    constructor(options = {}) {
+        this.src = options.src || path.join(config.get('paths').assetSrc, 'comment-counts');
+        this.dest = options.dest || config.getContentPath('public');
+        this.minifier = new Minifier({src: this.src, dest: this.dest});
+
+        this.files = [];
+    }
+
+    generateGlobs() {
+        return {
+            'comment-counts.min.js': 'js/*.js'
+        };
+    }
+
+    async minify(globs) {
+        try {
+            return await this.minifier.minify(globs);
+        } catch (error) {
+            if (error.code === 'EACCES') {
+                logging.error('Ghost was not able to write comment-count asset files due to permissions.');
+                return;
+            }
+
+            throw error;
+        }
+    }
+
+    async clearFiles() {
+        this.files = [];
+
+        const rmFile = async (name) => {
+            await fs.unlink(path.join(this.dest, name));
+        };
+
+        let promises = [
+            // @deprecated switch this to use fs.rm when we drop support for Node v12
+            rmFile('comment-counts.min.js')
+        ];
+
+        // We don't care if removing these files fails as it's valid for them to not exist
+        return Promise.allSettled(promises);
+    }
+
+    async load() {
+        await this.clearFiles();
+        const globs = this.generateGlobs();
+        this.files = await this.minify(globs);
+    }
+}
+
+module.exports = CommentCountsAssetsService;

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

@@ -36,7 +36,11 @@ async function updateGlobalTemplateOptions(req, res, next) {
     {
         hbs.updateTemplateOptions({
             data: {
-                site: siteData,
+                site: {
+                    ...siteData,
+                    comments_enabled: siteData.comments_enabled !== 'off',
+                    comments_access: siteData.comments_enabled
+                },
                 labs: labsData,
                 config: themeData,
                 custom: themeSettingsData

package/core/frontend/src/admin-auth/index.html

@@ -0,0 +1,5 @@
+<html>
+    <head>
+        <script src="admin-auth.min.js"></script>
+    </head>
+</html>

package/core/frontend/src/admin-auth/message-handler.js

@@ -0,0 +1,75 @@
+const adminUrl = window.location.href.replace('auth-frame/', '');
+
+window.addEventListener('message', async function (event) {
+    if (event.origin !== '*') {
+        // return;
+    }
+    let data = null;
+    try {
+        data = JSON.parse(event.data);
+    } catch (err) {
+        console.error(err);
+    }
+
+    function respond(error, result) {
+        event.source.postMessage(JSON.stringify({
+            uid: data.uid,
+            error: error,
+            result: result
+        }), '*');
+    }
+
+    if (data.action === 'getUser') {
+        try {
+            const res = await fetch(
+                adminUrl + 'api/canary/admin/users/me/'
+            );
+            const json = await res.json();
+            respond(null, json);
+        } catch (err) {
+            respond(err, null);
+        }
+    }
+
+    if (data.action === 'hideComment') {
+        try {
+            const res = await fetch(adminUrl + 'api/canary/admin/comments/' + data.id + '/', {
+                method: 'PUT',
+                body: JSON.stringify({
+                    comments: [{
+                        id: data.id,
+                        status: 'hidden'
+                    }]
+                }),
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+            const json = await res.json();
+            respond(null, json);
+        } catch (err) {
+            respond(err, null);
+        }
+    }
+
+    if (data.action === 'showComment') {
+        try {
+            const res = await fetch(adminUrl + 'api/canary/admin/comments/' + data.id + '/', {
+                method: 'PUT',
+                body: JSON.stringify({
+                    comments: [{
+                        id: data.id,
+                        status: 'published'
+                    }]
+                }),
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+            const json = await res.json();
+            respond(null, json);
+        } catch (err) {
+            respond(err, null);
+        }
+    }
+});

package/core/frontend/src/comment-counts/js/comment-counts.js

@@ -0,0 +1,71 @@
+(async function () {
+    const countsMap = {};
+    const fetchingIds = new Set();
+
+    const api = document.querySelector('[data-ghost-comments-counts-api]')
+        .dataset.ghostCommentsCountsApi;
+
+    const debounce = function (func, timeout = 100) {
+        let timer;
+        return (...args) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => func.apply(this, args), timeout);
+        };
+    };
+
+    const addIdsFromElement = function (node) {
+        const countElems = node.querySelectorAll?.('[data-ghost-comment-count]') || [];
+
+        countElems.forEach((countElem) => {
+            if (!countsMap[countElem.dataset.ghostCommentCount]) {
+                fetchingIds.add(countElem.dataset.ghostCommentCount);
+            }
+        });
+    };
+
+    const renderCounts = function () {
+        for (const [id, count] of Object.entries(countsMap)) {
+            const countElems = document.querySelectorAll(`[data-ghost-comment-count="${id}"]`);
+            countElems.forEach((e) => {
+                e.innerHTML = e.innerHTML.replace('#', count);
+                e.style.display = '';
+            });
+        }
+    };
+
+    const fetchCounts = async function () {
+        const ids = Array.from(fetchingIds);
+        fetchingIds.clear();
+
+        const rawRes = await fetch(api, {
+            method: 'POST',
+            headers: {
+                Accept: 'application/json',
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ids})
+        });
+
+        const res = await rawRes.json();
+
+        for (const [id, count] of Object.entries(res)) {
+            countsMap[id] = count;
+        }
+
+        renderCounts();
+    };
+
+    const countElemObserver = new MutationObserver((mutationsList) => {
+        mutationsList.forEach((mutation) => {
+            mutation.addedNodes.forEach((addedNode) => {
+                addIdsFromElement(addedNode);
+                debounce(fetchCounts);
+            });
+        });
+    });
+
+    countElemObserver.observe(document.body, {subtree: true, childList: true});
+
+    addIdsFromElement(document.body);
+    fetchCounts();
+})();

package/core/frontend/web/site.js

@@ -72,6 +72,9 @@ module.exports = function setupSiteApp(routerConfig) {
     siteApp.use(mw.servePublicFile('built', 'public/cards.min.css', 'text/css', constants.ONE_YEAR_S));
     siteApp.use(mw.servePublicFile('built', 'public/cards.min.js', 'application/javascript', constants.ONE_YEAR_S));
 
+    // Comment counts
+    siteApp.use(mw.servePublicFile('built', 'public/comment-counts.min.js', 'application/javascript', constants.ONE_YEAR_S));
+
     // Serve blog images using the storage adapter
     siteApp.use(STATIC_IMAGE_URL_PREFIX, mw.handleImageSizes, storage.getStorage('images').serve());
     // Serve blog media using the storage adapter