feat(website): add typescript specific notices

Author: christianalfoni

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

@@ -24,7 +24,11 @@ But if we want to split up into actual domains it would look more like this:
 h(Example, { name: "guide/structuringtheapp/domains" })
 ```
 
-In this case each domain **index** file bring its own state, actions and effects together and the **app/index** file is responsible for bringing the configuration together.
+In this case each domain **index** file bring its own state, actions and effects together and the **overmind/index** file is responsible for bringing the configuration together.
+
+```marksy
+h(TypescriptNotice, null, "Note that you do not define a **Config**, **Action** etc. type for each domain of your application. Only the main file that instantiates Overmind has this typing. This allows all the domains of the application to know about each other.")
+```
 
 ## The state file
 

packages/overmind-website/src/utils.tsx

@@ -2,6 +2,7 @@ import { createElement, useState, useEffect } from 'react'
 import { useOvermind } from './overmind'
 import marksy from 'marksy'
 import * as Prism from '../src/prismjs.js'
+import * as tsLogo from './images/ts.png'
 import { css } from 'emotion'
 
 export const viewport = {
@@ -50,6 +51,7 @@ const githubLink = css`
 `
 
 const notice = css`
+  position: relative;
   background-color: var(--color-white-2);
   border: 1px solid var(--color-primary);
   border-left: 6px solid var(--color-primary);
@@ -58,6 +60,18 @@ const notice = css`
   font-size: var(--font-size-3);
 `
 
+const typescriptNotice = css`
+  border: 1px solid #007acc;
+  border-left: 6px solid #007acc;
+`
+
+const tsLogoStyle = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-bottom-right-radius: var(--border-radius-1);
+`
+
 const contentWrapper = css`
   position: relative;
   @media (max-width: 700px) {
@@ -152,6 +166,19 @@ export const compile = marksy({
     Notice: ({ children }) => {
       return <div className={notice}>{compile(String(children)).tree}</div>
     },
+    TypescriptNotice: ({ children }) => {
+      const { state } = useOvermind()
+      if (!state.typescript) {
+        return null
+      }
+
+      return (
+        <div className={css(notice, typescriptNotice)}>
+          {compile(String(children)).tree}
+          <img className={tsLogoStyle} src={tsLogo} width="20" />
+        </div>
+      )
+    },
   },
   elements: {
     a({ href, children }) {