docs: added interactive examples

docs/config/404.html

@@ -1,34 +0,0 @@
-<style>
-  #main.markdown-section {
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 20px;
-  }
-</style>
-
-<div>
-  <h1
-    style="
-      display: inline-block;
-      border-right: 1px solid rgba(0, 0, 0, 0.3);
-      padding-right: 1rem;
-      margin-right: 1rem;
-      vertical-align: top;
-    "
-  >
-    404
-  </h1>
-  <div
-    style="
-      display: inline-block;
-      height: 2.5rem;
-      line-height: 2.5rem;
-      text-align: left;
-      vertical-align: middle;
-    "
-  >
-    This page could not be found.
-  </div>
-</div>

docs/config/404.md

@@ -0,0 +1,43 @@
+<style>
+  #main.markdown-section {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 20px;
+  }
+  rk-embed {
+    width: 100%;
+  }
+  h1.not-found {
+    display: inline-block;
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
+    padding-right: 1rem;
+    margin-right: 1rem;
+    margin-bottom: 6rem;
+    vertical-align: top;
+  }
+  h1.not-found__text {
+    display: inline-block;
+    padding-right: 1rem;
+    vertical-align: top;
+  }
+</style>
+
+<div>
+  <h1 class="not-found">404</h1>
+  <h1 class="not-found__text">This page could not be found.</h1>
+</div>
+
+```js #runkit
+// Write some code in the meantime :)
+
+const Axios = require('axios');
+const { setupCache, buildWebStorage } = require('axios-cache-interceptor');
+
+const axios = Axios.create({});
+setupCache(axios, {});
+
+await axios.get('https://jsonplaceholder.typicode.com/posts/1');
+```

docs/config/sidebar.md

@@ -1,6 +1,7 @@
 - Getting Started
 
   - [Introduction](pages/introduction.md 'Introduction')
+  - [Try it out!](pages/try-it-out.md 'Try axios-cache-interceptor')
   - [Installing](pages/installing.md 'Installing')
   - [Usage & Examples](pages/usage-examples.md 'Interceptor')
   - [Storages](pages/storages.md 'Custom storages')
@@ -22,69 +23,3 @@
   - [License](pages/license.md 'License')
   - [Contact & Security](pages/contact.md 'Contact & Security')
   - [Changelog](pages/changelog.md 'Changelog')
-
-<!-- - [Features](#features)
-- [Installing](#installing)
-  - [Via NPM](#via-npm)
-  - [Via CDN](#via-cdn)
-- [Support List](#support-list)
-- [Getting Started](#getting-started)
-- [Default Axios Instance](#default-axios-instance)
-- [Compiled code](#compiled-code)
-  - [NodeJS](#nodejs)
-  - [Url Imports](#url-imports)
-  - [Browsers](#browsers)
-- [Typescript Users](#typescript-users)
-- [Basic Knowledge](#basic-knowledge)
-  - [Request id](#request-id)
-  - [Response object](#response-object)
-    - [response.cached](#responsecached)
-    - [response.id](#responseid)
-  - [Storages](#storages)
-- [Global Configuration](#global-configuration)
-  - [config.storage](#configstorage)
-  - [config.generateKey](#configgeneratekey)
-  - [config.waiting](#configwaiting)
-  - [config.headerInterpreter](#configheaderinterpreter)
-  - [config.requestInterceptor and config.responseInterceptor](#configrequestinterceptor-and-configresponseinterceptor)
-- [Per-request configuration](#per-request-configuration)
-  - [request.id](#requestid)
-  - [request.cache](#requestcache)
-  - [request.cache.ttl](#requestcachettl)
-  - [request.cache.interpretHeader](#requestcacheinterpretheader)
-  - [request.cache.methods](#requestcachemethods)
-  - [request.cache.cachePredicate](#requestcachecachepredicate)
-  - [request.cache.update](#requestcacheupdate)
-  - [request.cache.etag](#requestcacheetag)
-  - [request.cache.modifiedSince](#requestcachemodifiedsince)
-- [License](#license)
-- [Contact](#contact) -->
-
-<!-- - Getting started
-
-  - [Quick start](quickstart.md)
-  - [Writing more pages](more-pages.md)
-  - [Custom navbar](custom-navbar.md)
-  - [Cover page](cover.md)
-
-- Customization
-
-  - [Configuration](configuration.md)
-  - [Themes](themes.md)
-  - [List of Plugins](plugins.md)
-  - [Write a Plugin](write-a-plugin.md)
-  - [Markdown configuration](markdown.md)
-  - [Language highlighting](language-highlight.md)
-
-- Guide
-
-  - [Deploy](deploy.md)
-  - [Helpers](helpers.md)
-  - [Vue compatibility](vue.md)
-  - [CDN](cdn.md)
-  - [Offline Mode(PWA)](pwa.md)
-  - [Server-Side Rendering(SSR)](ssr.md)
-  - [Embed Files](embed-files.md)
-
-- [Awesome docsify](awesome.md)
-- [Changelog](changelog.md) -->

docs/index.html

@@ -71,6 +71,7 @@
 
     <div id="app">Please wait...</div>
 
+    <script src="static/runkit.js"></script>
     <script src="static/index.js"></script>
 
     <!-- Docsify -->

docs/pages/global-configuration.md

@@ -12,7 +12,7 @@ const axios = setupCache(axios, {
 
 The storage used to save the cache. Defaults to a simple in-memory storage.
 
-See more about storages [here](pagers/storages).
+See more about storages [here](pages/storages).
 
 ## `generateKey`
 
@@ -41,6 +41,8 @@ The possible returns are:
 Example
 
 ```ts
+// Typescript example!
+
 import { setupCache, type HeaderInterpreter } from 'axios-cache-interceptor';
 
 const myHeaderInterpreter: HeaderInterpreter = (headers) => {

docs/pages/homepage.md

@@ -76,18 +76,18 @@
 
 <br />
 
-```ts
-import Axios from 'axios';
-import { setupCache } from 'axios-cache-interceptor';
+```js #runkit
+const Axios = require('axios');
+const { setupCache } = require('axios-cache-interceptor');
 
 // same object, but with updated typings.
 const axios = setupCache(Axios);
 
-const req1 = axios.get('https://api.example.com/');
-const req2 = axios.get('https://api.example.com/');
+const req1 = axios.get('https://jsonplaceholder.typicode.com/posts/1');
+const req2 = axios.get('https://jsonplaceholder.typicode.com/posts/1');
 
 const [res1, res2] = await Promise.all([req1, req2]);
 
-res1.cached; // false
-res2.cached; // true
+console.log('Request 1:', res1.cached);
+console.log('Request 2:', res2.cached);
 ```

docs/pages/request-id.md

@@ -10,13 +10,27 @@ to the same id with `{ url: 'https://a.com/b/' }`.
 
 Also, a custom id can be used to treat two requests as the same.
 
-```js
-axios.get('...', {
-  id: 'my-custom-id',
-  cache: {
-    // other properties...
-  }
+```js #runkit
+const Axios = require('axios');
+const { setupCache } = require('axios-cache-interceptor');
+
+// Global
+setupCache(Axios);
+
+const { id } = await Axios.get('https://jsonplaceholder.typicode.com/posts/1', {
+  baseURL: 'baseURL',
+  query: { name: 'value' }
 });
+
+console.log('Id 1: ' + id);
+console.log('Cache 1:', await Axios.storage.get(id));
+
+const { id: id2 } = await Axios.get('https://jsonplaceholder.typicode.com/posts/1', {
+  id: 'my-overrided-id'
+});
+
+console.log('Id 2: ' + id2);
+console.log('Cache 2:', await Axios.storage.get(id2));
 ```
 
 The

docs/pages/response-object.md

@@ -1,5 +1,18 @@
 # Response object
 
+Every response that came from our custom axios instance will have some extras properties.
+
+```js #runkit
+const axios = require('axios');
+const { setupCache } = require('axios-cache-interceptor');
+
+setupCache(axios);
+
+const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
+
+console.log(response);
+```
+
 Every response that came from our custom axios instance, will have some extras properties,
 that you can retrieve like that:
 
@@ -17,7 +30,9 @@ A simple boolean to check whether this request was cached or not.
 
 ## `id`
 
-The [request id](#request-id) resolved. This property represents the ID used throughout
-the internal code. Remember that, depending on the
-[config.keyGenerator](#configgeneratekey), it can be different as the provided on the
-[request.id](#requestid).
+The resolved [request id](pages/request-id.md). This property represents the ID used
+throughout the internal code.
+
+Remember that, depending on the
+[Key Generator](pages/global-configuration?id=generatekey), it can be different as the
+provided on the [Request Id](pages/per-request-configuration?id=id).

docs/pages/storages.md

@@ -10,13 +10,38 @@ needed) cache data. There are two simple ones that comes by default:
 
 Both of them are included in all bundles.
 
+## How storages works
+
+Storages are meant to be the middleware between the cache interceptor and some sort of
+storage (persistent or not).
+
+The interceptor will call his methods internally to save and retrieve cache objects. But
+you can also do that manually.
+
+```js #runkit
+const axios = require('axios');
+const { buildMemoryStorage, setupCache } = require('axios-cache-interceptor');
+
+setupCache(axios);
+
+const { id } = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
+
+// Now i want to retrieve all cache saved to the request above.
+const cache = await axios.storage.get(id);
+
+console.log('Cache information:', cache);
+```
+
 ## Memory storage
 
+**This storage is the default one**.
+
 A simple storage that works everywhere. You can access his values with the `data`
 property;
 
-```js
-import { buildMemoryStorage, setupCache } from 'axios-cache-interceptor';
+```js #runkit
+const axios = require('axios');
+const { buildMemoryStorage, setupCache } = require('axios-cache-interceptor');
 
 const storage = buildMemoryStorage();
 
@@ -34,7 +59,8 @@ function. It is a persistent storage that works in conjunction with the browser'
 [Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Storage).
 
 ```js
-import { buildWebStorage, setupCache } from 'axios-cache-interceptor';
+const axios = require('axios');
+const { buildWebStorage, setupCache } = require('axios-cache-interceptor');
 
 const myStorage = buildWebStorage(sessionStorage, 'axios-cache:');
 
@@ -69,9 +95,10 @@ a key and handle cache invalidation.
 
 Look at this simple [NodeRedis v4](https://github.com/redis/node-redis) example.
 
-```js
-import { createClient } from 'redis'; // v4.0.1
-import { buildStorage, setupCache } from 'axios-cache-interceptor';
+```js #runkit
+const axios = require('axios');
+const { createClient } = require('redis'); // v4.0.1
+const { buildStorage, setupCache } = require('axios-cache-interceptor');
 
 const client = createClient();
 

docs/pages/try-it-out.md

@@ -0,0 +1,11 @@
+## Try it out!
+
+```js #runkit
+const Axios = require('axios');
+const { setupCache, buildWebStorage } = require('axios-cache-interceptor');
+
+const axios = Axios.create({});
+setupCache(axios, {});
+
+await axios.get('https://jsonplaceholder.typicode.com/posts/1');
+```

docs/pages/usage-examples.md

@@ -36,23 +36,26 @@ You can customize the behaviors of this library in two ways, in a
 [per request](pages/per-request-configuration.md) or in a
 [global](pages/global-configuration.md) way.
 
-```js
-import Axios from 'axios';
+```js #runkit
+const Axios = require('axios');
+const { setupCache } = require('axios-cache-interceptor');
 
 const instance = Axios.create({
   /** Here you can pass the axios options * */
 });
 
-// Global
+// Global options
 setupCache(instance, {
   /** Here you can pass the interceptor options * */
 });
 
-// Per request
-await instance.get('url', {
+// Per request options
+const result = await instance.get('https://jsonplaceholder.typicode.com/posts/1', {
   /** Override axios options * */
   cache: {
     /** Override cache options * */
   }
 });
+
+console.log('Result:', result.data);
 ```

docs/static/index.js

@@ -11,11 +11,11 @@ function editThisPage(_, vm) {
 }
 
 window.$docsify = {
-  name: 'Axios Cache Interceptor',
+  name: '🚀 Axios Cache Interceptor',
 
   coverpage: 'config/cover.md',
   loadSidebar: 'config/sidebar.md',
-  notFoundPage: 'config/404.html',
+  notFoundPage: 'config/404.md',
   homepage: 'pages/homepage.md',
 
   themeColor: 'hsl(275, 100%, 50%)',
@@ -23,5 +23,5 @@ window.$docsify = {
   subMaxLevel: 2,
 
   search: 'auto',
-  plugins: [editThisPage]
+  plugins: [editThisPage, window.runkitDocsify]
 };

docs/static/runkit.js

@@ -0,0 +1,48 @@
+(function () {
+  var componentName = 'rk-embed';
+
+  function loadScript(src, onload) {
+    var script = document.createElement('script');
+    script.src = src;
+    script.onload = onload;
+    document.head.appendChild(script);
+  }
+
+  loadScript('https://embed.runkit.com', function () {
+    class RkEmbed extends HTMLElement {
+      constructor() {
+        super();
+
+        const wrapper = document.createElement('div');
+        wrapper.style = 'margin: 20pt';
+
+        const source = this.textContent;
+
+        this.textContent = '';
+
+        const tempCodePlaceholder = document.createElement('pre');
+        tempCodePlaceholder.textContent = source;
+
+        window.RunKit.createNotebook({
+          element: wrapper,
+          source,
+          onLoad: () => tempCodePlaceholder.remove()
+        });
+
+        this.appendChild(wrapper);
+        this.appendChild(tempCodePlaceholder);
+      }
+    }
+
+    customElements.define(componentName, RkEmbed);
+  });
+
+  window.runkitDocsify = function (hook) {
+    const regex =
+      /<pre v-pre data-lang="js\s*#runkit\s*"><code class="lang-js\s*#runkit\s*">(.*?)<\/code><\/pre>/gs;
+
+    hook.afterEach((html, next) =>
+      next(html.replace(regex, '<' + componentName + '>$1</' + componentName + '>'))
+    );
+  };
+})();