Ghost/ghost/admin/app/components/dashboard/onboarding-checklist.hbs

85 lines
4.5 KiB
Handlebars
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="gh-onboarding-wrapper" data-test-dashboard="onboarding-checklist">
<div class="gh-onboarding-header">
{{#if (feature "nightShift")}}
<div class="gh-onboarding-ghost-logo-wrapper">
<video width="80" height="80" loop autoplay muted playsinline preload="metadata" style="width: 80px; height: 80px;" class="gh-onboarding-ghost-logo--dark" {{autoplay}}>
<source src="assets/videos/logo-loader-dark.mp4" type="video/mp4" />
</video>
<div class="gh-onboarding-ghost-logo-overlay"></div>
</div>
{{else}}
<div class="gh-onboarding-ghost-logo-wrapper">
<video width="80" height="80" loop autoplay muted playsinline preload="metadata" style="width: 80px; height: 80px;" class="gh-onboarding-ghost-logo--light" {{autoplay}}>
<source src="assets/videos/logo-loader.mp4" type="video/mp4" />
</video>
</div>
{{/if}}
{{#if this.onboarding.allStepsCompleted}}
<h2 class="gh-canvas-title">Youre all set.</h2>
{{else}}
<h2 class="gh-canvas-title">Lets get started!</h2>
<p>Welcome! Its time to set up {{get-setting "title"}}.</p>
{{/if}}
</div>
<div class="gh-onboarding-items">
<div>
{{!-- Step 1 --}}
<div class="gh-onboarding-item gh-onboarding-item--completed">
<Dashboard::Onboarding::Step
@icon="rocket"
@title="Start a new Ghost publication"
@complete={{true}}
/>
</div>
{{!-- Step 2 --}}
<LinkTo @route="settings-x.settings-x" @model="design/edit?ref=setup" class="gh-onboarding-item {{onboarding-step-class "customize-design"}}" id="ob-customize-design" {{on "click" (fn this.onboarding.markStepCompleted "customize-design")}}>
<Dashboard::Onboarding::Step
@icon="brush"
@title="Customize your design"
@description="Craft a look that reflects your brand and style."
@complete={{is-onboarding-step-completed "customize-design"}}
/>
</LinkTo>
{{!-- Step 3 --}}
<LinkTo @route="lexical-editor.new" @model="post" class="gh-onboarding-item {{onboarding-step-class "first-post"}}" id="ob-first-post" {{on "click" (fn this.onboarding.markStepCompleted "first-post")}}>
<Dashboard::Onboarding::Step
@icon="writing"
@title="Explore the editor"
@description="Get to know a writing experience you'll love."
@complete={{is-onboarding-step-completed "first-post"}}
/>
</LinkTo>
{{!-- Step 4 --}}
<LinkTo @route="members" class="gh-onboarding-item {{onboarding-step-class "build-audience"}}" id="ob-build-audience" {{on "click" (fn this.onboarding.markStepCompleted "build-audience")}}>
<Dashboard::Onboarding::Step
@icon="member-add"
@title="Build your audience"
@description="Add members and grow your readership."
@complete={{is-onboarding-step-completed "build-audience"}}
/>
</LinkTo>
{{!-- Step 5 --}}
<div role="button" {{on "click" this.openShareModal}} class="gh-onboarding-item {{onboarding-step-class "share-publication"}}" id="ob-share-publication">
<Dashboard::Onboarding::Step
@icon="megaphone"
@title="Share your publication"
@description="Expand your reach on social media."
@complete={{is-onboarding-step-completed "share-publication"}}
role="presentation"
/>
</div>
</div>
</div>
{{#if this.onboarding.allStepsCompleted}}
<a href="#" class="gh-onboarding-explore-dashboard" id="ob-completed" {{on "click" this.onboarding.completeChecklist}}>Explore your dashboard</a>
{{/if}}
<p class="gh-onboarding-help">More questions? Check out our <a href="https://ghost.org/help?utm_source=admin&utm_campaign=onboarding" id="ob-help-center" target="_blank" rel="noopener noreferrer">Help Center</a>.</p>
{{#unless this.onboarding.allStepsCompleted}}
<a href="#" class="gh-onboarding-skip" id="ob-skip" {{on "click" this.onboarding.dismissChecklist}}>Skip onboarding</a>
{{/unless}}
</div>