docs(website): update docs to fit latest version

Author: christianalfoni

packages/overmind-website/api/app.md

@@ -4,4 +4,13 @@ The **App** class is used to create the application instance. The instance itsel
 
 ```marksy
 h(Example, { name: "api/app_initialize" })
+```
+
+You can pass a second argument to the **App** constructor. This is an options object with the following properties:
+
+## devtools
+By default the application connects to the devtools on **localhost:3031**, but you can change this in case you need to use an IP address ot the devtools has configured with a different port.
+
+```marksy
+h(Example, { name: "api/app_options_devtools" })
 ```

packages/overmind-website/api/modules.md

@@ -1,7 +1,8 @@
 # Modules
 
+When you have multiple application configurations, each with their own state, effects etc. you can give them a namespace by simply importing the **modules** factory. This allows you to extends a configuration with an additional property, called *modules*. The return configuration will have the modules composed into the state, effects, actions and reactions with the selected namespaces.
+
+
 ```marksy
 h(Example, { name: "api/modules" })
-```
-
-When you have multiple application configurations, each with their own state, effects etc. you can give them a namespace by simply importing the modules and attach them to the **modules** config property.
+```

packages/overmind-website/examples/api/app_initialize.ts

@@ -34,8 +34,6 @@ const app = new App({
   state,
   effects,
   actions
-}, {
-  devtools: 'localhost:1234'
 })
 
 export default app

…ples/guide/getstarted/devtoolsConnect.ts …ite/examples/api/app_options_devtools.tspackages/overmind-website/examples/guide/getstarted/devtoolsConnect.ts renamed to packages/overmind-website/examples/api/app_options_devtools.ts packages/overmind-website/examples/guide/getstarted/devtoolsConnect.ts renamed to packages/overmind-website/examples/api/app_options_devtools.ts

@@ -1,30 +1,32 @@
-export default (ts) =>
+import { tsAppIndex } from '../templates'
+
+export default (ts, view) =>
   ts
     ? [
         {
           fileName: 'app/index.ts',
           code: `
 ...
+
 const app = new App(config, {
-  devtools: 'localhost:1234'
+  devtools: 'localhost:3031'
 })
-...
-      `,
+
+export default app 
+        `,
         },
       ]
     : [
         {
           fileName: 'app/index.js',
           code: `
 ...
-const app = new App({
-  state,
-  actions,
-  effects
-}, {
-  devtools: 'localhost:1234'
+
+const app = new App(config, {
+  devtools: 'localhost:3031'
 })
-...
-      `,
+
+export default app
+`,
         },
       ]

packages/overmind-website/examples/api/modules.ts

@@ -4,26 +4,28 @@ export default (ts, view) =>
         {
           fileName: 'app.ts',
           code: `
-import App, { TConnect } from 'overmind-${view}'
+import App, { modules } from 'overmind'
+import createConnect, { TConnect } from 'overmind-${view}'
 import * as moduleA from './moduleA'
 import * as moduleB from './moduleB'
 
-const config = {
+const config = modules({
+  state: {
+    title: 'My app'
+  },
   modules: {
     moduleA,
     moduleB
   }
-}
+})
 
 declare module 'overmind' {
   interface IState extends TState<typeof config> {}
   interface IEffects extends TEffects<typeof config> {}
 }
 
 
-const app = new App(config, {
-  devtools: 'localhost:1234'
-})
+const app = new App(config)
 
 export type Connect = TConnect<typeof app>
 
@@ -35,19 +37,23 @@ export default app
         {
           fileName: 'app/index.js',
           code: `
-import App from 'overmind-${view}'
+import App, { modules } from 'overmind'
+import createConnect from 'overmind-${view}'
 import * as moduleA from './moduleA'
 import * as moduleB from './moduleB'
 
-const app = new App({
+const config = modules({
+  state: {
+    title: 'My app'
+  },
   modules: {
     moduleA,
     moduleB
   }
-}, {
-  devtools: 'localhost:1234'
 })
 
+const app = new App(config)
+
 export default app
 `,
         },

packages/overmind-website/guides/beginner/01_getstarted.md

@@ -80,11 +80,7 @@ h(Example, { name: "guide/getstarted/devtools" })
 
 The Overmind devtools is a pretty amazing experience. You get insight into all the state, changes to that state, actions run, side effects run and general stats. This visual overview becomes more and more valuable as well as complexity increases in your application. 
 
-To connect to the devtools simply add the option to your application:
-
-```marksy
-h(Example, { name: "guide/getstarted/devtoolsConnect" })
-```
+To connect to the devtools simply start the devtools application and refresh your app.
 
 ## Summary