<commit_before># Ember-shepherd

This is an Ember wrapper for the [Shepherd](https://github.com/HubSpot/Shepherd), site tour, library.

This README outlines the details of collaborating on this Ember addon.

## Installation

* `git clone` this repository
* `npm install`
* `bower install`

## Running

* `ember server`
* Visit your app at http://localhost:4200.

## Running Tests

* `ember test`
* `ember test --server`

## Building

* `ember build`

For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).<commit_msg>Started documentation<commit_after># Ember-shepherd

This is an Ember wrapper for the [Shepherd](https://github.com/HubSpot/Shepherd), site tour, library. It provides additional functionality, on top of Shepherd, as well.

## Getting started

To start, if you are using Ember CLI, simply run:
```bash
ember install:addon ember-shepherd
```

After installing, you'll need to include the tour component in the template for the page you would like it on. If you would like it on multiple pages, I would recommend putting it in the application template, so it will be accessible on any route.

```hbs
{{ember-shepherd
steps=steps
start=showHelp
modal=true}}
```

### steps

You will need to define a steps object to pass into your component of the following form:

```js
var steps = [
      {
        id: 'intro',
        options: {
          text: ['Ember-Shepherd is a javascript library for guiding users through your Ember app. ' +
          'It is an Ember addon that wraps <a href="https://github.com/HubSpot/shepherd">Shepherd</a> and ' +
          'extends its functionality. ' +
          'Shepherd uses <a href="http://github.hubspot.com/tether/">Tether</a>, another open source library, to ' +
          'position all of its steps.', 'Tether makes sure your steps never end up off screen or cropped by an ' +
          'overflow. Try resizing your browser to see what we mean.'],
          attachTo: '.first-element bottom',
          classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text',
          builtInButtons: [
            {
              classes: 'shepherd-button-primary',
              text: 'Next',
              type: 'next'
            }
          ],
          showCancelLink: true,
          copyStyles: false
        }
      },
      ...........
      ];
```

A lot of the options are the same as Shepherd options, but I will go through each of them for reference.
- **id**: The name to give this step of the tour
- **options**: an object with all of the options for the step
  - **text**: A string of text content to display in the tour popup
  - **attachTo**: The selector and position for the tour popup to attach to, of the format 'selector position'. Position options are: top, bottom, left, and right.
{'fraction_non_alphanumeric': 0.10595322466335932, 'fraction_numerical': 0.001417434443656981, 'mean_word_length': 2.9208333333333334, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 3, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4165276', 'n_tokens_mistral': 821, 'n_tokens_neox': 774, 'n_words': 334}