Merge pull request #16 from Jinksi/cms-preview

Add CMS preview

.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()
+  ]
+}

functions/parse-content.js

@@ -56,6 +56,7 @@ const getFileContents = filePath => {
     }
     let documentData = JSON.parse(data)
     documentData.name = getDocumentName(filePath)
+    documentData.body = documentData.body || documentData.content
     let obj = {}
     _set(obj, getCollectionType(filePath), [documentData])
     console.log(`✨  Processed ${filePath}`)

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:cms build:app 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/admin.css

@@ -47,6 +47,10 @@
   flex-direction: column;
 }
 
+.nc-entryEditor-container {
+  max-width: 96%;
+}
+
 /* Custom logo */
 
 /* .nc-githubAuthenticationPage-logo {

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>

src/components/Content.js

@@ -4,7 +4,7 @@ import Marked from 'react-markdown'
 import { getImageSrc, getImageSrcset } from '../util/getImageUrl'
 import './Content.css'
 
-const encodeMarkdownURIs = source => {
+const encodeMarkdownURIs = (source = '') => {
   const markdownLinkRegex = /\[(?:\[[^\]]*\]|[^[\]])*\]\([ \t]*<?((?:\([^)]*\)|[^()])*?)>?[ \t]*(['"].*?\6[ \t]*)?\)/g
   return source.replace(markdownLinkRegex, (match, linkURI) => {
     if (!linkURI) return match

src/views/Contact.js

@@ -13,7 +13,7 @@ export default ({ page, siteTitle }) => (
     <PageHeader title={page.title} subtitle='<Contact />' />
     <div className='section thin'>
       <div className='container'>
-        <Content source={page.content} />
+        <Content source={page.body} />
         <h3>{'<EnquiryFormSimple />'}</h3>
         <EnquiryFormSimple name='Simple Form' />
         <br />

src/views/Home.js

@@ -6,13 +6,13 @@ import PageHeader from '../components/PageHeader'
 import './Home.css'
 
 export default ({ page }) => {
-  const { title, subtitle } = page
+  const { title, subtitle, body } = page
   return (
     <main className='Home'>
       <PageHeader title={title} subtitle={subtitle} />
       <div className='section thin'>
         <div className='container'>
-          <Content source={page.content} />
+          <Content source={body} />
         </div>
       </div>
       <Helmet>

src/views/SinglePost.js

@@ -9,7 +9,7 @@ import { dateFormatted } from '../util/date'
 import './SinglePost.css'
 
 export default ({ singlePost, nextPostURL, prevPostURL }) => {
-  const { content, categories, postFeaturedImage, title, date } = singlePost
+  const { body, categories, postFeaturedImage, title, date } = singlePost
   return (
     <article className='SinglePost section light'>
       <Helmet>
@@ -42,7 +42,7 @@ export default ({ singlePost, nextPostURL, prevPostURL }) => {
           {title && <h1 className='SinglePost--Title'>{title}</h1>}
 
           <div className='SinglePost--InnerContent'>
-            <Content source={content} />
+            <Content source={body} />
           </div>
 
           <div className='SinglePost--Pagination Flex alignStretch justifyBetween flexWrap'>