From 93694d837e175d79f95ed3335eef6984bf1eae31 Mon Sep 17 00:00:00 2001
From: "Fabien \"egg\" O'Carroll" <fabien@allou.is>
Date: Thu, 28 Jul 2022 11:17:32 +0100
Subject: [PATCH] Updated {{comments}} helper with new options

refs https://github.com/TryGhost/Team/issues/1695

This updates the comments helper based on the design document

Changes include:
 - `color_scheme` renamed to `mode`
 - `avatar_saturation` renamed to `saturation`
 - `saturation` default changed from 50 to 60
 - `count` option added
 - `title` option added

The count and title options allow theme developers to better customise
the output of comments, so that they can either pass in their own
title, or pass in no title, and instead provide HTML in the them to
handle it. The same is the case for the count option, which is used to
toggle whether or not the comment count is shown.
---
 ghost/core/core/frontend/helpers/comments.js  | 21 ++++++++++---
 .../unit/frontend/helpers/comments.test.js    | 30 +++++++++++++++++--
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/ghost/core/core/frontend/helpers/comments.js b/ghost/core/core/frontend/helpers/comments.js
index c48a0869d7..7fe3a9c3a2 100644
--- a/ghost/core/core/frontend/helpers/comments.js
+++ b/ghost/core/core/frontend/helpers/comments.js
@@ -24,13 +24,24 @@ async function comments(options) {
     }
 
     let colorScheme = 'auto';
-    if (options.hash.color_scheme === 'dark' || options.hash.color_scheme === 'light') {
-        colorScheme = options.hash.color_scheme;
+    if (options.hash.mode === 'dark' || options.hash.mode === 'light') {
+        colorScheme = options.hash.mode;
     }
 
-    let avatarSaturation = parseInt(options.hash.avatar_saturation);
+    let avatarSaturation = parseInt(options.hash.saturation);
     if (isNaN(avatarSaturation)) {
-        avatarSaturation = 50;
+        avatarSaturation = 60;
+    }
+
+    let count = true;
+    if (options.hash.count === false) {
+        count = false;
+    }
+
+    // This is null so that the comments-ui can handle the default title
+    let title = null;
+    if (typeof options.hash.title === 'string') {
+        title = options.hash.title;
     }
 
     let accentColor = '';
@@ -47,6 +58,8 @@ async function comments(options) {
         admin: urlUtils.urlFor('admin', true),
         key: frontendKey,
         styles: stylesUrl,
+        title: title,
+        count: count,
         'post-id': this.id,
         'sentry-dsn': '', /* todo: insert sentry dsn key here */
         'color-scheme': colorScheme,
diff --git a/ghost/core/test/unit/frontend/helpers/comments.test.js b/ghost/core/test/unit/frontend/helpers/comments.test.js
index d7cc909a32..c7aa50c2ec 100644
--- a/ghost/core/test/unit/frontend/helpers/comments.test.js
+++ b/ghost/core/test/unit/frontend/helpers/comments.test.js
@@ -57,7 +57,20 @@ describe('{{comments}} helper', function () {
         });
         should.exist(rendered);
         rendered.string.should.containEql('<script defer src="https://cdn.jsdelivr.net/npm/@tryghost/comments-ui');
-        rendered.string.should.containEql('data-ghost-comments="http://127.0.0.1:2369/" data-api="http://127.0.0.1:2369/ghost/api/content/" data-admin="http://127.0.0.1:2369/ghost/" data-key="xyz" data-styles="https://cdn.jsdelivr.net/npm/@tryghost/comments-ui@~test.version/umd/main.css" data-post-id="post_id_123" data-sentry-dsn="" data-color-scheme="auto" data-avatar-saturation="50" data-accent-color="" data-app-version="test.version" data-comments-enabled="all"');
+        rendered.string.should.containEql('data-ghost-comments="http://127.0.0.1:2369/"');
+        rendered.string.should.containEql('data-api="http://127.0.0.1:2369/ghost/api/content/"');
+        rendered.string.should.containEql('data-admin="http://127.0.0.1:2369/ghost/"');
+        rendered.string.should.containEql('data-key="xyz"');
+        rendered.string.should.containEql('data-styles="https://cdn.jsdelivr.net/npm/@tryghost/comments-ui@~test.version/umd/main.css"');
+        rendered.string.should.containEql('data-title="null"');
+        rendered.string.should.containEql('data-count="true"');
+        rendered.string.should.containEql('data-post-id="post_id_123"');
+        rendered.string.should.containEql('data-sentry-dsn=""');
+        rendered.string.should.containEql('data-color-scheme="auto"');
+        rendered.string.should.containEql('data-avatar-saturation="60"');
+        rendered.string.should.containEql('data-accent-color=""');
+        rendered.string.should.containEql('data-app-version="test.version"');
+        rendered.string.should.containEql('data-comments-enabled="all"');
     });
 
     it('returns a script tag for paid only commenting', async function () {
@@ -76,7 +89,20 @@ describe('{{comments}} helper', function () {
         });
         should.exist(rendered);
         rendered.string.should.containEql('<script defer src="https://cdn.jsdelivr.net/npm/@tryghost/comments-ui');
-        rendered.string.should.containEql('data-ghost-comments="http://127.0.0.1:2369/" data-api="http://127.0.0.1:2369/ghost/api/content/" data-admin="http://127.0.0.1:2369/ghost/" data-key="xyz" data-styles="https://cdn.jsdelivr.net/npm/@tryghost/comments-ui@~test.version/umd/main.css" data-post-id="post_id_123" data-sentry-dsn="" data-color-scheme="auto" data-avatar-saturation="50" data-accent-color="" data-app-version="test.version" data-comments-enabled="paid"');
+        rendered.string.should.containEql('data-ghost-comments="http://127.0.0.1:2369/"');
+        rendered.string.should.containEql('data-api="http://127.0.0.1:2369/ghost/api/content/"');
+        rendered.string.should.containEql('data-admin="http://127.0.0.1:2369/ghost/"');
+        rendered.string.should.containEql('data-key="xyz"');
+        rendered.string.should.containEql('data-styles="https://cdn.jsdelivr.net/npm/@tryghost/comments-ui@~test.version/umd/main.css"');
+        rendered.string.should.containEql('data-title="null"');
+        rendered.string.should.containEql('data-count="true"');
+        rendered.string.should.containEql('data-post-id="post_id_123"');
+        rendered.string.should.containEql('data-sentry-dsn=""');
+        rendered.string.should.containEql('data-color-scheme="auto"');
+        rendered.string.should.containEql('data-avatar-saturation="60"');
+        rendered.string.should.containEql('data-accent-color=""');
+        rendered.string.should.containEql('data-app-version="test.version"');
+        rendered.string.should.containEql('data-comments-enabled="paid"');
     });
 
     it('returns undefined when comments are disabled', async function () {