Make product page use content from frontmatter

9 files changed, 111 insertions, 69 deletions

diff --git a/site/content/products.md b/site/content/products.md
index 4641457..efcfe04 100644
--- a/site/content/products.md
+++ b/site/content/products.md
@@ -1,5 +1,60 @@
-+++
-title = "Products"
-type = "products"
-page="/products.html"
-+++
+---
+title: "Products"
+type: "products"
+image: "/img/products/jumbotron.jpg"
+page: "/products.html"
+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."
+intro:
+  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.
+  blurbs:
+    - 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.
+    - image: "/img/illustrations/tutorials.svg"
+      text: |
+        Love a great cup of coffee, but never knew how to make one? Bought a fancy new Chemex but have no clue how to use it? Don't worry, we’re here to help. You can schedule a custom 1-on-1 consultation with our baristas to learn anything you want to know about coffee roasting and brewing. Email us or call the store for details.
+    - image: "/img/illustrations/meeting-space.svg"
+      text: |
+        We believe that good coffee has the power to bring people together. That’s why we decided to turn a corner of our shop into a cozy meeting space where you can hang out with fellow coffee lovers and learn about coffee making techniques. All of the artwork on display there is for sale. The full price you pay goes to the artist.
+main:
+  heading: Great coffee with no compromises
+  description: |
+    We hold our coffee to the highest standards from the shrub to the cup. That’s why we’re meticulous and transparent about each step of the coffee’s journey. We personally visit each farm to make sure the conditions are optimal for the plants, farmers and the local environment.
+  image1:
+    image: /img/products/products-grid3.jpg
+    alt: A close-up of a paper filter filled with ground coffee
+  image2:
+    image: /img/products/products-grid2.jpg
+    alt: A green cup of a coffee on a wooden table
+  image3:
+    image: /img/products/products-grid1.jpg
+    alt: Coffee beans
+testimonials:
+  - quote: "The first time I tried Kaldi’s coffee, I couldn’t even believe that was the same thing I’ve been drinking every morning."
+    author: "Elisabeth Kaurismäki"
+  - quote: "Kaldi is the place to go if you want the best quality coffee. I love their stance on empowering farmers and transparency."
+    author: "Philipp Trommler"
+full_image: /img/products/products-full-width.jpg
+pricing:
+  heading: "Monthly subscriptions"
+  description: "We make it easy to make great coffee a part of your life. Choose one of our monthly subscription plans to receive great coffee at your doorstep each month. Contact us about more details and payment info."
+  plans:
+    - plan: "Small"
+      price: "50"
+      description: "Perfect for the drinker who likes to enjoy 1-2 cups per day."
+      items: ["3 lbs of coffee per month", Green or roasted beans", One or two varieties of beans"]
+    - plan: Big
+      price: "80"
+      description: Great for avid drinkers, java-nsoving couples and bigger crowds
+      items: ["6 lbs of coffee per month", "Green or roasted beans", "Up to 4 different varieties of beans"]
+    - plan: Custom
+      price: "?"
+      description: "Want a few tiny batches from different varieties? Try our custom plan"
+      items: ["Whatever you need", "Green or roasted beans", "Unlimited varieties"]
+---
diff --git a/site/layouts/partials/4-up.html b/site/layouts/partials/4-up.html
index dcfbbbf..d57d043 100644
--- a/site/layouts/partials/4-up.html
+++ b/site/layouts/partials/4-up.html
@@ -4,33 +4,12 @@
 		<p class="mb4 mw6">{{.description}}</p>
 
 		<div class="flex-ns flex-wrap mhn2-ns mb3">
-
-			<div class="ph2-ns w-50-ns mb4">
-				<img src="{{.svg1}}" alt="" class="center db mb3" style="width: 240px">
-				<p>{{.text1}}</p>
-			</div>
-
-			<div class="ph2-ns w-50-ns mb4">
-				<img src="{{.svg2}}" alt="" class="center db mb3" style="width: 240px">
-				<p>{{.text2}}</p>
-			</div>
-
-      <div class="ph2-ns w-50-ns mb4">
-        <img src="{{.svg3}}" alt="" class="center db mb3" style="width: 240px">
-        <p>{{.text3}}</p>
-      </div>
-
-      <div class="ph2-ns w-50-ns mb4">
-        <img src="{{.svg4}}" alt="" class="center db mb3" style="width: 240px">
-        <p>{{.text4}}</p>
-      </div>
-
+			{{ range .blurbs }}
+				<div class="ph2-ns w-50-ns mb4">
+					<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>
 </div>
diff --git a/site/layouts/partials/blockquote.html b/site/layouts/partials/blockquote.html
index 85920f0..1c851e1 100644
--- a/site/layouts/partials/blockquote.html
+++ b/site/layouts/partials/blockquote.html
@@ -1,6 +1,6 @@
 <div class="center mb3 ph3">
 	<blockquote class="bg-grey-1 primary pa3 mb3 br1 b mw6 center">
-		<p class="f4 mb0">{{.quote}}</p>
-		<cite class="tr db grey-3">{{.author}}</cite>
+		<p class="f4 mb0">“{{ .quote }}”</p>
+		<cite class="tr db grey-3">{{ .author }}</cite>
 	</blockquote>
 </div>
diff --git a/site/layouts/partials/head.html b/site/layouts/partials/head.html
index bd2f1da..9c72ea1 100644
--- a/site/layouts/partials/head.html
+++ b/site/layouts/partials/head.html
@@ -3,7 +3,7 @@
 	<head>
 
 		<html lang="en-US">
-		<title>{{.Title}} | Kaldi</title>
+		<title>{{ .Title }} | Kaldi</title>
 		<link rel="stylesheet" href="/css/main.css"/>
 
 		<meta charset="utf-8">
diff --git a/site/layouts/partials/image-grid.html b/site/layouts/partials/image-grid.html
index 726be38..5ead5f1 100644
--- a/site/layouts/partials/image-grid.html
+++ b/site/layouts/partials/image-grid.html
@@ -2,15 +2,15 @@
 
 	<div class="flex flex-wrap mhn1">
 		<div class="w-100 w-50-ns ph1-ns">
-			<img src="/img/products/products-grid3.jpg" alt="A close-up of a paper filter filled with ground coffee">
+			<img src="{{ .image1.image }}" alt="{{ .image1.alt }}">
 		</div>
 
 		<div class="w-100 w-50-ns ph1-ns">
-			<img src="/img/products/products-grid2.jpg" alt="A green cup of a coffee on a wooden table">
+			<img src="{{ .image2.image }}" alt="{{ .image2.alt }}">
 		</div>
 
 		<div class="w-100 ph1-ns">
-			<img src="/img/products/products-grid1.jpg" alt="Coffee beans">
+			<img src="{{ .image3.image }}" alt="{{ .image3.alt }}">
 		</div>
 	</div>
 
diff --git a/site/layouts/partials/table-column.html b/site/layouts/partials/table-column.html
index 5713f65..7d2f49e 100644
--- a/site/layouts/partials/table-column.html
+++ b/site/layouts/partials/table-column.html
@@ -13,15 +13,12 @@
 
 	<!-- Features -->
 	<ul>
+		{{ $itemCount := len .items }}
+		{{ range $index, $item := .items }}
 		<li>
-			<p class="pb2 mb2 divider-grey">{{.item1}}</p>
-		</li>
-		<li>
-			<p class="pb2 mb2 divider-grey">{{.item2}}</p>
-		</li>
-		<li>
-			<p>{{.item3}}</p>
+			<p class="{{ if ne (add 1 $index) $itemCount }}pb2 mb2 divider-grey{{ end }}">{{ $item }}</p>
 		</li>
+		{{ end }}
 	</ul>
 
 </div>
diff --git a/site/layouts/partials/table.html b/site/layouts/partials/table.html
index 95f639b..2b521a9 100644
--- a/site/layouts/partials/table.html
+++ b/site/layouts/partials/table.html
@@ -3,21 +3,12 @@
 	<div class="mw7 center">
 
 		<h2 class="f2 b lh-title mb3">{{.heading}}</h1>
-		<p class="mw6">{{.text}}</p>
+		<p class="mw6">{{.description}}</p>
 
 		<div class="flex-ns mhn2-ns mw7">
-
-			<div class="w-33-ns ph2">{{ partial "table-column" (dict "plan" "Small" "price" "50" "description" "Perfect for the drinker who likes to enjoy 1-2 cups per day." "item1" "3 lbs of coffee per month" "item2" "Green or roasted beans" "item3" "One or two varieties of beans") }}
-			</div>
-
-			<div class="w-33-ns ph2">
-				{{ partial "table-column" (dict "plan" "Big" "price" "80" "description" "Great for avid drinkers, java-nsoving couples and bigger crowds" "item1" "6 lbs of coffee per month" "item2" "Green or roasted beans" "item3" "Up to 4 different varieties of beans") }}
-			</div>
-
-			<div class="w-33-ns ph2">
-				{{ partial "table-column" (dict "plan" "Custom" "price" "?" "description" "Want a few tiny batches from different varieties? Try our custom plan" "item1" "Whatever you need" "item2" "Green or roasted beans" "item3" "Unlimited varieties") }}
-			</div>
-
+			{{ range .plans }}
+			<div class="w-33-ns ph2">{{ partial "table-column" . }}</div>
+			{{ end }}
 		</div>
 
 	</div>
diff --git a/site/layouts/products/single.html b/site/layouts/products/single.html
index 162c195..bf430ca 100644
--- a/site/layouts/products/single.html
+++ b/site/layouts/products/single.html
@@ -1,29 +1,32 @@
 {{ partial "head" . }}
 {{ partial "nav" . }}
 
-{{ partial "jumbotron" (dict "imageUrl" "/img/products/jumbotron.jpg" "title" "Products") }}
+{{ partial "jumbotron" (dict "imageUrl" .Params.image "title" .Title) }}
 
-{{ partial "4-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." "svg3" "/img/illustrations/tutorials.svg" "text3" "Love a great cup of coffee, but never knew how to make one? Bought a fancy new Chemex but have no clue how to use it? Don't worry, we’re here to help. You can schedule a custom 1-on-1 consultation with our baristas to learn anything you want to know about coffee roasting and brewing. Email us or call the store for details." "svg4" "/img/illustrations/meeting-space.svg" "text4" "We believe that good coffee has the power to bring people together. That’s why we decided to turn a corner of our shop into a cozy meeting space where you can hang out with fellow coffee lovers and learn about coffee making techniques. All of the artwork on display there is for sale. The full price you pay goes to the artist."  ) }}
+{{ partial "4-up" .Params.intro }}
 
+
+{{ with .Params.main }}
 <div class="mw7 center">
   <div class="mw6 ph3 mb3">
-    <h3 class="f3 b lh-title mb2">Great coffee with no compromises</h3>
-    <p>We hold our coffee to the highest standards from the shrub to the cup. That’s why we’re meticulous and transparent about each step of the coffee’s journey. We personally visit each farm to make sure the conditions are optimal for the plants, farmers and the local environment.</p>
+    <h3 class="f3 b lh-title mb2">{{ .heading }}</h3>
+    <p>{{ .description }}</p>
   </div>
 </div>
 
 <!-- Image grid -->
 {{ partial "image-grid" . }}
+{{ end }}
 
 <div class="pb4">
-  {{ partial "blockquote" (dict "quote" "“The first time I tried Kaldi’s coffee, I couldn’t even believe that was the same thing I’ve been drinking every morning.”" "author" "Elisabeth Kaurismäki") }}
-
-  {{ partial "blockquote" (dict "quote" "“Kaldi is the place to go if you want the best quality coffee. I love their stance on empowering farmers and transparency.”" "author" "Philipp Trommler") }}
+  {{ range .Params.testimonials }}
+    {{ partial "blockquote" . }}
+  {{ end }}
 </div>
 
 <!-- Full-width image -->
-<img src="/img/products/products-full-width.jpg" alt="" class="db w-100">
+<img src="{{ .Params.full_image }}" alt="" class="db w-100">
 
-{{ partial "table" (dict "heading" "Monthly subscriptions" "text" "We make it easy to make great coffee a part of your life. Choose one of our monthly subscription plans to receive great coffee at your doorstep each month. Contact us about more details and payment info.") }}
+{{ partial "table" .Params.pricing }}
 
 {{ partial "footer" . }}
diff --git a/site/static/admin/config.yml b/site/static/admin/config.yml
index 4f6fe4a..374bf44 100644
--- a/site/static/admin/config.yml
+++ b/site/static/admin/config.yml
@@ -1,6 +1,6 @@
 backend:
   name: github
-  repo: darindimitroff/netlify-cms-template # Path to your Github repository
+  repo: netlify-templates/kaldi-hugo-cms-template # Path to your Github repository
   branch: master # Branch to update (master by default)
 
 media_folder: "dist/img" # Folder where user uploaded files should go
@@ -9,9 +9,26 @@ public_folder: "dist" # CMS now knows 'source' is the public folder and will str
 collections: # A list of collections the CMS should be able to edit
   - name: "post" # Used in routes, ie.: /admin/collections/:slug/edit
     label: "Post" # Used in the UI, ie.: "New Post"
-    folder: "/site/content/post" # The path to the folder where the documents are stored
+    folder: "site/content/post" # The path to the folder where the documents are stored
     create: true # Allow users to create new documents in this collection
     fields: # The fields each document in this collection have
       - {label: "Title", name: "title", widget: "string"}
       - {label: "Publish Date", name: "date", widget: "datetime"}
       - {label: "Body", name: "body", widget: "markdown"}
+  - 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}