docs(website): update with new guide and fix some styling

Author: christianalfoni

packages/overmind-website/examples/guide/structuringtheapp/domains.ts

@@ -0,0 +1,44 @@
+import { tsAppIndex } from '../../templates'
+
+export default (ts, view) =>
+  ts
+    ? [
+        {
+          code: `
+app/
+  posts/
+    state.ts
+    actions.ts
+    effects.ts
+    reactions.ts
+    index.ts
+  admin/
+    state.ts
+    actions.ts
+    effects.ts
+    reactions.ts
+    index.ts
+  index.ts
+              `,
+        },
+      ]
+    : [
+        {
+          code: `
+app/
+  posts/
+    state.js
+    actions.js
+    effects.js
+    reactions.js
+    index.js
+  admin/
+    state.js
+    actions.js
+    effects.js
+    reactions.js
+    index.js
+  index.js
+            `,
+        },
+      ]

packages/overmind-website/examples/guide/structuringtheapp/files.ts

@@ -0,0 +1,28 @@
+import { tsAppIndex } from '../../templates'
+
+export default (ts, view) =>
+  ts
+    ? [
+        {
+          code: `
+app/
+  state.ts
+  actions.ts
+  effects.ts
+  reactions.ts
+  index.ts
+              `,
+        },
+      ]
+    : [
+        {
+          code: `
+app/
+  state.js
+  actions.js
+  effects.js
+  reactions.js
+  index.js
+            `,
+        },
+      ]

packages/overmind-website/examples/guide/structuringtheapp/namespaced.ts

@@ -0,0 +1,42 @@
+export default (ts, view) =>
+  ts
+    ? [
+        {
+          fileName: 'app/index.ts',
+          code: `
+import { Overmind, TApp } from 'overmind'
+import { namespaced } from 'overmind/config'
+import * as posts from './posts'
+import * as admin from './admin'
+
+const config = namespaced({
+  posts,
+  admin
+})
+
+declare module 'overmind' {
+  interface IApp extends TApp<typeof config> {}
+}
+
+const app = new Overmind(config)
+`,
+        },
+      ]
+    : [
+        {
+          fileName: 'app/index.js',
+          code: `
+import { Overmind } from 'overmind'
+import { namespaced } from 'overmind/config'
+import * as posts from './posts'
+import * as admin from './admin'
+
+const config = namespaced({
+  posts,
+  admin
+})
+
+const app = new Overmind(config)
+`,
+        },
+      ]

packages/overmind-website/guides/beginner/05_structuringtheapp.md

@@ -0,0 +1,37 @@
+# Structuring the app
+
+You will quickly see the need to give more structure to your application. The base structure of
+
+`{ state, actions, effects, reactions }`
+
+does not scale very well.
+
+The before mentioned base structure is called **the configuration** of your application and tools are provided to create more complex configurations. But before we look at those tools, lets talk about file structure.
+
+## Domains
+
+As your application grows you start to separate it into different domains. A domain might be closely related to a page in your application, or maybe it is strictly related to managing some piece of data. It does not matter. You define the domains of your application and they probably change over time as well. What matters in the context of Overmind though is that each of these domains will container their own state, actions, effects and reactions. So imagine a file structure of:
+
+```marksy
+h(Example, { name: "guide/structuringtheapp/files" })
+```
+
+In this structure we are splitting up the differet components of the base structure. This is a good first step. The **index** file acts as the file that brings the state, actions, effects and reactions together. In this example the file would also be responsible for instantiating the application itself.
+
+But if we want to split up into actual domains it would look more like this:
+
+```marksy
+h(Example, { name: "guide/structuringtheapp/domains" })
+```
+
+In this cause each domain **index** file bring its own state, actions, effects, and reactions together and the **app/index** file is responsible for bringing the configuration together. Let us look at how that can be accomplished.
+
+```marksy
+h(Example, { name: "guide/structuringtheapp/namespaced" })
+```
+
+We used the **namespaced** function to put the state, actions, effects and reactions from each domain behind a key. In this case the key is the same as the name of the domain itself. This is an effective way to split up your app. 
+
+```marksy
+h(Notice, null, "Even though you split up into different domains each domain has access to the state of the whole application. This is an important feature of Overmind which allows you to scale up and explore the domains of the application without having to worry about isolation")
+```

packages/overmind-website/src/components/GuideToc/elements.tsx

@@ -4,7 +4,7 @@ export const Wrapper = styled.div`
   position: fixed;
   top: 100px;
   left: calc(50vw + 400px);
-  color: ${({ theme }) => theme.color.fade(theme.color.black, 0.5)};
+  color: ${({ theme }) => theme.color.fade(theme.color.black, 0.2)};
 
   ul {
     list-style-type: none;

packages/overmind-website/src/components/TopBar/elements.tsx

@@ -16,14 +16,14 @@ export const Wrapper = styled.div`
 
 export const Link = styled<{ selected?: boolean }, 'a'>('a')`
   text-decoration: none;
-  color: ${({ selected, theme }) =>
-    selected ? theme.color.primary : theme.color.fade(theme.color.black, 0.5)};
+  color: ${({ theme }) => theme.color.black};
+  border-bottom: 2px solid
+    ${({ selected, theme }) => (selected ? theme.color.primary : 'transparent')};
   font-weight: ${({ selected }) => (selected ? 'bold' : 'normal')};
   margin: ${({ theme }) => theme.padding.small};
   cursor: pointer;
   text-transform: uppercase;
   :hover {
-    color: ${({ selected, theme }) =>
-      selected ? theme.color.primary : theme.color.black};
+    color: ${({ theme }) => theme.color.fade(theme.color.black, 0.2)};
   }
 `