From 2544d5ef544a4784da4284d52095525723abcd87 Mon Sep 17 00:00:00 2001
From: Mathias Biilmann Christensen <info@mathias-biilmann.net>
Date: Tue, 21 Feb 2017 15:31:05 -0800
Subject: Add preview template for product page

---
 site/layouts/partials/table.html         |   2 +-
 site/static/admin/config.yml             |  29 ++++----
 src/js/cms-preview-templates/products.js | 112 +++++++++++++++++++++++++++++++
 src/js/cms.js                            |   2 +
 4 files changed, 130 insertions(+), 15 deletions(-)
 create mode 100644 src/js/cms-preview-templates/products.js

diff --git a/site/layouts/partials/table.html b/site/layouts/partials/table.html
index 2b521a9..28fe765 100644
--- a/site/layouts/partials/table.html
+++ b/site/layouts/partials/table.html
@@ -2,7 +2,7 @@
 
 	<div class="mw7 center">
 
-		<h2 class="f2 b lh-title mb3">{{.heading}}</h1>
+		<h2 class="f2 b lh-title mb3">{{.heading}}</h2>
 		<p class="mw6">{{.description}}</p>
 
 		<div class="flex-ns mhn2-ns mw7">
diff --git a/site/static/admin/config.yml b/site/static/admin/config.yml
index 374bf44..463bd5c 100644
--- a/site/static/admin/config.yml
+++ b/site/static/admin/config.yml
@@ -18,17 +18,18 @@ collections: # A list of collections the CMS should be able to edit
   - name: "pages"
     label: "Pages"
     files:
-      file: "site/content/products.md"
-      fields:
-        - {label: Title, name: title, widget: string}
-        - {label: Type, name: type, widget: string}
-        - {label: Image, name: image, widget: image}
-        - {label: Page, name: page, widget: string}
-        - {label: Heading, name: heading, widget: string}
-        - {label: Description, name: description, widget: string}
-        - {label: Intro, name: intro, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Blurbs, name: blurbs, widget: list, fields: [{label: Image, name: image, widget: image}, {label: Text, name: text, widget: text}]}]}
-        - {label: Main, name: main, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Image1, name: image1, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image2, name: image2, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image3, name: image3, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}]}
-        - {label: Testimonials, name: testimonials, widget: list, fields: [{label: Quote, name: quote, widget: string}, {label: Author, name: author, widget: string}]}
-        - {label: Full_image, name: full_image, widget: image}
-        - {label: Pricing, name: pricing, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: string}, {label: Plans, name: plans, widget: list, fields: [{label: Plan, name: plan, widget: string}, {label: Price, name: price, widget: string}, {label: Description, name: description, widget: string}, {label: Items, name: items, widget: list}]}]}
-        - {label: Body, name: body, widget: markdown}
+      - file: "site/content/products.md"
+        label: "Products Page"
+        name: "products"
+        fields:
+          - {label: Title, name: title, widget: string}
+          - {label: Type, name: type, widget: hidden, default: products}
+          - {label: Page, name: page, widget: hidden, default: "/products.html"}
+          - {label: Image, name: image, widget: image}
+          - {label: Heading, name: heading, widget: string}
+          - {label: Description, name: description, widget: string}
+          - {label: Intro, name: intro, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Blurbs, name: blurbs, widget: list, fields: [{label: Image, name: image, widget: image}, {label: Text, name: text, widget: text}]}]}
+          - {label: Main, name: main, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Image1, name: image1, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image2, name: image2, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image3, name: image3, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}]}
+          - {label: Testimonials, name: testimonials, widget: list, fields: [{label: Quote, name: quote, widget: string}, {label: Author, name: author, widget: string}]}
+          - {label: Full_image, name: full_image, widget: image}
+          - {label: Pricing, name: pricing, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: string}, {label: Plans, name: plans, widget: list, fields: [{label: Plan, name: plan, widget: string}, {label: Price, name: price, widget: string}, {label: Description, name: description, widget: string}, {label: Items, name: items, widget: list}]}]}
diff --git a/src/js/cms-preview-templates/products.js b/src/js/cms-preview-templates/products.js
new file mode 100644
index 0000000..0934c1b
--- /dev/null
+++ b/src/js/cms-preview-templates/products.js
@@ -0,0 +1,112 @@
+import React from "react";
+import format from "date-fns/format";
+
+export default class PostPreview extends React.Component {
+  render() {
+    const {entry, getAsset, widgetFor} = this.props;
+    let image = getAsset(entry.getIn(["data", "image"]));
+
+    // Bit of a nasty hack to make relative paths work as expected as a background image here
+    if (image && !image.fileObj) {
+      image = window.parent.location.protocol + "//" + window.parent.location.host + image;
+    }
+
+    return <div>
+      <div className="pv5 pv6-l ph3 bg-center cover" style={{
+        backgroundImage: image && `url(${image})`
+      }}>
+        <div className="mw7 center ph3">
+          <div className="db mb3">
+            <div className="mw7 relative bg-fix-primary mb3">
+              <h1 className="f2 f1-l b di lh-title mb3 white mw6 bg-primary">
+                { entry.getIn(["data", "title"]) }
+              </h1>
+            </div>
+            <div className="mw7 relative bg-fix-primary">
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-off-white pv4">
+        <div className="ph3 mw7 center">
+          <h2 className="f2 b lh-title mb2">{entry.getIn(["data", "intro", "heading"])}</h2>
+          <p className="mb4 mw6">{entry.getIn(["data", "intro", "description"])}</p>
+
+          <div className="flex-ns flex-wrap mhn2-ns mb3">
+            {(entry.getIn(["data","intro", "blurbs"]) || []).map((blurb, index) => <div className="ph2-ns w-50-ns mb4" key={index}>
+              <img src={blurb.get("image") && getAsset(blurb.get("image"))} alt="" className="center db mb3" style={{width: "240px"}}/>
+              <p>{blurb.get("text")}</p>
+            </div>)}
+          </div>
+        </div>
+      </div>
+
+      <div className="mw7 center">
+        <div className="mw6 ph3 mb3">
+          <h3 className="f3 b lh-title mb2">{entry.getIn(["data", "main", "heading"])}</h3>
+          <p>{entry.getIn(["data", "main", "description"])}</p>
+        </div>
+      </div>
+
+      <div className="mw7 center ph3 pv4">
+
+        <div className="flex flex-wrap mhn1">
+          <div className="w-100 w-50-ns ph1-ns">
+            <img src={getAsset(entry.getIn(["data", "main", "image1", "image"]))}/>
+          </div>
+
+          <div className="w-100 w-50-ns ph1-ns">
+            <img src={getAsset(entry.getIn(["data", "main", "image2", "image"]))}/>
+          </div>
+
+          <div className="w-100 ph1-ns">
+            <img src={getAsset(entry.getIn(["data", "main", "image3", "image"]))}/>
+          </div>
+        </div>
+      </div>
+
+      <div className="pb4">
+        {(entry.getIn(['data', 'testimonials']) || []).map((testimonial, index) => <div className="center mb3 ph3" key={index}>
+        	<blockquote className="bg-grey-1 primary pa3 mb3 br1 b mw6 center">
+        		<p className="f4 mb0">“{testimonial.get('quote')}”</p>
+        		<cite className="tr db grey-3">{testimonial.get('author')}</cite>
+        	</blockquote>
+        </div>)}
+      </div>
+
+      <img src={getAsset(entry.getIn(['data', 'full_image']))} alt="" className="db w-100"/>
+
+      <div className="bg-off-white pv4 ph3">
+      	<div className="mw7 center">
+
+      		<h2 className="f2 b lh-title mb3">{entry.getIn(['data', 'pricing', 'heading'])}</h2>
+      		<p className="mw6">{entry.getIn(['data', 'pricing', 'description'])}</p>
+
+      		<div className="flex-ns mhn2-ns mw7">
+            {(entry.getIn(['data', 'pricing', 'plans']) || []).map((plan, index) => <div className="w-33-ns ph2" key={index}>
+              <div className="ph2">
+
+              	<h3 className="b f5 grey-3 tc lh-title mb3">{plan.get('plan')}</h3>
+
+              	<p className="primary f1 b tc lh-title center">
+              		<span className="f4">$</span>{plan.get('price')}
+              	</p>
+
+              	<p className="b">{plan.get('description')}}</p>
+
+              	<ul>
+                  {(plan.get('items') || []).map((item, index) => <li key={index}>
+                    <p className={index + 1 !== plan.get('items').size ? "pb2 mb2 divider-grey" : null}>{item}</p>
+                  </li>)}
+              	</ul>
+
+              </div>
+
+            </div>)}
+      		</div>
+      	</div>
+      </div>
+    </div>;
+  }
+}
diff --git a/src/js/cms.js b/src/js/cms.js
index d0781af..289b26a 100644
--- a/src/js/cms.js
+++ b/src/js/cms.js
@@ -1,5 +1,7 @@
 import CMS from "netlify-cms";
 import PostPreview from "./cms-preview-templates/post";
+import ProductsPreview from "./cms-preview-templates/products";
 
 CMS.registerPreviewStyle("/css/main.css");
 CMS.registerPreviewTemplate("post", PostPreview);
+CMS.registerPreviewTemplate("products", ProductsPreview);
-- 
cgit v1.3