Merge pull request #72 from jdan/full-bleed

New (full-bleed) slide markup and styling improvements

Author: jdan

README.md

@@ -161,6 +161,43 @@ Template files will automatically override the default templates.
 For more information on themes, check out
 [our documentation](https://github.com/jdan/cleaver/blob/master/docs/themes.md).
 
+## Markup
+
+Cleaver slides are rendered using the following template:
+
+```handlebars
+{{#slides}}
+  <div class="slide{{#hidden}} hidden{{/hidden}}" id="slide-{{id}}">
+    <section class="slide-content">{{{content}}}</section>
+  </div>
+{{/slides}}
+```
+
+And produce the following markup:
+
+```
++-------------------------------+
+| #slide-N                      |
+|     +-------------------+     |
+|     | .slide-content    |     |
+|     |                   |     |
+|     |                   |     |
+|     |                   |     |
+|     |                   |     |
+|     +-------------------+     |
+|                               |
+|                               |
+| (navigation)                  |
++-------------------------------+
+```
+
+**#slide-N** (for example, *#slide-3*) allows you to identify a particular
+full-bleed slide by its position in the slideshow. It extends to the bounds of
+the page.
+
+**.slide-content** is a smaller window which holds the actual content of the
+slide.
+
 ## Slide Types
 
 ### Title slide

docs/options.md

@@ -77,13 +77,6 @@ Displays a small progress bar at the top of your document.
 
 **Default**: true
 
-### agenda
-
-Inserts an agenda (table of contents) slide at the beginning of your
-presentation, based on the titles of your individual slides.
-
-**Default**: false
-
 ### encoding
 
 Content encoding to use on the rendered document.

examples/basic.md

@@ -18,10 +18,7 @@ Content can be written in **Markdown!** New lines no longer need two angle brack
 
 This will be in a separate paragraph.
 
-<img src="http://whatismarkdown.com/workspace/img/logo.gif" alt="Drawing" style="width: 150px;"/>
-
-    ![markdown-logo](logo.gif)
-    <img src="logo.gif" />
+<img src="https://github.global.ssl.fastly.net/images/modules/logos_page/GitHub-Logo.png" width="50%">
 
 [Here's a link](http://google.com).
 

lib/cleaver.js

@@ -19,7 +19,6 @@ function Cleaver(file) {
   this.templates = {
     layout: 'templates/layout.mustache',
     author: 'templates/author.mustache',
-    agenda: 'templates/agenda.mustache',
     slides: 'templates/default.mustache'
   };
 
@@ -67,10 +66,16 @@ Cleaver.prototype.loadDocument = function () {
 Cleaver.prototype.renderSlides = function () {
   var self = this;
   var slices = this.slice(self.external.loaded.document);
+  var i;
+
   this.metadata = yaml.safeLoad(slices[0]) || {};
 
-  for (var i = 1; i < slices.length; i++) {
-    this.slides.push(this.renderSlide(slices[i]));
+  for (i = 1; i < slices.length; i++) {
+    this.slides.push({
+      id: i,
+      hidden: i !== 1,  // first slide is visible
+      content: this.renderSlide(slices[i])
+    });
   }
 
   // insert an author slide (if necessary) at the end
@@ -79,12 +84,12 @@ Cleaver.prototype.renderSlides = function () {
         !this.metadata.author.twitter.match(/^@/)) {
       this.metadata.author.twitter = '@' + this.metadata.author.twitter;
     }
-    this.slides.push(this.renderAuthorSlide(this.metadata.author));
-  }
 
-  // insert an agenda slide (if necessary) as our second slide
-  if (this.metadata.agenda) {
-    this.slides.splice(1, 0, this.renderAgendaSlide(slices));
+    this.slides.push({
+      id: i,
+      hidden: true,
+      content: this.renderAuthorSlide(this.metadata.author)
+    });
   }
 
   return Q.resolve(true);
@@ -223,35 +228,6 @@ Cleaver.prototype.renderAuthorSlide = function (content) {
 };
 
 
-/**
- * Renders the agenda slide.
- *
- * @param {string} slices The set of slices that had been loaded from the input file
- * @return {string} The formatted agenda slide
- */
-Cleaver.prototype.renderAgendaSlide = function (slices) {
-  var titles = [];
-  var firstLine, lastTitle, matches;
-
-  for (var i = 1; i < slices.length; i++) {
-    firstLine = slices[i].split(/(\n|\r)+/)[0];
-    matches = /^(#{3,})\s+(.+)$/.exec(firstLine);
-
-    // Only index non-title slides (begins with 3 ###)
-    if (!matches) {
-      continue;
-    }
-
-    if (lastTitle !== matches[2]) {
-      lastTitle = matches[2];
-      titles.push(lastTitle);
-    }
-  }
-
-  return mustache.render(this.templates.loaded.agenda, titles);
-};
-
-
 /**
  * Returns a chopped up document that's easy to parse.
  *

package.json

@@ -1,7 +1,7 @@
 {
   "name": "cleaver",
   "preferGlobal": true,
-  "version": "0.5.5",
+  "version": "0.6.0",
   "author": "Jordan Scales <scalesjordan@gmail.com>",
   "description": "30-second slideshows for hackers",
   "keywords": [

resources/default.css

@@ -5,17 +5,19 @@ body {
   font-size: 100%;
 }
 
-#wrapper {
-  width: 850px;
+.slide {
+  position: absolute;
+  top: 0; bottom: 0;
+  left: 0; right: 0;
+}
+
+.slide-content {
+  width: 800px;
   height: 600px;
   overflow: hidden;
   margin: 80px auto 0 auto;
-}
-
-.slide {
-  width: auto;
-  height: 540px;
   padding: 30px;
+
   font-weight: 200;
   font-size: 200%;
   line-height: 1.375;
@@ -27,7 +29,7 @@ body {
   left: 20px;
 }
 
-.controls .arrow {
+.arrow {
   width: 0; height: 0;
   border: 30px solid #333;
   float: left;
@@ -41,7 +43,7 @@ body {
   user-select: none;
 }
 
-.controls .prev {
+.prev {
   border-top-color: transparent;
   border-bottom-color: transparent;
   border-left-color: transparent;
@@ -50,7 +52,7 @@ body {
   border-right-width: 50px;
 }
 
-.controls .next {
+.next {
   border-top-color: transparent;
   border-bottom-color: transparent;
   border-right-color: transparent;
@@ -59,53 +61,53 @@ body {
   border-right-width: 0;
 }
 
-.controls .prev:hover {
+.prev:hover {
   border-right-color: #888;
   cursor: pointer;
 }
 
-.controls .next:hover {
+.next:hover {
   border-left-color: #888;
   cursor: pointer;
 }
 
-.slide h1 {
+h1 {
   font-size: 300%;
   line-height: 1.2;
   text-align: center;
   margin: 170px 0 0;
 }
 
-.slide h2 {
+h2 {
   font-size: 100%;
   line-height: 1.2;
   margin: 5px 0;
   text-align: center;
   font-weight: 200;
 }
 
-.slide h3 {
+h3 {
   font-size: 140%;
   line-height: 1.2;
   border-bottom: 1px solid #aaa;
   margin: 0;
   padding-bottom: 15px;
 }
 
-.slide ul {
+ul {
   padding: 20px 0 0 60px;
   font-weight: 200;
   line-height: 1.375;
 }
 
-.slide .author h1.name {
+.author h1 {
   font-size: 170%;
   font-weight: 200;
   text-align: center;
   margin-bottom: 30px;
 }
 
-.slide .author h3 {
+.author h3 {
   font-weight: 100;
   text-align: center;
   font-size: 95%;
@@ -137,34 +139,39 @@ pre {
   height: 3px;
   background-color: #b4b4b4;
 
-  -webkit-transition: width 0.1s ease-out;
-  -moz-transition: width 0.1s ease-out;
-  -o-transition: width 0.1s ease-out;
-  transition: width 0.1s ease-out;
+  -webkit-transition: width 0.05s ease-out;
+  -moz-transition: width 0.05s ease-out;
+  -o-transition: width 0.05s ease-out;
+  transition: width 0.05s ease-out;
+}
+
+.hidden {
+  display: none;
 }
 
 @media (max-width: 850px) {
-  #wrapper {
-    width: auto;
-  }
 
   body {
     font-size: 70%;
   }
 
+  .slide-content {
+    width: auto;
+  }
+
   img {
     width: 100%;
   }
 
-  .slide h1 {
+  h1 {
     margin-top: 120px;
   }
 
-  .controls .prev, .controls .prev:hover {
+  .prev, .prev:hover {
     border-right-color: rgba(135, 135, 135, 0.5);
   }
 
-  .controls .next, .controls .next:hover {
+  .next, .next:hover {
     border-left-color: rgba(135, 135, 135, 0.5);
   }
 }
@@ -175,21 +182,17 @@ pre {
     overflow: hidden;
   }
 
-  #wrapper {
-    margin-top: 10px;
-    height: 340px;
-  }
-
-  .slide {
+  .slide-content {
     padding: 10px;
+    margin-top: 10px;
     height: 340px;
   }
 
-  .slide h1 {
+  h1 {
     margin-top: 50px;
   }
 
-  .slide ul {
+  ul {
     padding-left: 25px;
   }
 }
@@ -203,6 +206,10 @@ pre {
     size: letter;
   }
 
+  .hidden {
+    display: inline;
+  }
+
   html {
     width: 100%;
     height: 100%;
@@ -223,19 +230,19 @@ pre {
     display: none;
   }
 
-  #wrapper {
-    overflow: visible;
-    height: 100%;
-    margin-top: 0;
+  .slide {
+    position: static;
   }
 
-  .slide {
+  .slide-content {
     border: 1px solid #222;
+    margin-top: 0;
     margin-bottom: 40px;
     height: 3.5in;
+    overflow: visible;
   }
 
-  .slide:nth-child(odd) {
+  .slide:nth-child(even) {
     /* 2 slides per page */
     page-break-before: always;
   }