Add examples documentation

Author: emileber

docs/README.md

@@ -2,13 +2,7 @@
 
 Simple [axios](https://github.com/axios/axios) HTTP middleware service to simplify hooking to HTTP requests made through Axios.
 
-## Installation
-
-```
-npm install --save axios-middleware
-```
-
-## Getting started
+## What's this?
 
 There are two classes exposed in this module:
 
@@ -17,30 +11,21 @@ There are two classes exposed in this module:
 
 It works with either the global axios or a local instance.
 
-### Create your middleware
+## Creating your middleware
 
 Here's a simple example of a locale middleware who sets a language header on each AJAX request.
 
 ```javascript
 import { HttpMiddleware } from 'axios-middleware';
 
-export default class LocaleMiddleware extends HttpMiddleware {
-    constructor(i18n) {
-        super();
-        this.i18n = i18n;
-    }
-    
-    onRequest(config) {
-        config.headers = {
-            locale: this.i18n.lang,
-            ...config.headers
-        };
-        return config;
+export default class ErrorMiddleware extends HttpMiddleware {
+    handleResponseError(error) {
+        console.log("Handling:", error);
     }
 }
 ```
 
-### Use the middleware service
+## Using the service
 
 Simplest use-case:
 

docs/_navbar.md

@@ -0,0 +1,2 @@
+- [Github](https://github.com/emileber/axios-middleware)
+- [npm](https://www.npmjs.com/package/axios-middleware)

docs/_sidebar.md

@@ -0,0 +1,8 @@
+- Introduction
+  - [Getting started]()
+  - [Installation](installation.md)
+  - [Examples](examples.md)
+
+- Ecosystem
+  - [Github](https://github.com/emileber/axios-middleware)
+  - [npm](https://www.npmjs.com/package/axios-middleware)

docs/example.md

@@ -0,0 +1,112 @@
+# Examples
+
+All examples are written using ES6 syntax but you can definitely use this plugin with ES5 code.
+
+## Locale middleware
+
+Here's a simple example of a locale middleware who sets a language header on each AJAX request.
+
+```javascript
+import { HttpMiddleware } from 'axios-middleware';
+
+export default class LocaleMiddleware extends HttpMiddleware {
+    constructor(i18n) {
+        super();
+        this.i18n = i18n;
+    }
+    
+    onRequest(config) {
+        config.headers = {
+            locale: this.i18n.lang,
+            ...config.headers
+        };
+        return config;
+    }
+}
+```
+
+## Exposing the service instance
+
+```javascript
+import axios from 'axios';
+import { HttpMiddlewareService } from 'axios-middleware';
+import i18n from './i18n';
+import { LocaleMiddleware, OtherMiddleware } from './middlewares';
+
+// Create a new service instance
+const service = new HttpMiddlewareService(axios);
+
+// Then register your middleware instances.
+service.register([
+    new LocaleMiddleware(i18n),
+    new OtherMiddleware()
+]);
+
+export default service;
+```
+
+## Usage with ES5 in Node
+
+Create a custom middleware to register.
+
+```javascript
+var HttpMiddleware = require('axios-middleware').HttpMiddleware;
+
+function MyMiddleware() {
+    // call the parent constructor
+    HttpMiddleware.apply(this, arguments);
+}
+
+var proto = MyMiddleware.prototype = Object.create(HttpMiddleware.prototype);
+
+proto.constructor = MyMiddleware;
+proto.onRequest = function(config) {
+  // handle the request
+};
+
+module.exports = MyMiddleware;
+```
+
+Then export the service.
+
+```javascript
+var axios = require('axios'),
+    HttpMiddlewareService = require('axios-middleware').HttpMiddlewareService,
+    MyMiddleware = require('./MyMiddleware');
+
+// Create a new service instance
+var service = new HttpMiddlewareService(axios);
+
+// Then register your middleware instances.
+service.register(new MyMiddleware());
+
+module.exports = service;
+```
+
+## Usage in the browser
+
+```html
+<script>
+var MyHttpService = (function(HttpMiddleware, HttpMiddlewareService) {
+    function MyMiddleware() {
+        // call the parent constructor
+        HttpMiddleware.apply(this, arguments);
+    }
+    
+    var proto = MyMiddleware.prototype = Object.create(HttpMiddleware.prototype);
+    
+    proto.constructor = MyMiddleware;
+    proto.onRequest = function(config) {
+      // handle the request
+    };
+    
+    // Create a new service instance
+    var service = new HttpMiddlewareService(axios);
+    
+    // Then register your middleware instances.
+    service.register(new MyMiddleware());
+    
+    return service;
+})(AxiosMiddleware.HttpMiddleware, AxiosMiddleware.HttpMiddlewareService);
+</script>
+```

docs/examples.md

@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 <html>
 <head>
+    <title>Axios middleware documentation</title>
+    <meta name="keywords" content="http,middleware,axios,node,javascript,plugin,ajax">
+    <meta name="description" content="Simple axios HTTP middleware service.">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta charset="UTF-8">
@@ -14,7 +17,12 @@
             '.*?/contributing': 'https://raw.githubusercontent.com/emileber/axios-middleware/master/CONTRIBUTING.md',
             '/.*/_navbar.md': '/_navbar.md',
         },
-        name: 'Axios Middleware',
+        name: 'Axios HTTP Middleware',
+        loadNavbar: true,
+        loadSidebar: true,
+        maxLevel: 4,
+        subMaxLevel: 2,
+        auto2top: true,
         search: {
             noData: {
                 '/fr-ca/': 'Aucun résultat.',
@@ -29,5 +37,6 @@
     };
 </script>
 <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
+<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
 </body>
 </html>

docs/index.html

@@ -0,0 +1,16 @@
+# Installation
+
+## Using npm
+
+```
+npm install --save axios-middleware
+```
+
+## Using a CDN
+
+Since Axios can be used in the browser directly, this plugin can also be dropped on a webpage and used as-is.
+
+```html
+<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+<script src="https://unpkg.com/axios-middleware/dist/axios-middleware.min.js"></script>
+```