explore.html

<html>

<head>
  <title>dotabap</title>
  <style type="text/css">
    body {
      font-family: Arial, Helvetica, sans-serif;
      background: #E8E8E8;
    }

    a,
    a:visited {
      color: #4078c0;
      text-decoration: none;
    }

    a:hover,
    a:active {
      text-decoration: underline;
    }

    a.disabled {
      text-decoration: none;
      color: inherit;
    }
    
    div#header {
      display: block;
      margin-top: 0.5em;
      padding-bottom: 0.5em;
      border-bottom: 3px double lightgrey;
    }

    div#toc {
      display: block;
      background-color: #f2f2f2;
      padding: 1em;
    }

    div#footer {
      display: block;
      margin-bottom: 1em;
      padding-top: 0.5em;
      border-top: 3px double lightgrey;
      color: grey;
      text-align: center;
    }

    h1 {
      display: inline;
    }

    h2 {
      display: inline;
    }

    h3 {
      display: inline;
      color: grey;
      font-weight: normal;
      font-size: smaller;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    function goBack() {
      window.history.back();
    }

    function shuffle(sourceArray) {

      for (var n = 0; n < sourceArray.length - 1; n++) {
        var k = n + Math.floor(Math.random() * (sourceArray.length - n));

        var temp = sourceArray[k];
        sourceArray[k] = sourceArray[n];
        sourceArray[n] = temp;
      }
    }

    function run() {
      /* global $ */
      $.getJSON("https://generated.dotabap.org/generated.json", function (data) {
        var items = [];

        $.each(data, function (key, val) {
          items.push("<h2>" +
            data[key].repo.name +
            "</h2>&nbsp;<a href='sapevent:install?" +
            data[key].repo.clone_url +
            "'>Clone</a><br><h3>" +
            data[key].repo.clone_url +
            "</h3><br>" +
            data[key].repo.description);
        });

        shuffle(items);

        $('#content').html(items.join("<br><br>"));

      });

      if (!check4ArrowFunctions()){
        //dotabap.org needs full ES6 support
        $("#poweredby").removeAttr('href').addClass("disabled");
      }

    }
	
    function check4ArrowFunctions() {
      try {   
        eval("var arrowFunction = (x) => x"); 
      }
      catch (e) {
        return false; 
      }
		  return true;
	  }
  </script>
</head>

<body onload="run()">
  <div id="header">
    <h1>Explore</h1>&nbsp;Powered by
    <a href="http://dotabap.org" id="poweredby">dotabap.org</a>
  </div>
  <div id="toc">
    <div id="content"></div>
  </div>
  <div id="footer">
    footer
  </div>
</body>

</html>