diff options
| -rw-r--r-- | site/content/contact.md | 26 | ||||
| -rw-r--r-- | site/layouts/contact/single.html | 24 | ||||
| -rw-r--r-- | site/static/admin/config.yml | 11 | ||||
| -rw-r--r-- | src/js/cms-preview-templates/contact.js | 28 | ||||
| -rw-r--r-- | src/js/cms.js | 2 |
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); |