netlify cms

content/posts/hello-world.mdx

@@ -1,31 +0,0 @@
----
-title: Hello World (example)
-date: 2019-04-15
----
-
-Hello, world! This is a demo post for `gatsby-theme-blog`.
-
-Delete me, and get writing!
-
-```js:title=gatsby-config.js
-module.exports = {
-  __experimentalThemes: [
-    "gatsby-theme-blog", // highlight-line
-    "gatsby-theme-notes"
-  ]
-};
-```
-
-This is another paragraph after the code block.
-
-## This is a secondary heading
-
-```jsx
-import React from "react";
-import { ThemeProvider } from "theme-ui";
-import theme from "./theme";
-
-export default props => (
-  <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
-);
-```

content/posts/my-second-post.mdx

@@ -1,10 +0,0 @@
----
-title: My Second Post! (example)
-date: 2019-05-15
----
-
-Wow! I love blogging so much already.
-
-Did you know that "despite its name, salted duck eggs can also be made from chicken eggs, though the taste and texture will be somewhat different, and the egg yolk will be less rich."? ([Wikipedia Link](http://en.wikipedia.org/wiki/Salted_duck_egg))
-
-Yeah, I didn't either.

gatsby-config.js

@@ -4,20 +4,30 @@ module.exports = {
       resolve: `gatsby-theme-blog`,
       options: {},
     },
+    {
+      resolve: `gatsby-plugin-netlify-cms`,
+      options: {
+        /**
+         * One convention is to place your Netlify CMS customization code in a
+         * `src/cms` directory.
+         */
+        modulePath: `${__dirname}/src/cms/cms.js`,
+      },
+    },
   ],
   // Customize your site metadata:
   siteMetadata: {
-    title: `My Blog Title`,
-    author: `My Name`,
-    description: `My site description...`,
+    title: `Crash Test Dev`,
+    author: `Ken Chau`,
+    description: `Why do I need a description. For a site. The site IS a description.`,
     social: [
       {
         name: `twitter`,
-        url: `https://twitter.com/gatsbyjs`,
+        url: `https://twitter.com/kenneth_chau`,
       },
       {
         name: `github`,
-        url: `https://github.com/gatsbyjs`,
+        url: `https://github.com/kenotron`,
       },
     ],
   },

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "gatsby-starter-blog-theme",
+  "name": "crashtestdev",
   "private": true,
   "version": "0.0.1",
   "scripts": {
@@ -10,6 +10,11 @@
   "dependencies": {
     "gatsby": "^2.13.65",
     "gatsby-theme-blog": "^1.0.2",
+    "gatsby-plugin-emotion": "^4.1.2",
+    "gatsby-plugin-netlify-cms": "^4.1.7",
+    "gatsby-plugin-mdx": "^1.0.24",
+    "netlify-cms-widget-mdx": "^0.4.1",
+    "netlify-cms-app": "^2.9.7",
     "react": "^16.9.0",
     "react-dom": "^16.9.0"
   }

src/cms/cms.js

@@ -0,0 +1,4 @@
+import CMS from "netlify-cms-app"
+import { MdxControl, MdxPreview } from "netlify-cms-widget-mdx"
+
+CMS.registerWidget("mdx", MdxControl, MdxPreview)

src/gatsby-theme-blog/components/bio-content.js

@@ -7,10 +7,6 @@ import { Styled } from "theme-ui"
 
 export default () => (
   <Fragment>
-    This is where <Styled.a href="http://example.com/">your name</Styled.a>
-    {` `}
-    goes.
-    <br />
-    Or whatever, you make the rules.
+    <Styled.a href="http://example.com/">Ken Chau</Styled.a>
   </Fragment>
 )

src/gatsby-theme-blog/gatsby-plugin-theme-ui/colors.js

@@ -7,19 +7,19 @@ import defaultThemeColors from "gatsby-theme-blog/src/gatsby-plugin-theme-ui/col
  * to go from default purple to a blue theme
  */
 
-// const darkBlue = `#007acc`
-// const lightBlue = `#66E0FF`
-// const blueGray = `#282c35`
+const darkBlue = `#007acc`
+const lightBlue = `#66E0FF`
+const blueGray = `#282c35`
 
 export default merge(defaultThemeColors, {
-  // text: blueGray,
-  // primary: darkBlue,
-  // heading: blueGray,
-  // modes: {
-  //   dark: {
-  //     background: blueGray,
-  //     primary: lightBlue,
-  //     highlight: lightBlue,
-  //   },
-  // },
+  text: blueGray,
+  primary: darkBlue,
+  heading: blueGray,
+  modes: {
+    dark: {
+      background: blueGray,
+      primary: lightBlue,
+      highlight: lightBlue,
+    },
+  },
 })

static/admin/config.yml

@@ -0,0 +1,16 @@
+backend:
+  name: github
+  repo: kenotron/crashtestdev
+media_folder: static/assets
+public_folder: assets
+collections:
+  - name: blog
+    label: Blog
+    folder: blog
+    create: true
+    fields:
+      - { name: path, label: Path }
+      - { name: date, label: Date, widget: date }
+      - { name: title, label: Title }
+      - { name: heroImage, label: Hero Image, widget: image }
+      - { name: body, label: Body, widget: mdx }