a67342b06a
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 <danielvanderwinden@ghost.org>
86 lines
4.8 KiB
Handlebars
86 lines
4.8 KiB
Handlebars
<section class="gh-dashboard-section">
|
||
<article class="gh-dashboard-onboarding-box">
|
||
<div class="gh-dashboard-onboarding-box-message">
|
||
<div>
|
||
{{!-- {{svg-jar "confetti"}} --}}
|
||
<h3 class="gh-dashboard-onboarding-heading">Welcome to your new Ghost publication!</h3>
|
||
<p>Let’s set you up for success.</p>
|
||
<p>For additional resources, visit our Help Center.</p>
|
||
</div>
|
||
<span>Dismiss</span>
|
||
</div>
|
||
<div class="gh-dashboard-onboarding-items">
|
||
<div>
|
||
{{!-- Step 1 --}}
|
||
<div class="gh-dashboard-onboarding-item gh-dashboard-onboarding-item--completed">
|
||
<div class="gh-dashboard-onboarding-item-content">
|
||
{{svg-jar "rocket" }}
|
||
<span class="gh-dashboard-list-text">Start a new Ghost publication</span>
|
||
</div>
|
||
<div class="gh-dashboard-onboarding-item-checkmark">
|
||
{{svg-jar "check-2" }}
|
||
</div>
|
||
</div>
|
||
{{!-- Step 2 --}}
|
||
<LinkTo @route="settings-x.settings-x" @model="design/edit?ref=setup" class="gh-dashboard-onboarding-item gh-dashboard-onboarding-item--default">
|
||
<div class="gh-dashboard-onboarding-item-content">
|
||
{{svg-jar "brush" }}
|
||
<div class="gh-dashboard-onboarding-item-details">
|
||
<span class="gh-dashboard-onboarding-item-title">Customize your publication</span>
|
||
<span class="gh-dashboard-onboarding-item-description">Match the look and feel to your style and make it yours.</span>
|
||
</div>
|
||
</div>
|
||
<div class="gh-dashboard-onboarding-item-action">
|
||
{{svg-jar "arrow-right" }}
|
||
</div>
|
||
</LinkTo>
|
||
{{!-- Step 3 --}}
|
||
<LinkTo @route="lexical-editor.new" @model="post" class="gh-dashboard-onboarding-item">
|
||
<div class="gh-dashboard-onboarding-item-content">
|
||
{{svg-jar "writing" }}
|
||
<div class="gh-dashboard-onboarding-item-details">
|
||
<span class="gh-dashboard-onboarding-item-title">Create your first post</span>
|
||
<span class="gh-dashboard-onboarding-item-description">Explore the editor and tell your story — or a preview of what’s to come.</span>
|
||
</div>
|
||
</div>
|
||
<div class="gh-dashboard-onboarding-item-action">
|
||
{{svg-jar "arrow-right" }}
|
||
</div>
|
||
</LinkTo>
|
||
{{!-- Step 4 --}}
|
||
<LinkTo @route="members" class="gh-dashboard-onboarding-item">
|
||
<div class="gh-dashboard-onboarding-item-content">
|
||
{{svg-jar "member-add" }}
|
||
<div class="gh-dashboard-onboarding-item-details">
|
||
<span class="gh-dashboard-onboarding-item-title">Build your audience</span>
|
||
<span class="gh-dashboard-onboarding-item-description">Add members and grow your readership.</span>
|
||
</div>
|
||
</div>
|
||
<div class="gh-dashboard-onboarding-item-action">
|
||
{{svg-jar "arrow-right" }}
|
||
</div>
|
||
</LinkTo>
|
||
{{!-- Step 5 --}}
|
||
<div role="button" {{on "click" (toggle-action "showShareModal" this)}} class="gh-dashboard-onboarding-item">
|
||
<div class="gh-dashboard-onboarding-item-content">
|
||
{{svg-jar "megaphone" }}
|
||
<div class="gh-dashboard-onboarding-item-details">
|
||
<span class="gh-dashboard-onboarding-item-title">Share your publication</span>
|
||
<span class="gh-dashboard-onboarding-item-description">Share your publication on social media.</span>
|
||
</div>
|
||
</div>
|
||
<div class="gh-dashboard-onboarding-item-action">
|
||
{{svg-jar "arrow-right" }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</section>
|
||
|
||
{{#if this.showShareModal}}
|
||
<GhFullscreenModal @modal="share"
|
||
@close={{this.close}}
|
||
@modifier="action wide"
|
||
/>
|
||
{{/if}} |