Misc

packages/gatsby-theme-material-ui-blog/index.js

@@ -0,0 +1 @@
+export * from './src/components';

packages/gatsby-theme-material-ui-blog/src/components/index.js

@@ -0,0 +1 @@
+export { default as Post } from './post';

packages/gatsby-theme-material-ui-blog/src/components/layout.js

@@ -13,7 +13,7 @@ export default function Layout({ children }) {
   return (
     <>
       <ComponentProvider components={components}>
-        <SEO />
+        {/* <SEO /> */}
         <Container maxWidth="lg">{children}</Container>
       </ComponentProvider>
     </>

packages/gatsby-theme-material-ui-blog/src/components/post.js

@@ -1,13 +1,12 @@
 import React from 'react';
-import MDXRenderer from 'gatsby-mdx/mdx-renderer';
 
 import Layout from './layout';
 
-function PostPage({ data: { mdx } }) {
+function PostPage({ content, title }) {
   return (
     <Layout>
-      <h1>{mdx.frontmatter.title}</h1>
-      <MDXRenderer>{mdx.code.body}</MDXRenderer>
+      <h1>{title}</h1>
+      {content}
     </Layout>
   );
 }

packages/gatsby-theme-material-ui-blog/src/templates/post.js

@@ -1,8 +1,13 @@
+import React from 'react';
 import { graphql } from 'gatsby';
+import MDXRenderer from 'gatsby-mdx/mdx-renderer';
 
 import Post from '../components/post';
 
-export default Post;
+export default ({ data: { mdx } }) => {
+  const content = <MDXRenderer>{mdx.code.body}</MDXRenderer>;
+  return <Post title={mdx.frontmatter.title} content={content} />;
+};
 
 export const pageQuery = graphql`
   query($id: String!) {

www/gatsby-config.js

@@ -1,3 +1,5 @@
+const fsExpressAPI = require('netlify-cms-backend-fs/dist/fs');
+
 module.exports = {
   siteMetadata: {
     lang: `en`,
@@ -64,7 +66,11 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-netlify-cms',
       options: {
-        modulePath: `${__dirname}/src/cms/cms.js`
+        modulePath: `${__dirname}/src/cms/cms.js`,
+        enableIdentityWidget: false,
+        publicPath: 'admin',
+        htmlTitle: 'Content Manager',
+        manualInit: true
       }
     },
     `gatsby-plugin-netlify`,
@@ -81,5 +87,6 @@ module.exports = {
       }
     },
     `gatsby-plugin-offline`
-  ]
+  ],
+  developMiddleware: fsExpressAPI
 };

www/package.json

@@ -19,7 +19,9 @@
     "gatsby-theme-material-ui-docs": "^0.0.9",
     "gatsby-theme-material-ui-landing-page": "^0.0.14",
     "gatsby-theme-material-ui-layout": "^0.0.5",
-    "netlify-cms": "^2.9.1",
+    "netlify-cms-app": "^2.9.1",
+    "netlify-cms-backend-fs": "^0.4.4",
+    "netlify-cms-widget-mdx": "^0.4.0",
     "react": "latest",
     "react-dom": "latest",
     "react-helmet": "5.2.1"

www/src/cms/cms.js

@@ -1 +1,17 @@
-import CMS from 'netlify-cms';
+import CMS, { init } from 'netlify-cms-app';
+import FileSystemBackend from 'netlify-cms-backend-fs';
+import { MdxControl, MdxPreview } from 'netlify-cms-widget-mdx';
+
+import BlogPostPreview from './preview-templates/blog-post-preview';
+
+// If running in development
+if (process.env.NODE_ENV === 'development') {
+  window.CMS_ENV = 'development_overrides'; // Set the CMS_ENV to the development_ overrides.
+  CMS.registerBackend('file-system', FileSystemBackend); // Register the FileSystemBackend.
+}
+
+CMS.registerWidget('mdx', MdxControl, MdxPreview);
+CMS.registerPreviewTemplate('blog', BlogPostPreview);
+
+// Start NetlifyCMS
+init();

www/src/cms/preview-templates/blog-post-preview.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Post } from 'gatsby-theme-material-ui-blog';
+
+const BlogPostPreview = ({ entry, widgetFor }) => (
+  <Post content={widgetFor('body')} title={entry.getIn(['data', 'title'])} />
+);
+
+export default BlogPostPreview;

www/static/admin/config.yml

@@ -1,3 +1,26 @@
+
 backend:
   name: git-gateway
-  branch: master
+  branch: master
+
+development_overrides:
+  backend:
+    name: file-system
+    api_root: 'http://localhost:8000/api'
+
+media_folder: static/img
+public_folder: /img
+
+
+collections:
+  - label: "Blog"
+    name: "mdx"
+    folder: "content/posts"
+    extension: mdx
+    format: frontmatter
+    widget: mdx
+    create: true
+    fields:
+      - {label: "Title", name: "title", widget: "string"}
+      - {label: "Publish Date", name: "date", widget: "datetime"}
+      - {label: "Body", name: "body", widget: "mdx"}