docs: add gif demo about the CLI

README.md

@@ -10,7 +10,6 @@ Or in other words, transform [this specification](https://schema.getpostman.com/
 [![codecov](https://codecov.io/gh/joolfe/postman-to-openapi/branch/master/graph/badge.svg)](https://codecov.io/gh/joolfe/postman-to-openapi)
 [![npm version](https://img.shields.io/npm/v/postman-to-openapi
 )](https://www.npmjs.com/package/postman-to-openapi)
-[![docs](https://img.shields.io/badge/docs-here-yellow)](https://joolfe.github.io/postman-to-openapi/)
 [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com)
 
 ## Installation
@@ -72,6 +71,10 @@ As a cli
 p2o ./path/to/PostmantoCollection.json -f ./path/to/result.yml -o ./path/to/options.json
 ```
 
+## Cli Demo
+
+![cli demo gif](./docs/assets/img/demo.gif)
+
 ## Documentation
 
 All features, usage instructions and help can be found in the [Documentation page](https://joolfe.github.io/postman-to-openapi/)
@@ -93,6 +96,15 @@ Use the scripts in `package.json`:
 - `lint:fix`: Execute standard lint and automatically fix errors.
 - `changelog`: Update changelog automatically.
 
+Steps to generate the gif demo:
+
+- Install terminalizer `npm install -g terminalizer`
+- Start a recording using `terminalizer record demo -d 'zsh'`
+- Stop recording with `Ctrl+D`
+- Check demo with `terminalizer play demo`
+- Adjust delays in `demo.yml`, change `rows` to 15 (is the height) and anonymize terminal session.
+- Generate the gif with `terminalizer render demo`
+
 [Husky](https://www.npmjs.com/package/husky) is configured to avoid push incorrect content to git.
 
 ## Tags

docs/index.md

@@ -109,6 +109,10 @@ All the field described in [options](#options) can be provided and used in the c
 p2o -h
 ```
 
+See demo in next gif:
+
+![Cli demo gif](assets/img/demo.gif)
+
 ## Options
 
 The third parameter used in the library method is an `options` object containing the optional parameters for the transformation, the allowed parameters are:
@@ -357,7 +361,7 @@ Inside the [info object](http://spec.openapis.org/oas/v3.0.3.html#info-object) o
 
 Is as easy as define the values in the "Edit Collection" form page inside the tab "Variables", as showed in the next image:
 
-![contact and license variables](images/variables.png)
+![contact and license variables](assets/img/variables.png)
 
 The variables names will be in dot notation, for example for `contact` fields will be as `contact.name`, `contact.url`... Take into account that fields that are required by OpenAPI specs, as `contact.name`, if not provided then all the section will be ignored.