Can get the results of running the code

assets/app/app.js

@@ -1,4 +1,5 @@
 define([
+  'jquery',
   'underscore',
   'backbone',
   'marionette',
@@ -7,6 +8,7 @@ define([
   'widgets/slide/view',
   'widgets/slide/model'
 ], function AppDefine(
+  $,
   _,
   Backbone,
   Marionette,
@@ -68,6 +70,7 @@ define([
     },
 
     onSlideChange: function onSlideChange(num) {
+      $('body').removeClass().addClass('page-' + num);
       this.model.set('id', num);
       this.model.fetch();
     }

assets/app/widgets/slide/results.js

@@ -0,0 +1,27 @@
+define(['underscore', 'core/model'], function CodeResultsDefine(_, Model) {
+  'use strict';
+
+  function ResultsModel() {
+    Model.apply(this, arguments);
+  }
+
+  ResultsModel.prototype = new Model();
+
+  _.extend(ResultsModel.prototype, {
+    defaults: function defaults() {
+      return {id: 0, env: ''};
+    },
+
+    url: function url() {
+      var id = this.get('id');
+      var env = this.get('env');
+      if (id < 10) {
+        return '/results/' + env + '/0' + id;
+      } else {
+        return '/results/' + env + '/' + id;
+      }
+    }
+  });
+
+  return ResultsModel;
+});

assets/app/widgets/slide/template.hbs

@@ -1,4 +1,11 @@
-<div class="slide-{{id}}">
+<div class="slide slide-{{id}}">
   <div class="copy"></div>
-  <pre><code class="language-javascript"></code></pre>
+  {{#code}}
+    <pre><code class="language-javascript"></code></pre>
+    <button class="request" data-env="phantomjs-1.9.8">phantomjs-1.9.8</button>
+    <button class="request" data-env="phantomjs-2.0.0">phantomjs-2.0.0</button>
+    <button class="request" data-env="node">node</button>
+    <pre><code class="stdout"></code></pre>
+    <pre><code class="stderr"></code></pre>
+  {{/code}}
 </div>

assets/app/widgets/slide/view.js

@@ -1,10 +1,20 @@
 define([
+  'jquery',
   'underscore',
   'marionette',
   'lib/markdown',
   'lib/syntax',
+  'widgets/slide/results',
   'widgets/slide/template'
-], function AppSlideWidget(_, Marionette, markdown, syntax, template) {
+], function AppSlideWidget(
+  $,
+  _,
+  Marionette,
+  markdown,
+  syntax,
+  ResultsModel,
+  template
+) {
   'use strict';
 
   var SlideView = Marionette.ItemView.extend({
@@ -12,7 +22,14 @@ define([
 
     ui: {
       copy: '.copy',
-      code: '.language-javascript'
+      code: '.language-javascript',
+      button: '.request',
+      stdout: '.stdout',
+      stderr: '.stderr'
+    },
+
+    events: {
+      'click @ui.button': 'onRequestResult'
     },
 
     modelEvents: {
@@ -28,6 +45,23 @@ define([
       if (code) {
         this.ui.code.html(syntax(code));
       }
+    },
+
+    onRequestResult: function onRequestResult(event) {
+      event.preventDefault();
+      var env = $(event.target).data('env');
+      var results = new ResultsModel({id: this.model.get('id'), env: env});
+      var $stdout = this.ui.stdout;
+      var $stderr = this.ui.stderr;
+      results.fetch({
+        success: function () {
+          $stdout.text(results.get('stdout'));
+          $stderr.text(results.get('stderr'));
+        },
+        error: function () {
+          $stdout.text('error');
+        }
+      });
     }
   });
 

assets/index.html

@@ -10,7 +10,7 @@
   <link rel="stylesheet" href="/static/style/main.css">
 </head>
 <body>
-  <div id="deck"></div>
+  <div class="deck" id="deck"></div>
   <script src="/vendor/requirejs/require.js"></script>
   <script src="/static/app.js"></script>
   <script>

assets/style/main.scss

@@ -1,4 +1,21 @@
 @import "_normalize";
-body {
+
+html, body {
+  height: 100%;
+}
+
+$slide-width: 1280px;
+$slide-height: 720px;
+
+.deck {
+  position: relative;
+}
+
+.slide {
+  width: $slide-width;
+  margin: 0 auto;
+}
+
+.page-2 {
   background-color: #bada55;
 }

bin/deck

@@ -3,6 +3,7 @@
 
 var fs = require('fs');
 var path = require('path');
+var exec = require('child_process').exec;
 
 var _ = require('lodash');
 var async = require('async');
@@ -123,6 +124,68 @@ app.get(/slide\/(\d+)/, function showHandler(req, res, next) {
   });
 });
 
+app.get(/results\/([^\/]+)\/(\d\d)$/, function resultsHandler(req, res, next) {
+  var app = req.params[0];
+  var slideId = req.params[1];
+
+  if (!_.contains(['node', 'phantomjs-1.9.8', 'phantomjs-2.0.0'], app)) {
+    next();
+    return;
+  }
+
+  var slidePath = pathToFile('data', 'slide', slideId + '.json');
+  fs.exists(slidePath, function (exists) {
+    if (!exists) {
+      return next();
+    }
+
+    var noSlideError = new Error('No code for slide');
+    async.waterfall([
+
+      function (cb) {
+        fs.readFile(slidePath, {encoding: 'utf8'}, cb);
+      },
+
+      function (content, cb) {
+        try {
+          var slide = JSON.parse(content);
+        } catch (err) {
+          cb(err, null);
+          return;
+        }
+        cb(null, slide);
+      },
+
+      function (slide, cb) {
+        var codePath = pathToFile('data', 'code', slide.code + '.js');
+        fs.exists(codePath, function (exists) {
+          if (exists) {
+            cb(null, codePath);
+          } else {
+            cb(noSlideError);
+          }
+        });
+      },
+
+      function (path, cb) {
+        exec(app + ' ' + path, cb);
+      }
+
+    ], function (err, stdout, stderr) {
+      if (err === noSlideError) {
+        next();
+        return;
+      }
+      if (err) {
+        renderError(res, err);
+        return;
+      }
+      res.send({stdout: stdout, stderr: stderr});
+    });
+
+  });
+});
+
 app.use('/data', staticHandler('data'));
 app.use('/vendor', staticHandler('vendor'));
 app.use('/static', staticHandler('static'));