migrate to cms plugin, revert jsx extensions

cms/package.json

@@ -1,14 +0,0 @@
-{
-  "scripts": {
-    "build": "webpack --config webpack.config.js"
-  },
-  "dependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "netlify-cms": "^1.0.1",
-    "react": "^16.2.0",
-    "webpack": "^3.10.0"
-  }
-}

cms/webpack.config.js

@@ -1,30 +0,0 @@
-// This webpack config is used to compile the JS for the CMS
-const path = require('path');
-
-module.exports = {
-  entry: './cms.js',
-  output: {
-    filename: 'cms.bundle.js',
-    path: path.resolve(__dirname, '../static/admin/'),
-  },
-  module: {
-    rules: [
-      {
-        test: /\.jsx?$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['babel-preset-env', 'babel-preset-react'],
-          },
-        },
-      },
-    ],
-  },
-  resolve: {
-    extensions: [
-      '.js',
-      '.jsx',
-    ],
-  },
-};

gatsby-config.js

@@ -27,5 +27,11 @@ module.exports = {
         plugins: [],
       },
     },
+    {
+      resolve: 'gatsby-plugin-netlify-cms',
+      options: {
+        modulePath: `${__dirname}/src/cms/cms.js`,
+      },
+    },
   ],
 };

gatsby-node.js

@@ -72,7 +72,7 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
     return result.data.allMarkdownRemark.edges.forEach(({ node }) => {
       createPage({
         path: node.frontmatter.path,
-        component: path.resolve(`src/templates/${String(node.frontmatter.templateKey)}.jsx`),
+        component: path.resolve(`src/templates/${String(node.frontmatter.templateKey)}.js`),
         context: {}, // additional data can be passed via context
       });
     });

package.json

@@ -1,12 +1,13 @@
 {
   "name": "gatsby-starter-netlify-cms",
   "description": "Example Gatsby, and Netlify CMS project",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "author": "Austin Green",
   "dependencies": {
     "bulma": "^0.6.0",
     "gatsby": "^1.9.63",
     "gatsby-link": "^1.6.21",
+    "gatsby-plugin-netlify-cms": "^1.0.2",
     "gatsby-plugin-react-helmet": "^1.0.5",
     "gatsby-plugin-sass": "^1.0.12",
     "gatsby-plugin-sharp": "^1.6.18",
@@ -25,15 +26,11 @@
   "license": "MIT",
   "main": "n/a",
   "scripts": {
-    "build": "npm run build:cms && npm run build:site",
-    "build:site": "gatsby build",
-    "build:cms": "cd cms && yarn && npm run build",
+    "start": "npm run develop",
+    "build": "gatsby build",
     "develop": "gatsby develop",
     "serve": "gatsby serve",
-    "_format": "prettier --trailing-comma es5 --no-semi --single-quote --write",
-    "format": "npm run format:src & npm run format:cms",
-    "format:src": "npm run _format 'src/**/*.js'",
-    "format:cms": "npm run _format 'cms/**/*.js'",
+    "format": "prettier --trailing-comma es5 --no-semi --single-quote --write src/**/*.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {

src/cms/cms.js

@@ -1,8 +1,9 @@
 import CMS from 'netlify-cms';
+import 'netlify-cms/dist/cms.css';
 
-import AboutPagePreview from './components/AboutPagePreview';
-import BlogPostPreview from './components/BlogPostPreview';
-import ProductPagePreview from './components/ProductPagePreview';
+import AboutPagePreview from './preview-templates/AboutPagePreview';
+import BlogPostPreview from './preview-templates/BlogPostPreview';
+import ProductPagePreview from './preview-templates/ProductPagePreview';
 
 CMS.registerPreviewStyle('/styles.css');
 CMS.registerPreviewTemplate('about', AboutPagePreview);

src/cms/preview-templates/AboutPagePreview.js

@@ -1,6 +1,5 @@
 import React from 'react';
-
-import { AboutPageTemplate } from '../../src/templates/about-page';
+import { AboutPageTemplate } from '../../templates/about-page';
 
 const AboutPagePreview = ({ entry, widgetFor }) => (
   <AboutPageTemplate title={entry.getIn(['data', 'title'])} content={widgetFor('body')} />

src/cms/preview-templates/BlogPostPreview.js

@@ -1,6 +1,5 @@
 import React from 'react';
-
-import { BlogPostTemplate } from '../../src/templates/blog-post';
+import { BlogPostTemplate } from '../../templates/blog-post';
 
 const BlogPostPreview = ({ entry, widgetFor }) => (
   <BlogPostTemplate

src/cms/preview-templates/ProductPagePreview.js

@@ -1,6 +1,5 @@
 import React from 'react';
-
-import { ProductPageTemplate } from '../../src/templates/product-page';
+import { ProductPageTemplate } from '../../templates/product-page';
 
 const ProductPagePreview = ({ entry, getAsset }) => {
   const entryBlurbs = entry.getIn(['data', 'intro', 'blurbs']);

static/admin/index.html

@@ -1,14 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Content Manager</title>
-  <link rel="stylesheet" href="https://unpkg.com/netlify-cms@^1.0.1/dist/cms.css" />
-  <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
-</head>
-<body>
-  <script>window.graphql = function () { return null; }</script>
-  <script src="cms.bundle.js"></script>
-</body>
-</html>