Skip to content

Commit

Permalink
Added a fullscreen onboarding checklist to the dashboard (#19888)
Browse files Browse the repository at this point in the history 
ref https://linear.app/tryghost/issue/IPC-66/onboarding-checklist-v1

- Larger, 100vh onboarding checklist that’s currently on the dashboard,
but should be moved to it’s own component and route
- Every step links to the relevant screen, but the logic for completing
steps is missing
  • Loading branch information
@djordjevlais
djordjevlais committed Mar 19, 2024
1 parent 3ff2eec commit cdf4517
Show file tree
Hide file tree
Showing 4 changed files with 182 additions and 137 deletions.
137 changes: 70 additions & 67 deletions ghost/admin/app/components/dashboard/onboarding-checklist.hbs
View file
@@ -1,82 +1,85 @@
<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 class="gh-onboarding-wrapper">
<div class="gh-onboarding-header">
<video width="100" height="100" loop autoplay muted playsinline preload="metadata" style="width: 100px; height: 100px; margin-bottom: 24px;">
<source src="assets/videos/logo-loader.mp4" type="video/mp4" />
</video>
<h2 class="gh-canvas-title">Maker Stations is ready to go!</h2>
<p>Let’s set your brand new publication up for success.</p>
</div>

<div class="gh-onboarding-items">
<div>
{{!-- Step 1 --}}
<div class="gh-onboarding-item gh-onboarding-item--completed">
<div class="gh-onboarding-item-content">
{{svg-jar "rocket" }}
<div class="gh-onboarding-item-details">
<span class="gh-onboarding-item-title">Start a new Ghost publication</span>
</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 class="gh-onboarding-item-checkmark">
{{svg-jar "check-circle-simple" }}
</div>
</div>
{{!-- Step 2 --}}
<LinkTo @route="settings-x.settings-x" @model="design/edit?ref=setup" class="gh-onboarding-item gh-onboarding-item--next">
<div class="gh-onboarding-item-content">
{{svg-jar "brush" }}
<div class="gh-onboarding-item-details">
<span class="gh-onboarding-item-title">Customize your publication</span>
<span class="gh-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 class="gh-onboarding-item-action">
{{svg-jar "arrow-right-tail" }}
</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" }}
</LinkTo>
{{!-- Step 3 --}}
<LinkTo @route="lexical-editor.new" @model="post" class="gh-onboarding-item">
<div class="gh-onboarding-item-content">
{{svg-jar "writing" }}
<div class="gh-onboarding-item-details">
<span class="gh-onboarding-item-title">Create your first post</span>
<span class="gh-onboarding-item-description">Explore the editor and tell your story.</span>
</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 class="gh-onboarding-item-action">
{{svg-jar "arrow-right-tail" }}
</div>
</LinkTo>
{{!-- Step 4 --}}
<LinkTo @route="members" class="gh-onboarding-item">
<div class="gh-onboarding-item-content">
{{svg-jar "member-add" }}
<div class="gh-onboarding-item-details">
<span class="gh-onboarding-item-title">Build your audience</span>
<span class="gh-onboarding-item-description">Add members and grow your readership.</span>
</div>
</div>
<div class="gh-dashboard-onboarding-item-action">
{{svg-jar "arrow-right" }}
<div class="gh-onboarding-item-action">
{{svg-jar "arrow-right-tail" }}
</div>
</LinkTo>
{{!-- Step 5 --}}
<div role="button" {{on "click" (toggle-action "showShareModal" this)}} class="gh-onboarding-item">
<div class="gh-onboarding-item-content">
{{svg-jar "megaphone" }}
<div class="gh-onboarding-item-details">
<span class="gh-onboarding-item-title">Share your publication</span>
<span class="gh-onboarding-item-description">Share your publication on social media.</span>
</div>
</div>
<div class="gh-onboarding-item-action">
{{svg-jar "arrow-right-tail" }}
</div>
</div>
</div>
</article>
</section>
</div>

<p class="gh-onboarding-help">Need some more help? Check out our <a href="#">Help Center</a></p>

<a href="#" class="gh-onboarding-skip">Skip onboarding</a>
</div>

{{#if this.showShareModal}}
<GhFullscreenModal @modal="share"
Expand Down

0 comments on commit cdf4517

Please sign in to comment.