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`,
+    title: `Crash Test Dev`,
-    author: `My Name`,
+    author: `Ken Chau`,
-    description: `My site description...`,
+    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>
+    <Styled.a href="http://example.com/">Ken Chau</Styled.a>
-    {` `}
-    goes.
-    <br />
-    Or whatever, you make the rules.
   </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 darkBlue = `#007acc`
-// const lightBlue = `#66E0FF`
+const lightBlue = `#66E0FF`
-// const blueGray = `#282c35`
+const blueGray = `#282c35`
 
 export default merge(defaultThemeColors, {
-  // text: blueGray,
+  text: blueGray,
-  // primary: darkBlue,
+  primary: darkBlue,
-  // heading: blueGray,
+  heading: blueGray,
-  // modes: {
+  modes: {
-  //   dark: {
+    dark: {
-  //     background: blueGray,
+      background: blueGray,
-  //     primary: lightBlue,
+      primary: lightBlue,
-  //     highlight: 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 }