🐛 Fixed inability to override accent color variable via code injection

closes https://linear.app/tryghost/issue/ONC-72

- moved output of the accent color style element before the site and post/page/tag code injection output
This commit is contained in:
Kevin Ansfield 2024-06-20 20:38:27 +01:00
parent 414b2ff514
commit 5248fbd98e
3 changed files with 49 additions and 13 deletions

View File

@ -296,6 +296,18 @@ module.exports = async function ghost_head(options) { // eslint-disable-line cam
head.push(`<script defer src="${getAssetUrl('public/member-attribution.min.js')}"></script>`);
}
if (options.data.site.accent_color) {
const accentColor = escapeExpression(options.data.site.accent_color);
const styleTag = `<style>:root {--ghost-accent-color: ${accentColor};}</style>`;
const existingScriptIndex = _.findLastIndex(head, str => str.match(/<\/(style|script)>/));
if (existingScriptIndex !== -1) {
head[existingScriptIndex] = head[existingScriptIndex] + styleTag;
} else {
head.push(styleTag);
}
}
if (!_.isEmpty(globalCodeinjection)) {
head.push(globalCodeinjection);
}
@ -309,19 +321,6 @@ module.exports = async function ghost_head(options) { // eslint-disable-line cam
}
}
// AMP template has style injected directly because there can only be one <style amp-custom> tag
if (options.data.site.accent_color && !_.includes(context, 'amp')) {
const accentColor = escapeExpression(options.data.site.accent_color);
const styleTag = `<style>:root {--ghost-accent-color: ${accentColor};}</style>`;
const existingScriptIndex = _.findLastIndex(head, str => str.match(/<\/(style|script)>/));
if (existingScriptIndex !== -1) {
head[existingScriptIndex] = head[existingScriptIndex] + styleTag;
} else {
head.push(styleTag);
}
}
debug('end');
return new SafeString(head.join('\n ').trim());
} catch (error) {

View File

@ -281,6 +281,19 @@ Object {
}
`;
exports[`{{ghost_head}} helper accent_color does not override code injection 1 1`] = `
Object {
"rendered": "<meta name=\\"generator\\" content=\\"Ghost 0.3\\">
<link rel=\\"alternate\\" type=\\"application/rss+xml\\" title=\\"Ghost\\" href=\\"http://localhost:65530/rss/\\">
<script defer src=\\"https://cdn.jsdelivr.net/ghost/sodo-search@~[[VERSION]]/umd/sodo-search.min.js\\" data-key=\\"xyz\\" data-styles=\\"https://cdn.jsdelivr.net/ghost/sodo-search@~[[VERSION]]/umd/main.css\\" data-sodo-search=\\"http://127.0.0.1:2369/\\" crossorigin=\\"anonymous\\"></script><style>:root {--ghost-accent-color: #site-setting;}</style>
<link href=\\"http://127.0.0.1:2369/webmentions/receive/\\" rel=\\"webmention\\">
<style>:root {--ghost-accent-color: #site-code-injection}</style>
<style>:root {--ghost-accent-color: #post-code-injection}</style>",
}
`;
exports[`{{ghost_head}} helper accent_color includes style tag on templates with no context 1 1`] = `
Object {
"rendered": "<meta name=\\"generator\\" content=\\"Ghost 0.3\\">

View File

@ -1065,6 +1065,30 @@ describe('{{ghost_head}} helper', function () {
}
}));
});
it('does not override code injection', async function () {
settingsCache.get.withArgs('codeinjection_head').returns('<style>:root {--ghost-accent-color: #site-code-injection}</style>');
const renderObject = {
post: Object.assign({}, posts[1], {codeinjection_head: '<style>:root {--ghost-accent-color: #post-code-injection}</style>'})
};
const templateOptions = {
site: {
accent_color: '#site-setting'
}
};
await testGhostHead(testUtils.createHbsResponse({
templateOptions,
renderObject: renderObject,
locals: {
relativeUrl: '/post/amp/',
context: null,
safeVersion: '0.3'
}
}));
});
});
describe('members scripts', function () {