リアルタイム(SocketIO)実装 / Markdown style改善

2025-12-13 09:46:22 +00:00 · 2015-09-08 15:28:36 +09:00
parent 51bd12c6cf
commit a3847ce1c9
24 changed files with 176 additions and 110 deletions
--- a/browser/main/Components/AddMemberModal.jsx
+++ b/browser/main/Components/AddMemberModal.jsx
@@ -7,8 +7,6 @@ var Hq = require('../Services/Hq')

 var KeyCaster = require('../Mixins/KeyCaster')

-var UserStore = require('../Stores/UserStore')
-
 var getOptions = function (input, callback) {
  Hq.searchUser(input)
    .then(function (res) {
@@ -58,7 +56,6 @@ module.exports = React.createClass({
        })
        .then(function (res) {
          console.log(res.body)
-          UserStore.Actions.addMember(res.body)
          this.props.close()
        }.bind(this))
        .catch(function (err) {
--- a/browser/main/Components/CodeDeleteModal.jsx
+++ b/browser/main/Components/CodeDeleteModal.jsx
@@ -25,7 +25,7 @@ module.exports = React.createClass({
  },
  submit: function () {
    var planet = this.props.planet
-    Hq.destroyCode(planet.userName, planet.name, this.props.code.localId)
+    Hq.destroyCode(planet.Owner.name, planet.name, this.props.code.localId)
      .then(function (res) {
        PlanetStore.Actions.destroyCode(res.body)
        this.props.close()
--- a/browser/main/Components/CodeForm.jsx
+++ b/browser/main/Components/CodeForm.jsx
@@ -88,18 +88,18 @@ module.exports = React.createClass({
      return tag.value
    })
    if (this.props.code == null) {
-      Hq.createCode(planet.userName, planet.name, this.state.code)
+      Hq.createCode(planet.Owner.name, planet.name, this.state.code)
        .then(function (res) {
          var code = res.body
          PlanetStore.Actions.updateCode(code)
          this.props.close()
-          this.props.transitionTo('codes', {userName: planet.userName, planetName: planet.name, localId: code.localId})
+          this.props.transitionTo('codes', {userName: planet.Owner.name, planetName: planet.name, localId: code.localId})
        }.bind(this))
        .catch(function (err) {
          console.error(err)
        })
    } else {
-      Hq.updateCode(planet.userName, planet.name, this.props.code.localId, this.state.code)
+      Hq.updateCode(planet.Owner.name, planet.name, this.props.code.localId, this.state.code)
        .then(function (res) {
          var code = res.body
          PlanetStore.Actions.updateCode(code)
--- a/browser/main/Components/HomeNavigator.jsx
+++ b/browser/main/Components/HomeNavigator.jsx
@@ -94,15 +94,18 @@ module.exports = React.createClass({
    var params = this.getParams()

    if (this.state.currentUser == null) {
-      return (
-        <div className='HomeNavigator'>
-        </div>
-      )
+      return null
    }

-    var planets = (this.state.currentUser.Planets.concat(this.state.currentUser.Teams.reduce(function (planets, team) {
-      return team.Planets == null ? planets : planets.concat(team.Planets)
-    }, []))).map(function (planet, index) {
+    var planets = this.state.currentUser.Planets.map(function (planet) {
+      planet.userName = this.state.currentUser.name
+      return planet
+    }.bind(this)).concat(this.state.currentUser.Teams.reduce(function (_planets, team) {
+      return _planets.concat(team.Planets == null ? [] : team.Planets.map(function (planet) {
+        planet.userName = team.name
+        return planet
+      }))
+    }, [])).map(function (planet, index) {
      return (
        <li userName={planet.userName} planetName={planet.name} key={planet.id} className={params.userName === planet.userName && params.planetName === planet.name ? 'active' : ''}>
          <Link to='planet' params={{userName: planet.userName, planetName: planet.name}}>
--- a/browser/main/Components/LogoutModal.jsx
+++ b/browser/main/Components/LogoutModal.jsx
@@ -2,6 +2,8 @@

 var React = require('react')

+var socket = require('../Services/socket')
+
 var KeyCaster = require('../Mixins/KeyCaster')

 module.exports = React.createClass({
@@ -23,6 +25,8 @@ module.exports = React.createClass({
  logout: function () {
    localStorage.removeItem('currentUser')
    localStorage.removeItem('token')
+    socket.reconnect()
+
    this.props.transitionTo('login')
    this.props.close()
  },
--- a/browser/main/Components/NoteDeleteModal.jsx
+++ b/browser/main/Components/NoteDeleteModal.jsx
@@ -25,7 +25,7 @@ module.exports = React.createClass({
  },
  submit: function () {
    var planet = this.props.planet
-    Hq.destroyNote(planet.userName, planet.name, this.props.note.localId)
+    Hq.destroyNote(planet.Owner.name, planet.name, this.props.note.localId)
      .then(function (res) {
        PlanetStore.Actions.destroyNote(res.body)
        this.props.close()
--- a/browser/main/Components/NoteForm.jsx
+++ b/browser/main/Components/NoteForm.jsx
@@ -89,18 +89,18 @@ module.exports = React.createClass({
    })

    if (this.props.note == null) {
-      Hq.createNote(planet.userName, planet.name, this.state.note)
+      Hq.createNote(planet.Owner.name, planet.name, this.state.note)
        .then(function (res) {
          var note = res.body
          PlanetStore.Actions.updateNote(note)
          this.props.close()
-          this.props.transitionTo('notes', {userName: planet.userName, planetName: planet.name, localId: note.localId})
+          this.props.transitionTo('notes', {userName: planet.Owner.name, planetName: planet.name, localId: note.localId})
        }.bind(this))
        .catch(function (err) {
          console.error(err)
        })
    } else {
-      Hq.updateNote(planet.userName, planet.name, this.props.note.localId, this.state.note)
+      Hq.updateNote(planet.Owner.name, planet.name, this.props.note.localId, this.state.note)
        .then(function (res) {
          var note = res.body
          PlanetStore.Actions.updateNote(note)
--- a/browser/main/Components/PlanetArticleList.jsx
+++ b/browser/main/Components/PlanetArticleList.jsx
@@ -18,7 +18,6 @@ module.exports = React.createClass({
      return function (e) {
        var params = this.getParams()

-        document.getElementById('articleEditButton').focus()
        this.transitionTo('codes', {
          userName: params.userName,
          planetName: params.planetName,
@@ -31,7 +30,6 @@ module.exports = React.createClass({
      return function (e) {
        var params = this.getParams()

-        document.getElementById('articleEditButton').focus()
        this.transitionTo('notes', {
          userName: params.userName,
          planetName: params.planetName,
--- a/browser/main/Components/PlanetCreateModal.jsx
+++ b/browser/main/Components/PlanetCreateModal.jsx
@@ -51,7 +51,7 @@ module.exports = React.createClass({
          PlanetStore.Actions.update(planet)

          if (this.props.transitionTo != null) {
-            this.props.transitionTo('planetHome', {userName: planet.userName, planetName: planet.name})
+            this.props.transitionTo('planetHome', {userName: planet.Owner.name, planetName: planet.name})
          }

          this.props.close()
--- a/browser/main/Components/PlanetHeader.jsx
+++ b/browser/main/Components/PlanetHeader.jsx
@@ -46,7 +46,7 @@ module.exports = React.createClass({
  },
  render: function () {
    var currentPlanetName = this.props.currentPlanet.name
-    var currentUserName = this.props.currentPlanet.userName
+    var currentUserName = this.props.currentPlanet.Owner.name

    return (
      <div className='PlanetHeader'>
--- a/browser/main/Components/PlanetSettingModal.jsx
+++ b/browser/main/Components/PlanetSettingModal.jsx
@@ -14,7 +14,9 @@ module.exports = React.createClass({
    planet: React.PropTypes.shape({
      name: React.PropTypes.string,
      public: React.PropTypes.bool,
-      userName: React.PropTypes.string
+      Owner: React.PropTypes.shape({
+        name: React.PropTypes.string
+      })
    })
  },
  getInitialState: function () {
@@ -59,7 +61,7 @@ module.exports = React.createClass({
    var planet = this.props.planet

    this.setState({profileFormStatus: 'sending', profileFormError: null}, function () {
-      Hq.updatePlanet(planet.userName, planet.name, this.state.planet)
+      Hq.updatePlanet(planet.Owner.name, planet.name, this.state.planet)
        .then(function (res) {
          var planet = res.body
          console.log(planet)
@@ -103,7 +105,7 @@ module.exports = React.createClass({
    var planet = this.props.planet

    this.setState({deleteSubmitStatus: 'sending'}, function () {
-      Hq.destroyPlanet(planet.userName, planet.name)
+      Hq.destroyPlanet(planet.Owner.name, planet.name)
        .then(function (res) {
          var planet = res.body

@@ -166,12 +168,12 @@ module.exports = React.createClass({
    )
  },
  renderPlanetDeleteTab: function () {
-    var disabled = !this.state.deleteConfirmation.match(new RegExp('^' + this.props.planet.userName + '/' + this.props.planet.name + '$'))
+    var disabled = !this.state.deleteConfirmation.match(new RegExp('^' + this.props.planet.Owner.name + '/' + this.props.planet.name + '$'))

    return (
      <div className='planetDeleteTab tab'>
-        <p>Are you sure to destroy <strong>'{this.props.planet.userName + '/' + this.props.planet.name}'</strong>?</p>
-        <p>If you are sure, write <strong>'{this.props.planet.userName + '/' + this.props.planet.name}'</strong> to input below and click <strong>'{this.state.randomDeleteText}'</strong> button.</p>
+        <p>Are you sure to destroy <strong>'{this.props.planet.Owner.name + '/' + this.props.planet.name}'</strong>?</p>
+        <p>If you are sure, write <strong>'{this.props.planet.Owner.name + '/' + this.props.planet.name}'</strong> to input below and click <strong>'{this.state.randomDeleteText}'</strong> button.</p>
        <input valueLink={this.linkState('deleteConfirmation')} placeholder='userName/planetName'/>
        <div className='formConfirm'>
          <button disabled={disabled} onClick={this.handleDeletePlanetClick}>{this.state.randomDeleteText}</button>
--- a/browser/main/Components/TeamCreateModal.jsx
+++ b/browser/main/Components/TeamCreateModal.jsx
@@ -3,6 +3,7 @@
 var React = require('react/addons')

 var Hq = require('../Services/Hq')
+var socket = require('../Services/socket')

 var LinkedState = require('../Mixins/LinkedState')
 var KeyCaster = require('../Mixins/KeyCaster')
@@ -48,6 +49,7 @@ module.exports = React.createClass({

          currentUser.Teams.push(team)
          localStorage.setItem('currentUser', JSON.stringify(currentUser))
+          socket.reconnect(currentUser)
          UserStore.Actions.update(currentUser)

          if (this.props.transitionTo != null) {
--- a/browser/main/Components/TeamSettingsModal.jsx
+++ b/browser/main/Components/TeamSettingsModal.jsx
@@ -43,12 +43,9 @@ module.exports = React.createClass({
    close: React.PropTypes.func
  },
  getInitialState: function () {
-    var team = this.props.team
    return {
      currentTab: 'teamInfo',
-      team: {
-        profileName: team.profileName
-      },
+      team: this.props.team,
      userSubmitStatus: null,
      member: {
        name: '',
@@ -65,17 +62,10 @@ module.exports = React.createClass({
    }
  },
  onUserChange: function (res) {
-    var member
    switch (res.status) {
-      case 'memberAdded':
-        member = res.data
-        if (member.TeamMember.TeamId === this.props.team.id) {
-          this.forceUpdate()
-        }
-        break
-      case 'memberRemoved':
-        member = res.data
-        if (member.TeamMember.TeamId === this.props.team.id) {
+      case 'userUpdated':
+        var user = res.data
+        if (user.id === this.props.team.id) {
          this.forceUpdate()
        }
        break
@@ -116,8 +106,7 @@ module.exports = React.createClass({
          role: this.state.member.role
        })
        .then(function (res) {
-          UserStore.Actions.addMember(res.body)
-          this.setState({updatingMember: false})
+          this.setState({updatingMember: false, team: res.body})
        }.bind(this))
        .catch(function (err) {
          console.error(err)
@@ -135,8 +124,7 @@ module.exports = React.createClass({
            role: role
          })
          .then(function (res) {
-            UserStore.Actions.addMember(res.body)
-            this.setState({updatingMember: false})
+            this.setState({updatingMember: false, team: res.body})
          }.bind(this))
          .catch(function (err) {
            console.error(err)
@@ -153,8 +141,7 @@ module.exports = React.createClass({
            userName: memberName
          })
          .then(function (res) {
-            UserStore.Actions.removeMember(res.body)
-            this.setState({updatingMember: false})
+            this.setState({updatingMember: false, team: res.body})
          }.bind(this))
          .catch(function (err) {
            console.error(err)
@@ -212,7 +199,7 @@ module.exports = React.createClass({
  renderMembersTab: function () {
    var currentUser = JSON.parse(localStorage.getItem('currentUser'))

-    var members = this.props.team.Members.map(function (member) {
+    var members = this.state.team.Members.map(function (member) {
      var isCurrentUser = currentUser.id === member.id
      return (
        <tr>
--- a/browser/main/Containers/LoginContainer.jsx
+++ b/browser/main/Containers/LoginContainer.jsx
@@ -6,6 +6,7 @@ var Link = ReactRouter.Link
 var AuthFilter = require('../Mixins/AuthFilter')
 var LinkedState = require('../Mixins/LinkedState')
 var Hq = require('../Services/Hq')
+var socket = require('../Services/socket')

 module.exports = React.createClass({
  mixins: [LinkedState, ReactRouter.Navigation, AuthFilter.OnlyGuest],
@@ -47,6 +48,7 @@ module.exports = React.createClass({
        .then(function (res) {
          localStorage.setItem('token', res.body.token)
          localStorage.setItem('currentUser', JSON.stringify(res.body.user))
+          socket.reconnect()

          this.transitionTo('userHome', {userName: res.body.user.name})
        }.bind(this))
--- a/browser/main/Containers/MainContainer.jsx
+++ b/browser/main/Containers/MainContainer.jsx
@@ -9,6 +9,7 @@ var Navigation = ReactRouter.Navigation
 var State = ReactRouter.State

 var Hq = require('../Services/Hq')
+var socket = require('../Services/socket')

 var Modal = require('../Mixins/Modal')

@@ -17,7 +18,7 @@ var UserStore = require('../Stores/UserStore')
 var ContactModal = require('../Components/ContactModal')

 function fetchPlanet (userName, planetName) {
-  Hq.fetchPlanet(userName, planetName)
+  return Hq.fetchPlanet(userName, planetName)
    .then(function (res) {
      var planet = res.body

@@ -29,8 +30,9 @@ function fetchPlanet (userName, planetName) {
        note.type = 'note'
      })

-      console.log('planet-' + planet.id + ' fetched!')
      localStorage.setItem('planet-' + planet.id, JSON.stringify(planet))
+
+      return planet
    })
    .catch(function (err) {
      console.error(err)
@@ -61,15 +63,14 @@ module.exports = React.createClass({
    Hq.getUser()
      .then(function (res) {
        var user = res.body
-        localStorage.setItem('currentUser', JSON.stringify(user))
        UserStore.Actions.update(user)

        user.Planets.forEach(function (planet) {
-          fetchPlanet(planet.userName, planet.name)
+          fetchPlanet(user.name, planet.name)
        })
        user.Teams.forEach(function (team) {
          team.Planets.forEach(function (planet) {
-            fetchPlanet(planet.userName, planet.name)
+            fetchPlanet(team.name, planet.name)
          })
        })
      })
--- a/browser/main/Containers/PlanetContainer.jsx
+++ b/browser/main/Containers/PlanetContainer.jsx
@@ -41,10 +41,10 @@ module.exports = React.createClass({
      var planet = this.state.planet
      switch (article.type) {
        case 'code':
-          this.transitionTo('codes', {userName: planet.userName, planetName: planet.name, localId: article.localId})
+          this.transitionTo('codes', {userName: planet.Owner.name, planetName: planet.name, localId: article.localId})
          break
        case 'note':
-          this.transitionTo('notes', {userName: planet.userName, planetName: planet.name, localId: article.localId})
+          this.transitionTo('notes', {userName: planet.Owner.name, planetName: planet.name, localId: article.localId})
          break
      }
    }
@@ -55,7 +55,7 @@ module.exports = React.createClass({
      return
    }

-    if (nextProps.params.userName !== this.state.planet.userName || nextProps.params.planetName !== this.state.planet.name) {
+    if (nextProps.params.userName !== this.state.planet.Owner.name || nextProps.params.planetName !== this.state.planet.name) {
      this.setState({
        planet: null
      }, function () {
@@ -96,14 +96,14 @@ module.exports = React.createClass({
          if (this.state.planet.name === planet.name) {
            this.setState({planet: planet})
          } else {
-            this.transitionTo('planetHome', {userName: planet.userName, planetName: planet.name})
+            this.transitionTo('planetHome', {userName: planet.Owner.name, planetName: planet.name})
          }
        }
        break
      case 'destroyed':
        planet = res.data
        if (this.state.planet.id === planet.id) {
-          this.transitionTo('userHome', {userName: this.state.planet.userName})
+          this.transitionTo('userHome', {userName: this.state.planet.Owner.name})
        }
        break
      case 'codeUpdated':
--- a/browser/main/Containers/SignupContainer.jsx
+++ b/browser/main/Containers/SignupContainer.jsx
@@ -8,6 +8,7 @@ var AuthFilter = require('../Mixins/AuthFilter')
 var LinkedState = require('../Mixins/LinkedState')
 var ExternalLink = require('../Mixins/ExternalLink')
 var Hq = require('../Services/Hq')
+var socket = require('../Services/socket')

 module.exports = React.createClass({
  mixins: [LinkedState, ReactRouter.Navigation, AuthFilter.OnlyGuest, ExternalLink],
@@ -33,6 +34,7 @@ module.exports = React.createClass({
        .then(function (res) {
          localStorage.setItem('token', res.body.token)
          localStorage.setItem('currentUser', JSON.stringify(res.body.user))
+          socket.reconnect()

          this.transitionTo('userHome', {userName: res.body.user.name})
        }.bind(this))
--- a/browser/main/Containers/UserContainer.jsx
+++ b/browser/main/Containers/UserContainer.jsx
@@ -230,7 +230,7 @@ module.exports = React.createClass({
    var userPlanets = user.Planets.map(function (planet) {
      return (
        <li key={'planet-' + planet.id}>
-          <Link to='planet' params={{userName: planet.userName, planetName: planet.name}}>{planet.userName}/{planet.name}</Link>
+          <Link to='planet' params={{userName: user.name, planetName: planet.name}}>{user.name}/{planet.name}</Link>
          &nbsp;{!planet.public ? (<i className='fa fa-lock'/>) : null}
        </li>
      )
@@ -288,7 +288,7 @@ module.exports = React.createClass({
    var userPlanets = user.Planets.map(function (planet) {
      return (
        <li key={'planet-' + planet.id}>
-          <Link to='planet' params={{userName: planet.userName, planetName: planet.name}}>{planet.userName}/{planet.name}</Link>
+          <Link to='planet' params={{userName: user.name, planetName: planet.name}}>{user.name}/{planet.name}</Link>
          &nbsp;{!planet.public ? (<i className='fa fa-lock'/>) : null}
        </li>
      )
@@ -311,7 +311,7 @@ module.exports = React.createClass({
      var planets = (team.Planets == null ? [] : team.Planets).map(function (planet) {
        return (
          <li key={'planet-' + planet.id}>
-            <Link to='planet' params={{userName: planet.userName, planetName: planet.name}}>{planet.userName}/{planet.name}</Link>
+            <Link to='planet' params={{userName: team.name, planetName: planet.name}}>{team.name}/{planet.name}</Link>
            &nbsp;{!planet.public ? (<i className='fa fa-lock'/>) : null}
          </li>
        )
--- a/browser/main/Services/socket.js
+++ b/browser/main/Services/socket.js
@@ -0,0 +1,64 @@
+/* global localStorage */
+
+var config = require('../../../config')
+var UserStore = require('../Stores/UserStore')
+var PlanetStore = require('../Stores/PlanetStore')
+
+var io = require('socket.io-client')(config.apiUrl)
+
+io.on('connected', function (data) {
+  console.log('connected by WS')
+  reconnect()
+})
+
+io.on('userUpdated', function (data) {
+  console.log('userUpdated')
+  UserStore.Actions.update(data)
+})
+
+// Planet
+io.on('planetUpdated', function (data) {
+  console.log('planetUpdated')
+  PlanetStore.Actions.update(data)
+})
+
+io.on('planetDestroyed', function (data) {
+  console.log('planetDestroyed')
+  PlanetStore.Actions.destroy(data)
+})
+
+// Article
+io.on('codeUpdated', function (data) {
+  console.log('codeUpdated')
+  PlanetStore.Actions.updateCode(data)
+})
+io.on('codeDestroyed', function (data) {
+  console.log('codeDestroyed')
+  PlanetStore.Actions.destroyCode(data)
+})
+io.on('noteUpdated', function (data) {
+  console.log('noteUpdated')
+  PlanetStore.Actions.updateNote(data)
+})
+io.on('noteDestroyed', function (data) {
+  console.log('noteDestroyed')
+  PlanetStore.Actions.destroyNote(data)
+})
+
+var reconnect = function (currentUser) {
+  if (currentUser == null) currentUser = JSON.parse(localStorage.getItem('currentUser'))
+  if (currentUser != null) {
+    var rooms = ['user:' + currentUser.id].concat(currentUser.Teams.map(function (team) {
+      return 'user:' + team.id
+    }))
+
+    io.emit('room:sync', {rooms: rooms})
+  } else {
+    io.emit('room:sync', {rooms: []})
+  }
+}
+
+module.exports = {
+  io: io,
+  reconnect: reconnect
+}
--- a/browser/main/Stores/PlanetStore.js
+++ b/browser/main/Stores/PlanetStore.js
@@ -19,39 +19,51 @@ module.exports = Reflux.createStore({
  mixins: [Helper],
  listenables: [actions],
  Actions: actions,
+  /*
+    Planet must be updated like below
+    Planet
+      Codes
+        Tags
+        User
+      Notes
+        Tags
+        User
+      Owner
+  */
  onUpdate: function (planet) {
    // Copy the planet object
    var aPlanet = Object.assign({}, planet)
    delete aPlanet.Codes
    delete aPlanet.Notes
+    delete aPlanet.Owner

    // Check if the planet should be updated to currentUser
    var currentUser = JSON.parse(localStorage.getItem('currentUser'))

-    var ownedByCurrentUser = currentUser.id === aPlanet.OwnerId
+    var currentUserMustBeUpdated = false

+    var ownedByCurrentUser = currentUser.id === aPlanet.OwnerId
    if (ownedByCurrentUser) {
      currentUser.Planets = this.updateItemToTargetArray(aPlanet, currentUser.Planets)
-    }
-
-    if (!ownedByCurrentUser) {
+      currentUserMustBeUpdated = true
+    } else {
      var team = null
-      currentUser.Teams.some(function (_team) {
+      if (currentUser.Teams.some(function (_team) {
        if (_team.id === aPlanet.OwnerId) {
          team = _team
          return true
        }
-        return
-      })
-
-      if (team) {
+        return false
+      })) {
        team.Planets = this.updateItemToTargetArray(aPlanet, team.Planets)
+        currentUserMustBeUpdated = true
      }
    }

    // Update currentUser
-    localStorage.setItem('currentUser', JSON.stringify(currentUser))
+    if (currentUserMustBeUpdated) {
      UserStore.Actions.update(currentUser)
+    }

    planet.Codes.forEach(function (code) {
      code.type = 'code'
--- a/browser/main/Stores/UserStore.js
+++ b/browser/main/Stores/UserStore.js
@@ -4,18 +4,19 @@ var Reflux = require('reflux')

 var actions = Reflux.createActions([
  'update',
-  'destroy',
-  'addMember',
-  'removeMember'
+  'destroy'
 ])

 module.exports = Reflux.createStore({
  listenables: [actions],
  onUpdate: function (user) {
-    var currentUser = JSON.parse(localStorage.getItem('currentUser'))
+    if (this.socket == null) this.socket = require('../Services/socket')

+    var currentUser = JSON.parse(localStorage.getItem('currentUser'))
    if (currentUser.id === user.id) {
      localStorage.setItem('currentUser', JSON.stringify(user))
+
+      this.socket.reconnect(user)
    }

    if (user.userType === 'team') {
@@ -53,17 +54,5 @@ module.exports = Reflux.createStore({
      data: user
    })
  },
-  onAddMember: function (member) {
-    this.trigger({
-      status: 'memberAdded',
-      data: member
-    })
-  },
-  onRemoveMember: function (member) {
-    this.trigger({
-      status: 'memberRemoved',
-      data: member
-    })
-  },
  Actions: actions
 })
--- a/browser/styles/mixins/marked.styl
+++ b/browser/styles/mixins/marked.styl
@@ -6,7 +6,7 @@ marked()
  h1
    font-size 2em
    border-bottom solid 2px borderColor
-    margin 0.67 auto
+    margin 0.67em auto
  h2
    font-size 1.5em
    margin 0.83em auto
@@ -27,7 +27,7 @@ marked()
    line-height 1.8em
  p
    line-height 1.8em
-    margin-bottom 15px
+    margin-bottom 25px
  img
    max-width 100%
  strong
@@ -43,6 +43,7 @@ marked()
  ul
    list-style-type disc
    padding-left 35px
+    margin-bottom 25px
    li
      display list-item
      margin 15px 0
@@ -53,6 +54,7 @@ marked()
  ol
    list-style-type decimal
    padding-left 35px
+    margin-bottom 25px
    li
      display list-item
      margin 15px 0
@@ -70,7 +72,7 @@ marked()
    border solid 1px borderColor
    border-radius 5px
    overflow-x auto
-    margin-bottom 15px
+    margin-bottom 25px
    background-color #F6F6F6
    &>code
      padding 0
--- a/config.js
+++ b/config.js
@@ -1,4 +1,5 @@
 module.exports = {
-  apiUrl: 'https://api.b00st.io/'
+  // apiUrl: 'https://api.b00st.io/'
+  apiUrl: 'https://api2.b00st.io/'
  // apiUrl: 'http://localhost:8000/'
 }
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "boost",
-  "version": "0.2.10",
+  "version": "0.3.0",
  "description": "Boost App",
  "main": "main.js",
  "scripts": {