From 5248fbd98e41086e0fd9f954ec142d7f07b855c6 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Thu, 20 Jun 2024 20:38:27 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20inability=20to=20overrid?=
 =?UTF-8?q?e=20accent=20color=20variable=20via=20code=20injection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../core/core/frontend/helpers/ghost_head.js  | 25 +++++++++----------
 .../__snapshots__/ghost_head.test.js.snap     | 13 ++++++++++
 .../unit/frontend/helpers/ghost_head.test.js  | 24 ++++++++++++++++++
 3 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/ghost/core/core/frontend/helpers/ghost_head.js b/ghost/core/core/frontend/helpers/ghost_head.js
index ea3b19fac5..09904905ce 100644
--- a/ghost/core/core/frontend/helpers/ghost_head.js
+++ b/ghost/core/core/frontend/helpers/ghost_head.js
@@ -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) {
diff --git a/ghost/core/test/unit/frontend/helpers/__snapshots__/ghost_head.test.js.snap b/ghost/core/test/unit/frontend/helpers/__snapshots__/ghost_head.test.js.snap
index 2fc30edbb0..d38ac6af6e 100644
--- a/ghost/core/test/unit/frontend/helpers/__snapshots__/ghost_head.test.js.snap
+++ b/ghost/core/test/unit/frontend/helpers/__snapshots__/ghost_head.test.js.snap
@@ -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\\">
diff --git a/ghost/core/test/unit/frontend/helpers/ghost_head.test.js b/ghost/core/test/unit/frontend/helpers/ghost_head.test.js
index a8305e5636..2d07430fd7 100644
--- a/ghost/core/test/unit/frontend/helpers/ghost_head.test.js
+++ b/ghost/core/test/unit/frontend/helpers/ghost_head.test.js
@@ -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 () {