doc: rewrite README for v2 (#70)

* chore: add generated docs & cypress screens/videos to .gitignore

* doc: add screenshots for renderers

* doc: rewrite README

* refactor: use yarn scripts as a shortcut instead of long command

* chore(ci): put example/node_modules in cache

Author: Kocal

.gitignore

@@ -56,3 +56,7 @@ typings/
 
 # dotenv environment variables file
 .env
+
+example/docs*
+cypress/screenshots/
+cypress/videos/

.travis.yml

@@ -12,6 +12,7 @@ cache:
   yarn: true
   directories:
     - node_modules
+    - example/node_modules
     - ~/.cache
 
 before_install:
@@ -26,10 +27,10 @@ before_script:
   - export DISPLAY=:99.0
   - sh -e /etc/init.d/xvfb start
   - cd example
-  - yarn jsdoc -d docs -c jsdoc.json
-  - yarn jsdoc -d docs-docstrap -c jsdoc.json -t ./node_modules/ink-docstrap/template
-  - yarn jsdoc -d docs-minami -c jsdoc.json -t ./node_modules/minami
-  - yarn jsdoc -d docs-tui -c jsdoc.json -t ./node_modules/tui-jsdoc-template
+  - yarn docs
+  - yarn docs:docstrap
+  - yarn docs:minami
+  - yarn docs:tui
   - cd ..
 
 script:

README.md

@@ -3,24 +3,19 @@ JSDoc for VueJS
 
 [![npm version](https://badge.fury.io/js/jsdoc-vuejs.svg)](https://badge.fury.io/js/jsdoc-vuejs)
 [![Build Status](https://travis-ci.org/Kocal/jsdoc-vuejs.svg?branch=master)](https://travis-ci.org/Kocal/jsdoc-vuejs)
-[![Coverage Status](https://coveralls.io/repos/github/Kocal/jsdoc-vuejs/badge.svg?branch=master)](https://coveralls.io/github/Kocal/jsdoc-vuejs?branch=master)
+[![codecov](https://codecov.io/gh/Kocal/jsdoc-vuejs/branch/master/graph/badge.svg)](https://codecov.io/gh/Kocal/jsdoc-vuejs)
 
-> A wobbly JSDoc plugin for listing props, data, computed data, and methods from *.vue files.
-
-> WARNING: Actually, it's only working with the default JSDoc template.
-
-## [Demo](https://kocal.github.io/jsdoc-vuejs-demo-docs/)
+> A JSDoc plugin for listing props, data, computed data, and methods from *.vue files.
 
 ## Installation
 
 ```bash
-$ yarn add jsdoc-vuejs -D
-# $ npm i jsdoc-vuejs -D
+$ npm install --save-dev jsdoc-vuejs
 ```
 
 ## Usage
 
-Update your JSDoc configuration
+Your should update your JSDoc configuration to enable JSDoc-VueJS:
 
 ```json
 {
@@ -29,47 +24,112 @@ Update your JSDoc configuration
   ],
   "source": {
     "includePattern": "\\.(vue|js)$"
-  },
-  "jsdoc-vuejs": {}
+  }
 }
 ```
 
-Update your .vue files:
+Update your .vue files with one of the following tags:
+
+- `@vue-prop`
+- `@vue-data`
+- `@vue-computed`
+
+All of those tags work the same way than [`@param` tag](http://usejsdoc.org/tags-param.html).
 
 ```vue
 <template>
-  <div>Foo</div>
+  <div>Hello world!</div>
 </template>
 
 <script>
   /**
-   * Add the @vue tag here
-   * @vue 
+   * @vue-prop {Number} initialCounter - Initial counter's value
+   * @vue-prop {Number} [step=1] - Step
+   * @vue-data {Number} counter - Current counter's value
+   * @vue-computed {String} message
    */
   export default {
+    props: {
+      initialCounter: {
+        type: Number,
+        required: true,
+      },
+      step: {
+        type: Number,
+        default: 1,
+      },
+    },
     data () {
-      return {}
+      return {
+        counter: 0,
+      }
+    },
+    computed: {
+      message() {
+        return `Current value is ${this.counter}`;
+      }
     }
   }
 </script>
 ```
 
-## Tests
+## Supported templates
+
+The rendering engine has been rewritten in v2, it can supports every JSDoc templates that exists.
+
+Actually, it supports 4 templates:
+- Default
+- [Docstrap](https://github.com/docstrap/docstrap)
+- [Minami](https://github.com/nijikokun/minami)
+- [Tui](https://github.com/nhnent/tui.jsdoc-template)
+
+If you use a template that is not supported, it will use the default one as a fallback.
+
+Feel free to open an issue/pull request if your template is not supported!
+
+### Default
+
+![](./screenshots/renderers/default.png)
+
+### [Docstrap](https://github.com/docstrap/docstrap)
+
+![](./screenshots/renderers/docstrap.png)
 
-Before running tests, you should generate a JSDoc documentation inside `example` folder:
+### [Minami](https://github.com/nijikokun/minami)
+
+![](./screenshots/renderers/minami.png)
+
+### [Tui](https://github.com/nhnent/tui.jsdoc-template)
+
+![](./screenshots/renderers/tui.png)
+
+## Testing
+
+### Unit
+
+```bash
+$ yarn test
+```
+
+### E2E
+
+Before running integration tests with [Cypress](https://cypress.io), 
+you should generate documentation with all renderers:
 
 ```bash
 $ cd example
-$ yarn && yarn docs
-# $ npm install && npm run docs
-$ $ cd ..
+$ yarn
+$ yarn docs
+$ yarn docs:docstrap
+$ yarn docs:minami
+$ yarn docs:tui
+$ cd ..
 ```
 
-Then run:
+And then run Cypress:
 
 ```bash
-$ yarn test
-# $ npm test
+$ yarn cypress run
 ```
 
 ## License

example/package.json

@@ -1,4 +1,10 @@
 {
+  "scripts": {
+    "docs": "jsdoc -d docs -c jsdoc.json",
+    "docs:docstrap": "jsdoc -d docs-docstrap -c jsdoc.json -t ./node_modules/ink-docstrap/template",
+    "docs:minami": "jsdoc -d docs-minami -c jsdoc.json -t ./node_modules/minami",
+    "docs:tui": "jsdoc -d docs-tui -c jsdoc.json -t ./node_modules/tui-jsdoc-template"
+  },
   "dependencies": {
     "ink-docstrap": "^1.3.2",
     "jsdoc": "^3.5.5",