Add preview template for posts in CMS

2 files changed, 24 insertions, 0 deletions

diff --git a/src/js/cms-preview-templates/post.js b/src/js/cms-preview-templates/post.js
new file mode 100644
index 0000000..0c819fd
--- /dev/null
+++ b/src/js/cms-preview-templates/post.js
@@ -0,0 +1,19 @@
+import React from "react";
+import format from "date-fns/format";
+
+export default class PostPreview extends React.Component {
+  render() {
+    const {entry, widgetFor} = this.props;
+
+    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">
+        <p>{ format(entry.getIn(["data", "date"]), "ddd, MMM D, YYYY") }</p>
+        <p>Read in x minutes</p>
+      </div>
+      <div className="cms mw6">
+        { widgetFor("body") }
+      </div>
+    </div>;
+  }
+}
diff --git a/src/js/cms.js b/src/js/cms.js
new file mode 100644
index 0000000..d0781af
--- /dev/null
+++ b/src/js/cms.js
@@ -0,0 +1,5 @@
+import CMS from "netlify-cms";
+import PostPreview from "./cms-preview-templates/post";
+
+CMS.registerPreviewStyle("/css/main.css");
+CMS.registerPreviewTemplate("post", PostPreview);