From 7f7d2cafc6a62ef5e1a95496e703828ebd9b72a8 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Tue, 26 Jan 2021 22:49:05 +0000 Subject: [PATCH] Added share/send preview footers to post preview modal refs https://github.com/TryGhost/Team/issues/451 - disabled email tab when previewing a page (pages can't be emailed) - added share preview url footer to browser tab - added send preview footer to email tab - added first pass at social tab contents --- .../app/components/modal-post-preview.hbs | 12 ++-- .../app/components/modal-post-preview.js | 13 +++- .../components/modal-post-preview/browser.hbs | 20 ++++++ .../components/modal-post-preview/browser.js | 12 ++++ .../components/modal-post-preview/desktop.hbs | 5 -- .../components/modal-post-preview/email.hbs | 24 ++++++- .../components/modal-post-preview/email.js | 52 +++++++++++++++ .../components/modal-post-preview/social.hbs | 42 ++++++++++++ .../components/modal-post-preview/social.js | 65 +++++++++++++++++++ .../app/styles/layouts/preview-email.css | 3 +- ghost/admin/config/environment.js | 4 ++ ghost/admin/package.json | 1 + ghost/admin/yarn.lock | 10 +++ 13 files changed, 250 insertions(+), 13 deletions(-) create mode 100644 ghost/admin/app/components/modal-post-preview/browser.hbs create mode 100644 ghost/admin/app/components/modal-post-preview/browser.js delete mode 100644 ghost/admin/app/components/modal-post-preview/desktop.hbs create mode 100644 ghost/admin/app/components/modal-post-preview/social.js diff --git a/ghost/admin/app/components/modal-post-preview.hbs b/ghost/admin/app/components/modal-post-preview.hbs index b748a25a9e..4115587c64 100644 --- a/ghost/admin/app/components/modal-post-preview.hbs +++ b/ghost/admin/app/components/modal-post-preview.hbs @@ -2,8 +2,10 @@

Preview post

- - + + {{#if this.model.isPost}} + + {{/if}}
@@ -13,11 +15,11 @@
- {{#if (eq this.tab "desktop")}} - + {{#if (eq this.tab "browser")}} + {{/if}} - {{#if (eq this.tab "email")}} + {{#if (and (eq this.tab "email") this.model.isPost)}} {{/if}} diff --git a/ghost/admin/app/components/modal-post-preview.js b/ghost/admin/app/components/modal-post-preview.js index 854296e41a..7c886d6871 100644 --- a/ghost/admin/app/components/modal-post-preview.js +++ b/ghost/admin/app/components/modal-post-preview.js @@ -6,7 +6,7 @@ import {tracked} from '@glimmer/tracking'; // TODO: update modals to work fully with Glimmer components @classic export default class ModalPostPreviewComponent extends ModalBase { - @tracked tab = 'desktop'; + @tracked tab = 'browser'; @action changeTab(tab) { @@ -17,4 +17,15 @@ export default class ModalPostPreviewComponent extends ModalBase { close() { this.closeModal(); } + + actions = { + confirm() { + // noop - needed to override ModalBase.actions.confirm + }, + + // needed because ModalBase uses .send() for keyboard events + closeModal() { + this.closeModal(); + } + } } diff --git a/ghost/admin/app/components/modal-post-preview/browser.hbs b/ghost/admin/app/components/modal-post-preview/browser.hbs new file mode 100644 index 0000000000..16c95e92dc --- /dev/null +++ b/ghost/admin/app/components/modal-post-preview/browser.hbs @@ -0,0 +1,20 @@ +
+
+ +
+
+
+ Share this preview privately +
+ {{@post.previewUrl}} +
+ +
\ No newline at end of file diff --git a/ghost/admin/app/components/modal-post-preview/browser.js b/ghost/admin/app/components/modal-post-preview/browser.js new file mode 100644 index 0000000000..c19a5f3c52 --- /dev/null +++ b/ghost/admin/app/components/modal-post-preview/browser.js @@ -0,0 +1,12 @@ +import Component from '@glimmer/component'; +import copyTextToClipboard from 'ghost-admin/utils/copy-text-to-clipboard'; +import {task} from 'ember-concurrency-decorators'; +import {timeout} from 'ember-concurrency'; + +export default class ModalPostPreviewBrowserComponent extends Component { + @task + *copyPreviewUrl() { + copyTextToClipboard(this.args.post.previewUrl); + yield timeout(this.isTesting ? 50 : 3000); + } +} diff --git a/ghost/admin/app/components/modal-post-preview/desktop.hbs b/ghost/admin/app/components/modal-post-preview/desktop.hbs deleted file mode 100644 index 9e6e183b0e..0000000000 --- a/ghost/admin/app/components/modal-post-preview/desktop.hbs +++ /dev/null @@ -1,5 +0,0 @@ -
-
- -
-
\ No newline at end of file diff --git a/ghost/admin/app/components/modal-post-preview/email.hbs b/ghost/admin/app/components/modal-post-preview/email.hbs index 363cb50033..124c3a1be1 100644 --- a/ghost/admin/app/components/modal-post-preview/email.hbs +++ b/ghost/admin/app/components/modal-post-preview/email.hbs @@ -1,4 +1,4 @@ -
+
@@ -10,4 +10,26 @@
+
+
+ Send a preview newsletter +
+ + + {{#if this.sendPreviewEmailError}} +

{{this.sendPreviewEmailError}}

+ {{/if}} +
+
\ No newline at end of file diff --git a/ghost/admin/app/components/modal-post-preview/email.js b/ghost/admin/app/components/modal-post-preview/email.js index 9bfdd22752..8f9d087a24 100644 --- a/ghost/admin/app/components/modal-post-preview/email.js +++ b/ghost/admin/app/components/modal-post-preview/email.js @@ -1,6 +1,9 @@ import Component from '@glimmer/component'; +import validator from 'validator'; import {action} from '@ember/object'; +import {htmlSafe} from '@ember/string'; import {inject as service} from '@ember/service'; +import {task} from 'ember-concurrency-decorators'; import {timeout} from 'ember-concurrency'; import {tracked} from '@glimmer/tracking'; @@ -24,6 +27,15 @@ export default class ModalPostPreviewEmailComponent extends Component { @tracked html = ''; @tracked subject = ''; + @tracked emailPreviewAddress = ''; + @tracked sendPreviewEmailError = ''; + + get mailgunIsEnabled() { + return this.config.get('mailgunIsConfigured') || + this.settings.get('mailgunApiKey') && + this.settings.get('mailgunDomain') && + this.settings.get('mailgunBaseUrl'); + } @action async renderEmailPreview(iframe) { @@ -38,6 +50,46 @@ export default class ModalPostPreviewEmailComponent extends Component { } } + @task({drop: true}) + *sendPreviewEmailTask() { + try { + const resourceId = this.post.id; + const testEmail = this.emailPreviewAddress.trim(); + + if (!validator.isEmail(testEmail)) { + this.sendPreviewEmailError = 'Please enter a valid email'; + return false; + } + if (!this.mailgunIsEnabled) { + this.sendPreviewEmailError = 'Please verify your email settings'; + return false; + } + this.sendPreviewEmailError = ''; + + const url = this.ghostPaths.url.api('/email_preview/posts', resourceId); + const data = {emails: [testEmail]}; + const options = { + data, + dataType: 'json' + }; + + return yield this.ajax.post(url, options); + } catch (error) { + if (error) { + let message = 'Email could not be sent, verify mail settings'; + + // grab custom error message if present + if ( + error.payload && error.payload.errors + && error.payload.errors[0] && error.payload.errors[0].message) { + message = htmlSafe(error.payload.errors[0].message); + } + + this.sendPreviewEmailError = message; + } + } + } + async _fetchEmailData() { let {html, subject} = this; let {post} = this.args; diff --git a/ghost/admin/app/components/modal-post-preview/social.hbs b/ghost/admin/app/components/modal-post-preview/social.hbs index e69de29bb2..94fdf9b012 100644 --- a/ghost/admin/app/components/modal-post-preview/social.hbs +++ b/ghost/admin/app/components/modal-post-preview/social.hbs @@ -0,0 +1,42 @@ + +
+
+ {{#if this.facebookImage}} +
+ {{/if}} +
+
{{truncate this.facebookTitle 88}}
+
{{truncate this.facebookDescription 300}}
+
+
+ {{this.config.blogDomain}} | by {{author-names @post.authors}} +
+
+
+
+
+
+ +
+ {{#if this.twitterImage}} +
+ {{/if}} +
+
{{this.twitterTitle}}
+
{{truncate this.twitterDescription 155}}
+
+
+ {{this.config.blogDomain}} +
+
+
+
+
+
+ +
+
{{truncate this.serpTitle 70}}
+
{{truncate this.serpURL 70}}
+
{{truncate this.serpDescription 300}}
+
+
\ No newline at end of file diff --git a/ghost/admin/app/components/modal-post-preview/social.js b/ghost/admin/app/components/modal-post-preview/social.js new file mode 100644 index 0000000000..04e700f3ea --- /dev/null +++ b/ghost/admin/app/components/modal-post-preview/social.js @@ -0,0 +1,65 @@ +import Component from '@glimmer/component'; +import formatMarkdown from 'ghost-admin/utils/format-markdown'; +import {inject as service} from '@ember/service'; + +export default class ModalPostPreviewSocialComponent extends Component { + @service config; + @service settings; + + get _fallbackDescription() { + return this.args.post.customExcerpt || + this.serpDescription || + this.args.post.excerpt || + this.settings.get('description'); + } + + // SERP + + get serpTitle() { + return this.args.post.metaTitle || this.args.post.title || '(Untitled)'; + } + + get serpDescription() { + const metaDescription = this.args.post.metaDescription; + + if (metaDescription) { + return metaDescription; + } + + const mobiledoc = this.args.post.scratch; + const [markdownCard] = (mobiledoc && mobiledoc.cards) || []; + const markdown = markdownCard && markdownCard[1] && markdownCard[1].markdown; + + let serpDescription; + + const div = document.createElement('div'); + div.innerHTML = formatMarkdown(markdown, false); + + // Strip HTML + serpDescription = div.textContent; + // Replace new lines and trim + serpDescription = serpDescription.replace(/\n+/g, ' ').trim(); + + return serpDescription; + } + + // Facebook + + get facebookTitle() { + return this.args.post.ogTitle || this.serpTitle; + } + + get facebookDescription() { + return this.args.post.ogDescription || this._fallbackDescription; + } + + // Twitter + + get twitterTitle() { + return this.args.post.twitterTitle || this.serpTitle; + } + + get twitterDescription() { + return this.args.post.twitterDescription || this._fallbackDescription; + } +} diff --git a/ghost/admin/app/styles/layouts/preview-email.css b/ghost/admin/app/styles/layouts/preview-email.css index 262cdf9235..0f40b9a254 100644 --- a/ghost/admin/app/styles/layouts/preview-email.css +++ b/ghost/admin/app/styles/layouts/preview-email.css @@ -19,6 +19,7 @@ top: 0; left: 0; right: 0; + min-height: 70px; display: flex; align-items: center; justify-content: center; @@ -146,9 +147,9 @@ } .fullscreen-modal-email-preview .gh-pe-mobile-container { - height: calc(100vh - 140px); display: flex; flex-direction: column; + flex-grow: 1; align-items: center; background: var(--whitegrey-l1); padding: 30px 30px 45px; diff --git a/ghost/admin/config/environment.js b/ghost/admin/config/environment.js index 4214fbce55..43e312f96a 100644 --- a/ghost/admin/config/environment.js +++ b/ghost/admin/config/environment.js @@ -35,6 +35,10 @@ module.exports = function (environment) { moment: { includeTimezone: 'all' + }, + + emberKeyboard: { + disableInputsInitializer: true } }; diff --git a/ghost/admin/package.json b/ghost/admin/package.json index 58a8345ac5..025eec3fb6 100644 --- a/ghost/admin/package.json +++ b/ghost/admin/package.json @@ -84,6 +84,7 @@ "ember-fetch": "8.0.4", "ember-in-viewport": "3.8.1", "ember-infinity": "2.1.2", + "ember-keyboard": "^6.0.2", "ember-load": "0.0.17", "ember-load-initializers": "2.1.2", "ember-mocha": "0.16.2", diff --git a/ghost/admin/yarn.lock b/ghost/admin/yarn.lock index 433b07d453..baf3049454 100644 --- a/ghost/admin/yarn.lock +++ b/ghost/admin/yarn.lock @@ -6276,6 +6276,16 @@ ember-invoke-action@^1.5.0: dependencies: ember-cli-babel "^6.6.0" +ember-keyboard@^6.0.2: + version "6.0.2" + resolved "https://registry.yarnpkg.com/ember-keyboard/-/ember-keyboard-6.0.2.tgz#efe260be34621a403a4d4688b038d65b371f6892" + integrity sha512-ZGAXYGfN4gxGFRcv3ix2X8HA8j/VluwhlENT9pfbFjAAGtvFz9wzNUJuaq3LS5Ksj+f2oXL5f++tSOrO7Ha1wA== + dependencies: + ember-cli-babel "^7.22.1" + ember-cli-htmlbars "^5.3.1" + ember-compatibility-helpers "^1.2.1" + ember-modifier "^2.1.0" + ember-load-initializers@2.1.2: version "2.1.2" resolved "https://registry.yarnpkg.com/ember-load-initializers/-/ember-load-initializers-2.1.2.tgz#8a47a656c1f64f9b10cecdb4e22a9d52ad9c7efa"