initial stats commit

assets/css/main.scss

@@ -15,3 +15,4 @@
 @import 'pages/downloads';
 @import 'pages/download';
 @import 'pages/awesome';
+@import 'pages/stats';

assets/javascript/stats.js

@@ -0,0 +1,72 @@
+document.addEventListener('DOMContentLoaded', function() {
+  async function getBoardStats() {
+    let response = await fetch('https://api.github.com/repos/adafruit/circuitpython/releases');
+    let data = await response.json();
+    return data;
+  }
+
+  function buildBoardStats(data) {
+    let boards = [];
+
+    clearLoadingIndicator();
+
+    data.forEach(function(release) {
+      displayBoardHeader(release);
+
+      release.assets.forEach(function(asset) {
+        let board_name = asset.name.split('-')[2];
+        let index = boards.findIndex(board => board.name === board_name);
+
+        if (index === -1) {
+          boards.push({name: board_name, downloads: asset.download_count});
+        } else {
+          boards[index].downloads += asset.download_count;
+        }
+      });
+
+      boards.sort(function(a, b) {
+        return a.downloads < b.downloads;
+      });
+
+      displayBoardStats(boards);
+    });
+  }
+
+  function clearLoadingIndicator() {
+    let contentElement = document.querySelector('.stats-wrapper');
+    contentElement.innerHTML = "";
+  }
+
+  function displayBoardHeader(release) {
+    let contentElement = document.querySelector('.stats-wrapper');
+    let h2Element = document.createElement('h2');
+    let nameContent = document.createTextNode(release.name);
+    h2Element.appendChild(nameContent);
+    contentElement.appendChild(h2Element);
+  }
+
+  function displayBoardStats(boards) {
+    let contentElement = document.querySelector('.stats-wrapper');
+    let table = document.createElement('table');
+
+    //header row
+    let thead = table.createTHead();
+    let tr = thead.insertRow();
+    tr.insertCell().appendChild(document.createTextNode("Board"));
+    tr.insertCell().appendChild(document.createTextNode("Downloads"));
+
+    let tbody = table.createTBody();
+
+    boards.forEach(function(board) {
+      let tr = tbody.insertRow();
+      let name = document.createTextNode(board.name);
+      let downloads = document.createTextNode(board.downloads);
+      tr.insertCell().appendChild(name);
+      tr.insertCell().appendChild(downloads);
+    });
+
+    contentElement.appendChild(table);
+  }
+
+  getBoardStats().then(buildBoardStats);
+});

assets/sass/layout/_grid.scss

@@ -0,0 +1,22 @@
+.common-layout {
+  padding: 20px 0 200px 0;
+
+  display: grid;
+  grid-template-columns:
+      [full-start] minmax(1em, 1fr)
+      [main-start] minmax(0, 80em) [main-end]
+      minmax(1em, 1fr) [full-end];
+  grid-row-gap: 1em;
+
+  &> * {
+    grid-column: main;
+  }
+
+  .content {
+    background-color: #fff;
+    border: 1px solid #cecece;
+    border-radius: 5px;
+    padding: 40px;
+
+  }
+}

assets/sass/pages/_stats.scss

@@ -0,0 +1,15 @@
+#stats-page {
+  table {
+    border: 1px solid $gray-border;
+    border-collapse: collapse;
+
+    thead {
+      font-weight: bold;
+    }
+
+    td {
+      border: 1px solid $gray-border;
+      padding: 5px;
+    }
+  }
+}

stats.html

@@ -0,0 +1,17 @@
+---
+# Feel free to add content and custom Front Matter to this file.
+# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
+
+layout: home
+---
+
+<div id="stats-page" class="common-layout">
+  <div class="content">
+    <h1>CircuitPython Download Stats</h1>
+    <div class="stats-wrapper">
+      Loading Stats...
+    </div>
+  </div>
+</div>
+
+<script src="/assets/javascript/stats.js"></script>