Add proxies to products Add product layout Add helper to convert yaml to markdown

Tom Rutgers committed Aug 18, 2018

commit 246ad921e59d04e1db2acfa83cc824e3eb5f0b93

config.rb +8 -8

@@	@@ -25,6 +25,7 @@ page '/*.json', layout: false
	page '/*.txt', layout: false
	page "/partials/*", layout: false
	page "/admin/*", layout: false
+	page "/products/*", layout: 'layout'


	activate :blog do \|blog\|
@@	@@ -35,20 +36,16 @@ end
	#Use pretty urls
	activate :directory_indexes

-
	# With alternative layout
	# page '/path/to/file.html', layout: 'other_layout'

	# Proxy pages
	# https://middlemanapp.com/advanced/dynamic-pages/

-	# proxy(
-	# '/this-page-has-no-template.html',
-	# '/template-file.html',
-	# locals: {
-	# which_fake_page: 'Rendering a fake page with a local variable'
-	# },
-	# )
+	data.products.each do \|product\|
+	proxy "/products/#{product[1].title.parameterize}/", "/product.html", locals: {product: product[1]}, ignore: true
+
+	end

	# Helpers
	# Methods defined in the helpers block are available in templates
@@	@@ -65,6 +62,9 @@ helpers do
	link_to(link_text, url, options)
	end

+	def markdown(content)
+	Tilt['markdown'].new { content }.render
+	end
	end

	# Build-specific configuration

data/products/caffea-congensis.yml +2 -2

@@	@@ -1,6 +1,6 @@
-	title: Caffea Congensis
+	title: Coffea Congensis
	date: 2018-08-12T13:00:49.366Z
-	image: /images/uploads/product-01.jpg
+	image: /images/uploads/product-01.png
	weight:
	amount: '0.5'
	price:

data/products/caffea-liberica.yml +2 -2

@@	@@ -1,6 +1,6 @@
-	title: Caffea Liberica
+	title: Coffea Liberica
	date: 2018-08-17T22:10:49.366Z
-	image: /images/uploads/product-01.jpg
+	image: /images/uploads/product-01.png
	weight:
	amount: '0.5'
	price:

data/products/coffea-robusta.yml +1 -1

@@	@@ -1,6 +1,6 @@
	title: Coffea Robusta
	date: 2018-08-17T22:54:12.263Z
-	image: /images/uploads/product-01.jpg
+	image: /images/uploads/product-01.png
	weight:
	amount: '0.5'
	unit: kg

data/products/coffee-arabica.yml +1 -1

@@	@@ -1,6 +1,6 @@
	title: Coffea Arabica
	date: 2018-08-17T22:42:07.084Z
-	image: /images/uploads/product-01.jpg
+	image: /images/uploads/product-01.png
	weight:
	amount: '0.5'
	unit: kg

source/images/uploads/product-01.jpg +0 -0

source/images/uploads/product-01.png +0 -0

source/product.html.slim +16 -0

@@	@@ -0,0 +1,16 @@
+	.product-detail
+	.image style=background_image(image_path(product.image))
+	.content
+	.meta
+	h1 = product.title
+
+	.weight
+	- weight = product.weight.unit \|\| 'kg'
+	span = product.weight.amount + weight
+
+	.price
+	- currency = product.price.currency \|\| '€'
+	span = currency + product.price.amount
+
+	.body
+	= markdown product.body
	\ No newline at end of file

source/stylesheets/all.css.scss +1 -0

@@	@@ -14,6 +14,7 @@

	@import 'demo/products/products';
	@import 'demo/products/product';
+	@import 'demo/products/product-detail';

	@import 'demo/homepage/hero';
	@import 'demo/homepage/story';

source/stylesheets/demo/base/_colors.scss +3 -1

@@	@@ -3,4 +3,6 @@ $secondary-color: rgba(112,93,86, 1);

	$text-color: rgba(51,51,51, 1);

-	$background-color-light: rgba(239,237,242, 1)
+	$background-primary-color: rgba(239,237,242, 1);
+	$background-secondary-color: rgba(213,226,226, 1);
+

source/stylesheets/demo/base/_typography.scss +0 -1

@@	@@ -30,7 +30,6 @@ h3 {
	@media screen and (max-width: $screen-md-max){
	h1 {
	font-size: 48px;
-	padding-top: 15%;
	}
	}

source/stylesheets/demo/homepage/_hero.scss +1 -1

@@	@@ -5,7 +5,7 @@
	padding-bottom: 42.1875%;
	background-size: cover;
	background-position: center right;
-	background-color: rgba(214,227,227, 1);
+	background-color: $background-secondary-color;
	.caption {
	@extend %container;
	}

source/stylesheets/demo/homepage/_story.scss +5 -0

@@	@@ -24,6 +24,11 @@
	@media screen and(max-width: $screen-xs-max){
	padding-top: 30px;
	padding-bottom: 30px;
+
+	p {
+	font-size: 16px;
+	line-height: 24px;
+	}
	}
	}
	}
	\ No newline at end of file

source/stylesheets/demo/products/_product-detail.scss +89 -0

@@	@@ -0,0 +1,89 @@
+	.product-detail{
+	position: relative;
+	padding-top: 80px;
+	width: calc(100vw - (100vw - 100%));
+	height: calc(100vh - 80px);
+
+	.image{
+	position: absolute;
+	width: 50%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	background-color: $background-secondary-color;
+	background-size: contain;
+	background-position: center center;
+	background-repeat: no-repeat
+	}
+
+	.content {
+	position: absolute;
+	width: 50%;
+	height: 100%;
+	top: 0;
+	left: 50%;
+	}
+
+	.meta, .body {
+	padding: 60px;
+	}
+
+	.body {
+	p {
+	margin-bottom: 15px;
+	}
+	}
+	.meta {
+	background-color: $background-primary-color;
+
+	h1 {
+	margin-top: 0;
+	}
+	}
+
+	.price, .weight {
+	display: inline-block;
+	font-weight: bold;
+	font-size: 24px;
+	}
+
+	.price {
+	margin-left: 30px;
+	color: $primary-color;
+	}
+
+	@media screen and (max-width: $screen-md-max){
+	.image {
+	width: 40%;
+	}
+
+	.content {
+	width: 60%;
+	left: 40%;
+	}
+	}
+
+	@media screen and (max-width: $screen-sm-max){
+	width: 100%;
+	height: auto;
+	padding: 0;
+	.image {
+	position: relative;
+	width: 100%;
+	height: 0;
+	padding-bottom: 56.25%;
+	}
+
+	.content {
+	position: relative;
+	width: 100%;
+	height: auto;
+	left: auto;
+	}
+	}
+	@media screen and (max-width: $screen-sm-max){
+	.meta, .body {
+	padding: 15px;
+	}
+	}
+	}
	\ No newline at end of file

source/stylesheets/demo/products/_products.scss +1 -1

@@	@@ -1,7 +1,7 @@
	.products {
	padding-top: 60px;
	padding-bottom: 60px;
-	background-color: $background-color-light;
+	background-color: $background-primary-color;

	h2 {
	margin: 0 0 30px;