Parsing slideshow metadata and rendering author slide

examples/basic.md

@@ -1,8 +1,8 @@
 title: Example
 author:
-  name: Aaron Patterson
-  twitter: @tenderlove
-  url: http://tenderlovemaking.com
+  name: "Aaron Patterson"
+  twitter: "@tenderlove"
+  url: "http://tenderlovemaking.com"
 
 --
 

lib/cleaver.js

@@ -1,7 +1,8 @@
-var fs   = require('fs')
+var fs   = require('fs');
 var Q    = require('q');
 var path = require('path');
 var md   = require('node-markdown').Markdown;
+var yaml = require('js-yaml');
 var mustache = require('mustache');
 
 function Cleaver(options) {
@@ -10,7 +11,8 @@ function Cleaver(options) {
   // filenames which will be used to read in data
   // TODO: refactor templating and static files into its own thing
   this.stylesheetFile = Cleaver.ROOT_DIR + 'styles/default.css';
-  this.templateFile = Cleaver.ROOT_DIR + 'templates/layout.mustache';
+  this.mainTemplateFile = Cleaver.ROOT_DIR + 'templates/layout.mustache';
+  this.authorTemplateFile = Cleaver.ROOT_DIR + 'templates/_author.mustache';
   this.jqueryFile = Cleaver.ROOT_DIR + 'resources/jquery.min.js';
   this.navigationFile = Cleaver.ROOT_DIR + 'resources/navigation.js';
 
@@ -22,9 +24,10 @@ function Cleaver(options) {
   this.document = null;
   this.slides = [];
   this.stylesheets = [];
-  this.template = null;
+  this.mainTemplate = null;
   this.jquery = null;
   this.navigation = null;
+  this.metadata = null;
 }
 
 
@@ -41,26 +44,32 @@ Cleaver.ROOT_DIR = path.normalize(__dirname + '/../');
 Cleaver.prototype._parseDocument = function () {
   var self = this;
 
-  return this._loadSingleAsset(this.documentFile)
-    .then(function (document) {
-      self.document = document;
-      var slices = self._slice(document);
+  return Q.all([
+      this._loadSingleAsset(this.documentFile),
+      this._loadSingleAsset(this.authorTemplateFile)
+    ])
+    .then(function (data) {
+      self.document = data[0];
+      self.authorTemplate = data[1];
+      var slices = self._slice(self.document);
+      self.metadata = yaml.safeLoad(slices[0]);
 
-      // TODO: read metadata from the first section
       for (var i = 1; i < slices.length; i++) {
         self.slides.push(md(slices[i]));
       }
+
+      self.slides.push(self._renderAuthorSlide(self.metadata.author));
     });
 }
 
 
 /**
- * Loads the template, default stylesheet, and any external stylesheets
+ * Loads the templates, default stylesheet, and any external stylesheets
  * as defined by the user.
  */
 Cleaver.prototype._loadAssets = function () {
   var promises = [
-    this._loadSingleAsset(this.templateFile),
+    this._loadSingleAsset(this.mainTemplateFile),
     this._loadSingleAsset(this.jqueryFile),
     this._loadSingleAsset(this.navigationFile),
     this._loadSingleAsset(this.stylesheetFile)
@@ -74,7 +83,7 @@ Cleaver.prototype._loadAssets = function () {
   return Q.all(promises)
     .then(function (data) {
       // TODO: refactor this into its own helper method?
-      self.template = data[0];
+      self.mainTemplate = data[0];
       self.jquery = data[1];
       self.navigation = data[2];
 
@@ -104,17 +113,26 @@ Cleaver.prototype._loadSingleAsset = function (filename) {
 Cleaver.prototype._renderSlideshow = function () {
   var slideData = {
     slides: this.slides,
-    // TODO: read metadata (including author data)
-    title: 'Hello, world',
+    title: this.metadata.title,
     // TODO: read --nocontrols from argv
     controls: true,
     styles: this.stylesheets,
     jquery: this.jquery,
     navigation: this.navigation
-  }
+  };
 
   // TODO: output to --output=????? (default, output.html)
-  console.log(mustache.render(this.template, slideData));
+  console.log(mustache.render(this.mainTemplate, slideData));
+}
+
+
+/**
+ * Renders the author slide
+ * @param {string} authorData The author field of the slideshow metadata
+ * @return {string} The formatted author slide
+ */
+Cleaver.prototype._renderAuthorSlide = function (authorData) {
+  return mustache.render(this.authorTemplate, authorData);
 }
 
 

package.json

@@ -17,6 +17,6 @@
     "mustache": "0.7.0",
     "q": "0.9.6",
     "node-markdown": "0.1.1",
-    "yaml": "0.2.3"
+    "js-yaml": "2.1.0"
   }
 }

styles/default.css

@@ -86,18 +86,19 @@ body {
   line-height: 44px;
 }
 
-.slide.author h1.name {
+.slide .author h1.name {
   font-size: 55px;
-  font-weight: 200px;
+  font-weight: 200;
   text-align: center;
   margin-top: 135px;
   margin-bottom: 30px;
 }
 
-.slide.author h3 {
+.slide .author h3 {
   font-weight: 100;
   text-align: center;
   font-size: 30px;
+  border: none;
 }
 
 a {

templates/_author.mustache

@@ -1,9 +1,9 @@
-<section class="slide author">
+<div class="author">
   <h1 class="name">{{name}}</h1>
   <h3 class="twitter">
     <a href="http://twitter.com/{{{twitter}}}">{{{twitter}}}</a>
   </h3>
   <h3 class="url">
     <a href="{{{url}}}">{{{url}}}</a>
   </h3>
-</section>
+</div>