Top contributors

TopContributors/assets/script.js

@@ -0,0 +1,63 @@
+var contributorsDiv = document.getElementById("contributors");
+var k=0;
+
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+$(document).ready(function(){
+	$("#loader").show();
+	projectContributors();
+});
+
+function projectContributors()
+{	
+	// A 500ms delay so that the loader is shown before the request is made. Otherwise loader is not shown and page keeps on loading.
+	sleep(500).then( () => {
+		res = ["devbae-blog"]; //repos list to  be displayed on the site.
+
+    	$.ajaxSetup({
+      		async: false
+    	});
+		for (i=0; i<res.length; ++i)
+		{	
+
+			$.getJSON('https://api.github.com/repos/devbae/'+res[i]+'/contributors',
+				function(data){
+					data.sort((a,b) => b.contributions-a.contributions);
+					var max_count = 0, iter=0;
+
+					if(data.length>10)
+						max_count=10;
+					else
+						max_count=data.length;
+
+					projectTitle = res[k].toUpperCase();
+					k++;
+
+					child ="<a href='https://github.com/devbae/" + res[i] + "'><h2>"+ projectTitle +"</h2></a>";
+
+					contributorsDiv.innerHTML += "<div class=\"row team-box\">";
+					contributorsDiv.innerHTML += child;
+
+					for(j=0; j<max_count; ++j, ++iter)
+					{
+
+						var login = data[iter].login, contributions = data[iter].contributions;
+          				var avatar = data[iter].avatar_url;
+            			var newChild = "\
+           				<div class=\"col-lg-2 col-sm3 text-center member contributor-div\">\
+              				<img class=\"img-circle img-responsive img-center team-img\" src=\" " + avatar + "\" alt=\"\">\
+              				<h4><a class=\"github-profile\" target=\"_blank\" href=\"https://github.com/" + login + " \">@" + login + "</a></h3>\
+              				<h5>Contributions: " + contributions + "</h5>\
+            			</div>\
+            			";
+            			contributorsDiv.innerHTML += newChild;
+
+					}
+					contributorsDiv.innerHTML += "</div>\ <hr>";
+				});
+		}
+		$("#loader").hide();
+	});
+};

TopContributors/css/styles.css

@@ -0,0 +1,168 @@
+
+html, body {
+    margin: 0;
+    height: 100%;
+    width: 100%;
+    color: #717f86;
+    font-size: 16px;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 400;
+
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: Open Sans, sans-serif;
+    font-weight: 700;
+    color: #4B4B4C;
+    display: block;
+  }
+
+  a {
+    color: #ffffff;
+  }
+
+  a:hover, a:focus {
+    color: #1E88E5;
+  }
+
+
+  /**********************************
+  Typography
+  **********************************/
+  .smt {
+    color: #fff;
+    text-align: center;
+    background-image: url(../img/bg.jpg);
+    background-size: cover;
+    background-color: #000080;
+    padding-top: 7em;
+    padding-bottom: 5em;
+    background-blend-mode: exclusion;
+
+  }
+
+  .smt-r1 {
+    font-size: 7em;
+    line-height: 1.4em;
+    color: #ffffff;
+    text-shadow: 4px 4px 4px #aaa;
+  }
+
+  .smt-r2 {
+    font-size: 4em;
+    line-height: 1em;
+    color: #ffffff;
+    font-family: 'Tangerine', sans-serif; 
+  }
+
+
+
+  /***********************************
+  Team Section
+  ************************************/
+
+  #team {
+    height: auto;
+    margin-top: 200px;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 65px;
+
+
+  }
+
+  .designation {
+    font-size: 2.5em;
+  }
+
+  .team-img {
+    margin: 1px 0px;
+    transition: .5s ease;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  .team-box {
+    text-align: center;
+  }
+
+  .member {
+    float: none;
+    display: inline-block;
+    margin-bottom: 1em;
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+
+  a.github-profile {
+    color: #4B4B4C;
+  }
+
+
+  #loader {
+    z-index: 3;
+  } 
+  /***********************************
+  Responsive media queries
+  ***********************************/
+
+
+    #rights {
+      display: block;
+    }
+  }
+
+  @media (min-width: 768px) and (max-width: 1199px) {
+    .smallScreenBottom {
+      margin-left: 25%;
+    }
+  }
+
+
+
+  @media (min-width: 768px) {
+    .row2 {
+      float: right;
+      width: 380px;
+    }
+
+    .contributor-div {
+     width: 19.5% !important;
+    }
+
+    .contributor-div .team-img {
+      padding-left: 20%;
+      padding-right: 20%;
+    }
+  }
+
+
+  @media (max-width: 768px) and (min-width: 600px) {
+    .team-img {
+      padding-left: 150px;
+      padding-right: 150px;
+    }
+  }
+
+  @media (max-width: 599px) and (min-width: 500px) {
+    .team-img {
+      padding-left: 100px;
+      padding-right: 100px;
+    }
+  }
+
+  @media (min-width: 768px) and (max-width: 900px) {
+    .team-img {
+      padding-left: 20px;
+      padding-right: 20px;
+    }
+  }
+
+  @media (min-width: 1200px) and (max-width: 1300px) {
+    .team-img {
+      padding-left: 30px;
+      padding-right: 30px;
+    }
+  }
+

TopContributors/index.html

@@ -0,0 +1,51 @@
+---
+
+title: TopContributors
+permalink: '/TopContributors'
+
+---
+
+<html lang="en">
+
+<head>
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-171546866-1"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'UA-171546866-1');
+  </script>
+
+  <title>
+    Top Contributors | Devbae
+  </title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
+  <link rel="stylesheet" type="text/css" href="css/styles.css" />
+  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans|Candal|Alegreya+Sans">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
+  <link rel="shortcut icon" type="image/x-icon" href="../img/favicon.png">
+</head>
+
+<body>
+  <!-- Team -->
+   <div class="contentHeader designation">
+    <div class="row team-box" id="contributors">
+
+    </div>
+  </div>
+  <!-- Team End -->
+  <!-- Contents End -->
+  <script src="assets/jquery.min.js"></script>
+  <script src="assets/script.js"></script>
+
+</body>
+
+</html>
+
+
+

_pages/about.html

@@ -18,3 +18,6 @@ <h2> Future Work </h2>
   Currently we're having a Jekyll blog and we're aiming to build a proper website for this, so that we can have many
   features and pages like <strong>Frequently Occuring Errors(FOE)</strong> etc. We'll be migrating as soon as we have sufficient number of people ready to join the project.
 </p>
+<div class="contributors_container">
+  <a href="/TopContributors"><button class="btn contributors">See Top Contributors</button></a>
+</div>