index.html

<!DOCTYPE html>
<html>

  <head>
    <title>Adafruit IO HTTP API Specification v2</title>
    <!-- needed for adaptive design -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--
      Support multiple APIs
    -->
    <style>
      @font-face {
          font-family: 'Proxima Nova';
          src: url('https://cdn-shop.adafruit.com/fonts/proximanova/proximanova-light-webfont.woff2') format('woff2'),
               url('https://cdn-shop.adafruit.com/fonts/proximanova/proximanova-light-webfont.woff') format('woff');
          font-weight: 300;
          font-style: normal;
          letter-spacing: 0.3em;
      }
      @font-face {
          font-family: 'Proxima Nova';
          src: url('https://cdn-shop.adafruit.com/fonts/proximanova/proximanova-regular-webfont.woff2') format('woff2'),
               url('https://cdn-shop.adafruit.com/fonts/proximanova/proximanova-regular-webfont.woff') format('woff');
          font-weight: normal;
          font-style: normal;
      }
      @font-face {
          font-family: 'Proxima Nova';
          src: url('https://cdn-shop.adafruit.com/fonts/proximanova/proximanova-semibold-webfont.woff2') format('woff2'),
               url('https://cdn-shop.adafruit.com/fonts/proximanova/proximanova-semibold-webfont.woff') format('woff');
          font-weight: 500;
          font-style: normal;
      }

      body {
        margin: 0;
        padding-top: 40px;
      }
      nav {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 100;
      }
      #links_container {
        margin: 0;
        padding: 0;
        background-color: #000000;
      }
      #links_container li, #links_container li a {
        display: inline-block;
        padding: 10px;
        color: #00ACEC;
        cursor: pointer;
        text-decoration: none;
        font-family: 'Proxima Nova', Helvetica, sans;
      }

      #links_container .return {
        color: white;
      }
    </style>
  </head>

  <body>
    <nav>
      <ul id="links_container">
        <li><a href="https://io.adafruit.com" class="return">&#8249; Return to Adafruit IO</a></li>
        <li><a href="https://learn.adafruit.com/welcome-to-adafruit-io/mqtt-api-documentation-2" target="_blank">MQTT API</a></li>
      </ul>
    </nav>

    <redoc scroll-y-offset="body > nav" lazy-rendering="true" expand-responses="200" suppress-warnings="true"></redoc>
    <script src="https://rebilly.github.io/ReDoc/releases/v1.x.x/redoc.min.js"> </script>
    <script>
      // From ReDoc multi-API example: https://github.com/Rebilly/ReDoc/blob/master/demo/examples/multiple-apis/index.html

      var apis = [
        {
          name: 'Adafruit IO v2',
          url: 'https://io.adafruit.com/api/docs/v2.json'
        },
        {
          name: 'Adafruit IO v1',
          url: 'https://io.adafruit.com/api/docs/v1.json'
        }
      ];

      Redoc.init(apis[0].url);

      function onClick() {
        var url = this.getAttribute('data-link');
        console.log("LOAD URL", url)
        Redoc.init(url);
      }

      // dynamically building navigation items
      var $list = document.getElementById('links_container');
      apis.forEach(function(api) {
        var $listitem = document.createElement('li');
        $listitem.setAttribute('data-link', api.url);
        $listitem.innerText = api.name;
        $listitem.addEventListener('click', onClick);
        $list.appendChild($listitem);
      });
    </script>

  </body>

</html>