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.
This commit is contained in:
Fabien "egg" O'Carroll 2022-07-28 11:17:32 +01:00
parent f2710c906d
commit 93694d837e
2 changed files with 45 additions and 6 deletions

View File

@ -24,13 +24,24 @@ async function comments(options) {
} }
let colorScheme = 'auto'; let colorScheme = 'auto';
if (options.hash.color_scheme === 'dark' || options.hash.color_scheme === 'light') { if (options.hash.mode === 'dark' || options.hash.mode === 'light') {
colorScheme = options.hash.color_scheme; colorScheme = options.hash.mode;
} }
let avatarSaturation = parseInt(options.hash.avatar_saturation); let avatarSaturation = parseInt(options.hash.saturation);
if (isNaN(avatarSaturation)) { 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 = ''; let accentColor = '';
@ -47,6 +58,8 @@ async function comments(options) {
admin: urlUtils.urlFor('admin', true), admin: urlUtils.urlFor('admin', true),
key: frontendKey, key: frontendKey,
styles: stylesUrl, styles: stylesUrl,
title: title,
count: count,
'post-id': this.id, 'post-id': this.id,
'sentry-dsn': '', /* todo: insert sentry dsn key here */ 'sentry-dsn': '', /* todo: insert sentry dsn key here */
'color-scheme': colorScheme, 'color-scheme': colorScheme,

View File

@ -57,7 +57,20 @@ describe('{{comments}} helper', function () {
}); });
should.exist(rendered); should.exist(rendered);
rendered.string.should.containEql('<script defer src="https://cdn.jsdelivr.net/npm/@tryghost/comments-ui'); 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 () { it('returns a script tag for paid only commenting', async function () {
@ -76,7 +89,20 @@ describe('{{comments}} helper', function () {
}); });
should.exist(rendered); should.exist(rendered);
rendered.string.should.containEql('<script defer src="https://cdn.jsdelivr.net/npm/@tryghost/comments-ui'); 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 () { it('returns undefined when comments are disabled', async function () {