<commit_before># bespoke-substeps
## Substeps for [Bespoke.js](https://github.com/markdalgleish/bespoke.js) presentations

### Similar and initially inspired on [bespoke-bullets](https://github.com/markdalgleish/bespoke-bullets).

<img src="presentation-1.gif" /> <img src="presentation-2.gif" />

#### Features

* Order of display can be customized (via `data-order` attribute), so it doesn't necessary need to follow order in document
* Separated steps can be configured to appear in parallel (just apply same `data-order` value)
* There are four types of actions (configured via `data-action` attribute) that can be used:
  * __activate__ (default) show element (turn off `visibility: hidden`)
  * __deactivate__ hide element (turn on `visibility: hidden`)
  * __insert__ insert element (turn off `display: none`)
  * __remove__ remove element (turn on `display: none`)
  * __mark__ mark element (just for duration of given step turn off `background: inherit`)
    
  How it works: _step_ remains in opposite state to configured action until it has it's turn. Anytime later configured action is in effect, just in case of _mark_ action, configure state is maintained only for time of given step.


### Usage

```javascript
bespoke.plugins.substeps = require('bespoke-substeps');

bespoke.from(selector, {
  substeps: true
});<commit_msg>Improve documentation<commit_after># bespoke-substeps
## Substeps for [Bespoke.js](https://github.com/markdalgleish/bespoke.js) presentations

### Similar and initially inspired on [bespoke-bullets](https://github.com/markdalgleish/bespoke-bullets).

<img src="presentation-1.gif" />    <img src="presentation-2.gif" />

#### Features

* Order of display can be customized (via `data-order` attribute), so it doesn't necessary need to follow order in document
* Separated steps can be configured to appear in parallel (just apply same `data-order` value)
* There are four types of actions (configured via `data-action` attribute) that can be used:
  * __activate__ (default) show element (turn off `visibility: hidden`)
  * __deactivate__ hide element (turn on `visibility: hidden`)
  * __insert__ insert element (turn off `display: none`)
  * __remove__ remove element (turn on `display: none`)
  * __mark__ mark element (just for duration of given step turn off `background: inherit`)
    
  How it works: _step_ remains in opposite state to configured action until it has it's turn. Anytime later configured action is in effect, just in case of _mark_ action, configure state is maintained only for time of given step.


### Usage

```javascript
bespoke.plugins.substeps = require('bespoke-substeps');

bespoke.from(selector, {
  substeps: true
});
{'fraction_non_alphanumeric': 0.10182088442958008, 'fraction_numerical': 0.0014864362690449647, 'mean_word_length': 4.890590809628009, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 7, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, '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': '2667987', 'n_tokens_mistral': 788, 'n_tokens_neox': 754, 'n_words': 305}