handle markdown in descriptions

build/build.css

@@ -516,6 +516,7 @@ table {
   left: 85%;
 }
 
+
 @font-face {
     font-family: 'Source Sans Pro';
     font-style: normal;
@@ -571,8 +572,8 @@ h2 {
 .box.info,
 .box.error,
 .box.success {
+  padding: 20px 0;
   border-top: 4px solid #eac85d;
-  padding: 20px;
   width: 50%;
   margin: 0 auto;
 }
@@ -595,6 +596,17 @@ h2 {
   font-size: 20px;
   text-transform: uppercase;
 }
+.box h2 {
+  margin: 0;
+  padding: 0 20px 20px;
+}
+.box p {
+  margin: 0;
+  padding: 0 20px;
+}
+.box p.description {
+  margin-top: -10px;
+}
 #graph {
   height: 200px;
   position: relative;
@@ -679,6 +691,7 @@ h2 {
 }
 #progress h2 {
   margin: 10px 0 0 0;
+  padding: 0;
 }
 #progress h2.closed {
   float: left;

package.json

@@ -14,7 +14,8 @@
         "request": "~2.27.0"
     },
     "devDependencies": {
-        "mocha": "~1.12.0"
+        "mocha": "~1.12.0",
+        "marked": "~0.2.9"
     },
     "scripts": {
         "test": "make test"

src/component.json

@@ -9,7 +9,8 @@
         "visionmedia/superagent": "*",
         "necolas/normalize.css": "*",
         "component/tip": "*",
-        "component/aurora-tip": "*"
+        "component/aurora-tip": "*",
+        "component/marked": "*"
     },
     "scripts": [
         "app.coffee",

src/modules/milestones.coffee

@@ -1,4 +1,6 @@
 #!/usr/bin/env coffee
+marked = require 'marked'
+
 request = require './request'
 
 module.exports =
@@ -16,5 +18,7 @@ module.exports =
             m = data[0]
             # Empty milestone?
             return cb null, "No issues for milestone #{m.title}" if m.open_issues + m.closed_issues is 0
+            # Has description? Parse GFM.
+            m.description = marked(m.description)[3...-5] if m.description
 
             cb null, null, m

src/modules/repo.coffee

@@ -59,7 +59,7 @@ module.exports = (opts, cb) ->
             )
         ], (err, values) ->
             # Render the body.
-            render 'body', 'graph', { repo: opts.path, milestone: opts.milestone }
+            render 'body', 'graph', { 'repo': opts.path, 'milestone': opts.milestone }
 
             # Render the progress.
             render '#progress', 'progress', { progress }

src/styles/app.styl

@@ -70,6 +70,9 @@ h2
         margin: 0
         padding: 0 20px
 
+        &.description
+            margin-top: -10px
+
 // where D3 renders to
 #graph
     height: 200px

src/templates/graph.eco

@@ -1,7 +1,7 @@
 <div class="box">
-    <h1><%- @repo %><br><%- @milestone.title %></h1>
+    <h1><%- @repo %>@<%- @milestone.title %></h1>
     <% if @milestone.description: %>
-        <p><%- @milestone.description %></p>
+        <p class="description"><%- @milestone.description %></p>
     <% end %>
     <div id="graph">
         <div id="tooltip"></div>

test/milestones.coffee

@@ -85,3 +85,21 @@ module.exports =
             assert.ifError err
             assert.equal warn, 'No issues for milestone No issues'
             do done
+
+    'milestones - has description': (done) ->
+        marked = require 'marked'
+
+        req.all_milestones = (opts, cb) ->
+            cb null, [
+                {
+                    'number': 1
+                    'created_at': '2013-01-01T00:00:00Z'
+                    'due_on': '2013-02-01T00:00:00Z'
+                    'description': 'A description of this <strong>milestone</strong> goes *here*'
+                }
+            ]
+
+        milestones.get_current {}, (err, warn, milestone) ->
+            assert.ifError err
+            assert.equal milestone.description, 'A description of this <strong>milestone</strong> goes <em>here</em>'
+            do done