Skip to content

Commit

Permalink
🐛 Fix issue with full steps being circular dependency (#2640)
Browse files Browse the repository at this point in the history 
* 🐛 Fix issue with full steps being circular dependency

* ✨ Add pro link

* 🔧 Add pro key

* 🔇 Remove log
  • Loading branch information
@chuckcarpenter
chuckcarpenter authored Mar 18, 2024
1 parent 6cb099b commit 94ec184
Show file tree
Hide file tree
Showing 5 changed files with 129 additions and 113 deletions.
16 changes: 10 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@
[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fshipshapecode%2Fshepherd.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%shepherd-pro%2Fshepherd?ref=badge_shield)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/shepherd.js.svg)
[![Test](https://github.com/shepherd-pro/shepherd/actions/workflows/test.yml/badge.svg)](https://github.com/shepherd-pro/shepherd/actions/workflows/test.yml)
[![Maintainability](https://api.codeclimate.com/v1/badges/b295b0cc0d828ccc1b76/maintainability)](https://codeclimate.com/github/shepherd-pro/shepherd/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/b295b0cc0d828ccc1b76/test_coverage)](https://codeclimate.com/github/shepherd-pro/shepherd/test_coverage)
[![Maintainability](https://api.codeclimate.com/v1/badges/b295b0cc0d828ccc1b76/maintainability)](https://codeclimate.com/github/shipshapecode/shepherd/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/b295b0cc0d828ccc1b76/test_coverage)](https://codeclimate.com/github/shipshapecode/shepherd/test_coverage)
[![StackShare](https://img.shields.io/badge/Follow%20on-StackShare-blue.svg?logo=stackshare&style=flat)](https://stackshare.io/shepherd-js)


<a href="https://shepherdjs.dev/">
<img
src="https://shepherdjs.dev/landing/assets/img/demo.png"
src="https://shepherdjs.dev/img/demo.png"
alt="Guide your users through a tour of your app"
style="height: auto; max-width: 800px; width: 100%;"/>
</a>
Expand Down Expand Up @@ -81,15 +81,19 @@ Rails engine that generates and tracks Shepherd tours within an application

### Websites and Apps

### [SimplePlanner](https://simpleplanner.io)
### [Shepherd Pro](https://shepherdpro.com/)

[Shepherd Pro](https://shepherdpro.com/) allows you to use the same JS library and add enhanced analytics to your tours while letting you also connect some integrations to deepen the knowledge and effectiveness of those user experiences.

### [SimplePlanner](https://logseq.com/)

[SimplePlanner](https://simpleplanner.io) uses Shepherd to help new users get familiar with its collaborative scheduling approach.
You do need to sign up via OAuth or email to see the scheduling tour.
Check out the [Envato Tuts+ Startup Series on its codebase](https://code.tutsplus.com/series/building-your-startup-with-php--cms-742) which describes how Simple Planner was built.

### [Brokermate](https://www.brokermate.com/)
### [LogSeq](https://logseq.com/)

[Brokermate](https://www.brokermate.com/) uses Shepherd to guide users through initial setup steps.
[LogSeq](https://logseq.com/) uses Shepherd to guide users through initial setup steps.

### [Snapsure](https://snapsure.app)

Expand Down
115 changes: 59 additions & 56 deletions landing/src/components/Header.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,144 +6,147 @@ import ShepherdHeader from '../images/shepherd-header.svg';
const { isHome } = Astro.props;
---

<header class="flex justify-center mt-4 w-full">
<div class="absolute ml-2 top-0">
<Fragment class="shepherd-logo absolute ml-2" set:html={ShepherdHead} />
<header class='flex justify-center mt-4 w-full'>
<div class='absolute ml-2 top-0'>
<Fragment class='shepherd-logo absolute ml-2' set:html={ShepherdHead} />
</div>

<div
class="bg-grey-light flex flex-col font-heading justify-center items-center w-full"
class='bg-grey-light flex flex-col font-heading justify-center items-center w-full'
>
<nav
class="flex justify-center p-4 mt-40 max-w-8xl text-xl w-full lg:justify-between lg:mt-0"
class='flex justify-center p-4 mt-40 max-w-8xl text-xl w-full lg:justify-between lg:mt-0'
>
<div class="flex lg:p-12">
<a class="pr-6 uppercase hover:text-navy-light lg:pr-10" href="/">
Demo
<div class='flex lg:p-12'>
<a
class='pr-6 uppercase hover:text-navy-light lg:pr-10'
href='https://github.com/shepherd-pro/shepherd'
>
GitHub
</a>
<a
class="pr-6 uppercase lg:pr-10 hover:text-navy-light"
href="https://shepherdjs.dev/docs/"
class='pr-6 uppercase lg:pr-10 hover:text-navy-light'
href='https://shepherdjs.dev/docs/'
>
Docs
</a>
<a class="pr-6 uppercase hover:text-navy-light lg:pr-0" href="/blog">
<a class='pr-6 uppercase hover:text-navy-light lg:pr-0' href='/blog'>
Blog
</a>
</div>

<div class="flex lg:p-12">
<div class='flex lg:p-12'>
<a
class="pr-6 uppercase hover:text-navy-light lg:pr-10"
href="https://github.com/shepherd-pro/shepherd"
class='pr-6 uppercase text-pink-300 hover:text-navy-light lg:pr-10'
href='https://shepherdpro.com/'
>
GitHub
Pro
</a>
<a
class="pr-6 uppercase hover:text-navy-light lg:pr-10"
href="/pricing"
class='pr-6 uppercase hover:text-navy-light lg:pr-10'
href='/pricing'
>
Pricing
</a>
<a
class="uppercase hover:text-navy-light"
href="mailto:[email protected]"
class='uppercase hover:text-navy-light'
href='mailto:[email protected]'
>
Contact
</a>
</div>
</nav>

<img
class="hero-welcome p-4 w-full lg:mt-4 lg:p-0 lg:w-auto"
class='hero-welcome p-4 w-full lg:mt-4 lg:p-0 lg:w-auto'
src={ShepherdHeader.src}
alt={SITE_TITLE}
/>

<h2 class="font-body p-2 text-xl">
<h2 class='font-body p-2 text-xl'>
Guide your users through a tour of your app.
</h2>

<div class="flex justify-center w-full">
<div class='flex justify-center w-full'>
{
isHome && (
<div class="flex flex-wrap max-w-6xl p-4 w-full lg:flex-nowrap">
<div class="m-4 relative w-full lg:w-1/3">
<div class="border-4 border-navy w-full">
<div class='flex flex-wrap max-w-6xl p-4 w-full lg:flex-nowrap'>
<div class='m-4 relative w-full lg:w-1/3'>
<div class='border-4 border-navy w-full'>
<img
class="absolute a11y-icon z-20"
src="/img/accessibility.svg"
alt=""
role="presentation"
class='absolute a11y-icon z-20'
src='/img/accessibility.svg'
alt=''
role='presentation'
/>

<div class="bg-grey-light border-b-4 border-navy h-40 relative w-full z-10" />
<div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10' />

<div class="bg-white h-72 p-6 relative z-10">
<h3 class="p-2 text-2xl text-center uppercase w-full">
<div class='bg-white h-72 p-6 relative z-10'>
<h3 class='p-2 text-2xl text-center uppercase w-full'>
Accessibility
</h3>

<p class="font-body p-2 text-xl">
<p class='font-body p-2 text-xl'>
Shepherd has full keyboard navigation support, focus
trapping, and a11y compliance via aria attributes.
</p>
</div>

<div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0" />
<div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0' />
</div>
</div>

<div class="m-4 relative w-full lg:w-1/3">
<div class="border-4 border-navy w-full">
<div class='m-4 relative w-full lg:w-1/3'>
<div class='border-4 border-navy w-full'>
<img
class="absolute customizable-icon z-20"
src="/img/customizable.svg"
alt=""
role="presentation"
class='absolute customizable-icon z-20'
src='/img/customizable.svg'
alt=''
role='presentation'
/>

<div class="bg-grey-light border-b-4 border-navy h-40 relative w-full z-10" />
<div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10' />

<div class="bg-white h-72 p-6 relative z-10">
<h3 class="p-2 text-2xl text-center uppercase w-full">
<div class='bg-white h-72 p-6 relative z-10'>
<h3 class='p-2 text-2xl text-center uppercase w-full'>
Highly Customizable
</h3>

<p class="font-body p-2 text-xl">
<p class='font-body p-2 text-xl'>
Shepherd's styles are kept minimal, allowing you to easily
customize the look and feel, but still give you enough to
drop in and be ready to go quickly.
</p>
</div>

<div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0" />
<div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0' />
</div>
</div>

<div class="m-4 relative w-full lg:w-1/3">
<div class="border-4 border-navy w-full">
<div class='m-4 relative w-full lg:w-1/3'>
<div class='border-4 border-navy w-full'>
<img
class="absolute framework-icon z-20"
src="/img/framework.svg"
alt=""
role="presentation"
class='absolute framework-icon z-20'
src='/img/framework.svg'
alt=''
role='presentation'
/>

<div class="bg-grey-light border-b-4 border-navy h-40 relative w-full z-10" />
<div class='bg-grey-light border-b-4 border-navy h-40 relative w-full z-10' />

<div class="bg-white h-72 p-6 relative z-10">
<h3 class="p-2 text-2xl text-center uppercase w-full">
<div class='bg-white h-72 p-6 relative z-10'>
<h3 class='p-2 text-2xl text-center uppercase w-full'>
Framework Ready
</h3>

<p class="font-body p-2 text-xl">
<p class='font-body p-2 text-xl'>
Shepherd is ready to drop into your application using React,
Ember, Angular, Vue.js, ES Modules, or plain Javascript!
</p>
</div>

<div class="absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0" />
<div class='absolute bg-navy h-full -ml-3 mt-3 top-0 w-full z-0' />
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 94ec184

Please sign in to comment.