Add ability to display GitHub stars (#51)

Author: patmellon

_sass/ecosystem.scss

@@ -377,6 +377,9 @@
     li {
       display: inline;
     }
+    li.github-stars-count-whole-number {
+      display: none;
+    }
   }
 
 

assets/github-stars.js

@@ -1,6 +1,15 @@
 var githubStarsScript = $("script[src*=github-stars]");
 var starCountCallDate = githubStarsScript.attr("star-count-call-date");
 var starCountData = githubStarsScript.attr("star-count-data");
+var ecosystemStars = githubStarsScript.attr("ecosystem");
+var cloudfrontUrl = "";
+
+if (ecosystemStars == "true") {
+  cloudfrontUrl = "https://d2ze5o8gurgoho.cloudfront.net/star-count";
+}
+else {
+  cloudfrontUrl = "https://du4l4liqvfo92.cloudfront.net/star-count";
+}
 
 var today = new Date();
 var starCountCallDateParsed = new Date(
@@ -19,7 +28,7 @@ if (
 
 function updateStarCount() {
   console.log("Updated star count fetched");
-  $.getJSON("https://du4l4liqvfo92.cloudfront.net/star-count", function (data) {
+  $.getJSON(cloudfrontUrl, function (data) {
     localStorage.setItem(starCountCallDate, Date.parse(today));
     localStorage.setItem(starCountData, JSON.stringify(data));
 

ecosystem/ecosystem.html

@@ -34,7 +34,7 @@ <h1>
           {% assign ecosystem = site.ecosystem  | sort_natural: "title" %}
 
           {% for item in ecosystem %}
-            <div class="col-md-6 ecosystem-card-wrapper" id="ecosystemCards" data-categories="{{ item.category | join: "," }}" data-date-added="{{ item.date-added }}">
+            <div class="col-md-6 ecosystem-card-wrapper" id="ecosystemCards" data-categories="{{ item.category | join: "," }}" data-date-added="{{ item.date-added }}" data-id="{{ item.github-id }}">
               <div class="card ecosystem-card">
                 <a href="{{ item.link }}" target="_blank">
                   <div class="card-body {{ item.logo-class }} {% if item.experimental %}experimental{% endif %}">
@@ -44,6 +44,7 @@ <h1>
                           <div class="icon-count-container">
                             <li><img class="github-logo" src="/assets/images/logo-github.svg"></li>
                             <li class="github-stars-count"></li>
+                            <li class="github-stars-count-whole-number"></li>
                           </div>
                       </ul>
                         {% if item.experimental %}
@@ -122,6 +123,6 @@ <h1>
 </script>
 
 <script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
-<script star-count-call-date="ecosystemStarCountCallDate" star-count-data="ecosystemStarCountData" src="{{ site.baseurl }}/assets/github-stars.js"></script>
+<script id="filter-script" ecosystem="true" star-count-call-date="ecosystemStarCountCallDate" star-count-data="ecosystemStarCountData" src="{{ site.baseurl }}/assets/github-stars.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
 <script list-id="ecosystem-index-cards" display-count="100" pagination="false" src="{{ site.baseurl }}/assets/filter-hub-tags.js"></script>