diff --git a/ghost/core/core/frontend/helpers/comments.js b/ghost/core/core/frontend/helpers/comments.js
index 8ed9f5a6d7..c48a0869d7 100644
--- a/ghost/core/core/frontend/helpers/comments.js
+++ b/ghost/core/core/frontend/helpers/comments.js
@@ -1,11 +1,12 @@
const {SafeString} = require('../services/handlebars');
-const {config, urlUtils, getFrontendKey, labs, settingsCache} = require('../services/proxy');
+const {urlUtils, getFrontendKey, labs, settingsCache} = require('../services/proxy');
+const {getFrontendAppConfig, getDataAttributes} = require('../utils/frontend-apps');
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;
}
@@ -21,7 +22,7 @@ async function comments(options) {
if (commentsEnabled === 'off' || !hasAccess) {
return;
}
-
+
let colorScheme = 'auto';
if (options.hash.color_scheme === 'dark' || options.hash.color_scheme === 'light') {
colorScheme = options.hash.color_scheme;
@@ -38,29 +39,27 @@ async function comments(options) {
}
const frontendKey = await getFrontendKey();
+ const {scriptUrl, stylesUrl, appVersion} = getFrontendAppConfig('comments');
const data = {
'ghost-comments': urlUtils.getSiteUrl(),
api: urlUtils.urlFor('api', {type: 'content'}, true),
admin: urlUtils.urlFor('admin', true),
key: frontendKey,
+ styles: stylesUrl,
'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'),
+ 'app-version': appVersion,
'comments-enabled': commentsEnabled
};
- let dataAttributes = '';
-
- Object.entries(data).forEach(([key, value]) => {
- dataAttributes += `data-${key}="${value}" `;
- });
+ const dataAttributes = getDataAttributes(data);
return new SafeString(`
-
+
`);
}
diff --git a/ghost/core/core/frontend/helpers/ghost_head.js b/ghost/core/core/frontend/helpers/ghost_head.js
index b35d9f23ba..61d76d0e15 100644
--- a/ghost/core/core/frontend/helpers/ghost_head.js
+++ b/ghost/core/core/frontend/helpers/ghost_head.js
@@ -13,6 +13,7 @@ const logging = require('@tryghost/logging');
const _ = require('lodash');
const debug = require('@tryghost/debug')('ghost_head');
const templateStyles = require('./tpl/styles');
+const {getFrontendAppConfig, getDataAttributes} = require('../utils/frontend-apps');
const {get: getMetaData, getAssetUrl} = metaData;
@@ -47,9 +48,20 @@ function getMembersHelper(data, frontendKey) {
if (!settingsCache.get('members_enabled')) {
return '';
}
+ const {scriptUrl} = getFrontendAppConfig('portal');
- const colorString = _.has(data, 'site._preview') && data.site.accent_color ? ` data-accent-color="${data.site.accent_color}"` : '';
- let membersHelper = ``;
+ const colorString = (_.has(data, 'site._preview') && data.site.accent_color) ? data.site.accent_color : '';
+ const attributes = {
+ ghost: urlUtils.getSiteUrl(),
+ key: frontendKey,
+ api: urlUtils.urlFor('api', {type: 'content'}, true)
+ };
+ if (colorString) {
+ attributes['accent-color'] = colorString;
+ }
+ const dataAttributes = getDataAttributes(attributes);
+
+ let membersHelper = ``;
membersHelper += (``);
if (settingsCache.get('paid_members_enabled')) {
membersHelper += '';
@@ -59,8 +71,14 @@ function getMembersHelper(data, frontendKey) {
function getSearchHelper(frontendKey) {
const adminUrl = urlUtils.getAdminUrl() || urlUtils.getSiteUrl();
-
- let helper = ``;
+ const {scriptUrl, stylesUrl} = getFrontendAppConfig('sodoSearch');
+ const attrs = {
+ key: frontendKey,
+ styles: stylesUrl,
+ 'sodo-search': adminUrl
+ };
+ const dataAttrs = getDataAttributes(attrs);
+ let helper = ``;
return helper;
}
diff --git a/ghost/core/core/frontend/utils/frontend-apps.js b/ghost/core/core/frontend/utils/frontend-apps.js
new file mode 100644
index 0000000000..670d9b2f50
--- /dev/null
+++ b/ghost/core/core/frontend/utils/frontend-apps.js
@@ -0,0 +1,33 @@
+const {config} = require('../services/proxy');
+
+function getFrontendAppConfig(app) {
+ const appVersion = config.get(`${app}:version`);
+ let scriptUrl = config.get(`${app}:url`);
+ let stylesUrl = config.get(`${app}:styles`);
+ if (scriptUrl.includes('{version}')) {
+ scriptUrl = scriptUrl.replace('{version}', appVersion);
+ }
+ if (stylesUrl?.includes('{version}')) {
+ stylesUrl = stylesUrl.replace('{version}', appVersion);
+ }
+ return {
+ scriptUrl,
+ stylesUrl,
+ appVersion
+ };
+}
+
+function getDataAttributes(data) {
+ let dataAttributes = '';
+
+ if (!data) {
+ return dataAttributes;
+ }
+ Object.entries(data).forEach(([key, value]) => {
+ dataAttributes += `data-${key}="${value}" `;
+ });
+
+ return dataAttributes.trim();
+}
+
+module.exports = {getFrontendAppConfig, getDataAttributes};
diff --git a/ghost/core/test/unit/frontend/helpers/comments.test.js b/ghost/core/test/unit/frontend/helpers/comments.test.js
index e2102c961c..d7cc909a32 100644
--- a/ghost/core/test/unit/frontend/helpers/comments.test.js
+++ b/ghost/core/test/unit/frontend/helpers/comments.test.js
@@ -56,8 +56,8 @@ describe('{{comments}} helper', function () {
}
});
should.exist(rendered);
- rendered.string.should.containEql('