Add demo

Author: damassi

Diff for: README.md

@@ -26,14 +26,9 @@ yarn type-check
 yarn build
 ```
 
-### Example
+### Demo
 
-<img width="949" alt="screen shot 2019-01-26 at 12 16 13 pm" src="https://user-images.githubusercontent.com/236943/51792329-4b94cd00-2164-11e9-8228-7ed8b4a37afa.png">
-
-<br />
-<br />
-
-<img width="949" alt="screen shot 2019-01-26 at 12 16 02 pm" src="https://user-images.githubusercontent.com/236943/51792330-50598100-2164-11e9-9f3a-0f7189ffe5a5.png">
+![demo](https://user-images.githubusercontent.com/236943/51792565-abd93e00-2167-11e9-8bcb-87f7dccece52.gif)
 
 <details>
   <summary>Gatsby API Details</summary>

Diff for: content/mdx/another-entry.mdx

@@ -0,0 +1,6 @@
+---
+title: Another entry
+---
+<Button bg="blue">Hello page 2</Button>
+
+### And it works :) 

Diff for: content/mdx/hello.mdx

@@ -3,6 +3,6 @@ title: 'Edit mdx in NetlifyCMS! '
 ---
 ### This
 
-<h1>is some jsx 2</h1>
+<h1>is some jsx</h1>
 
-<Button bg='green'>Hi Button</Button>
+<Button bg='orange'>Hello Button</Button>

Diff for: src/Theme.jsx

@@ -4,31 +4,42 @@
  * Since this file is shared with NetlifyCMS it must be .jsx
  */
 
-import React from "react"
-import styled, { ThemeProvider } from "styled-components"
+import React, { Fragment } from "react"
+import styled, { ThemeProvider, createGlobalStyle } from "styled-components"
 import { Button } from "rebass"
 
 export const theme = {
   // TODO: https://rebassjs.org/theming
 }
 
-const H1 = styled.h1`
-  font-size: 20px;
-`
+const GlobalStyle = createGlobalStyle`
+  html, body {
+    font-family: Arial, Helvetica, sans-serif;
+  }
 
-const P = styled.div`
-  font-size: 16px;
+  h3 {
+    font-family: Arial, Helvetica, sans-serif
+  }
 `
 
 export const LayoutComponents = {
-  h1: H1,
-  p: P,
+  h1: styled.h1`
+    font-size: 20px;
+  `,
+  p: styled.p`
+    font-size: 16px;
+  `,
 }
 
 export const UIComponents = {
   Button: props => <Button {...props}>{props.children}</Button>,
 }
 
 export const Theme = ({ children }) => (
-  <ThemeProvider theme={theme}>{children}</ThemeProvider>
+  <ThemeProvider theme={theme}>
+    <Fragment>
+      <GlobalStyle />
+      {children}
+    </Fragment>
+  </ThemeProvider>
 )

Diff for: src/cms/cms.jsx

@@ -54,7 +54,9 @@ const PreviewWindow = props => {
 
   return (
     <StyleSheetManager target={iframeHeadElem}>
-      <MdxPreview mdx={mdxProps} {...props} />
+      <Theme>
+        <MdxPreview mdx={mdxProps} {...props} />
+      </Theme>
     </StyleSheetManager>
   )
 }

Diff for: static/admin/config.yml

@@ -10,7 +10,7 @@ backend:
   repo: damassi/gatsby-typescript-netlify-starter
   branch: master
 
-display_url: Gatsby Starter
+display_url: http://localhost:8000
 media_folder: static/assets
 public_folder: assets