Merge pull request jdan#39 from jdan/custom-templates

Custom templates
twilson63 · Sep 10, 2013 · 338f313 · 338f313
2 parents 0cd846a + f530fcf
commit 338f313
Show file tree

Hide file tree

Showing 7 changed files with 99 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -90,6 +90,8 @@ the following fields.
 * **controls**: Option whether or not arrow buttons should be included (default: *true*)
 * **agenda**: Option whether or not to insert an agenda slide (similar to a table of contents) after the title (default: *false*)
 * **encoding**: A specified content encoding (default: *utf-8*)
+* **template**: An absolute path specifying a template in which to render the slides (default:
+ *default.css*)
 
 If author is included, the following slide will be automatically inserted
 at the end of your presentation:
@@ -129,6 +131,37 @@ To navigate the slideshow:
 
 Or click the buttons
 
+### Templates
+
+By default, cleaver slides are rendered in the following template:
+
+```html
+<div id="wrapper">
+  {{#slides}}
+    <section class="slide">{{{.}}}</section>
+  {{/slides}}
+</div>
+{{#controls}}
+  <div id="controls">
+    <div id="prev">&larr;</div>
+    <div id="next">&rarr;</div>
+  </div>
+{{/controls}}
+
+<script type="text/javascript">
+  {{{navigation}}}
+</script>
+```
+
+Power users may wish to render into custom templates. To do so, simply copy the following file
+and specify a template (with an absolute path) like so:
+
+```yaml
+title: Basic Example
+output: basic.html
+template: /Users/jordan/Slides/example/example.mustache
+```
+
 ### Contributing
 
 * Fork it

diff --git a/lib/cleaver.js b/lib/cleaver.js
@@ -13,9 +13,10 @@ function Cleaver(file) {
 
   // TODO: make these constants?
   this.templates = {
-    main: 'layout.mustache',
+    layout: 'layout.mustache',
     author: 'author.mustache',
-    agenda: 'agenda.mustache'
+    agenda: 'agenda.mustache',
+    slides: 'default.mustache'
   };
 
   this.resources = {
@@ -60,13 +61,25 @@ Cleaver.prototype._parseDocument = function () {
         self.slides.splice(1, 0, self._renderAgendaSlide(slices));
       }
 
+      var promises = [];
+
       // maybe load an external stylesheet
       if (self.metadata.style) {
-        return helper.loadSingle(self.metadata.style)
+        promises.push(helper.loadSingle(self.metadata.style)
           .then(function (data) {
             self.external.loaded.style = data;
-          })
+          }));
+      }
+
+      // maybe load an external template
+      if (self.metadata.template) {
+        promises.push(helper.loadSingle(self.metadata.template)
+          .then(function (data) {
+            self.templates.loaded.slides = data;
+          }));
       }
+
+      return Q.all(promises);
     });
 }
 
@@ -88,24 +101,30 @@ Cleaver.prototype._loadAssets = function () {
  */
 Cleaver.prototype._renderSlideshow = function () {
   var putControls = this.metadata.controls || (this.metadata.controls === undefined);
-  var outputLocation = this.metadata.output || path.basename(this.file, '.md') + '-cleaver.html';
+
+  // Render the slides in a template (maybe as specified by the user)
+  var slideshow = mustache.render(this.templates.loaded.slides, {
+    slides: this.slides,
+    controls: putControls,
+    // TODO: uglify navigation.js?
+    navigation: this.resources.loaded.navigation
+  });
 
   // TODO: handle defaults gracefully
   var title = this.metadata.title || 'Untitled';
   var encoding = this.metadata.encoding || 'utf-8';
 
-  var slideData = {
-    slides: this.slides,
+  var layoutData = {
+    slideshow: slideshow,
     title: title,
     encoding: encoding,
-    controls: putControls,
     style: this.resources.loaded.style,
-    externalStyle: this.external.loaded.style,
-    // TODO: uglify navigation.js?
-    navigation: this.resources.loaded.navigation
+    externalStyle: this.external.loaded.style
   };
 
-  return helper.save(outputLocation, mustache.render(this.templates.loaded.main, slideData));
+  // Render the main layout
+  var outputLocation = this.metadata.output || path.basename(this.file, '.md') + '-cleaver.html';
+  return helper.save(outputLocation, mustache.render(this.templates.loaded.layout, layoutData));
 }
 
 

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "cleaver",
   "preferGlobal": true,
-  "version": "0.2.0",
+  "version": "0.2.5",
   "author": "Jordan Scales <[email protected]>",
   "description": "30-second slideshows for hackers",
   "keywords":[

diff --git a/resources/default.css b/resources/default.css
@@ -10,16 +10,28 @@ body {
   overflow: hidden;
   margin: 80px auto 0 auto;
   box-shadow: 3px 3px 3px #666;
-  background-color: #eee;
 }
 
+/* styles for print layout */
+#wrapper.nohide {
+  overflow: auto;
+  height: auto;
+  box-shadow: none;
+}
+
+#wrapper.nohide .slide {
+  margin-bottom: 30px;
+}
+/* /styles */
+
 .slide {
   width: auto;
   height: 540px;
   padding: 30px;
   font-weight: 200;
   font-size: 32px;
   line-height: 44px;
+  background-color: #eee;
 }
 
 #controls {

diff --git a/templates/default.mustache b/templates/default.mustache
@@ -0,0 +1,15 @@
+<div id="wrapper">
+  {{#slides}}
+    <section class="slide">{{{.}}}</section>
+  {{/slides}}
+</div>
+{{#controls}}
+  <div id="controls">
+    <div id="prev">&larr;</div>
+    <div id="next">&rarr;</div>
+  </div>
+{{/controls}}
+
+<script type="text/javascript">
+  {{{navigation}}}
+</script>
diff --git a/templates/layout.mustache b/templates/layout.mustache
@@ -8,19 +8,6 @@
   </style>
 </head>
 <body>
-  <div id="wrapper">
-    {{#slides}}
-      <section class="slide">{{{.}}}</section>
-    {{/slides}}
-  </div>
-  {{#controls}}
-    <div id="controls">
-      <div id="prev">&larr;</div>
-      <div id="next">&rarr;</div>
-    </div>
-  {{/controls}}
-  <script type="text/javascript">
-    {{{navigation}}}
-  </script>
+  {{{slideshow}}}
 </body>
 </html>
diff --git a/templates/print.mustache b/templates/print.mustache
@@ -0,0 +1,5 @@
+<div id="wrapper" class="nohide">
+  {{#slides}}
+    <section class="slide">{{{.}}}</section>
+  {{/slides}}
+</div>