add Markdown

bower.json

@@ -5,6 +5,7 @@
     "fontawesome": "~4.3.0",
     "react-router": "~0.13.3",
     "reflux": "~0.2.8",
-    "moment": "~2.10.3"
+    "moment": "~2.10.3",
+    "markdown-it": "~4.3.1"
   }
 }

browser/main/Components/BlueprintForm.jsx

@@ -2,6 +2,7 @@ var React = require('react/addons')
 var ReactRouter = require('react-router')
 var CodeEditor = require('./CodeEditor')
 var Catalyst = require('../Mixins/Catalyst')
+var Markdown = require('../Mixins/Markdown')
 var Select = require('react-select')
 var request = require('superagent')
 
@@ -28,7 +29,11 @@ var getOptions = function (input, callback) {
 }
 
 var BlueprintForm = React.createClass({
-  mixins: [Catalyst.LinkedStateMixin, ReactRouter.State],
+  mixins: [Catalyst.LinkedStateMixin, ReactRouter.State, Markdown],
+  statics: {
+    EDIT_MODE: 0,
+    PREVIEW_MODE: 1
+  },
   propTypes: {
     close: React.PropTypes.func
   },
@@ -38,7 +43,8 @@ var BlueprintForm = React.createClass({
         title: '',
         content: '',
         Tags: []
-      }
+      },
+      mode: BlueprintForm.EDIT_MODE
     }
   },
   componentDidMount: function () {
@@ -54,19 +60,31 @@ var BlueprintForm = React.createClass({
     blueprint.content = value
     this.setState({blueprint: blueprint})
   },
+  togglePreview: function () {
+    this.setState({mode: this.state.mode === BlueprintForm.EDIT_MODE ? BlueprintForm.PREVIEW_MODE : BlueprintForm.EDIT_MODE})
+  },
   submit: function () {
     console.log(this.state.blueprint)
   },
   render: function () {
+    var content = this.state.mode === BlueprintForm.EDIT_MODE ? (
+      <div className='form-group'>
+        <CodeEditor onChange={this.handleContentChange} code={this.state.blueprint.content} mode={'markdown'}/>
+      </div>
+    ) : (
+      <div className='form-group'>
+        <div className='previewMode'>Preview mode</div>
+        <div className='marked' dangerouslySetInnerHTML={{__html: ' ' + this.markdown(this.state.blueprint.content)}}></div>
+      </div>
+    )
+
     return (
       <div className='BlueprintForm'>
         <div className='modal-body'>
           <div className='form-group'>
             <input ref='title' className='block-input' valueLink={this.linkState('blueprint.title')} placeholder='Title'/>
           </div>
-          <div className='form-group'>
-            <CodeEditor onChange={this.handleContentChange} code={this.state.blueprint.content} mode={'markdown'}/>
-          </div>
+          {content}
           <div className='form-group'>
             <Select
                 name='Tags'
@@ -79,7 +97,9 @@ var BlueprintForm = React.createClass({
             />
           </div>
         </div>
+
         <div className='modal-footer'>
+            <button onClick={this.togglePreview} className='btn-default'>Toggle Preview</button>
           <div className='modal-control'>
             <button onClick={this.props.close} className='btn-default'>Cancle</button>
             <button onClick={this.submit} className='btn-primary'>Launch</button>

browser/main/Components/LaunchModal.jsx

@@ -60,7 +60,7 @@ var LaunchModal = React.createClass({
     }
 
     return (
-      <div onClick={this.stopPropagation} className='modal launch-modal'>
+      <div onClick={this.stopPropagation} className='LaunchModal modal'>
         <div className='modal-header'>
           <div className='modal-tab'>
             <button className={this.state.currentTab === 'snippet' ? 'btn-primary active' : 'btn-default'} onClick={this.selectSnippetTab}>Snippet</button><button className={this.state.currentTab === 'blueprint' ? 'btn-primary active' : 'btn-default'} onClick={this.selectBlueprintTab}>Blueprint</button>

browser/main/Mixins/Markdown.js

@@ -0,0 +1,12 @@
+var markdownit = require('markdown-it')
+var md = markdownit({
+  typographer: true
+})
+
+var Markdown = {
+  markdown: function (content) {
+    return md.render(content)
+  }
+}
+
+module.exports = Markdown

browser/main/index.html

@@ -40,6 +40,7 @@
   }
   </script>
   <script src="../vendor/moment/min/moment.min.js"></script>
+  <script src="../vendor/markdown-it/dist/markdown-it.min.js"></script>
   <script src="../vendor/react/react-with-addons.js"></script>
   <script src="../vendor/react-router/build/umd/ReactRouter.js"></script>
   <script src="../vendor/reflux/dist/reflux.js"></script>

browser/styles/main/index.styl

@@ -16,9 +16,13 @@ h1
 h2
   font-size 1.5em
 h3
-  font-size 1.3em
+  font-size 1.17em
 h4
-  font-size 1.15em
+  font-size 1em
+h5
+  font-size 0.83em
+h6
+  font-size 0.67em
 a
   color brandColor
   &:hover

browser/styles/mixins/marked.styl

@@ -0,0 +1,88 @@
+marked()
+  line-height 1.2em
+  h1
+    font-size 2em
+    margin 0.67em auto
+  h2
+    font-size 1.5em
+    margin 0.83em auto
+  h3
+    font-size 1.17em
+    margin 1em auto
+  h4
+    font-size 1em
+    margin 1.33em auto
+  h5
+    font-size 0.83em
+    margin 1.67em auto
+  h6
+    font-size 0.67em
+    margin 2.33em auto
+  h1, h2, h3, h4, h5, h6
+    font-weight bold
+  img
+    max-width 100%
+  strong
+    font-weight bold
+  em
+    font-style italic
+  s
+    text-decoration line-through
+  blockquote
+    border-left solid 4px brandBorderColor
+    margin 1em 0
+    padding 0 25px
+  ul
+    list-style-type disc
+    padding-left 35px
+    li
+      display list-item
+      margin 0.5em 0
+    &>li>ul
+      list-style-type circle
+      &>li>ul
+        list-style-type square
+  ol
+    list-style-type decimal
+    padding-left 35px
+    li
+      display list-item
+      margin 0.5em 0
+  code
+    font-family monospace
+    padding 2px 4px
+    border solid 1px borderColor
+    border-radius 4px
+    font-size 0.9em
+  pre
+    padding 5px
+    border solid 1px borderColor
+    border-radius 5px
+    margin 0.5em 0
+    &>code
+      padding 0
+      border none
+      border-radius 0
+  table
+    thead
+      tr
+        background-color tableHeadBgColor
+      th
+        border-style: solid;
+        padding: 5px;
+        border-width: 1px 0 2px 1px;
+        border-color borderColor
+        &:last-child
+          border-right solid 1px borderColor
+    tbody
+      tr:nth-child(2n + 1)
+        background-color tableOddBgColor
+      tr:nth-child(2n)
+        background-color tableEvenBgColor
+      td
+        border-style: solid;
+        padding: 5px;
+        border-width: 0 0 1px 1px;
+        border-color borderColor
+        &:last-child
+          border-right solid 1px borderColor

browser/styles/shared/modal.styl

@@ -31,7 +31,7 @@
       .modal-control
         float right
 
-  .launch-modal
+  .LaunchModal
     .modal-tab
       text-align center
       margin-bottom 15px
@@ -40,14 +40,15 @@
         border-radius 0
         border-width 1px
         width 150px
+        border-radius 0
         &:nth-child(1)
-          border-top-left-radius 10px
-          border-bottom-left-radius 10px
           border-right solid 1px borderColor
+          border-top-left-radius 5px
+          border-bottom-left-radius 5px
         &:nth-child(2)
           border-left none
-          border-top-right-radius 10px
-          border-bottom-right-radius 10px
+          border-top-right-radius 5px
+          border-bottom-right-radius 5px
   textarea.snippetDescription
     height 75px
     font-size 0.9em
@@ -60,6 +61,30 @@
     .Select-menu-outer
       border-color borderColor
   .ace_editor
-    height 250px
     border-radius 5px
     border solid 1px borderColor
+  .SnippetForm
+    .ace_editor
+      height 258px
+  .BlueprintForm
+    .ace_editor
+      height 358px
+    .previewMode
+      position absolute
+      right 15px
+      font-size 0.8em
+      line-height 24px
+      padding 0 10px
+      top 139px
+      background-color transparentify(invBackgroundColor, 0.2)
+      color invTextColor
+      border-top-right-radius 5px
+  .marked
+    height 360px
+    overflow-x hidden
+    overflow-y auto
+    box-sizing border-box
+    padding 5px
+    border solid 1px borderColor
+    border-radius 5px
+    marked()

browser/styles/vars.styl

@@ -15,6 +15,9 @@ textColor = #4D4D4D
 backgroundColor= white
 fontSize= 16px
 
+invBackgroundColor = #4C4C4C
+invTextColor = white
+
 btnColor = #888
 btnHighlightenColor = #000
 
@@ -29,5 +32,9 @@ planetAnchorActiveBgColor = white
 popupShadow = 0 0 5px 0 #888
 modalBaseColor = transparentify(white, 65%)
 
+tableHeadBgColor = white
+tableOddBgColor = #F9F9F9
+tableEvenBgColor = white
+
 facebookColor= #3b5998
 githubBtn= #201F1F

package.json

@@ -32,7 +32,7 @@
   "dependencies": {
     "dotenv": "^1.1.0",
     "halogen": "^0.1.10",
-    "marked": "^0.3.3",
+    "markdown-it": "^4.3.1",
     "moment": "^2.10.3",
     "node-jsx": "^0.13.3",
     "node-notifier": "^4.2.1",

webpack.config.js

@@ -29,7 +29,8 @@ module.exports = {
     'react-router': 'ReactRouter',
     'ace': 'ace',
     'reflux': 'Reflux',
-    'moment': 'moment'
+    'moment': 'moment',
+    'markdown-it': 'markdownit'
   },
   resolve: {
     extensions: ['', '.js', '.jsx']