Add contributors and stargazers to the front page

_config.yml

@@ -1,3 +1,3 @@
 permalink: /:categories/:title
-baseurl: http://msmhq.com
+# baseurl: http://msmhq.com
 paginate: 10

assets/css/style.css

@@ -344,28 +344,106 @@ body {
 
 .donators {
   text-align: center;
-  margin-bottom: 50px;
-  margin-top: 50px;
   padding-top: 50px;
   padding-bottom: 50px;
   border-top: 1px solid #e5e5e5;
   border-bottom: 1px solid #e5e5e5;
-  background-image: -webkit-radial-gradient(center, 500px 500px, #f5f7ff, white);
 }
 
-.donator {
+.donators .donator {
   font-size: 30px;
-  margin: 0 auto;
   display: inline-block;
+  margin: 20px 10px 0;
+}
+
+.donators .donator img {
+  width: 80px;
+  height: 80px;
+}
+
+.stargazers {
+  display: none;
+  background-image: -webkit-radial-gradient(top center, 500px 500px, #f5f7ff, white);
+  padding-top: 40px;
+  padding-bottom: 40px;
+  margin-bottom: 40px;
+  border-bottom: 1px solid #eee;
+}
+
+#stargazers {
+  text-align: center;
   margin-top: 30px;
 }
 
-.donator img {
+#stargazers:hover .stargazer {
-  padding: 5px;
+  opacity: 0.5;
-  background: white;
+}
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+
-  width: 110px;
+#stargazers .stargazer {
-  height: 110px;
+  width: 80px;
-  border: 1px solid #ddd;
+  height: 80px;
-  margin-right: 20px;
+  display: inline-block;
+  z-index: 50;
+  position: relative;
+  -webkit-transition: all .1s ease-in-out;
+}
+
+#stargazers .stargazer:hover {
+  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 1);
+  box-shadow: 0 0 40px rgba(0, 0, 0, 1);
+  z-index: 100;
+  -webkit-transform: scale(1.5);
+  opacity: 1;
+}
+
+#stargazers .stargazer img {
+  width: 80px;
+  height: 80px;
+}
+
+#stargazers .stargazer.maintainer {
+  
+}
+
+#stargazers .stargazer.donator {
+  
+}
+
+.contributors {
+  border-top: 1px solid #eee;
+  padding-top: 40px;
+  background-image: -webkit-radial-gradient(center, 500px 500px, #fffafa, white);
+  padding-bottom: 40px;
+}
+
+#contributors {
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 30px;
+}
+
+#contributors .contributor {
+  display: inline-block;
+  width: 80px;
+  text-align: center;
+  margin: 0 10px;
+  position: relative;
+}
+
+#contributors .contributor span {
+  clear: left;
+  text-align: center;
+  padding-top: 3px;
+  background-color: white;
+  border-radius: 6px;
+  position: relative;
+  bottom: -10px;
+  display: inline-block;
+  padding: 2px 0 0;
+  width: 50px;
+}
+
+.contributors .byline .fork-btn {
+  position: relative;
+  top: 9px;
 }

assets/js/index.js

@@ -1,6 +1,104 @@
 $(function() {
   var milestonesUrl = "https://api.github.com/repos/marcuswhybrow/minecraft-server-manager/milestones?callback=?",
-      tagsUrl       = "https://api.github.com/repos/marcuswhybrow/minecraft-server-manager/tags?callback=?";
+      tagsUrl       = "https://api.github.com/repos/marcuswhybrow/minecraft-server-manager/tags?callback=?"
+      stargazersUrl = "https://api.github.com/repos/marcuswhybrow/minecraft-server-manager/stargazers?per_page=100",
+      contributorsUrl = "https://api.github.com/repos/marcuswhybrow/minecraft-server-manager/contributors?per_page=100";
+
+  var maintainers = [
+    "marcuswhybrow",
+  ];
+  var donators = [
+    "joecabezas",
+  ];
+
+  function populateContributors() {
+    var contributors = getAllPages(contributorsUrl);
+
+    // Sort contributors by the number of contributins (most first)
+    contributors.sort(function(a, b) {
+      var aCount = a.contributions;
+      var bCount = b.contributions;
+      return (aCount < bCount) ? 1 : (aCount > bCount) ? -1 : 0;
+    });
+
+    $.each(contributors, function(i, contributor) {
+      var $link = $("<a>")
+        .attr("target", "_blank")
+        .attr("href", "https://github.com/" + contributor.login + "/")
+        .attr("ref", "tooltip")
+        .attr("title", contributor.login)
+        .addClass("contributor ga-track")
+        .appendTo("#contributors")
+        .tooltip({
+          placement: "bottom",
+        });
+      $('<span>')
+        .text('#' + contributor.contributions)
+        .appendTo($link);
+      $("<img>")
+        .attr("src", contributor.avatar_url)
+        .appendTo($link);
+
+      if (maintainers.indexOf(contributor.login) >= 0) {
+        $link.addClass("maintainer");
+      }
+      if (donators.indexOf(contributor.login) >= 0) {
+        $link.addClass("donator");
+      }
+    });
+  }
+
+  function populateStargazers() {
+    var stargazers = getAllPages(stargazersUrl);;
+    $.each(stargazers, function(i, stargazer) {
+      var $link = $("<a>")
+        .attr("target", "_blank")
+        .attr("href", "https://github.com/" + stargazer.login + "/")
+        .attr("ref", "tooltip")
+        .attr("title", stargazer.login)
+        .addClass("stargazer ga-track")
+        .appendTo("#stargazers")
+        .tooltip({
+          placement: "bottom",
+        });
+      $("<img>")
+        .attr("src", stargazer.avatar_url)
+        .appendTo($link);
+
+      if (maintainers.indexOf(stargazer.login) >= 0) {
+        $link.addClass("maintainer");
+      }
+      if (donators.indexOf(stargazer.login) >= 0) {
+        $link.addClass("donator");
+      }
+    });
+    $('.stargazers').slideDown();
+  }
+
+  function getAllPages(url, output, page) {
+    if (typeof(output) === 'undefined') {
+      output = [];
+    }
+    if (typeof(page) === 'undefined') {
+      page = 1;
+    }
+    $.ajax({
+      url: url + "&page=" + page,
+      dataType: 'json',
+      async: false,
+      success: function(data) {
+        if (data.length == 100) {
+          output = getAllPages(url, output.concat(data), page + 1);
+        } else {
+          output = output.concat(data);
+        }
+      },
+    });
+    return output;
+  }
+
+  populateContributors();
+  populateStargazers();
 
   $.getJSON(milestonesUrl, function(result) {
     var milestones = result.data;
@@ -11,7 +109,7 @@ $(function() {
       var milestonePercentage = closedIssues / totalIssues * 100;
       
       var $div = $("<div>").addClass("milestone");
-      var $link =$("<a>")
+      var $link = $("<a>")
             .attr("href", "https://github.com/marcuswhybrow/minecraft-server-manager/issues?state=open&milestone=" + milestone.number)
             .addClass("ga-track")
             .appendTo($div);
@@ -61,6 +159,9 @@ $(function() {
   });
 
   $('.player').tooltip();
+  $('.donator').tooltip({
+    placement: 'bottom',
+  });
 
   $('a.ga-track').live('click', function() {
     var $this = $(this);

index.html

@@ -131,15 +131,35 @@ tab: overview
         </div>
       </div>
 
-      <div class="section donators">
+      <div class="section">
-        <h1 id="donators">Donators</h1>
+        <div class="contributors">
-        <p class="byline">A kind, kind person has <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=Z7XQDNF7U5GLL">donated</a> to MSM. This is him:</p>
+          <h1>Contributors</h1>
-
+          <div id="contributors"></div>
-        <div class="donator">
+          <p class="byline">
-          <a href="https://github.com/joecabezas"><img src="https://secure.gravatar.com/avatar/a8f692e07db8ac26f52e80ad08e7f57c?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png"></a>
+            What to be in this list? Just
-          <a href="https://github.com/joecabezas">Joe Cabezas</a>
+            <iframe class="github-btn fork-btn" src="http://ghbtns.com/github-btn.html?user=marcuswhybrow&amp;repo=minecraft-server-manager&amp;type=fork&amp;count=false&amp;size=large" allowtransparency="true" frameborder="0" scrolling="0" width="80px" height="30px"></iframe>
+            and send a pull request.
+          </p>
         </div>
 
+        <div class="donators">
+          <h1 id="donators">Donators</h1>
+          <p class="byline">These kind, kind people have <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=Z7XQDNF7U5GLL">donated</a> to MSM:</p>
+
+          <div rel="tooltip" title="Joe Cabezas" class="donator">
+            <a href="https://github.com/joecabezas"><img src="https://secure.gravatar.com/avatar/a8f692e07db8ac26f52e80ad08e7f57c?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png"></a>
+          </div>
+
+          <div rel="tooltip" title="Tony Stark" class="donator">
+            <a href="https://github.com/b0Stark"><img src="https://secure.gravatar.com/avatar/1964a6296d58899f4320d26db49fb1cb?s=400&d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-user-420.png"></a>
+          </div>
+        </div>
+
+        <div class="stargazers">
+          <h1>Stargazers</h1>
+          <p class="byline">All those who starred the project:</p>
+          <div id="stargazers"></div>
+        </div>
       </div>
     
       <div class="section milestones">