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

Abstracts fact fetching for Github sources

material/assets/images/icons/gitlab-black.svg

@@ -1,31 +1,31 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"
-    viewBox="0 0 500 500">
+    viewBox="0 0 500 500">
-  <g transform="translate(156.197863, 1.160267)">
+  <g transform="translate(156.197863, 1.160267)">
-  	<path d="M93.667,473.347L93.667,473.347l90.684-279.097H2.983L93.667,
+  	<path d="M93.667,473.347L93.667,473.347l90.684-279.097H2.983L93.667,
-          473.347L93.667,473.347z" />
+          473.347L93.667,473.347z" />
-  </g>
+  </g>
-  <g transform="translate(28.531199, 1.160800)" opacity="0.7">
+  <g transform="translate(28.531199, 1.160800)" opacity="0.7">
-  	<path d="M221.333,473.345L130.649,194.25H3.557L221.333,473.345L221.333,
+  	<path d="M221.333,473.345L130.649,194.25H3.557L221.333,473.345L221.333,
-          473.345z" />
+          473.345z" />
-  </g>
+  </g>
-  <g transform="translate(0.088533, 0.255867)" opacity="0.5">
+  <g transform="translate(0.088533, 0.255867)" opacity="0.5">
-  	<path d="M32,195.155L32,195.155L4.441,279.97c-2.513,7.735,0.24,16.21,6.821,
+  	<path d="M32,195.155L32,195.155L4.441,279.97c-2.513,7.735,0.24,16.21,6.821,
-          20.99l238.514,173.29 L32,195.155L32,195.155z" />
+          20.99l238.514,173.29 L32,195.155L32,195.155z" />
-  </g>
+  </g>
-  <g transform="translate(29.421866, 280.255593)">
+  <g transform="translate(29.421866, 280.255593)">
-  	<path d="M2.667-84.844h127.092L75.14-252.942c-2.811-8.649-15.047-8.649-17.856,
+  	<path d="M2.667-84.844h127.092L75.14-252.942c-2.811-8.649-15.047-8.649-17.856,
-          0L2.667-84.844 L2.667-84.844z" />
+          0L2.667-84.844 L2.667-84.844z" />
-  </g>
+  </g>
-  <g transform="translate(247.197860, 1.160800)" opacity="0.7">
+  <g transform="translate(247.197860, 1.160800)" opacity="0.7">
-  	<path d="M2.667,473.345L93.351,194.25h127.092L2.667,473.345L2.667,
+  	<path d="M2.667,473.345L93.351,194.25h127.092L2.667,473.345L2.667,
-          473.345z" />
+          473.345z" />
-  </g>
+  </g>
-  <g transform="translate(246.307061, 0.255867)" opacity="0.5">
+  <g transform="translate(246.307061, 0.255867)" opacity="0.5">
-  	<path d="M221.334,195.155L221.334,195.155l27.559,84.815c2.514,7.735-0.24,
+  	<path d="M221.334,195.155L221.334,195.155l27.559,84.815c2.514,7.735-0.24,
-          16.21-6.821,20.99 L3.557,474.25L221.334,195.155L221.334,195.155z" />
+          16.21-6.821,20.99 L3.557,474.25L221.334,195.155L221.334,195.155z" />
-  </g>
+  </g>
-  <g transform="translate(336.973725, 280.255593)">
+  <g transform="translate(336.973725, 280.255593)">
-  	<path d="M130.667-84.844H3.575l54.618-168.098c2.811-8.649,15.047-8.649,
+  	<path d="M130.667-84.844H3.575l54.618-168.098c2.811-8.649,15.047-8.649,
-          17.856,0L130.667-84.844 L130.667-84.844z" />
+          17.856,0L130.667-84.844 L130.667-84.844z" />
-  </g>
+  </g>
 </svg>

material/assets/images/icons/gitlab-white.svg

@@ -1,32 +1,32 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"
+<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"
-    viewBox="0 0 500 500">
+    viewBox="0 0 500 500">
-  <g transform="translate(156.197863, 1.160267)">
+  <g transform="translate(156.197863, 1.160267)">
-  	<path d="M93.667,473.347L93.667,473.347l90.684-279.097H2.983L93.667,
+  	<path d="M93.667,473.347L93.667,473.347l90.684-279.097H2.983L93.667,
-          473.347L93.667,473.347z" fill="white" />
+          473.347L93.667,473.347z" fill="white" />
-  </g>
+  </g>
-  <g transform="translate(28.531199, 1.160800)" opacity="0.7">
+  <g transform="translate(28.531199, 1.160800)" opacity="0.7">
-  	<path d="M221.333,473.345L130.649,194.25H3.557L221.333,473.345L221.333,
+  	<path d="M221.333,473.345L130.649,194.25H3.557L221.333,473.345L221.333,
-          473.345z" fill="white" />
+          473.345z" fill="white" />
-  </g>
+  </g>
-  <g transform="translate(0.088533, 0.255867)" opacity="0.5">
+  <g transform="translate(0.088533, 0.255867)" opacity="0.5">
-  	<path d="M32,195.155L32,195.155L4.441,279.97c-2.513,7.735,0.24,16.21,6.821,
+  	<path d="M32,195.155L32,195.155L4.441,279.97c-2.513,7.735,0.24,16.21,6.821,
-          20.99l238.514,173.29 L32,195.155L32,195.155z" fill="white" />
+          20.99l238.514,173.29 L32,195.155L32,195.155z" fill="white" />
-  </g>
+  </g>
-  <g transform="translate(29.421866, 280.255593)">
+  <g transform="translate(29.421866, 280.255593)">
-  	<path d="M2.667-84.844h127.092L75.14-252.942c-2.811-8.649-15.047-8.649-17.856,
+  	<path d="M2.667-84.844h127.092L75.14-252.942c-2.811-8.649-15.047-8.649-17.856,
-          0L2.667-84.844 L2.667-84.844z" fill="white" />
+          0L2.667-84.844 L2.667-84.844z" fill="white" />
-  </g>
+  </g>
-  <g transform="translate(247.197860, 1.160800)" opacity="0.7">
+  <g transform="translate(247.197860, 1.160800)" opacity="0.7">
-  	<path d="M2.667,473.345L93.351,194.25h127.092L2.667,473.345L2.667,
+  	<path d="M2.667,473.345L93.351,194.25h127.092L2.667,473.345L2.667,
-          473.345z" fill="white" />
+          473.345z" fill="white" />
-  </g>
+  </g>
-  <g transform="translate(246.307061, 0.255867)" opacity="0.5">
+  <g transform="translate(246.307061, 0.255867)" opacity="0.5">
-  	<path d="M221.334,195.155L221.334,195.155l27.559,84.815c2.514,7.735-0.24,
+  	<path d="M221.334,195.155L221.334,195.155l27.559,84.815c2.514,7.735-0.24,
-          16.21-6.821,20.99 L3.557,474.25L221.334,195.155L221.334,195.155z"
+          16.21-6.821,20.99 L3.557,474.25L221.334,195.155L221.334,195.155z"
-        fill="white" />
+        fill="white" />
-  </g>
+  </g>
-  <g transform="translate(336.973725, 280.255593)">
+  <g transform="translate(336.973725, 280.255593)">
-  	<path d="M130.667-84.844H3.575l54.618-168.098c2.811-8.649,15.047-8.649,
+  	<path d="M130.667-84.844H3.575l54.618-168.098c2.811-8.649,15.047-8.649,
-          17.856,0L130.667-84.844 L130.667-84.844z" fill="white" />
+          17.856,0L130.667-84.844 L130.667-84.844z" fill="white" />
-  </g>
+  </g>
 </svg>

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 */