middleman-blog-ui 0.1.0

data/source/admin/published.json.erb

@@ -0,0 +1,6 @@
+<% d = blog.articles.collect do |d|
+    { path: d.path, title: d.title }
+  end
+%><%= 
+  {articles: d }.to_json
+%>

data/source/javascripts/admin/admin.js

@@ -0,0 +1,25 @@
+//= require react
+//= require ./react-bootstrap.min
+//= require ./marked.min.js
+//= require ./reflux.min
+//= require ./superagent.js
+//= require ./api
+//= require_tree ./stores
+//= require_tree ./components
+
+var request = window.superagent;
+
+var Button = ReactBootstrap.Button;
+var ButtonToolbar = ReactBootstrap.ButtonToolbar;
+var Table = ReactBootstrap.Table;
+var Input = ReactBootstrap.Input;
+var Modal = ReactBootstrap.Modal;
+var OverlayMixin = ReactBootstrap.OverlayMixin;
+var ProgressBar = ReactBootstrap.ProgressBar;
+
+var Nav = ReactBootstrap.Nav;
+var Navbar = ReactBootstrap.Navbar;
+var NavItem = ReactBootstrap.NavItem;
+var MenuItem = ReactBootstrap.MenuItem;
+var CollapsibleNav = ReactBootstrap.CollapsibleNav;
+var DropdownButton = ReactBootstrap.DropdownButton;

data/source/javascripts/admin/api.coffee

@@ -0,0 +1,94 @@
+@API = 
+  loadUrl: (url) ->
+    console.log "Loading", url
+    unless @promises
+      console.log "Creating promise"
+      @promises = {}
+
+    unless @promises[url]
+      console.log "Fetching", url
+      @promises[url] = $.Deferred()
+
+      $.ajax( url ).success (data) =>
+        console.log "Got back: ", data
+        console.log @promises[url]
+        @promises[url].resolve data
+      , (error) =>
+        @promises[url].reject error
+
+    @promises[url]
+
+  loadPost: (path) ->
+    ret = $.Deferred()
+
+    $.ajax( '/api/post', {data: {path: path}} ).success (data) =>
+      console.log "Got post back", data
+      ret.resolve( data )
+    .fail (e) =>
+      ret.reject( e.responseJSON )
+
+    ret
+
+  savePost: (path, meta, body) ->
+    ret = $.Deferred()
+
+    $.ajax( '/api/post', {method: 'POST', data: {path: path, meta: meta, body: body} } ).success (data) =>
+      console.log "Saved post"
+      ret.resolve data
+    .fail (e) =>
+      console.log "Error saving post"
+      ret.reject( e.responseJSON )
+
+    ret
+
+  newDraft: (metadata) ->
+    $.post( '/api/drafts', metadata )
+
+  publishDraft: (path) ->
+    $.post( '/api/publish', { path: path } )
+
+  uploadFile: ( path, nativeEvent, process_cb ) ->
+    console.log "Uploading image to path"
+
+    fd = new FormData()
+    fd.append 'path', path
+    fd.append 'file', nativeEvent.dataTransfer.files[0]
+
+    $.ajax 
+      type: "post"
+      url: '/api/images'
+      xhr: ->
+        xhr = new XMLHttpRequest()
+        xhr.upload.onprogress = process_cb
+        xhr
+      cache: false
+      contentType: false
+      # complete: uploadCompleted
+      processData: false
+      data: fd
+
+  runCommand: (cmd, path) ->
+    console.log "Running command", cmd, path
+
+    callback = (e) ->
+      console.log "Got change"
+      console.log e
+      true
+
+    # $.post( '/api/' + cmd )
+    $.ajax
+      type: 'post'
+      url: '/api/' + cmd
+      data: {path: path}
+      xhr: ->
+        xhr = new XMLHttpRequest()
+        xhr.onprogress = callback # process_cb
+        # xhr.upload.onprogress = process_cb
+        xhr
+
+
+  loadDrafts: ->
+    @loadUrl "/admin/drafts.json"
+
+  loadPublished: ->
+    @loadUrl "/admin/published.json"

data/source/javascripts/admin/components/admin_navbar.js.coffee

@@ -0,0 +1,49 @@
+@AdminNavbar = React.createClass
+  mixins: [Reflux.connect(commandResultStore)]
+
+  getDefaultProps: ->
+    path: ""
+    draft: false
+
+  getInitialState: ->
+    command: ""
+
+  render: ->
+    subnav = unless @props.path
+      <DashboardNavbar />
+    else
+      <EditorNavbar />
+
+    <Navbar brand={<a href="/admin">Blog Admin</a>} fixedTop>
+      {@commandResult()}
+      {subnav}
+      <CollapsibleNav>
+        <Nav navbar right>
+          <DropdownButton title='Site Commands'>
+            <NavItem onClick={runLater( 'diff', true )}>Diff</NavItem>
+            <NavItem onClick={runLater( 'status' )}>Git Status</NavItem>
+            <NavItem onClick={runLater( 'update' )}>Update</NavItem>
+            <NavItem onClick={runLater( 'build' ) }>Build</NavItem>
+            <NavItem onClick={runLater( 'deploy' )}>Deploy</NavItem>
+          </DropdownButton>
+          <NavItem href={"/" + @props.path}>Preview</NavItem>
+        </Nav>
+      </CollapsibleNav>
+    </Navbar>
+
+  closeResult: ->
+    @state.command = ""
+    @setState @state
+
+  commandResult: ->
+    return <span/> if @state.command == ""
+
+    <Modal title={@state.command} onRequestHide={@closeResult} bsSize='large' >
+      <div className='modal-body'>
+        <pre>{@state.result}</pre>
+      </div>
+      <div className='modal-footer'>
+        <Button onClick={@closeResult}>OK</Button>
+      </div>
+    </Modal>
+

data/source/javascripts/admin/components/app.js.coffee

@@ -0,0 +1,21 @@
+@App = React.createClass
+  mixins: [Reflux.connect(pathStore)]
+
+  getInitialState: ->
+    loading: false
+    dirty: false
+    path: null
+    metadata: {}
+    markdown: ""
+
+  render: ->
+    mainPanel = unless @state.path
+      <Dashboard/>
+    else
+      <Editor/>
+
+    <div>
+      <AdminNavbar path={@state.path}/>
+      {mainPanel}
+    </div>
+

data/source/javascripts/admin/components/autosize_textarea.js.coffee

@@ -0,0 +1,60 @@
+@AutosizeTextarea = React.createClass
+  getInitialState: ->
+    @shrink = 0
+    value: @props.value,
+    style: 
+      boxSizing: "border-box"
+      minHeight: "31px"
+      overflowX: "hidden"
+      height: 50
+      resize: 'none'
+
+  componentWillReceiveProps: (props) ->
+    @state.value = props.value
+    @state.trigger_resize = true
+    @setState @state
+
+  componentWillUpdate: () ->
+    @position = React.findDOMNode( @refs.myInput ).selectionStart || @position
+    # console.log "Position", @position
+
+  componentDidUpdate: ->
+    # console.log "Setting position", @position
+    React.findDOMNode( @refs.myInput ).setSelectionRange( @position, @position )
+    if @state.trigger_resize
+      @state.trigger_resize = false
+      requestAnimationFrame =>
+        @resize React.findDOMNode( @refs.myInput )
+
+  inputHandler: (e)->
+    @resize( e.target )
+    if( @props.onChange )
+      @position = e.target.selectionStart
+      @props.onChange( e.target.value )
+
+  resize: (target) ->
+    unless @diff
+      @compStyle = window.getComputedStyle(target);
+      @diff = parseFloat(@compStyle.getPropertyValue('border-bottom-width')) + parseFloat(@compStyle.getPropertyValue('border-top-width'));
+
+    line_diff = target.value.length - @state.value.length 
+    if line_diff < 0 # Removed content
+      @shrink = 1
+      setTimeout( @startShrinking, 0 )
+
+    new_height = target.scrollHeight + @diff - @shrink
+
+    if new_height >= @state.style.height
+      @shrink = 0
+
+    @state.value = target.value
+    @state.style.height = new_height
+    @setState @state
+
+  startShrinking: ->
+    # console.log "Shrinking"
+    @resize( React.findDOMNode( @refs.myInput ))
+    requestAnimationFrame( @startShrinking ) if @shrink != 0
+
+  render: ->
+    <textarea className="form-control" onChange={this.inputHandler} value={this.state.value} style={this.state.style} ref="myInput"/>

data/source/javascripts/admin/components/dashboard.js.coffee

@@ -0,0 +1,8 @@
+@Dashboard = React.createClass
+  render: ->
+    <div className="dashboard">
+      <div className="row">
+        <DashboardDraftList />
+        <DashboardPublishedList />
+      </div>
+    </div>

data/source/javascripts/admin/components/dashboard_draft_list.js.coffee

@@ -0,0 +1,19 @@
+@DashboardDraftList = React.createClass
+  mixins: [Reflux.connect(draftStore)],
+
+  getInitialState: ->
+    drafts: []
+
+  componentDidMount: -> updateDraftList()
+
+  render: ->
+    drafts = @state.drafts.map (item) ->
+      <li key={item.path}><a onClick={viewPath.bind(this, item.path)}>{item.title}</a></li>
+
+    <div className="maincontent">
+      <h1>Drafts</h1>
+      
+      <ul className="nav nav-pills nav-stacked">
+        {drafts}
+      </ul>
+    </div>

data/source/javascripts/admin/components/dashboard_navbar.js.coffee

@@ -0,0 +1,51 @@
+@DashboardNavbar = React.createClass
+  getInitialState: ->
+    newDraftModal: false
+    metadata: 
+      title: ""
+      subtitle: ""
+      tags: ""
+
+  toggleModal: ->
+    @state.newDraftModal = !@state.newDraftModal
+    @state.metadata =
+      title: ""
+      subtitle: ""
+      tags: ""
+    @setState @state
+
+  updateMeta: (metadata) ->
+    @state.metadata = metadata
+    @setState @state
+
+  onCreateNewDraft: ->
+    console.log "Running create new draft"
+    @state.newDraftModal = false
+    createNewDraft( @state.metadata )
+
+  render: ->
+    <Nav navbar>
+      {@newDraftModal()}
+      <NavItem href='#' onClick={@toggleModal}>New Draft</NavItem>
+    </Nav>
+
+  closeModal: ->
+    @state.newDraftModal = false
+    @setState @state
+
+  updateMeta: (metadata) ->
+    @state.metadata = metadata
+    @setState @state
+
+  newDraftModal: ->
+    return <span/> unless @state.newDraftModal
+
+    <Modal title='New Draft' onRequestHide={@toggleModal}>
+      <div className='modal-body'>
+        <MetadataEditor metadata={@state.metadata} onChange={@updateMeta}/>
+      </div>
+      <div className='modal-footer'>
+        <Button onClick={@closeModal}>Cancel</Button>
+        <Button bsStyle='primary' onClick={@onCreateNewDraft} disabled={@state.metadata.title.length < 5}>New Draft</Button>
+      </div>
+    </Modal>

data/source/javascripts/admin/components/dashboard_published_list.js.coffee

@@ -0,0 +1,19 @@
+@DashboardPublishedList = React.createClass
+  mixins: [Reflux.connect(publishedStore)],
+
+  getInitialState: ->
+    articles: []
+
+  componentDidMount: -> updatePublishedList()
+
+  render: ->
+    articles = @state.articles.map (item) ->
+      <li key={item.path}><a onClick={viewPath.bind(this, item.path)}>{item.title}</a></li>
+
+    <div className="sidebar">
+      <h1>Published</h1>
+      
+      <ul className="nav nav-pills nav-stacked">
+        {articles}
+      </ul>
+    </div>

data/source/javascripts/admin/components/editor.js.coffee

@@ -0,0 +1,24 @@
+@Editor = React.createClass
+  mixins: [Reflux.connect(pathStore)]
+
+  handleChange: (value) ->
+    updateMarkdown value
+    @restartTimer()
+
+  restartTimer: () ->
+    clearTimeout( @timer ) if( @timer )
+    @timer = setTimeout =>
+      saveCurrentArticle()
+    , 2000
+
+  render: ->
+    <div className="editor">
+      <div className="row">
+        <div className="editorPane">
+          <AutosizeTextarea value={@state.markdown} onChange={@handleChange}/>
+        </div>
+        <div className="previewPane">
+          <MarkdownPreview markdown={@state.markdown} />
+        </div>
+      </div>
+    </div>

data/source/javascripts/admin/components/editor_navbar.js.coffee

@@ -0,0 +1,63 @@
+@EditorNavbar = React.createClass
+  mixins: [Reflux.connect(pathStore)]
+
+  getInitialState: ->
+    metadata: {}
+    dirty: false
+    saving: false
+
+  toggleModal: ->
+    @state.newDraftModal = !@state.newDraftModal
+    console.log @state.newDraftModal
+    @setState @state
+
+  updateMeta: (metadata) ->
+    @state.metadata = metadata
+    @setState @state
+
+  updateMetadata: ->
+    console.log "Running update meta"
+    @state.newDraftModal = false
+    @setState @state
+    updateMetadata( @state.metadata )
+    saveCurrentArticle()
+
+  onPublish: ->
+    publishDraft( @state.path )
+
+  render: ->
+    metadata = for k,v of @state.metadata
+      <MenuItem onClick={@toggleModal} key={k}>
+        {k}: {v}
+      </MenuItem>
+
+    text = "Save"
+    text = "Saving..." if @state.saving
+
+    publish = <span/>
+
+    if @state.draft
+      publish = <NavItem href="#" onClick={@onPublish}>Publish Article</NavItem>
+
+    <Nav navbar>
+      {@newDraftModal()}
+      <NavItem href='#' onClick={saveCurrentArticle} disabled={!@state.dirty || @state.saving}>{text}</NavItem>
+      <DropdownButton title='Metadata'>
+        {metadata}
+      </DropdownButton>
+      {publish}
+      <NavItem disabled>{@state.path}</NavItem>
+    </Nav>
+
+  newDraftModal: ->
+    return <span/> unless @state.newDraftModal
+
+    <Modal title='Update' onRequestHide={@toggleModal}>
+      <div className='modal-body'>
+        <MetadataEditor metadata={@state.metadata} onChange={@updateMeta}/>
+      </div>
+      <div className='modal-footer'>
+        <Button onClick={@closeModal}>Cancel</Button>
+        <Button bsStyle='primary' onClick={@updateMetadata} disabled={@state.metadata.title.length < 5}>Update Data</Button>
+      </div>
+    </Modal>