Move Contact page into the CMS

5 files changed, 70 insertions, 21 deletions

diff --git a/site/content/contact.md b/site/content/contact.md
index fd0b607..2e3c24e 100644
--- a/site/content/contact.md
+++ b/site/content/contact.md
@@ -1,5 +1,21 @@
-+++
-title = "Contact"
-type = "contact"
-page="/contact.html"
-+++
+---
+title: "Contact"
+type: "contact"
+page: "/contact.html"
+logo: "/img/logo.svg"
+contact_entries:
+  - heading: Location
+    text: "3153 Lynn Avenue, South San Francisco, California 94080"
+  - heading: Working hours
+    text: "Monday – Saturday: 9AM – 7PM We’re closed on Sundays"
+---
+
+We’d love to get in touch with you and hear your ideas and
+questions. We strive to grow and improve constantly and your feedback
+is valuable for us.
+
+<h3 class="f4 b lh-title mb2">How can I get…?</h3>
+
+You can also use the form below for any inquiries about coffee
+availability, monthly subscriptions and scheduling a 1-on-1 session
+with our baristas. Don’t be shy, drop us a line!
diff --git a/site/layouts/contact/single.html b/site/layouts/contact/single.html
index 07e5ce4..205d92e 100644
--- a/site/layouts/contact/single.html
+++ b/site/layouts/contact/single.html
@@ -5,25 +5,17 @@
 <div class="ph3 bg-off-white">
 	<div class="center mw6 pv3">
 
-		<img src="/img/logo.svg" alt="" class="db w4 center pv4">
+		<img src="{{ .Params.logo }}" alt="" class="db w4 center pv4">
 
-		<p>We’d love to get in touch with you and hear your ideas and questions. We strive to grow and improve constantly and your feedback is valuable for us.</p>
-
-		<h3 class="f4 b lh-title mb2">How can I get…?</h3>
-		<p>You can also use the form below for any inquiries about coffee availability, monthly subscriptions and scheduling a 1-on-1 session with our baristas. Don’t be shy, drop us a line!</p>
+		{{ .Content }}
 
 		<div class="flex-ns mb3">
-
-			<div>
-				<h4 class="f4 b lh-title mb2 primary">Location</h4>
-				<p>3153 Lynn Avenue, South San Francisco, California 94080</p>
-			</div>
-
-			<div>
-				<h4 class="f4 b lh-title mb2 primary">Working hours</h4>
-				<p>Monday – Saturday: 9AM – 7PM We’re closed on Sundays</p>
-			</div>
-
+	        	{{ range .Params.contact_entries }}
+				<div>
+					<h4 class="f4 b lh-title mb2 primary">{{ .heading }}</h4>
+					<p>{{ .text }}</p>
+				</div>
+			{{ end }}
 		</div>
 
 		{{ partial "contact-form" . }}
diff --git a/site/static/admin/config.yml b/site/static/admin/config.yml
index 3c8fed4..cdb089e 100644
--- a/site/static/admin/config.yml
+++ b/site/static/admin/config.yml
@@ -25,7 +25,18 @@ collections: # A list of collections the CMS should be able to edit
           - {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
+            name: contact_entries
+            widget: list
+            fields:
+              - label: Heading
+                name: heading
+                widget: string
+              - label: Text
+                name: text
+                widget: text
       - file: "site/content/products.md"
         label: "Products Page"
         name: "products"
diff --git a/src/js/cms-preview-templates/contact.js b/src/js/cms-preview-templates/contact.js
new file mode 100644
index 0000000..dea318c
--- /dev/null
+++ b/src/js/cms-preview-templates/contact.js
@@ -0,0 +1,28 @@
+import React from "react";
+
+const ContactEntry = ({heading, text}) =>
+  <div>
+    <h4 className="f4 b lh-title mb2 primary">{ heading }</h4>
+    <p>{ text }</p>
+  </div>;
+
+const ContactEntries = ({data}) => data && data.length > 0
+    ? <div className="flex-ns mb3">
+      {data.map(({heading, text}) => <ContactEntry heading={heading} text={text} />)}
+    </div>
+    : "";
+
+export default class ContactPreview extends React.Component {
+  render() {
+    const {entry, getAsset, widgetFor} = this.props;
+    const entryContactEntries = entry.getIn(["data", "contact_entries"]);
+    const contactEntries = entryContactEntries ? entryContactEntries.toJS() : [];
+    return <div className="ph3 bg-off-white">
+      <img src={getAsset(entry.getIn(["data", "logo"]))} alt="" className="db w4 center pv4" />
+      <div className="center mw6 pv3">
+        { widgetFor("body") }
+        <ContactEntries data={contactEntries} />
+      </div>
+    </div>;
+  }
+}
diff --git a/src/js/cms.js b/src/js/cms.js
index 5bc6e65..3f018b9 100644
--- a/src/js/cms.js
+++ b/src/js/cms.js
@@ -4,6 +4,7 @@ import CMS from "netlify-cms";
 import PostPreview from "./cms-preview-templates/post";
 import ProductsPreview from "./cms-preview-templates/products";
 import ValuesPreview from "./cms-preview-templates/values";
+import ContactPreview from "./cms-preview-templates/contact";
 
 
 // Example of creating a custom color widget
@@ -22,4 +23,5 @@ CMS.registerPreviewStyle("/css/main.css");
 CMS.registerPreviewTemplate("post", PostPreview);
 CMS.registerPreviewTemplate("products", ProductsPreview);
 CMS.registerPreviewTemplate("values", ValuesPreview);
+CMS.registerPreviewTemplate("contact", ContactPreview);
 CMS.registerWidget("color", ColorControl);