Add standard card and using .html for the templates (#3)

* add landscape template and set as a bower project

* new standard card and more improvements

* some fixes

demos/script.js

@@ -2,8 +2,14 @@ const data = {
 	img: {
 		alt: 'demo image'
 	},
-	tag: 'Mrs Moneypenny',
-	heading: 'Japan sells negative yield 10-year bonds',
+	tag: {
+		href: '#',
+		text: 'Mrs Moneypenny'
+	},
+	heading: {
+		href: '#',
+		text: 'Japan sells negative yield 10-year bonds'
+	},
 	datetime: {
 		raw: '2016-02-29T12:35:48Z',
 		formatted: '2016-02-29T12:35:48Z'
@@ -16,7 +22,7 @@ const images = {
 };
 
 ['landscape', 'opinion'].forEach(style => {
-	fetch(`../templates/${style}.mustache`)
+	fetch(`../templates/${style}.html`)
 		.then(res => res.text())
 		.then(source => {
 		const template = Handlebars.compile(source);

templates/landscape.mustache → templates/landscape.html

@@ -4,9 +4,9 @@
 	</div>
 	<div class="o-card__content">
 		<div class="o-card__meta">
-			<a href="#" class="o-card__tag">{{tag}}</a>
+			<a href="{{{tag.href}}}" class="o-card__tag">{{tag.text}}</a>
 		</div>
-		<h2 class="o-card__heading"><a href="#">{{heading}}</a></h2>
+		<h2 class="o-card__heading"><a href="{{{heading.href}}}">{{heading.text}}</a></h2>
 		<time data-o-component="o-date" class="o-date o-card__timestamp" datetime="{{datetime.raw}}">{{datetime.formatted}}</time>
 	</div>
 </div>

templates/opinion.mustache → templates/opinion.html

@@ -2,11 +2,16 @@
 	<div class="o-card__content">
 		<div class="o-card__meta">
 			<div class="o-card__meta-image o-card__meta-image--rounded">
-				<img src="{{{img.src}}}" alt="{{img.alt}}"></img>
+				{{#if img.src}}
+					<img src="{{{img.src}}}" alt="{{img.alt}}"></img>
+				{{else}}
+					<div class="card__quote--left"></div>
+					<div class="card__quote--right"></div>
+				{{/if}}
 			</div>
-			<a href="#" class="o-card__tag">{{tag}}</a>
+			<a href="{{{tag.href}}}" class="o-card__tag">{{tag.text}}</a>
 		</div>
-		<h2 class="o-card__heading"><a href="#">{{heading}}</a></h2>
+		<h2 class="o-card__heading"><a href="{{{heading.href}}}">{{heading.text}}</a></h2>
 		<time data-o-component="o-date" class="o-date o-card__timestamp" datetime="{{datetime.raw}}">{{datetime.formatted}}</time>
 	</div>
 </div>

templates/standard.html

@@ -0,0 +1,9 @@
+<div class="o-card" data-o-component="o-card">
+	<div class="o-card__content">
+		<div class="o-card__meta">
+			<a href="{{{tag.href}}}" class="o-card__tag">{{tag.text}}</a>
+		</div>
+		<h2 class="o-card__heading"><a href="{{{heading.href}}}">{{heading.text}}</a></h2>
+		<time data-o-component="o-date" class="o-date o-card__timestamp" datetime="{{datetime.raw}}">{{datetime.formatted}}</time>
+	</div>
+</div>