Merge pull request #59 from brendo/github-source-facts

Abstracts fact fetching for Github sources

material/assets/javascripts/application.js

@@ -2,41 +2,41 @@ var Application =
 /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
-
+/******/
 /******/ 	// The require function
 /******/ 	function __webpack_require__(moduleId) {
-
+/******/
 /******/ 		// Check if module is in cache
 /******/ 		if(installedModules[moduleId])
 /******/ 			return installedModules[moduleId].exports;
-
+/******/
 /******/ 		// Create a new module (and put it into the cache)
 /******/ 		var module = installedModules[moduleId] = {
 /******/ 			exports: {},
 /******/ 			id: moduleId,
 /******/ 			loaded: false
 /******/ 		};
-
+/******/
 /******/ 		// Execute the module function
 /******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-
+/******/
 /******/ 		// Flag the module as loaded
 /******/ 		module.loaded = true;
-
+/******/
 /******/ 		// Return the exports of the module
 /******/ 		return module.exports;
 /******/ 	}
-
+/******/
-
+/******/
 /******/ 	// expose the modules object (__webpack_modules__)
 /******/ 	__webpack_require__.m = modules;
-
+/******/
 /******/ 	// expose the module cache
 /******/ 	__webpack_require__.c = installedModules;
-
+/******/
 /******/ 	// __webpack_public_path__
 /******/ 	__webpack_require__.p = "";
-
+/******/
 /******/ 	// Load entry module and return exports
 /******/ 	return __webpack_require__(0);
 /******/ })
@@ -87,7 +87,11 @@ var Application =
 	
 	var _lunr2 = _interopRequireDefault(_lunr);
 	
-	var _Material = __webpack_require__(4);
+	var _GithubSourceFacts = __webpack_require__(4);
+	
+	var _GithubSourceFacts2 = _interopRequireDefault(_GithubSourceFacts);
+	
+	var _Material = __webpack_require__(5);
 	
 	var _Material2 = _interopRequireDefault(_Material);
 	
@@ -102,20 +106,47 @@ var Application =
 	 * ------------------------------------------------------------------------- */
 	
 	var Application = function () {
-	  function Application() {
+	
+	  /**
+	   * Constructor.
+	   *
+	   * @constructor
+	   * @param  {object} config Configuration object
+	   * @return {void}
+	   */
+	  function Application(config) {
 	    _classCallCheck(this, Application);
+	
+	    this.config = config;
 	  }
 	
+	  /**
+	   * @return {void}
+	   */
+	
+	
 	  _createClass(Application, [{
 	    key: "initialize",
-
-
-	    /**
-	     * @return {void}
-	     */
 	    value: function initialize() {
 	      var material = new _Material2.default();
 	      material.initialize();
+	
+	      if (this.hasGithubRepo()) {
+	        var githubSource = new _GithubSourceFacts2.default(this.config.storage, this.config.repo.url);
+	        githubSource.initialize();
+	      }
+	    }
+	
+	    /**
+	     * Is this application about a Github repository?
+	     *
+	     * @return {bool} - true if `repo.icon` or `repo.url` contains 'github'
+	     */
+	
+	  }, {
+	    key: "hasGithubRepo",
+	    value: function hasGithubRepo() {
+	      return this.config.repo.icon === "github" || this.config.repo.url.includes("github");
 	    }
 	  }]);
 	
@@ -152,7 +183,7 @@ var Application =
 	  /* Intercept click on search mode toggle */
 	  var offset = 0;
 	  var toggle = document.getElementById("search");
-	  toggle.addEventListener("click", function (ev) {
+	  toggle.addEventListener("click", function () {
 	    // TODO: click may be the wrong event...
 	    var list = document.body; // classList md bla
 	    var lock = !matchMedia("only screen and (min-width: 960px)").matches;
@@ -195,7 +226,7 @@ var Application =
 	
 	  // TODO: only do this on MOBILE and TABLET
 	  var toggleSearchClose = document.querySelector(".md-search__icon");
-	  toggleSearchClose.setAttribute("for", "search"); // override query with search, when on mobile!!!
+	  toggleSearchClose.setAttribute("for", "search"); // TODO: override query with search, when on mobile!!!
 	  // toggleSearchClose.addEventListener("click", ev => {
 	  //   ev.preventDefault()
 	  //   // ev.target
@@ -257,44 +288,6 @@ var Application =
 	    });
 	  });
 	
-	  // setTimeout(function() {
-	  fetch("https://api.github.com/repos/squidfunk/mkdocs-material").then(function (response) {
-	    return response.json();
-	  }).then(function (data) {
-	    // console.log(data)
-	    var stars = data.stargazers_count;
-	    var forks = data.forks_count;
-	    // store in session!!!
-	    var lists = document.querySelectorAll(".md-source__facts"); // TODO 2x list in drawer and header
-	    [].forEach.call(lists, function (list) {
-
-	      var li = document.createElement("li");
-	      li.className = "md-source__fact md-source__fact--hidden";
-	      li.innerText = stars + " Stars";
-	      list.appendChild(li);
-
-	      setTimeout(function (lix) {
-	        lix.classList.remove("md-source__fact--hidden");
-	      }, 100, li);
-
-	      li = document.createElement("li");
-	      li.className = "md-source__fact md-source__fact--hidden";
-	      li.innerText = forks + " Forks";
-	      list.appendChild(li);
-
-	      setTimeout(function (lix) {
-	        lix.classList.remove("md-source__fact--hidden");
-	      }, 500, li);
-	    });
-
-	    // setTimeout(function() {
-	    //   li.classList.remove('md-source__fact--hidden');
-	    // }, 100);
-	  }).catch(function () {
-	    // console.log("parsing failed", ex)
-
-	  });
-
 	  // setTimeout(function() {
 	  fetch("/mkdocs/search_index.json") // TODO: prepend BASE URL!!!
 	  .then(function (response) {
@@ -1267,7 +1260,7 @@ var Application =
 	var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 	
 	/**
-	 * lunr - http://lunrjs.com - A bit like Solr, but much smaller and not as bright - 0.7.1
+	 * lunr - http://lunrjs.com - A bit like Solr, but much smaller and not as bright - 0.7.2
 	 * Copyright (C) 2016 Oliver Nightingale
 	 * @license MIT
 	 */
@@ -1319,7 +1312,7 @@ var Application =
 	    return idx;
 	  };
 	
-	  lunr.version = "0.7.1";
+	  lunr.version = "0.7.2";
 	  /*!
 	   * lunr.utils
 	   * Copyright (C) 2016 Oliver Nightingale
@@ -1451,12 +1444,12 @@ var Application =
 	
 	  /**
 	   * A function for splitting a string into tokens ready to be inserted into
-	   * the search index. Uses `lunr.tokenizer.seperator` to split strings, change
+	   * the search index. Uses `lunr.tokenizer.separator` to split strings, change
 	   * the value of this property to change how strings are split into tokens.
 	   *
 	   * @module
 	   * @param {String} obj The string to convert into tokens
-	   * @see lunr.tokenizer.seperator
+	   * @see lunr.tokenizer.separator
 	   * @returns {Array}
 	   */
 	  lunr.tokenizer = function (obj) {
@@ -1465,9 +1458,29 @@ var Application =
 	      return lunr.utils.asString(t).toLowerCase();
 	    });
 	
-	    return obj.toString().trim().toLowerCase().split(lunr.tokenizer.seperator);
+	    // TODO: This exists so that the deprecated property lunr.tokenizer.seperator can still be used. By
+	    // default it is set to false and so the correctly spelt lunr.tokenizer.separator is used unless
+	    // the user is using the old property to customise the tokenizer.
+	    //
+	    // This should be removed when version 1.0.0 is released.
+	    var separator = lunr.tokenizer.seperator || lunr.tokenizer.separator;
+	
+	    return obj.toString().trim().toLowerCase().split(separator);
 	  };
 	
+	  /**
+	   * This property is legacy alias for lunr.tokenizer.separator to maintain backwards compatability.
+	   * When introduced the token was spelt incorrectly. It will remain until 1.0.0 when it will be removed,
+	   * all code should use the correctly spelt lunr.tokenizer.separator property instead.
+	   *
+	   * @static
+	   * @see lunr.tokenizer.separator
+	   * @deprecated since 0.7.2 will be removed in 1.0.0
+	   * @private
+	   * @see lunr.tokenizer
+	   */
+	  lunr.tokenizer.seperator = false;
+	
 	  /**
 	   * The sperator used to split a string into tokens. Override this property to change the behaviour of
 	   * `lunr.tokenizer` behaviour when tokenizing strings. By default this splits on whitespace and hyphens.
@@ -1475,7 +1488,7 @@ var Application =
 	   * @static
 	   * @see lunr.tokenizer
 	   */
-	  lunr.tokenizer.seperator = /[\s\-]+/;
+	  lunr.tokenizer.separator = /[\s\-]+/;
 	
 	  /**
 	   * Loads a previously serialised tokenizer.
@@ -2202,7 +2215,7 @@ var Application =
 	    idx._fields = serialisedData.fields;
 	    idx._ref = serialisedData.ref;
 	
-	    idx.tokenizer = lunr.tokenizer.load(serialisedData.tokenizer);
+	    idx.tokenizer(lunr.tokenizer.load(serialisedData.tokenizer));
 	    idx.documentStore = lunr.Store.load(serialisedData.documentStore);
 	    idx.tokenStore = lunr.TokenStore.load(serialisedData.tokenStore);
 	    idx.corpusTokens = lunr.SortedSet.load(serialisedData.corpusTokens);
@@ -3209,6 +3222,145 @@ var Application =
 
 /***/ },
 /* 4 */
+/***/ function(module, exports) {
+
+	"use strict";
+	
+	Object.defineProperty(exports, "__esModule", {
+	  value: true
+	});
+	
+	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+	
+	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+	
+	/*
+	 * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+	 *
+	 * Permission is hereby granted, free of charge, to any person obtaining a copy
+	 * of this software and associated documentation files (the "Software"), to
+	 * deal in the Software without restriction, including without limitation the
+	 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+	 * sell copies of the Software, and to permit persons to whom the Software is
+	 * furnished to do so, subject to the following conditions:
+	 *
+	 * The above copyright notice and this permission notice shall be included in
+	 * all copies or substantial portions of the Software.
+	 *
+	 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+	 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+	 * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+	 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+	 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+	 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+	 * IN THE SOFTWARE.
+	 */
+	
+	/* ----------------------------------------------------------------------------
+	 * Github Source
+	 * ------------------------------------------------------------------------- */
+	
+	var GithubSourceFacts = function () {
+	
+	  /**
+	   * Constructor.
+	   *
+	   * @constructor
+	   * @param  {object} storage - Accessor to storage, eg. `window.sessionStorage`
+	   * @param  {string} repoUrl - URL to Github repository
+	   */
+	  function GithubSourceFacts(storage, repoUrl) {
+	    _classCallCheck(this, GithubSourceFacts);
+	
+	    this.storage = storage;
+	    this.storageKey = "github-source-facts";
+	    this.apiRepoUrl = repoUrl.replace("github.com/", "api.github.com/repos/");
+	  }
+	
+	  /**
+	   * Retrieve stars and fork counts for the repository before invoking
+	   * `GithubSourceFacts.paint`.
+	   *
+	   * @return {void}
+	   */
+	
+	
+	  _createClass(GithubSourceFacts, [{
+	    key: "initialize",
+	    value: function initialize() {
+	      var _this = this;
+	
+	      var facts = this.storage.getItem(this.storageKey);
+	
+	      // Retrieve the facts, then invoke paint
+	      if (!facts) {
+	        fetch(this.apiRepoUrl).then(function (response) {
+	          return response.json();
+	        }).then(function (data) {
+	          var repoFacts = {
+	            stars: data.stargazers_count,
+	            forks: data.forks_count
+	          };
+	
+	          _this.storage.setItem(_this.storageKey, JSON.stringify(repoFacts));
+	
+	          GithubSourceFacts.paint(repoFacts);
+	        }).catch(function () {
+	          // console.log("parsing failed", ex)
+	        });
+	        // Use the cached facts
+	      } else {
+	        GithubSourceFacts.paint(JSON.parse(facts));
+	      }
+	    }
+	
+	    /**
+	     * Populates `.md-source__facts` with star and fork counts.
+	     *
+	     * @param  {integer} options.stars - Stars count for the repo
+	     * @param  {integer} options.forks - Fork count for the repo
+	     * @return {void}
+	     */
+	
+	  }], [{
+	    key: "paint",
+	    value: function paint(_ref) {
+	      var stars = _ref.stars;
+	      var forks = _ref.forks;
+	
+	      var lists = document.querySelectorAll(".md-source__facts"); // TODO 2x list in drawer and header
+	
+	      [].forEach.call(lists, function (list) {
+	
+	        var li = document.createElement("li");
+	        li.className = "md-source__fact md-source__fact--hidden";
+	        li.innerText = stars + " Stars";
+	        list.appendChild(li);
+	
+	        setTimeout(function (lix) {
+	          lix.classList.remove("md-source__fact--hidden");
+	        }, 100, li);
+	
+	        li = document.createElement("li");
+	        li.className = "md-source__fact md-source__fact--hidden";
+	        li.innerText = forks + " Forks";
+	        list.appendChild(li);
+	
+	        setTimeout(function (lix) {
+	          lix.classList.remove("md-source__fact--hidden");
+	        }, 500, li);
+	      });
+	    }
+	  }]);
+	
+	  return GithubSourceFacts;
+	}();
+	
+	exports.default = GithubSourceFacts;
+	module.exports = exports["default"];
+
+/***/ },
+/* 5 */
 /***/ function(module, exports, __webpack_require__) {
 
 	"use strict";
@@ -3239,7 +3391,7 @@ var Application =
 	                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      * IN THE SOFTWARE.
 	                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      */
 	
-	var _Sidebar = __webpack_require__(5);
+	var _Sidebar = __webpack_require__(6);
 	
 	var _Sidebar2 = _interopRequireDefault(_Sidebar);
 	
@@ -3309,7 +3461,7 @@ var Application =
 	module.exports = exports["default"];
 
 /***/ },
-/* 5 */
+/* 6 */
 /***/ function(module, exports, __webpack_require__) {
 
 	"use strict";
@@ -3318,11 +3470,11 @@ var Application =
 	  value: true
 	});
 	
-	var _Marker = __webpack_require__(6);
+	var _Marker = __webpack_require__(7);
 	
 	var _Marker2 = _interopRequireDefault(_Marker);
 	
-	var _Position = __webpack_require__(8);
+	var _Position = __webpack_require__(9);
 	
 	var _Position2 = _interopRequireDefault(_Position);
 	
@@ -3361,7 +3513,7 @@ var Application =
 	module.exports = exports["default"];
 
 /***/ },
-/* 6 */
+/* 7 */
 /***/ function(module, exports, __webpack_require__) {
 
 	"use strict";
@@ -3372,7 +3524,7 @@ var Application =
 	
 	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 	
-	var _Abstract2 = __webpack_require__(7);
+	var _Abstract2 = __webpack_require__(8);
 	
 	var _Abstract3 = _interopRequireDefault(_Abstract2);
 	
@@ -3495,7 +3647,7 @@ var Application =
 	module.exports = exports["default"];
 
 /***/ },
-/* 7 */
+/* 8 */
 /***/ function(module, exports) {
 
 	"use strict";
@@ -3623,7 +3775,7 @@ var Application =
 	module.exports = exports["default"];
 
 /***/ },
-/* 8 */
+/* 9 */
 /***/ function(module, exports, __webpack_require__) {
 
 	"use strict";
@@ -3634,7 +3786,7 @@ var Application =
 	
 	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 	
-	var _Abstract2 = __webpack_require__(7);
+	var _Abstract2 = __webpack_require__(8);
 	
 	var _Abstract3 = _interopRequireDefault(_Abstract2);
 	
@@ -3754,3 +3906,4 @@ var Application =
 
 /***/ }
 /******/ ]);
+//# sourceMappingURL=application.js.map

material/assets/stylesheets/application.css

@@ -1507,7 +1507,7 @@ mark {
     transition: transform 0.3s 0.1s, opacity   0.2s 0.2s;
     transition: transform 0.3s 0.1s, opacity   0.2s 0.2s, -webkit-transform 0.3s 0.1s;
     border-radius: 2.0rem;
-    background: #EEEEEE;
+    background: white;
     opacity: 0;
     overflow: hidden;
     z-index: 1; }
@@ -1574,3 +1574,5 @@ mark {
   @media only screen and (min-width: 60em) and (min-width: 75em){
   .md-sidebar--secondary[data-md-locked]{
     margin-left: 120.0rem; } }
+
+/*# sourceMappingURL=application.css.map */

material/base.html

@@ -93,8 +93,12 @@
       var config = {
         url: {
           base: "{{ base_url }}",
-          repo: "{{ repo_url }}"
+        },
-        }
+        repo: {
+          url: "{{ repo_url }}",
+          icon: "{{ repo_icon }}",
+        },
+        storage: window.sessionStorage,
       };
       /* Initialize application */
       var app = new Application(config);

src/assets/javascripts/application.js

@@ -29,6 +29,7 @@ import lunr from "lunr"
 
 // import Expander from "./components/expander"
 
+import GithubSourceFacts from "./components/GithubSourceFacts"
 import Material from "./components/Material"
 
 // import Search from './components/search';
@@ -39,12 +40,41 @@ import Material from "./components/Material"
 
 class Application {
 
+  /**
+   * Constructor.
+   *
+   * @constructor
+   * @param  {object} config Configuration object
+   * @return {void}
+   */
+  constructor(config) {
+    this.config = config
+  }
+
   /**
    * @return {void}
    */
   initialize() {
     const material = new Material()
     material.initialize()
+
+    if (this.hasGithubRepo()) {
+      const githubSource = new GithubSourceFacts(
+        this.config.storage,
+        this.config.repo.url
+      )
+      githubSource.initialize()
+    }
+  }
+
+  /**
+   * Is this application about a Github repository?
+   *
+   * @return {bool} - true if `repo.icon` or `repo.url` contains 'github'
+   */
+  hasGithubRepo() {
+    return this.config.repo.icon === "github"
+      || this.config.repo.url.includes("github")
   }
 }
 
@@ -185,48 +215,6 @@ document.addEventListener("DOMContentLoaded", () => {
   })
 
 // setTimeout(function() {
-  fetch("https://api.github.com/repos/squidfunk/mkdocs-material")
-    .then(response => {
-      return response.json()
-    })
-    .then(data => {
-      // console.log(data)
-      const stars = data.stargazers_count
-      const forks = data.forks_count
-      // store in session!!!
-      const lists = document.querySelectorAll(".md-source__facts"); // TODO 2x list in drawer and header
-      [].forEach.call(lists, list => {
-
-        let li = document.createElement("li")
-        li.className = "md-source__fact md-source__fact--hidden"
-        li.innerText = `${stars} Stars`
-        list.appendChild(li)
-
-        setTimeout(lix => {
-          lix.classList.remove("md-source__fact--hidden")
-        }, 100, li)
-
-        li = document.createElement("li")
-        li.className = "md-source__fact md-source__fact--hidden"
-        li.innerText = `${forks} Forks`
-        list.appendChild(li)
-
-        setTimeout(lix => {
-          lix.classList.remove("md-source__fact--hidden")
-        }, 500, li)
-      })
-
-      // setTimeout(function() {
-      //   li.classList.remove('md-source__fact--hidden');
-      // }, 100);
-
-    })
-    .catch(() => {
-      // console.log("parsing failed", ex)
-
-    })
-
-    // setTimeout(function() {
   fetch("/mkdocs/search_index.json") // TODO: prepend BASE URL!!!
     .then(response => {
       return response.json()

src/assets/javascripts/components/GithubSourceFacts.js

@@ -0,0 +1,108 @@
+/*
+ * Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to
+ * deal in the Software without restriction, including without limitation the
+ * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+ * sell copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+ * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+
+/* ----------------------------------------------------------------------------
+ * Github Source
+ * ------------------------------------------------------------------------- */
+
+export default
+class GithubSourceFacts {
+
+  /**
+   * Constructor.
+   *
+   * @constructor
+   * @param  {object} storage - Accessor to storage, eg. `window.sessionStorage`
+   * @param  {string} repoUrl - URL to Github repository
+   */
+  constructor(storage, repoUrl) {
+    this.storage = storage
+    this.storageKey = "github-source-facts"
+    this.apiRepoUrl = repoUrl.replace("github.com/", "api.github.com/repos/")
+  }
+
+  /**
+   * Retrieve stars and fork counts for the repository before invoking
+   * `GithubSourceFacts.paint`.
+   *
+   * @return {void}
+   */
+  initialize() {
+    const facts = this.storage.getItem(this.storageKey)
+
+    // Retrieve the facts, then invoke paint
+    if (!facts) {
+      fetch(this.apiRepoUrl)
+        .then(response => {
+          return response.json()
+        })
+        .then(data => {
+          const repoFacts = {
+            stars: data.stargazers_count,
+            forks: data.forks_count
+          }
+
+          this.storage.setItem(this.storageKey, JSON.stringify(repoFacts))
+
+          GithubSourceFacts.paint(repoFacts)
+        })
+        .catch(() => {
+          // console.log("parsing failed", ex)
+        })
+    // Use the cached facts
+    } else {
+      GithubSourceFacts.paint(JSON.parse(facts))
+    }
+  }
+
+  /**
+   * Populates `.md-source__facts` with star and fork counts.
+   *
+   * @param  {integer} options.stars - Stars count for the repo
+   * @param  {integer} options.forks - Fork count for the repo
+   * @return {void}
+   */
+  static paint({ stars, forks }) {
+    const lists = document.querySelectorAll(".md-source__facts"); // TODO 2x list in drawer and header
+
+    [].forEach.call(lists, list => {
+
+      let li = document.createElement("li")
+      li.className = "md-source__fact md-source__fact--hidden"
+      li.innerText = `${stars} Stars`
+      list.appendChild(li)
+
+      setTimeout(lix => {
+        lix.classList.remove("md-source__fact--hidden")
+      }, 100, li)
+
+      li = document.createElement("li")
+      li.className = "md-source__fact md-source__fact--hidden"
+      li.innerText = `${forks} Forks`
+      list.appendChild(li)
+
+      setTimeout(lix => {
+        lix.classList.remove("md-source__fact--hidden")
+      }, 500, li)
+    })
+  }
+}

src/base.html

@@ -178,8 +178,12 @@
       var config = {
         url: {
           base: "{{ base_url }}",
-          repo: "{{ repo_url }}"
+        },
-        }
+        repo: {
+          url: "{{ repo_url }}",
+          icon: "{{ repo_icon }}",
+        },
+        storage: window.sessionStorage,
       };
 
       /* Initialize application */