Merge pull request #11 from netlify-templates/update-for-cms-1-0

Update for CMS 1.0

1 files changed, 69 insertions, 0 deletions

diff --git a/src/js/cms-preview-templates/home.js b/src/js/cms-preview-templates/home.js
new file mode 100644
index 0000000..ca8c123
--- /dev/null
+++ b/src/js/cms-preview-templates/home.js
@@ -0,0 +1,69 @@
+import React from "react";
+import format from "date-fns/format";
+
+import Jumbotron from "./components/jumbotron";
+
+export default class PostPreview extends React.Component {
+  render() {
+    const {entry, getAsset} = 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>
+        <Jumbotron image={image} title={entry.getIn(["data", "title"])} subtitle={entry.getIn(["data", "subtitle"])}/>
+
+        <div className="bg-grey-1 pv4">
+          <div className="flex-l mhn1-l ph3 center mw7">
+            <h2 className="f2 b lh-title mb2 w-40-l">{entry.getIn(["data", "blurb", "heading"])}</h2>
+            <p className="w-60-l mb0">{entry.getIn(["data", "blurb", "text"])}</p>
+          </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", "text"])}</p>
+
+            <div className="flex-ns mhn2-ns mb3">
+              {(entry.getIn(["data", "products"]) || []).map((product, i) => <div className="ph2-ns w-50-ns" key={i}>
+                <img src={getAsset(product.get("image"))} alt="" className="center db mb3" style={{width: "240px"}}/>
+                <p>{product.get("text")}</p>
+              </div>)}
+            </div>
+
+            <div className="tc">
+              <a href="#" className="btn raise">See all products</a>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-grey-1 pv4">
+          <div className="ph3 mw7 center">
+
+            <div className="flex-l mhn2-l">
+              <div className="w-40-l ph2-l">
+                <h2 className="f2 b lh-title mb2">{entry.getIn(["data", "values", "heading"])}</h2>
+
+                <p>{entry.getIn(["data", "values", "text"])}</p>
+              </div>
+
+              <div className="w-60-l ph2-l">
+                <img src="/img/home-about-section.jpg" alt="" className="mb3"/>
+              </div>
+            </div>
+
+            <div className="tc">
+              <a href="{{.buttonLink}}" className="btn raise">Read more</a>
+            </div>
+
+          </div>
+        </div>
+
+
+    </div>
+  }
+}
\ No newline at end of file