2024-03-27 20:37:37 +03:00
<div class="gh-onboarding-wrapper" data-test-dashboard="onboarding-checklist">
<div class="gh-onboarding-header">
2024-03-27 17:07:00 +03:00
<video width="80" height="80" loop autoplay muted playsinline preload="metadata" style="width: 80px; height: 80px; margin-bottom: 24px;">
2024-03-19 19:07:49 +03:00
<source src="assets/videos/logo-loader.mp4" type="video/mp4" />
</video>
2024-03-20 23:32:18 +03:00
<h2 class="gh-canvas-title"> {{ this .siteUrl }} is ready to go!</h2>
2024-03-19 19:07:49 +03:00
<p>Let’ s set your brand new publication up for success.</p>
</div>
<div class="gh-onboarding-items">
<div>
{{!-- Step 1 --}}
2024-03-27 20:37:37 +03:00
<div class="gh-onboarding-item gh-onboarding-item--completed">
2024-03-27 21:27:43 +03:00
<Dashboard::Onboarding::Step
@icon="rocket"
@title="Start a new Ghost publication"
@complete= {{ true }}
/>
2024-03-19 19:07:49 +03:00
</div>
{{!-- Step 2 --}}
2024-03-27 21:27:43 +03:00
<LinkTo @route="settings-x.settings-x" @model="design/edit?ref=setup" class="gh-onboarding-item {{ onboarding-step-class "customize-design" }} " {{ on "click" ( fn this .onboarding .markStepCompleted "customize-design" ) }} >
<Dashboard::Onboarding::Step
@icon="brush"
@title="Customize your publication"
@description="Match the look and feel to your style and make it yours."
@complete= {{ is-onboarding-step-completed "customize-design" }}
/>
2024-03-19 19:07:49 +03:00
</LinkTo>
{{!-- Step 3 --}}
2024-03-27 21:27:43 +03:00
<LinkTo @route="lexical-editor.new" @model="post" class="gh-onboarding-item {{ onboarding-step-class "first-post" }} " {{ on "click" ( fn this .onboarding .markStepCompleted "first-post" ) }} >
<Dashboard::Onboarding::Step
@icon="writing"
@title="Create your first post"
@description="Explore the editor and tell your story."
@complete= {{ is-onboarding-step-completed "first-post" }}
/>
2024-03-19 19:07:49 +03:00
</LinkTo>
{{!-- Step 4 --}}
2024-03-27 21:27:43 +03:00
<LinkTo @route="members" class="gh-onboarding-item {{ onboarding-step-class "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" }}
/>
2024-03-19 19:07:49 +03:00
</LinkTo>
{{!-- Step 5 --}}
2024-03-27 21:27:43 +03:00
<div role="button" {{ on "click" ( toggle-action "showShareModal" this ) }} class="gh-onboarding-item {{ onboarding-step-class "share-publication" }} ">
<Dashboard::Onboarding::Step
@icon="megaphone"
@title="Share your publication"
@description="Share your publication on social media."
@complete= {{ is-onboarding-step-completed "share-publication" }}
role="presentation"
/>
2024-03-18 17:53:01 +03:00
</div>
</div>
2024-03-19 19:07:49 +03:00
</div>
2024-03-27 17:07:00 +03:00
<a href="#" class="gh-onboarding-explore-dashboard">Explore your dashboard</a>
2024-03-20 23:32:18 +03:00
<p class="gh-onboarding-help">Need some more help? Check out our <a href="https://ghost.org/help?utm_source=admin&utm_campaign=onboarding" target="_blank" rel="noopener noreferrer">Help center</a></p>
2024-03-27 20:37:37 +03:00
2024-03-19 19:07:49 +03:00
<a href="#" class="gh-onboarding-skip">Skip onboarding</a>
</div>
2024-03-18 17:53:01 +03:00
{{ # if this .showShareModal }}
<GhFullscreenModal @modal="share"
@close= {{ this .close }}
@modifier="action wide"
/>
{{ / if }}