Update CMS

5 files changed, 24 insertions, 4 deletions

diff --git a/package.json b/package.json
index 2fc9518..69331b7 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "gulp-replace": "^0.5.4",
     "gulp-util": "^3.0.7",
     "imports-loader": "^0.6.5",
-    "netlify-cms": "^0.3.12",
+    "netlify-cms": "^0.3.15",
     "postcss-cssnext": "^2.7.0",
     "postcss-import": "^8.1.2",
     "postcss-loader": "^0.9.1",
diff --git a/src/cms/config.yml b/src/cms/config.yml
index 3b209aa..9be0a70 100644
--- a/src/cms/config.yml
+++ b/src/cms/config.yml
@@ -13,6 +13,7 @@ collections: # A list of collections the CMS should be able to edit
     create: true # Allow users to create new documents in this collection
     fields: # The fields each document in this collection have
       - {label: "Title", name: "title", widget: "string"}
+      - {label: "A color", name: "color", widget: "color"}
       - {label: "Publish Date", name: "date", widget: "datetime"}
       - {label: "Intro Blurb", name: "description", widget: "text"}
       - {label: "Image", name: "image", widget: "image", required: false}
diff --git a/src/js/cms-preview-templates/post.js b/src/js/cms-preview-templates/post.js
index 0c819fd..38ab505 100644
--- a/src/js/cms-preview-templates/post.js
+++ b/src/js/cms-preview-templates/post.js
@@ -8,6 +8,11 @@ export default class PostPreview extends React.Component {
     return <div className="mw6 center ph3 pv4">
       <h1 className="f2 lh-title b mb3">{ entry.getIn(["data", "title"])}</h1>
       <div className="flex justify-between grey-3">
+        <div style={{
+          width: "80px",
+          height: "80px",
+          backgroundColor: entry.getIn(['data', 'color'])
+        }}></div>
         <p>{ format(entry.getIn(["data", "date"]), "ddd, MMM D, YYYY") }</p>
         <p>Read in x minutes</p>
       </div>
diff --git a/src/js/cms.js b/src/js/cms.js
index 289b26a..aae6669 100644
--- a/src/js/cms.js
+++ b/src/js/cms.js
@@ -1,7 +1,21 @@
+import React from "react";
 import CMS from "netlify-cms";
+
 import PostPreview from "./cms-preview-templates/post";
 import ProductsPreview from "./cms-preview-templates/products";
 
+class ColorControl extends React.Component {
+  render() {
+    return <input
+        style={{height: "80px"}}
+        type="color"
+        value={this.props.value}
+        onInput={(e) => this.props.onChange(e.target.value)}
+    />;
+  }
+}
+
 CMS.registerPreviewStyle("/css/main.css");
 CMS.registerPreviewTemplate("post", PostPreview);
 CMS.registerPreviewTemplate("products", ProductsPreview);
+CMS.registerWidget("color", ColorControl);
diff --git a/yarn.lock b/yarn.lock
index 0f57428..ff377fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5059,9 +5059,9 @@ netlify-auth-js@^0.5.5:
   dependencies:
     micro-api-client "^2.0.0"
 
-netlify-cms@^0.3.9:
-  version "0.3.9"
-  resolved "https://registry.yarnpkg.com/netlify-cms/-/netlify-cms-0.3.9.tgz#972b22527b5f33303cdd2ee9d9cea2cfd274d1aa"
+netlify-cms@^0.3.15:
+  version "0.3.15"
+  resolved "https://registry.yarnpkg.com/netlify-cms/-/netlify-cms-0.3.15.tgz#a17a1a709aa62e4aac96174fdbc04ebb2b5607e1"
   dependencies:
     "@kadira/storybook" "^1.36.0"
     autoprefixer "^6.3.3"