index.html

<!DOCTYPE html>
<html>
  <head>
    <title>REST API Mix</title>
    <meta charset="UTF-8">

    <!-- needed for adaptive design -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      body {
          margin: 0;
          padding: 50px 0 0 0;
      }

      nav select, nav input {
          font-size: 16px;
          height: 28px;
          box-sizing: border-box;
          vertical-align: middle;
          line-height: 1;
          outline: none;
      }

      nav header {
          font-family: Monserrat, sans-serif;
          float: left;
          margin-left: 20px;
          font-size: 25px;
          color: #00329F;
          font-weight: bold;
      }

      nav select, nav input {
          width: 50%;
          box-sizing: border-box;
          max-width: 500px;
          padding: 0 10px;

          color: #555;
          background-color: #fff;
          border: 1px solid #ccc;
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
          transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
      }

      nav select:focus, nav input:focus {
          border-color: #66afe9;
          outline: 0;
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
      }

      nav {
          width: 100%;
          height: 50px;
          line-height: 50px;
          text-align: center;
          background-color: white;
          border-bottom: 1px solid #ccc;
          position: fixed;
          top: 0;
          z-index: 100;
          box-sizing: border-box;
      }

      @media (min-width: 1000px) {
          nav header {
              position: absolute;
          }
      }

      @media (max-width: 500px) {
          nav input {
              width: 70%;
          }
          nav header {
              display: none;
          }
      }
    </style>

    <script
      src="https://code.jquery.com/jquery-3.6.4.min.js"
      integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
      crossorigin="anonymous"></script>

    <script>
    window.onpopstate = function(event) {
      if (event.state.reload) {
        // force refresh when navigating through history for entries that were pushed artificially
        window.location.reload();
      }
    };

    (function($) {
      function getParam(name) {
        var params = new RegExp("[\\?&]" + name + "=([^&#]*)").exec(window.location.search);
        return (params && params.length) ? params[1] : null;
      }

      function displayApi(spec) {
        Redoc.init(
          spec,
          {
            scrollYOffset: "body > nav",
            theme: {
              typography: {
                fontWeightRegular: 300
              },
              menu: {
                level1Items: {
                  textTransform: "capitalize"
                }
              }
            }
          },
          document.getElementById("redoc-container")
        );
      }

      function displaySelectedApi() {
        var selectedApi = $("#schema-url-input").val();

        // update current location to include API file name as query parameter
        var currentLocation = window.location;
        window.history.pushState({ reload: true, api: selectedApi }, document.title,
          window.location.href.split("#")[0].split("?")[0] + "?api=" + selectedApi);

        displayApi(selectedApi);
      }

      $(document).ready(function() {
        $("#schema-url-form").on("submit", function( event ) {
          event.preventDefault();
          return false;
        });

        $("#schema-url-input").on("change", displaySelectedApi);

        var selectedApi = getParam("api");
        $.getJSON( "catalog.json", function( data ) {
          $.each( data, function( key, val ) {
            var option = $("<option></option>").attr("value", val.url).text(val.name);
            if (selectedApi === val.url) {
              // if this API is selected via query parameter display it as selected
              option.attr("selected", "selected");
            }
            $("#schema-url-input").append(option);
          });

          // Initial load
          displayApi($("#schema-url-input").val());
        });
      });
    })(jQuery);
    </script>
  </head>
  <body>
    <nav>
      <header>REST APIs</header>
      <form id="schema-url-form">
        <select id="schema-url-input"></select>
      </form>
    </nav>

    <div id="redoc-container" lazy-rendering></div>

    <script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"> </script>
  </body>
</html>