CMS preview init

.gitignore

@@ -13,5 +13,6 @@ build
 .DS_Store
 npm-debug.log
 .env*.local
+*error.log
 
 src/data.json

cms/cms.js

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import '../src/globalStyles.css'
+import data from '../src/data.json'
+import Home from '../src/views/Home'
+import About from '../src/views/About'
+import SinglePost from '../src/views/SinglePost'
+import Contact from '../src/views/Contact'
+
+const CMS = window.CMS
+CMS.registerPreviewStyle(
+  'https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css'
+)
+CMS.registerPreviewStyle('/admin/cms.bundle.css')
+
+const getDocument = (collection, name) =>
+  data[collection] && data[collection].filter(page => page.name === name)[0]
+const globalSettings = getDocument('settings', 'global')
+
+// Preview Templates
+CMS.registerPreviewTemplate('home-page', ({ entry }) => (
+  <Home page={entry.toJS().data} />
+))
+CMS.registerPreviewTemplate('about-page', ({ entry }) => (
+  <About page={entry.toJS().data} />
+))
+CMS.registerPreviewTemplate('contact-page', ({ entry }) => (
+  <Contact page={entry.toJS().data} siteTitle={globalSettings.siteTitle} />
+))
+CMS.registerPreviewTemplate('posts', ({ entry }) => (
+  <SinglePost singlePost={entry.toJS().data} />
+))
+
+window.netlifyIdentity.on('logout', function () {
+  document.location.href = '/'
+})

cms/package.json

@@ -0,0 +1,21 @@
+{
+  "scripts": {
+    "build": "npm i && webpack --config webpack.config.js"
+  },
+  "dependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-react": "^6.24.1",
+    "css-loader": "^0.28.7",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "uglifyjs-webpack-plugin": "^1.1.4",
+    "webpack": "^3.11.0",
+    "webpack-cli": "^2.1.2"
+  },
+  "devDependencies": {
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "postcss-loader": "^2.0.9"
+  }
+}

cms/webpack.config.js

@@ -0,0 +1,43 @@
+// This webpack config is used to compile the JS for the CMS
+const path = require('path')
+const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+
+module.exports = {
+  entry: './cms.js',
+  output: {
+    filename: 'cms.bundle.js',
+    path: path.resolve(__dirname, '../public/admin/')
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+        options: {
+          presets: ['babel-preset-env', 'babel-preset-react'],
+          plugins: [
+            'babel-plugin-transform-class-properties',
+            'transform-object-rest-spread'
+          ]
+        }
+      },
+      {
+        test: /\.css$/,
+        use: ExtractTextPlugin.extract({
+          use: [
+            { loader: 'css-loader', options: { importLoaders: 1 } },
+            'postcss-loader'
+          ]
+        })
+      }
+    ]
+  },
+  plugins: [
+    new ExtractTextPlugin({
+      filename: 'cms.bundle.css'
+    }),
+    new UglifyJsPlugin()
+  ]
+}

package.json

@@ -48,11 +48,14 @@
     "react-snapshot": "^1.1.0"
   },
   "scripts": {
-    "start": "npm-run-all prepare-content -p start:content start:app",
+    "start": "npm-run-all prepare-content -p start:content start:app start:cms",
     "start:app": "react-scripts start",
     "start:content": "chokidar 'content/**/**' -c 'npm run prepare-content'",
-    "build": "npm-run-all -s prepare-content build:app build:postcss build:react-snapshot build:sitemap build:sw build:sha",
+    "start:cms": "chokidar 'cms/cms.js' -c 'cd cms && npm run build'",
+    "build":
+      "npm-run-all -s prepare-content build:app build:cms build:postcss build:react-snapshot build:sitemap build:sw build:sha",
     "build:app": "react-scripts build",
+    "build:cms": "cd cms && npm run build",
     "build:postcss": "postcss build/static/css/*.css -r",
     "build:react-snapshot": "react-snapshot",
     "build:sw": "sw-precache --config='sw-precache-config.js'",
@@ -65,8 +68,6 @@
     "eject": "react-scripts eject"
   },
   "reactSnapshot": {
-    "include": [
-      "/404"
-    ]
+    "include": ["/404"]
   }
 }

public/admin/.gitignore

@@ -0,0 +1 @@
+*.bundle.*

public/admin/config.yml

@@ -12,7 +12,7 @@ collections: # A list of collections the CMS should be able to edit
     label: "Page"
     delete: false # Prevent users from deleting documents in this collection
     editor:
-      preview: false
+      preview: true
     files:
       - file: "content/pages/home.md"
         label: "Home Page"
@@ -44,7 +44,7 @@ collections: # A list of collections the CMS should be able to edit
   - name: posts
     label: Post
     editor:
-      preview: false
+      preview: true
     folder: content/posts
     slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
     create: true # Allow users to create new documents in this collection

public/admin/index.html

@@ -14,12 +14,6 @@
   <!-- Include the script that builds the page and powers Netlify CMS -->
   <script src="https://identity-js.netlify.com/v1/netlify-identity-widget.js"></script>
   <script src="https://unpkg.com/netlify-cms@1.7.0/dist/cms.js"></script>
-
-  <script>
-  // redirect when logging out
-window.netlifyIdentity.on('logout', function () {
-  document.location.href = '/'
-})
-</script>
+  <script src="cms.bundle.js"></script>
 </body>
 </html>