Update hugo and content structure; add home page to CMS

This updates to hugo v0.31

It also adapts the content model to follow the convention for sections
with _index.md files and makes the home page a fully editable section

2 files changed, 71 insertions, 1 deletions

diff --git a/src/js/cms-preview-templates/components/jumbotron.js b/src/js/cms-preview-templates/components/jumbotron.js
index cb14df9..128a51e 100644
--- a/src/js/cms-preview-templates/components/jumbotron.js
+++ b/src/js/cms-preview-templates/components/jumbotron.js
@@ -2,7 +2,7 @@ import React from "react";
 
 export default class Jumbotron extends React.Component {
   render() {
-    const {image, title} = this.props;
+    const {image, title, subtitle} = this.props;
     return <div>
       <div className="pv5 pv6-l ph3 bg-center cover" style={{
         backgroundImage: image && `url(${image})`
@@ -15,6 +15,7 @@ export default class Jumbotron extends React.Component {
               </h1>
             </div>
             <div className="mw7 relative bg-fix-primary">
+              {subtitle && <p className="b f4 di lh-title mb3 white mw6 bg-primary">{ subtitle }</p>}
             </div>
           </div>
         </div>
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