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

18 files changed, 133 insertions, 34 deletions

diff --git a/bin/hugo.darwin b/bin/hugo.darwin
index a1e4260..99151d6 100755
--- a/bin/hugo.darwin
+++ b/bin/hugo.darwin
diff --git a/bin/hugo.exe b/bin/hugo.exe
index e0b713b..144e2ce 100755
--- a/bin/hugo.exe
+++ b/bin/hugo.exe
diff --git a/bin/hugo.linux b/bin/hugo.linux
index 5915625..0f34c02 100755
--- a/bin/hugo.linux
+++ b/bin/hugo.linux
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
index 4bc694a..a93dc8a 100644
--- a/gulpfile.babel.js
+++ b/gulpfile.babel.js
@@ -17,6 +17,10 @@ const browserSync = BrowserSync.create();
 const hugoBin = `./bin/hugo.${process.platform === "win32" ? "exe" : process.platform}`;
 const defaultArgs = ["-d", "../dist", "-s", "site"];
 
+if (process.env.DEBUG) {
+  defaultArgs.unshift("--debug")
+}
+
 gulp.task("hugo", (cb) => buildSite(cb));
 gulp.task("hugo-preview", (cb) => buildSite(cb, ["--buildDrafts", "--buildFuture"]));
 gulp.task("build", ["css", "js", "cms-assets", "hugo"]);
diff --git a/site/content/_index.md b/site/content/_index.md
new file mode 100644
index 0000000..02e819d
--- /dev/null
+++ b/site/content/_index.md
@@ -0,0 +1,20 @@
+---
+title: "Great coffee with a conscience"
+subtitle: Support sustainable farming while enjoying a cup
+image: /img/home-jumbotron.jpg
+blurb:
+    heading: Why Kaldi?
+    text: "Kaldi is the coffee store for everyone who believes that great coffee shouldn't just taste good, it should do good too. We source all of our beans directly from small scale sustainable farmers and make sure part of the profits are reinvested in their communities."
+intro:
+    heading: "What we offer"
+    text: "Kaldi is the ultimate spot for coffee lovers who want to learn about their java’s origin and support the farmers that grew it. We take coffee production, roasting and brewing seriously and we’re glad to pass that knowledge to anyone."
+products:
+    - image: img/illustrations-coffee.svg
+      text: "We sell green and roasted coffee beans that are sourced directly from independent farmers and farm cooperatives. We’re proud to offer a variety of coffee beans grown with great care for the environment and local communities. Check our post or contact us directly for current availability."
+    - image: /img/illustrations-coffee-gear.svg
+      text: "We offer a small, but carefully curated selection of brewing gear and tools for every taste and experience level. No matter if you roast your own beans or just bought your first french press, you’ll find a gadget to fall in love with in our shop."
+values:
+    heading: Our values
+    text: Coffee is an amazing part of human culture but it has a dark side too – one of colonialism and mindless abuse of natural resources and human lives. We want to turn this around and return the coffee trade to the drink’s exhilarating, empowering and unifying nature.
+---
+
diff --git a/site/content/contact.md b/site/content/contact/_index.md
index 2e3c24e..1b34ee8 100644
--- a/site/content/contact.md
+++ b/site/content/contact/_index.md
@@ -1,7 +1,5 @@
 ---
 title: "Contact"
-type: "contact"
-page: "/contact.html"
 logo: "/img/logo.svg"
 contact_entries:
   - heading: Location
diff --git a/site/content/products.md b/site/content/products/_index.md
index 67fd186..b8d4b63 100644
--- a/site/content/products.md
+++ b/site/content/products/_index.md
@@ -1,7 +1,6 @@
 ---
 title: Our Coffee
 type: products
-page: /products.html
 image: /img/products-jumbotron.jpg
 heading: What we offer
 description: >-
diff --git a/site/content/values.md b/site/content/values/_index.md
index 98bf92c..b92073d 100644
--- a/site/content/values.md
+++ b/site/content/values/_index.md
@@ -1,7 +1,5 @@
 ---
 title: "Values"
-type: "values"
-page: "/values.html"
 image: /img/about-jumbotron.jpg
 values:
   - heading: "Shade-grown coffee"
diff --git a/site/layouts/index.html b/site/layouts/index.html
index 9ce8a17..a21df24 100644
--- a/site/layouts/index.html
+++ b/site/layouts/index.html
@@ -2,13 +2,13 @@
 
 {{ partial "nav" . }}
 
-{{ partial "jumbotron" (dict "imageUrl" "/img/home-jumbotron.jpg" "title" "Great coffee with a conscience" "subtitle" "Support sustainable farming while enjoying a cup") }}
+{{ partial "jumbotron" (dict "imageUrl" .Params.image "title" .Title "subtitle" .Params.subtitle) }}
 
-{{ partial "short-text" (dict "heading" "Why Kaldi?" "text" "Kaldi is the coffee store for everyone who believes that great coffee shouldn't just taste good, it should do good too. We source all of our beans directly from small scale sustainable farmers and make sure part of the profits are reinvested in their communities.")}}
+{{ partial "short-text" .Params.blurb}}
 
-{{ partial "2-up" (dict "heading" "What we offer" "description" "Kaldi is the ultimate spot for coffee lovers who want to learn about their java’s origin and support the farmers that grew it. We take coffee production, roasting and brewing seriously and we’re glad to pass that knowledge to anyone." "svg1" "img/illustrations-coffee.svg" "text1" "We sell green and roasted coffee beans that are sourced directly from independent farmers and farm cooperatives. We’re proud to offer a variety of coffee beans grown with great care for the environment and local communities. Check our post or contact us directly for current availability." "svg2" "/img/illustrations-coffee-gear.svg" "text2" "We offer a small, but carefully curated selection of brewing gear and tools for every taste and experience level. No matter if you roast your own beans or just bought your first french press, you’ll find a gadget to fall in love with in our shop." "buttonText" "See all products" "buttonLink" "/products"  ) }}
+{{ partial "2-up" .Params }}
 
-{{ partial "text-and-image" (dict "heading" "Our values" "text" "Coffee is an amazing part of human culture but it has a dark side too – one of colonialism and mindless abuse of natural resources and human lives. We want to turn this around and return the coffee trade to the drink’s exhilarating, empowering and unifying nature." "buttonText" "Read more" "buttonLink" "/values") }}
+{{ partial "text-and-image" (dict "heading" .Params.values.heading "text" .Params.values.text "buttonText" "Read more" "buttonLink" "/values") }}
 
 {{ partial "blog" . }}
 
diff --git a/site/layouts/partials/2-up.html b/site/layouts/partials/2-up.html
index 06849f0..ab827b4 100644
--- a/site/layouts/partials/2-up.html
+++ b/site/layouts/partials/2-up.html
@@ -1,24 +1,19 @@
 <div class="bg-off-white pv4">
   <div class="ph3 mw7 center">
-    <h2 class="f2 b lh-title mb2">{{.heading}}</h2>
-    <p class="mb4 mw6">{{.description}}</p>
+    <h2 class="f2 b lh-title mb2">{{.intro.heading}}</h2>
+    <p class="mb4 mw6">{{.intro.text}}</p>
 
     <div class="flex-ns mhn2-ns mb3">
+      {{ range .products }}
       <div class="ph2-ns w-50-ns">
-        <img src="{{.svg1}}" alt="" class="center db mb3" style="width: 240px">
-        <p>{{.text1}}</p>
-      </div>
-
-      <div class="ph2-ns w-50-ns">
-        <img src="{{.svg2}}" alt="" class="center db mb3" style="width: 240px">
-        <p>{{.text2}}</p>
+        <img src="{{.image}}" alt="" class="center db mb3" style="width: 240px">
+        <p>{{.text}}</p>
       </div>
+      {{ end }}
     </div>
 
-    {{ if .buttonText }}
-      <div class="tc">
-        <a href="{{.buttonLink}}" class="btn raise">{{.buttonText}}</a>
-      </div>
-    {{ end }}
+    <div class="tc">
+      <a href="/products" class="btn raise">See all products</a>
+    </div>
   </div>
 </div>
diff --git a/site/layouts/partials/text-and-image.html b/site/layouts/partials/text-and-image.html
index 06baa68..7a55f15 100644
--- a/site/layouts/partials/text-and-image.html
+++ b/site/layouts/partials/text-and-image.html
@@ -3,7 +3,7 @@
 
 		<div class="flex-l mhn2-l">
 			<div class="w-40-l ph2-l">
-				<h2 class="f2 b lh-title mb2">{{.heading}}</h1>
+				<h2 class="f2 b lh-title mb2">{{.heading}}</h2>
 
 				<p>{{.text}}</p>
 			</div>
diff --git a/site/layouts/contact/single.html b/site/layouts/section/contact.html
index 205d92e..205d92e 100644
--- a/site/layouts/contact/single.html
+++ b/site/layouts/section/contact.html
diff --git a/site/layouts/products/single.html b/site/layouts/section/products.html
index bf430ca..bf430ca 100644
--- a/site/layouts/products/single.html
+++ b/site/layouts/section/products.html
diff --git a/site/layouts/values/single.html b/site/layouts/section/values.html
index 9b6fa13..9b6fa13 100644
--- a/site/layouts/values/single.html
+++ b/site/layouts/section/values.html
diff --git a/site/static/admin/config.yml b/site/static/admin/config.yml
index cdb089e..bf0f03d 100644
--- a/site/static/admin/config.yml
+++ b/site/static/admin/config.yml
@@ -18,13 +18,30 @@ collections: # A list of collections the CMS should be able to edit
   - name: "pages"
     label: "Pages"
     files:
-      - file: "site/content/contact.md"
+      - file: "site/content/_index.md"
+        label: "Home Page"
+        name: "home"
+        fields:
+          - {label: Title, name: title, widget: string}
+          - {label: Subtitle, name: subtitle, widget: string}
+          - {label: Image, name: image, widget: image}
+          - {label: "Blurb", name: blurb, widget: object, fields: [
+              {label: "Heading", name: "heading", widget: string},
+              {label: "Text", name: "text", widget: "text"}]}
+          - {label: "Intro", name: intro, widget: object, fields: [
+              {label: "Heading", name: "heading", widget: string},
+              {label: "Text", name: "text", widget: "text"}]}
+          - {label: "Products", name: products, widget: list, fields: [
+              {label: "Image", name: "image", widget: "image"},
+              {label: "Text", name: "text", widget: "text"}]}
+          - {label: "Values", name: "values", widget: "object", fields: [
+              {label: "Heading", name: "heading", widget: string},
+              {label: "Text", name: "text", widget: "text"}]}
+      - file: "site/content/contact/_index.md"
         label: "Contact Page"
         name: "contact"
         fields:
           - {label: Title, name: title, widget: string}
-          - {label: Type, name: type, widget: hidden, default: contact}
-          - {label: Page, name: page, widget: hidden, default: "/contact.html"}
           - {label: Logo, name: logo, widget: image}
           - {label: Body, name: body, widget: markdown}
           - label: Contact Entries
@@ -37,13 +54,11 @@ collections: # A list of collections the CMS should be able to edit
               - label: Text
                 name: text
                 widget: text
-      - file: "site/content/products.md"
+      - file: "site/content/products/_index.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}
@@ -52,13 +67,11 @@ collections: # A list of collections the CMS should be able to edit
           - {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}]}]}
-      - file: "site/content/values.md"
+      - file: "site/content/values/_index.md"
         label: "Values Page"
         name: "values"
         fields:
           - {label: Title, name: title, widget: string}
-          - {label: Type, name: type, widget: hidden, default: values}
-          - {label: Page, name: page, widget: hidden, default: "/values.html"}
           - {label: Image, name: image, widget: image}
           - label: Values
             name: values
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
diff --git a/src/js/cms.js b/src/js/cms.js
index 3f018b9..ad298dd 100644
--- a/src/js/cms.js
+++ b/src/js/cms.js
@@ -1,6 +1,7 @@
 import React from "react";
 import CMS from "netlify-cms";
 
+import HomePreview from "./cms-preview-templates/home";
 import PostPreview from "./cms-preview-templates/post";
 import ProductsPreview from "./cms-preview-templates/products";
 import ValuesPreview from "./cms-preview-templates/values";
@@ -20,6 +21,7 @@ class ColorControl extends React.Component {
 }
 
 CMS.registerPreviewStyle("/css/main.css");
+CMS.registerPreviewTemplate("home", HomePreview);
 CMS.registerPreviewTemplate("post", PostPreview);
 CMS.registerPreviewTemplate("products", ProductsPreview);
 CMS.registerPreviewTemplate("values", ValuesPreview);