info page

src/app.coffee

@@ -6,14 +6,22 @@ Router   = require 'route66'
 config   = require './modules/config'
 { Repo } = require './modules/repo'
 
+# Render an eco template into selector.
+show = (selector, template, context = {}) ->
+    tml = require "./templates/#{template}"
+    document.querySelector(selector).innerHTML = tml context
+
 module.exports = ->
+    # Show info notice?
+    show 'body', 'info' unless location.hash
+
     # A new router.
     new Router().path
         '/:user/:repo': ->
             repo = _.toArray(arguments).join('/')
 
             # Render the body.
-            document.querySelector('body').innerHTML = do require('./templates/body')
+            show 'body', 'graph'
 
             # Get config/cache.
             async.waterfall [ config

src/component.json

@@ -19,7 +19,9 @@
         "modules/regex.coffee",
         "modules/request.coffee",
         "modules/repo.coffee",
-        "templates/body.eco",
+        "templates/error.eco",
+        "templates/graph.eco",
+        "templates/info.eco",
         "templates/label.eco",
         "templates/progress.eco"
     ],

src/styles/app.styl

@@ -16,14 +16,31 @@ h2
     font-size: 14px
     text-transform: uppercase
 
-#repos
-    color: #FFF
-
-#box
+.box
     background: #43444f
-    border-radius: 6px
+    color: #FFF
     box-shadow: 2px 4px 6px rgba(0,0,0,0.2)
 
+    &.info, &.error, &.success
+        border-top: 4px solid #E2E2E2
+
+    &.info
+        border-top-color: #96CFFB
+
+    &.error
+        border-top-color: #FE5D55
+
+    &.info, &.error
+        padding: 20px
+        width: 50%
+        margin: 0 auto
+
+    &.success
+        border-top-color: #4ACAB4
+
+    a
+        color: #FFF
+
 #progress
     padding: 20px
     border-radius: 0 0 6px 6px
@@ -66,7 +83,6 @@ h2
 
 #graph
     background: #FFF
-    border-radius: 6px 6px 0 0
     height: 200px
 
     svg

src/templates/error.eco

@@ -0,0 +1,3 @@
+<div class="box" id="info">
+    <p>Hello trouble</p>
+</div>

src/templates/graph.eco

@@ -1,5 +1,4 @@
-<div id="repos"></div>
-<div id="box">
+<div class="box">
     <div id="graph"></div>
     <div id="progress"></div>
 </div>

src/templates/info.eco

@@ -0,0 +1,4 @@
+<div class="box info" id="info">
+    <h2>GitHub Burndown Chart</h2>
+    <p>Use your browser's location hash to specify a repo: <a href="#!/radekstepan/disposable">#!/radekstepan/disposable</a>.</p>
+</div>