A Pen by Dinesh Vasudevan.

index.html

<div id="gists" class="gists" data-username="dinks"></div>

Public-Gists-Viewer.markdown

Public Gists Viewer

Show public gists

A Pen by Dinesh Vasudevan on CodePen.

License.

script.js

(function() {
  var url = 'https://api.github.com/users/__USERNAME__/gists';
  $.fn.gistify = function() {
    var selfer = $(this);
    var glDesc = '<h2><a href="__URL__">__DESCRIPTION__</a></h2>';
    var name = selfer.data('username');
    if (name === null) {
      return;
    }
    var constructedUrl = url.replace(/__USERNAME__/, name);
    
    $.when($.ajax(constructedUrl, {
      dataType: 'jsonp'
    })).done(function(data) {
      $.each(data.data, function() {
        selfer.append(glDesc.replace(/__DESCRIPTION__/, this.description).replace('__URL__', this.url));
      });
    });
  };
})();

$(document).ready(function() {
  $('#gists').gistify();
});

style.scss

@import "compass";
.gists {
  background-color: #AAEEAA;
  h2 {
    border-bottom: 1px solid #EEEEEE;
    
    a {
      color: #AAAAAA; 
    }
  }
}