3 files changed, 20 insertions, 0 deletions
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);