From 665598c6d4d16a0cb3ac8a9eecc3a24cc40ca225 Mon Sep 17 00:00:00 2001 From: Benaiah Mischenko Date: Wed, 6 Dec 2017 16:54:28 -0800 Subject: Move Values page into the CMS --- site/content/values.md | 52 +++++++++++++++++++--- site/layouts/values/single.html | 17 ++++--- site/static/admin/config.yml | 9 +++- .../cms-preview-templates/components/jumbotron.js | 24 ++++++++++ src/js/cms-preview-templates/products.js | 22 +++------ src/js/cms-preview-templates/values.js | 46 +++++++++++++++++++ src/js/cms.js | 2 + 7 files changed, 140 insertions(+), 32 deletions(-) create mode 100644 src/js/cms-preview-templates/components/jumbotron.js create mode 100644 src/js/cms-preview-templates/values.js 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) }}
- {{ 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") }}
{{ 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
+
+
+
+
+

+ { title } +

+
+
+
+
+
+
+
; + } +} 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
-
-
-
-
-

- { entry.getIn(["data", "title"]) } -

-
-
-
-
-
-
+
@@ -34,7 +22,7 @@ export default class PostPreview extends React.Component {

{entry.getIn(["data", "intro", "description"])}

- {(entry.getIn(["data","intro", "blurbs"]) || []).map((blurb, index) =>
+ {(entry.getIn(["data", "intro", "blurbs"]) || []).map((blurb, index) =>

{blurb.get("text")}

)} 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
+
+ +
+
+

{heading}

+

{text}

+
+
; +}; + +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
+ +
+
+ {values.map(({text, heading, imageUrl}, i) => + + )} +
+
+
; + } +} 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); -- cgit v1.3