From a67342b06a3d062bd35aac5e1a9d5b4b9c8f9735 Mon Sep 17 00:00:00 2001 From: Djordje Vlaisavljevic Date: Mon, 18 Mar 2024 14:53:01 +0000 Subject: [PATCH] Add WIP onboarding checklist behind the flag (#19801) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ref https://linear.app/tryghost/issue/IPC-66/onboarding-checklist-v1 - Adds a basic version of a new onboarding checklist behind the feature flag, without incomplete/complete state logic - Links to Design settings, Members screen and new post - Opens amodal that we’ll use as Share modal --------- Co-authored-by: Daniël van der Winden --- .../settings/advanced/labs/AlphaFeatures.tsx | 4 + .../dashboard/onboarding-checklist.hbs | 86 ++++++ .../dashboard/onboarding-checklist.js | 34 +++ ghost/admin/app/components/modal-share.hbs | 116 ++++++++ ghost/admin/app/components/modal-share.js | 5 + ghost/admin/app/services/feature.js | 1 + ghost/admin/app/styles/layouts/dashboard.css | 258 ++++++++++++++++++ ghost/admin/app/templates/dashboard.hbs | 47 ++-- ghost/admin/public/assets/icons/brush.svg | 1 + ghost/admin/public/assets/icons/megaphone.svg | 1 + ghost/admin/public/assets/icons/rocket.svg | 1 + .../public/assets/icons/social-linkedin.svg | 11 + ghost/admin/public/assets/icons/writing.svg | 1 + ghost/core/core/shared/labs.js | 3 +- 14 files changed, 548 insertions(+), 21 deletions(-) create mode 100644 ghost/admin/app/components/dashboard/onboarding-checklist.hbs create mode 100644 ghost/admin/app/components/dashboard/onboarding-checklist.js create mode 100644 ghost/admin/app/components/modal-share.hbs create mode 100644 ghost/admin/app/components/modal-share.js create mode 100644 ghost/admin/public/assets/icons/brush.svg create mode 100644 ghost/admin/public/assets/icons/megaphone.svg create mode 100644 ghost/admin/public/assets/icons/rocket.svg create mode 100644 ghost/admin/public/assets/icons/social-linkedin.svg create mode 100644 ghost/admin/public/assets/icons/writing.svg diff --git a/apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx b/apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx index bcd4bbb384..35b22eca9a 100644 --- a/apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx +++ b/apps/admin-x-settings/src/components/settings/advanced/labs/AlphaFeatures.tsx @@ -55,6 +55,10 @@ const features = [{ title: 'New email addresses', description: 'For self hosters, forces the usage of the mail.from config as from address for all outgoing emails', flag: 'newEmailAddresses' +},{ + title: 'Onboarding checklist', + description: 'Onboarding checklist that helps new customers get started', + flag: 'onboardingChecklist' },{ title: 'NestJS Playground', description: 'Wires up the Ghost NestJS App to the Admin API', diff --git a/ghost/admin/app/components/dashboard/onboarding-checklist.hbs b/ghost/admin/app/components/dashboard/onboarding-checklist.hbs new file mode 100644 index 0000000000..f629af37df --- /dev/null +++ b/ghost/admin/app/components/dashboard/onboarding-checklist.hbs @@ -0,0 +1,86 @@ +
+
+
+
+ {{!-- {{svg-jar "confetti"}} --}} +

Welcome to your new Ghost publication!

+

Let’s set you up for success.

+

For additional resources, visit our Help Center.

+
+ Dismiss +
+
+
+ {{!-- Step 1 --}} +
+
+ {{svg-jar "rocket" }} + Start a new Ghost publication +
+
+ {{svg-jar "check-2" }} +
+
+ {{!-- Step 2 --}} + +
+ {{svg-jar "brush" }} +
+ Customize your publication + Match the look and feel to your style and make it yours. +
+
+
+ {{svg-jar "arrow-right" }} +
+ + {{!-- Step 3 --}} + +
+ {{svg-jar "writing" }} +
+ Create your first post + Explore the editor and tell your story — or a preview of what’s to come. +
+
+
+ {{svg-jar "arrow-right" }} +
+ + {{!-- Step 4 --}} + +
+ {{svg-jar "member-add" }} +
+ Build your audience + Add members and grow your readership. +
+
+
+ {{svg-jar "arrow-right" }} +
+ + {{!-- Step 5 --}} +
+
+ {{svg-jar "megaphone" }} +
+ Share your publication + Share your publication on social media. +
+
+
+ {{svg-jar "arrow-right" }} +
+
+
+
+
+
+ +{{#if this.showShareModal}} + +{{/if}} \ No newline at end of file diff --git a/ghost/admin/app/components/dashboard/onboarding-checklist.js b/ghost/admin/app/components/dashboard/onboarding-checklist.js new file mode 100644 index 0000000000..9e3b7c7dd9 --- /dev/null +++ b/ghost/admin/app/components/dashboard/onboarding-checklist.js @@ -0,0 +1,34 @@ +import Component from '@glimmer/component'; +import {action} from '@ember/object'; +import {tracked} from '@glimmer/tracking'; + +export default class OnboardingChecklist extends Component { + @tracked customizePublication = false; + @tracked createPost = false; + @tracked buildAudience = false; + @tracked tellWorld = false; + + @tracked showMemberTierModal = false; + + @action + completeStep(step) { + this.completed = !this.completed; + + switch (step) { + case 'customizePublication': + this.customizePublication = !this.customizePublication; + break; + case 'createPost': + this.createPost = !this.createPost; + break; + case 'buildAudience': + this.buildAudience = !this.buildAudience; + break; + case 'tellWorld': + this.tellWorld = !this.tellWorld; + break; + default: + break; + } + } +} diff --git a/ghost/admin/app/components/modal-share.hbs b/ghost/admin/app/components/modal-share.hbs new file mode 100644 index 0000000000..4fb7a40a2a --- /dev/null +++ b/ghost/admin/app/components/modal-share.hbs @@ -0,0 +1,116 @@ + +
+

Share your publication

+

Let the world discover your publication. Share it with your network and start building a community of readers.

+
+ + + {{!--
+
+
+ {{#let (or @post.featureImage (get-setting "coverImage")) as |imageUrl|}} +
{{get-setting "title"}}
+
{{ get-setting "description"}}
+
+ {{#if (get-setting "icon")}} +
+ {{/if}} +
{{get-setting "title"}}
+
Daniël van der Winden
+
+ + {{#if imageUrl}} +
+ +
+ {{/if}} + {{/let}} +
+
+ You can set your publication icon, cover image and description in Settings + +
    +
  • + Icon +

    Copy a link to your publication

    +
    • +
  • + Icon +

    Share on X

    +
    • +
  • + Icon +

    Share on Facebook

    +
    • +
  • + Icon +

    Share on LinkedIn

    +
    • +
+
--}} + +
+
+
+ {{#let (or @post.featureImage (get-setting "coverImage")) as |imageUrl|}} +
{{get-setting "title"}}
+
{{ get-setting "description"}}
+
+ {{#if (get-setting "icon")}} +
+ {{/if}} +
{{get-setting "title"}} + • +
+
Daniël van der Winden
+
+ + {{#if imageUrl}} +
+ +
+ {{/if}} + {{/let}} +
+
+ You can set your publication icon, cover image and description in Settings + +
    +
  • + + {{svg-jar "link"}} + + Copy a link to your publication +
    + {{svg-jar "arrow-right"}} +
    +
    • +
  • + + {{svg-jar "social-x"}} + + Share on X +
    + {{svg-jar "arrow-right"}} +
    +
    • +
  • + + {{svg-jar "social-facebook"}} + + Share on Facebook +
    + {{svg-jar "arrow-right"}} +
    +
    • +
  • + + {{svg-jar "social-linkedin"}} + + Share on LinkedIn +
    + {{svg-jar "arrow-right"}} +
    +
    • +
+
diff --git a/ghost/admin/app/components/modal-share.js b/ghost/admin/app/components/modal-share.js new file mode 100644 index 0000000000..cf4bf97252 --- /dev/null +++ b/ghost/admin/app/components/modal-share.js @@ -0,0 +1,5 @@ +import ModalComponent from 'ghost-admin/components/modal-base'; + +export default ModalComponent.extend({ + +}); diff --git a/ghost/admin/app/services/feature.js b/ghost/admin/app/services/feature.js index f4d3b37b5f..d508b8adc7 100644 --- a/ghost/admin/app/services/feature.js +++ b/ghost/admin/app/services/feature.js @@ -80,6 +80,7 @@ export default class FeatureService extends Service { @feature('filterEmailDisabled') filterEmailDisabled; @feature('adminXDemo') adminXDemo; @feature('portalImprovements') portalImprovements; + @feature('onboardingChecklist') onboardingChecklist; _user = null; diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css index e3bac39849..7587a4a7f9 100644 --- a/ghost/admin/app/styles/layouts/dashboard.css +++ b/ghost/admin/app/styles/layouts/dashboard.css @@ -2759,4 +2759,262 @@ Dashboard Mentions */ padding: 0; font-size: 1.4rem; font-weight: 500; +} + +/* --------------------------------- +Onboarding checklist */ + +.gh-dashboard-onboarding-box { + display: grid; + grid-gap: 24px; + grid-template-columns: 1fr 2fr; + border: 1px solid #ebeef0; + border-radius: 6px; + overflow: hidden; + flex: 1; +} + +.gh-dashboard-onboarding-box-message { + display: flex; + flex-direction: column; + justify-content: space-between; + background-color: rgb(204, 29, 204); + padding: 24px; + color: white; + background: transparent; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + background-image: url(img/gradient-bg.png); +} + +.gh-dashboard-onboarding-heading { + font-size: 1.8rem; + font-weight: 700; + line-height: 1.3; + padding: 0; + color: #fff; + letter-spacing: -.3px; +} + +.gh-dashboard-onboarding-items { + padding: 24px; +} + +.gh-dashboard-onboarding-item { + padding: 12px 0; + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid #ebeef0; +} + +.gh-dashboard-onboarding-item:first-child { + margin-top: -12px; +} + +.gh-dashboard-onboarding-item:last-child { + border-bottom: 0 none; + margin-bottom: -12px; +} + +.gh-dashboard-onboarding-item:not(.gh-dashboard-onboarding-item--completed):hover { + background: linear-gradient(315deg,#fafafb 60%,#fff); +} + +.gh-dashboard-onboarding-item--completed .gh-dashboard-onboarding-item-content { + opacity: 0.3; +} + +.gh-dashboard-onboarding-item-content { + display: flex; + align-items: flex-start; + justify-content: flex-start; + min-width: 0; +} + +.gh-dashboard-onboarding-item-details { + display: flex; + flex-direction: column; + text-align: left; +} + +.gh-dashboard-onboarding-item-title { + font-weight: 600; + font-size: 1.5rem; + letter-spacing: 0; + color: #394047; + padding: 0 32px 0 0; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + margin-bottom: 0; +} + +.gh-dashboard-onboarding-items:hover .gh-dashboard-onboarding-item:hover .gh-dashboard-onboarding-item-description, +.gh-dashboard-onboarding-items .gh-dashboard-onboarding-item--default .gh-dashboard-onboarding-item-description { + height: 20px; +} + +.gh-dashboard-onboarding-item-description, .gh-dashboard-onboarding-items:hover .gh-dashboard-onboarding-item-description { + font-weight: 400; + color: #626d79!important; + height: 0; + overflow: hidden; + transition: height .15s; +} + +.gh-dashboard-onboarding-item-action { + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + min-width: 0; +} + +.gh-dashboard-onboarding-item-content svg { + width: 20px; + min-width: 20px; + height: auto; + margin: 2px 16px 0 0; + color: #ae5aef; +} + +.gh-dashboard-onboarding-item-content svg path { + stroke: #ae5aef; + stroke-width: 1.5 !important; +} + +.gh-dashboard-onboarding-item--completed .gh-dashboard-onboarding-item-content svg { + color: var(--middarkgrey); +} + +.gh-dashboard-onboarding-item--completed .gh-dashboard-onboarding-item-content svg path { + stroke: var(--middarkgrey); +} + +.gh-dashboard-onboarding-item-action { + display: flex; +} + +.gh-dashboard-onboarding-item-action svg { + width: 14px; + min-width: 14px; + height: 14px; + margin-right: 1rem; +} + +.gh-dashboard-onboarding-item-action svg path { + fill: var(--midlightgrey); +} + +.gh-dashboard-onboarding-item-checkmark { + display: flex; +} + +.gh-dashboard-onboarding-item-checkmark svg { + width: 14px; + height: auto; + margin-right: 1rem; +} + +.gh-dashboard-onboarding-item-checkmark svg path { + stroke: var(--green); +} + +/* --------------------------------- +Share publication modal */ + +.gh-site-preview-container { + padding: 24px; + border-radius: 6px; + border: 1px solid var(--whitegrey); + background: var(--white); + transition: all .3s ease-in-out; +} + +.gh-site-preview { + +} + +.gh-site-preview-title { + font-size: 1.6rem; + font-weight: 700; + line-height: 1.3; + padding: 0; + color: var(--black); + letter-spacing: -.3px; + margin-bottom: 4px; + width: 100%; +} + +.gh-site-preview-description { + font-size: 1.4rem; + font-weight: 400; + line-height: 1.5; + padding: 0; + color: var(--midgrey); + margin-bottom: 24px; + width: 100%; +} + +.gh-site-preview-details { + padding: 0; + margin: 0; + width: 100%; + display: flex; + flex-direction: row; +} + +.gh-site-icon { + width: 16px; + height: 16px; + margin-bottom: 16px; +} + +.gh-site-image { + width: 100%; + height: auto; + border-radius: 6px; + margin-bottom: 24px; +} + +.gh-share-links { + list-style: none; + padding: 0; + margin: 40px 0 0; +} + +.gh-share-links li { + padding: 8px 0; + border-bottom: 1px solid var(--whitegrey); + display: flex; + flex-direction: row; + font-size: 1.5rem; + font-weight: 600; + color: var(--darkgrey); + line-height: 1.5; + width: 100%; +} + +.gh-share-links li span { + display: block; +} + +.gh-share-links li span svg { + width: 16px; + height: 16px; + fill: var(--midgrey); +} + +span.tip { + font-size: 1.2rem; + font-weight: 400; + line-height: 1.5; + padding: 0; + margin-top: 8px; + color: var(--midgrey); + width: 100%; + display: block; } \ No newline at end of file diff --git a/ghost/admin/app/templates/dashboard.hbs b/ghost/admin/app/templates/dashboard.hbs index 3faa35e592..c6d3fbc19b 100644 --- a/ghost/admin/app/templates/dashboard.hbs +++ b/ghost/admin/app/templates/dashboard.hbs @@ -83,31 +83,38 @@ {{else}} {{#if this.areMembersEnabled}} + + {{#if (feature 'onboardingChecklist')}} + + {{/if}} + {{#if this.hasPaidTiers}} {{/if}} -
- - {{#if this.hasPaidTiers}} -
-
- - -
-
- {{/if}} - {{#unless this.membersUtils.isMembersInviteOnly}} - - {{/unless}} - {{#if this.areNewslettersEnabled}} - - {{/if}} + {{#unless (feature 'onboardingChecklist')}} +
+ + {{#if this.hasPaidTiers}} +
+
+ + +
+
+ {{/if}} + {{#unless this.membersUtils.isMembersInviteOnly}} + + {{/unless}} + {{#if this.areNewslettersEnabled}} + + {{/if}} - {{#if this.isTotalMembersZero}} - - {{/if}} -
+ {{#if this.isTotalMembersZero}} + + {{/if}} +
+ {{/unless}} {{/if}}
diff --git a/ghost/admin/public/assets/icons/brush.svg b/ghost/admin/public/assets/icons/brush.svg new file mode 100644 index 0000000000..76ca228182 --- /dev/null +++ b/ghost/admin/public/assets/icons/brush.svg @@ -0,0 +1 @@ +Color Brush 3 Streamline Icon: https://streamlinehq.com \ No newline at end of file diff --git a/ghost/admin/public/assets/icons/megaphone.svg b/ghost/admin/public/assets/icons/megaphone.svg new file mode 100644 index 0000000000..4225e5974a --- /dev/null +++ b/ghost/admin/public/assets/icons/megaphone.svg @@ -0,0 +1 @@ +Megaphone Streamline Icon: https://streamlinehq.com \ No newline at end of file diff --git a/ghost/admin/public/assets/icons/rocket.svg b/ghost/admin/public/assets/icons/rocket.svg new file mode 100644 index 0000000000..eaaa9ede1a --- /dev/null +++ b/ghost/admin/public/assets/icons/rocket.svg @@ -0,0 +1 @@ +Space Rocket Flying Streamline Icon: https://streamlinehq.com \ No newline at end of file diff --git a/ghost/admin/public/assets/icons/social-linkedin.svg b/ghost/admin/public/assets/icons/social-linkedin.svg new file mode 100644 index 0000000000..11f4ccb581 --- /dev/null +++ b/ghost/admin/public/assets/icons/social-linkedin.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/ghost/admin/public/assets/icons/writing.svg b/ghost/admin/public/assets/icons/writing.svg new file mode 100644 index 0000000000..4a8d328b87 --- /dev/null +++ b/ghost/admin/public/assets/icons/writing.svg @@ -0,0 +1 @@ +Pencil Write Streamline Icon: https://streamlinehq.com \ No newline at end of file diff --git a/ghost/core/core/shared/labs.js b/ghost/core/core/shared/labs.js index 883ef355ff..cbd27861d5 100644 --- a/ghost/core/core/shared/labs.js +++ b/ghost/core/core/shared/labs.js @@ -48,7 +48,8 @@ const ALPHA_FEATURES = [ 'importMemberTier', 'lexicalIndicators', // 'adminXOffers', - 'adminXDemo' + 'adminXDemo', + 'onboardingChecklist' ]; module.exports.GA_KEYS = [...GA_FEATURES];