showdown/html/releases.html

<section id="releases" class="page-section text-bg-light">
    <div class="container">
        <h1>Releases</h1>
        <div id="release-spinner">
            <center>
                <i class="fa fa-spinner fa-spin fa-3x fa-fw text-primary"></i><br>
                <span>Loading...</span>
            </center>
        </div>
        <div class="row">
            <aside id="releases-list" class="col-2">
                <ul class="nav flex-column"></ul>
            </aside>
            <div id="releases-details" class="col-10"></div>
        </div>
    </div>
</section>
<script>
  $.getJSON('https://api.github.com/repos/showdownjs/showdown/releases', function (data) {
    var converter = new showdown.Converter();
    converter.setFlavor('github');
    converter.setOption('simpleLineBreaks', false);

    for (var i = 0; i < data.length; ++i) {
      var releaseDetails = document.createElement('section');
      var releaseListItem = document.createElement('li');
      var header = document.createElement('h2');
      var body = document.createElement('p');
      var footer = document.createElement('footer');
      var id = 'release-' + data[i].tag_name;
      var listLink = document.createElement('a');

      id = id.replace(/\./g, '-');

      converter.setOption('prefixHeaderId', id + '-');

      header.innerHTML = data[i].name;
      header.setAttribute('id', id);
      body.innerHTML = converter.makeHtml(data[i].body);
      footer.innerHTML =
        '<a href="' + data[i].zipball_url + '" target="_blank"><i class="fa fa-file-archive-o" aria-hidden="true"></i> Source code <em>(zip)</em></a>&nbsp;&nbsp;&nbsp;' +
        '<a href="' + data[i].tarball_url + '" target="_blank"><i class="fa fa-file-archive-o" aria-hidden="true"></i> Source code <em>(tar.gz)</em></a>';



      $(listLink)
        .addClass('nav-link')
        .attr('href', '#' + id)
        .html(data[i].tag_name)
        .on('click', (function (trg) {
          return function () {
            console.log(trg);
            event.preventDefault();
            $('html, body').animate({
              scrollTop: $(trg).offset().top
            }, 500);
          };
        })('#' + id));

      $(releaseListItem)
        .addClass('nav-item')
        .append(listLink);

      $('#releases-list>ul').append(releaseListItem);
      $(releaseDetails).append(header).append(body).append(footer);
      $('#releases-details').append(releaseDetails);
    }

    // run highlightjs
    $('#releases-details pre>code').each(function(i, block) {
      hljs.highlightBlock(block);
      hljs.lineNumbersBlock(block);
    });

    // remove loading symbol
    $('#release-spinner').html('');
  });
</script>