index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Thomas Davis - Brisbane - Web Developer</title>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
  <div class="profile"></div>
  <hr />
  <h3>My Repositories</h3>
  <div class="my-repos"></div> 
  <hr />
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.1/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.3/jquery.dataTables.min.js"></script>

<script type="text/template" id="profile-template">
<h1 style="margin-top: 40px;"><%= user.name %></h1>
<hr />
<div class="row">
  <div class="span8">
  <img style="float:left; margin-right: 20px;width: 80px; max-width:80px; height: 80px;" src="http://www.gravatar.com/avatar/<%= user.gravatar_id %>" class="img-polaroid">
    <%= user.company %><br/ >
    <%= user.location %><br />
    <%= user.email %><br />
    For hire: <%= user.hireable %>
  </div>
  <div class="span3">
    <a href="http://twitter.com/neutralthoughts" class="twitter-follow-button">Follow @neutralthoughts</a></td></tr>
    <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
  </div>
</div>
</script>
<script type="text/template" id="repositories-table">
  <hr />
  <% if( typeof org !== 'undefined') { %>
<img style="float:left; margin-right: 20px;height: 80px; width: 80px;" src="<%= org.avatar_url %>" class="img-polaroid"  />
    <h2 style="line-height: 80px;"><a href="<%= org.url %>"><%= org.login %></a></h2>
    <div style="clear: both;"></div>
  <hr />


  <% } %>
  <table class="table libraries table-striped">
    <thead>
      <tr>
        <th>Name</th><th>Language</th><th>Description</th><th>Forks</th><th>Watchers</th><th>Open Issues</th>
      </tr>
    </thead>
    <tbody>
      <% _.each(repos, function(repo){ %>
      <tr>
        <td><a href="<%= repo.html_url %>"><%= repo.name %></a></td>
        <td><%= repo.language %></td>
        <td><%= repo.description.substr(0,50) %>...</td>
        <td><%= repo.forks %></td>
        <td><%= repo.watchers %></td>
        <td><%= repo.open_issues %></td>

      </tr>
      <% }); %>
    </tbody>
  </table>

</script>


<a href="https://github.com/thomasdavis/thomasdavis.github.com"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

<script>
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
    return {
        "iStart":         oSettings._iDisplayStart,
        "iEnd":           oSettings.fnDisplayEnd(),
        "iLength":        oSettings._iDisplayLength,
        "iTotal":         oSettings.fnRecordsTotal(),
        "iFilteredTotal": oSettings.fnRecordsDisplay(),
        "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
        "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
    };
}
 
/* Bootstrap style pagination control */
$.extend( $.fn.dataTableExt.oPagination, {
    "bootstrap": {
        "fnInit": function( oSettings, nPaging, fnDraw ) {
            var oLang = oSettings.oLanguage.oPaginate;
            var fnClickHandler = function ( e ) {
                e.preventDefault();
                if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
                    fnDraw( oSettings );
                }
            };
 
            $(nPaging).addClass('pagination').append(
                '<ul>'+
                    '<li class="prev disabled"><a href="#">&larr; '+oLang.sPrevious+'</a></li>'+
                    '<li class="next disabled"><a href="#">'+oLang.sNext+' &rarr; </a></li>'+
                '</ul>'
            );
            var els = $('a', nPaging);
            $(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
            $(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
        },
 
        "fnUpdate": function ( oSettings, fnDraw ) {
            var iListLength = 5;
            var oPaging = oSettings.oInstance.fnPagingInfo();
            var an = oSettings.aanFeatures.p;
            var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
 
            if ( oPaging.iTotalPages < iListLength) {
                iStart = 1;
                iEnd = oPaging.iTotalPages;
            }
            else if ( oPaging.iPage <= iHalf ) {
                iStart = 1;
                iEnd = iListLength;
            } else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
                iStart = oPaging.iTotalPages - iListLength + 1;
                iEnd = oPaging.iTotalPages;
            } else {
                iStart = oPaging.iPage - iHalf + 1;
                iEnd = iStart + iListLength - 1;
            }
 
            for ( i=0, iLen=an.length ; i<iLen ; i++ ) {
                // Remove the middle elements
                $('li:gt(0)', an[i]).filter(':not(:last)').remove();
 
                // Add the new list items and their event handlers
                for ( j=iStart ; j<=iEnd ; j++ ) {
                    sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
                    $('<li '+sClass+'><a href="#">'+j+'</a></li>')
                        .insertBefore( $('li:last', an[i])[0] )
                        .bind('click', function (e) {
                            e.preventDefault();
                            oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
                            fnDraw( oSettings );
                        } );
                }
 
                // Add / remove disabled classes from the static elements
                if ( oPaging.iPage === 0 ) {
                    $('li:first', an[i]).addClass('disabled');
                } else {
                    $('li:first', an[i]).removeClass('disabled');
                }
 
                if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
                    $('li:last', an[i]).addClass('disabled');
                } else {
                    $('li:last', an[i]).removeClass('disabled');
                }
            }
        }
    }
} );
/*
var displayProfile = function (username) {
  $.ajax('https://api.github.com/users/' + username + '?callback=?', {
    crossDomain: true,
    dataType: "jsonp",
    success: function (user) {
      console.log(user);
    }
  });
};
*/
var displayUserRepos = function () {

  $.ajax('http://d2a0f5wdso4x2s.cloudfront.net/?username=thomasdavis' , {
    dataType: "json",
    success: function (repos) {
      console.log(repos);
      $('.profile').html(_.template($('#profile-template').html(), {user: repos.profile}));

      $('.my-repos').html(_.template($('#repositories-table').html(), {repos: repos.repos}));
      $('.my-repos table').dataTable( {
          "bPaginate": true,
          "bLengthChange": false,
          "bFilter": false,
          "bInfo": true,
          "bAutoWidth": false,
          "aaSorting": [[ 4, "desc" ]],
          "sPaginationType": "bootstrap"
      }  );
    }
  });

};
      displayUserRepos();

</script>
<script src="//static.getclicky.com/js" type="text/javascript"></script>
<script type="text/javascript">try{ clicky.init(100641309); }catch(e){}</script>
<noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/100641309ns.gif" /></p></noscript>
</body>
</html> 