From abac30330edd5b7ea718abc230c9d685dfe30c83 Mon Sep 17 00:00:00 2001
From: Mathias Biilmann Christensen <info@mathias-biilmann.net>
Date: Mon, 20 Feb 2017 23:57:32 -0800
Subject: Add preview template for posts in CMS

---
 src/js/cms-preview-templates/post.js | 19 +++++++++++++++++++
 src/js/cms.js                        |  5 +++++
 2 files changed, 24 insertions(+)
 create mode 100644 src/js/cms-preview-templates/post.js
 create mode 100644 src/js/cms.js

(limited to 'src')

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);
-- 
cgit v1.3