diff options
| -rw-r--r-- | site/content/values.md | 52 | ||||
| -rw-r--r-- | site/layouts/values/single.html | 17 | ||||
| -rw-r--r-- | site/static/admin/config.yml | 9 | ||||
| -rw-r--r-- | src/js/cms-preview-templates/components/jumbotron.js | 24 | ||||
| -rw-r--r-- | src/js/cms-preview-templates/products.js | 22 | ||||
| -rw-r--r-- | src/js/cms-preview-templates/values.js | 46 | ||||
| -rw-r--r-- | src/js/cms.js | 2 |
7 files changed, 140 insertions, 32 deletions
diff --git a/site/content/values.md b/site/content/values.md index 3dcd089..98bf92c 100644 --- a/site/content/values.md +++ b/site/content/values.md @@ -1,5 +1,47 @@ -+++ -title = "Values" -type = "values" -page="/values.html" -+++ +--- +title: "Values" +type: "values" +page: "/values.html" +image: /img/about-jumbotron.jpg +values: + - heading: "Shade-grown coffee" + text: > + Coffee is a small tree or shrub that grows in the forest + understory in its wild form, and traditionally was grown + commercially under other trees that provided shade. The + forest-like structure of shade coffee farms provides habitat for + a great number of migratory and resident species. + imageUrl: "/img/about-shade-grown.jpg" + - heading: "Single origin" + text: > + Single-origin coffee is coffee grown within a single known + geographic origin. Sometimes, this is a single farm or a + specific collection of beans from a single country. The name of + the coffee is then usually the place it was grown to whatever + degree available. + imageUrl: "/img/about-single-origin.jpg" + - heading: "Sustainable farming" + text: > + Sustainable agriculture is farming in sustainable ways based on + an understanding of ecosystem services, the study of + relationships between organisms and their environment. What + grows where and how it is grown are a matter of choice and + careful consideration for nature and communities. + imageUrl: "/img/about-sustainable-farming.jpg" + - heading: "Direct sourcing" + text: > + We want to truly empower the communities that bring amazing + coffee to you. That’s why we reinvest 20% of our profits into + farms, local businesses and schools everywhere our coffee is + grown. You can see the communities grow and learn more about + coffee farming on our blog. + imageUrl: "/img/about-direct-sourcing.jpg" + - heading: "Reinvest profits" + text: > + We want to truly empower the communities that bring amazing + coffee to you. That’s why we reinvest 20% of our profits into + farms, local businesses and schools everywhere our coffee is + grown. You can see the communities grow and learn more about + coffee farming on our blog. + imageUrl: "/img/about-reinvest-profits.jpg" +--- diff --git a/site/layouts/values/single.html b/site/layouts/values/single.html index 552922a..9b6fa13 100644 --- a/site/layouts/values/single.html +++ b/site/layouts/values/single.html @@ -1,18 +1,17 @@ {{ partial "head" . }} {{ partial "nav" . }} -{{ partial "jumbotron" (dict "imageUrl" "/img/about/jumbotron.jpg" "title" "Values") }} +{{ partial "jumbotron" (dict "imageUrl" .Params.image "title" .Title) }} <div class="mw7 center ph3 pt4"> - {{ partial "media-block" (dict "heading" "Shade-grown coffee" "text" "Coffee is a small tree or shrub that grows in the forest understory in its wild form, and traditionally was grown commercially under other trees that provided shade. The forest-like structure of shade coffee farms provides habitat for a great number of migratory and resident species." "imageUrl" "/img/about/shade-grown.jpg") }} + {{ range $index, $element := .Params.values }} + {{ if modBool $index 2 }} + {{ partial "media-block" $element }} + {{ else }} + {{ partial "media-block-reverse" $element }} + {{ end }} + {{ end }} - {{ partial "media-block-reverse" (dict "heading" "Single origin" "text" "Single-origin coffee is coffee grown within a single known geographic origin. Sometimes, this is a single farm or a specific collection of beans from a single country. The name of the coffee is then usually the place it was grown to whatever degree available." "imageUrl" "/img/about/single-origin.jpg") }} - - {{ partial "media-block" (dict "heading" "Sustainable farming" "text" "Sustainable agriculture is farming in sustainable ways based on an understanding of ecosystem services, the study of relationships between organisms and their environment. What grows where and how it is grown are a matter of choice and careful consideration for nature and communities." "imageUrl" "/img/about/sustainable-farming.jpg") }} - - {{ partial "media-block-reverse" (dict "heading" "Direct sourcing" "text" "Direct trade is a form of sourcing practiced by some coffee roasters. Advocates of direct trade practices promote direct communication and price negotiation between buyer and farmer, along with systems that encourage and incentivize quality." "imageUrl" "/img/about/direct-sourcing.jpg") }} - - {{ partial "media-block" (dict "heading" "Reinvest profits" "text" "We want to truly empower the communities that bring amazing coffee to you. That’s why we reinvest 20% of our profits into farms, local businesses and schools everywhere our coffee is grown. You can see the communities grow and learn more about coffee farming on our blog." "imageUrl" "/img/about/reinvest-profits.jpg") }} </div> {{ partial "footer" . }} diff --git a/site/static/admin/config.yml b/site/static/admin/config.yml index 2edc318..3c8fed4 100644 --- a/site/static/admin/config.yml +++ b/site/static/admin/config.yml @@ -48,4 +48,11 @@ 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: values} - {label: Page, name: page, widget: hidden, default: "/values.html"} - - {label: Body, name: body, widget: markdown} + - {label: Image, name: image, widget: image} + - label: Values + name: values + widget: list + fields: + - {label: Heading, name: heading, widget: string} + - {label: Text, name: text, widget: text} + - {label: Image, name: imageUrl, widget: image} diff --git a/src/js/cms-preview-templates/components/jumbotron.js b/src/js/cms-preview-templates/components/jumbotron.js new file mode 100644 index 0000000..cb14df9 --- /dev/null +++ b/src/js/cms-preview-templates/components/jumbotron.js @@ -0,0 +1,24 @@ +import React from "react"; + +export default class Jumbotron extends React.Component { + render() { + const {image, title} = this.props; + return <div> + <div className="pv5 pv6-l ph3 bg-center cover" style={{ + backgroundImage: image && `url(${image})` + }}> + <div className="mw7 center ph3"> + <div className="db mb3"> + <div className="mw7 relative bg-fix-primary mb3"> + <h1 className="f2 f1-l b di lh-title mb3 white mw6 bg-primary"> + { title } + </h1> + </div> + <div className="mw7 relative bg-fix-primary"> + </div> + </div> + </div> + </div> + </div>; + } +} diff --git a/src/js/cms-preview-templates/products.js b/src/js/cms-preview-templates/products.js index 547ff33..4316c7d 100644 --- a/src/js/cms-preview-templates/products.js +++ b/src/js/cms-preview-templates/products.js @@ -1,9 +1,11 @@ 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, widgetFor} = this.props; + 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 @@ -12,21 +14,7 @@ export default class PostPreview extends React.Component { } return <div> - <div className="pv5 pv6-l ph3 bg-center cover" style={{ - backgroundImage: image && `url(${image})` - }}> - <div className="mw7 center ph3"> - <div className="db mb3"> - <div className="mw7 relative bg-fix-primary mb3"> - <h1 className="f2 f1-l b di lh-title mb3 white mw6 bg-primary"> - { entry.getIn(["data", "title"]) } - </h1> - </div> - <div className="mw7 relative bg-fix-primary"> - </div> - </div> - </div> - </div> + <Jumbotron image={image} title={entry.getIn(["data", "title"])} /> <div className="bg-off-white pv4"> <div className="ph3 mw7 center"> @@ -34,7 +22,7 @@ export default class PostPreview extends React.Component { <p className="mb4 mw6">{entry.getIn(["data", "intro", "description"])}</p> <div className="flex-ns flex-wrap mhn2-ns mb3"> - {(entry.getIn(["data","intro", "blurbs"]) || []).map((blurb, index) => <div className="ph2-ns w-50-ns mb4" key={index}> + {(entry.getIn(["data", "intro", "blurbs"]) || []).map((blurb, index) => <div className="ph2-ns w-50-ns mb4" key={index}> <img src={blurb.get("image") && getAsset(blurb.get("image"))} alt="" className="center db mb3" style={{width: "240px"}}/> <p>{blurb.get("text")}</p> </div>)} diff --git a/src/js/cms-preview-templates/values.js b/src/js/cms-preview-templates/values.js new file mode 100644 index 0000000..173d0c9 --- /dev/null +++ b/src/js/cms-preview-templates/values.js @@ -0,0 +1,46 @@ +import React from "react"; +import { List } from 'immutable'; + +import Jumbotron from "./components/jumbotron"; + +const MediaBlock = ({heading, text, imageUrl, reverse}) => { + const imageContainerClassName = reverse + ? "ph3-m w-50-m" + : "ph3-m w-50-m order-last-m"; + return <div className="flex-m mhn3-m mb4"> + <div className={imageContainerClassName}> + <img src={imageUrl} alt="" className="db mb2" /> + </div> + <div className="ph3-m w-50-m"> + <h3 className="f3 b lh-title mb1">{heading}</h3> + <p>{text}</p> + </div> + </div>; +}; + +export default class ValuesPreview 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; + } + + const entryValues = entry.getIn(["data", "values"]); + const values = entryValues ? entryValues.toJS() : []; + + return <div> + <Jumbotron image={image} title={entry.getIn(["data", "title"])} /> + <div className="bg-off-white pv4"> + <div className="mw7 center ph3 pt4"> + {values.map(({text, heading, imageUrl}, i) => + <MediaBlock key={i} text={text} heading={heading} imageUrl={imageUrl} reverse={i % 2 === 0} /> + )} + </div> + </div> + </div>; + } +} diff --git a/src/js/cms.js b/src/js/cms.js index 8502ed0..5bc6e65 100644 --- a/src/js/cms.js +++ b/src/js/cms.js @@ -3,6 +3,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"; // Example of creating a custom color widget @@ -20,4 +21,5 @@ class ColorControl extends React.Component { CMS.registerPreviewStyle("/css/main.css"); CMS.registerPreviewTemplate("post", PostPreview); CMS.registerPreviewTemplate("products", ProductsPreview); +CMS.registerPreviewTemplate("values", ValuesPreview); CMS.registerWidget("color", ColorControl); |