use hash to decide which repo

src/app.coffee

@@ -1,14 +1,27 @@
 #!/usr/bin/env coffee
-{ Repos } = require './repos'
+async    = require 'async'
+{ _ }    = require 'lodash'
+Router   = require 'route66'
+
+config   = require './modules/config'
+{ Repo } = require './modules/repo'
 
 module.exports = ->
-    # A new repo collection.
+    # A new router.
-    collection = new Repos()
+    new Router().path
-    # Get the coll/config.
+        '/:user/:repo': ->
-    collection.fetch (err) ->
+            repo = _.toArray(arguments).join('/')
-        throw err if err
+
-        # Use the head.
+            # Render the body.
-        repo = collection.at(0)
+            document.querySelector('body').innerHTML = do require('./templates/body')
-        # Render the repo.
+
-        repo.render (err) ->
+            # Get config/cache.
-            throw err if err
+            async.waterfall [ config
+            # Instantiate.
+            , (conf, cb) ->
+                cb null, new Repo _.extend { repo }, conf
+            # Render.
+            , (repo, cb) ->
+                repo.render cb
+            ], (err) ->
+                throw err if err

src/component.json

@@ -7,18 +7,21 @@
         "caolan/async": "*",
         "mbostock/d3": "*",
         "visionmedia/superagent": "*",
+        "pazguille/route66": "*",
         "necolas/normalize.css": "*"
     },
     "scripts": [
         "app.coffee",
+        "modules/config.coffee",
         "modules/graph.coffee",
         "modules/issues.coffee",
         "modules/milestones.coffee",
         "modules/regex.coffee",
         "modules/request.coffee",
-        "modules/repos.coffee",
+        "modules/repo.coffee",
         "templates/body.eco",
-        "templates/label.eco"
+        "templates/label.eco",
+        "templates/progress.eco"
     ],
     "styles": [
         "styles/app.styl"

src/modules/config.coffee

@@ -0,0 +1,23 @@
+#!/usr/bin/env coffee
+{ _ } = require 'lodash'
+
+req   = require './request'
+
+config = null
+wait   = no
+queue  = []
+
+module.exports = (cb) ->
+    # Have config?
+    return cb null, config if config
+    # Enqueue.
+    queue.push cb
+    # Load it?
+    unless wait
+        wait = yes
+        req.config (err, result) ->
+            # Save config?
+            config = result unless err
+            # Call back for each.
+            _.each queue, (cb) ->
+                cb err, result

src/modules/repo.coffee

@@ -9,30 +9,15 @@ reg        = require './regex'
 req        = require './request'
 
 # Eco templates as functions.
-templates = {} ; ( templates[t] = require("./#{t}") for t in [ 'body', 'label' ] )
+tml = {}
+( tml[t] = require("../templates/#{t}") for t in [ 'progress' ] )
 
-class exports.Repos
+class exports.Repo
-
-    constructor: ->
-        @models = []
-
-    fetch: (cb) ->
-        self = @
-        req.config (err, { protocol, host, token, repos }) ->
-            protocol ?= 'https' ; host ?= 'api.github.com'
-            self.models = ( new Repo({ protocol, host, token, repo: r }) for r in repos )
-            cb null
-
-    at: (index) ->
-        @models[index]
-
-
-class Repo
 
     constructor: (opts) ->
         ( @[k] = v for k, v of opts )
 
-    render: (cb) ->
+    render: (cb) =>
         self = @
 
         async.waterfall [ (cb) ->
@@ -67,7 +52,7 @@ class Repo
                 _.partial(graph.actual, self.issues.closed.data, self.milestone.created_at, total)
                 _.partial(graph.ideal, self.milestone.created_at, self.milestone.due_on, total)
             ], (err, values) ->
-                document.querySelector('body').innerHTML = templates.body { progress }
+                document.querySelector('#progress').innerHTML = tml.progress { progress }
 
                 graph.render values, cb
 

src/modules/request.coffee

@@ -26,6 +26,9 @@ request = ({ protocol, host, token, repo }, query, path, cb) ->
     # Make the query params.
     q = ( "#{k}=#{v}" for k, v of query ).join('&')
 
+    host ?= 'api.github.com'
+    protocol ?= 'https'
+
     req = sa
     .get("#{protocol}://#{host}/repos/#{repo}/#{path}?#{q}")
     .set('Content-Type', 'application/json')

src/styles/app.styl

@@ -5,6 +5,20 @@ body
     background: #31323A
     padding: 100px
 
+ul
+    list-style-type: none
+    padding: 0
+
+    li
+        padding: 0
+
+h2
+    font-size: 14px
+    text-transform: uppercase
+
+#repos
+    color: #FFF
+
 #box
     background: #43444f
     border-radius: 6px
@@ -40,8 +54,6 @@ body
                 background: $opened
 
     h2
-        font-size: 14px
-        text-transform: uppercase
         margin: 10px 0 0 0
 
         &.closed

src/templates/body.eco

@@ -1,15 +1,5 @@
+<div id="repos"></div>
 <div id="box">
     <div id="graph"></div>
-    <div id="progress">
+    <div id="progress"></div>
-        <div class="bars">
-            <% if @progress is 100: %>
-                <div class="closed done" style="width:100%"></div>
-            <% else: %>
-                <div class="closed" style="width:<%= @progress %>%"></div>
-            <% end %>
-            <div class="opened"></div>
-        </div>
-        <h2 class="closed">Closed / <%= Math.floor @progress %>%</h2>
-        <h2 class="opened">Open / <%= 100 - Math.floor @progress %>%</h2>
-    </div>
 </div>

src/templates/progress.eco

@@ -0,0 +1,10 @@
+<div class="bars">
+    <% if @progress is 100: %>
+        <div class="closed done" style="width:100%"></div>
+    <% else: %>
+        <div class="closed" style="width:<%= @progress %>%"></div>
+    <% end %>
+    <div class="opened"></div>
+</div>
+<h2 class="closed">Closed / <%= Math.floor @progress %>%</h2>
+<h2 class="opened">Open / <%= 100 - Math.floor @progress %>%</h2>