Markdown slides

Includes an incomplete example presentation.
rcmiller · Feb 2, 2016 · 5faa547 · 5faa547
1 parent 00a9eb8
commit 5faa547
Show file tree

Hide file tree

Showing 7 changed files with 481 additions and 0 deletions.
diff --git a/LICENSE b/LICENSE
@@ -99,3 +99,28 @@ loss of use, data, or profits; or business interruption) however caused and on
 any theory of liability, whether in contract, strict liability, or tort
 (including negligence or otherwise) arising in any way out of the use of this
 software, even if advised of the possibility of such damage.
+
+==========
+= remark =
+==========
+
+Copyright (c) 2011-2013 Ole Petter Bang <[email protected]>
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -9,6 +9,12 @@ An example handout!
 
 Clone this repository and open `example/handout/index.html`.
 
+## [`example/slides`](example/slides)
+
+Example slides!
+
+Clone this repository and open `example/slides/index.html`.
+
 ## [`web/handout`](web/handout)
 
 JavaScript and CSS for rendering and running handouts.

diff --git a/example/slides/index.html b/example/slides/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"> 
+
+<title>Example Slides</title>
+
+<link href="../../web/handout/slide-style.css" rel="stylesheet"></link>
+</head>
+<body>
+
+<div id="source">
+
+The page title is automatically added a title slide.
+
+# Heading
+
+## Subheading
+
+---
+class: timer timer-1-15
+
+Use class `timer` to put a timer in the top right.
+
+```java
+public static void main(String[] args) {
+  System.out.println("Syntax-highlighted code");
+}
+```
+
+You must escape `&lt;` characters.
+Sorry.
+
+</div>
+
+<script src="../../web/handout/slide-render.js"></script>
+</body>
+</html>
diff --git a/web/handout/run/README.md b/web/handout/run/README.md
@@ -0,0 +1,4 @@
+[**`remark.min.js`**][remark.min.js] from [remark], modified to enable SmartyPants.
+
+  [remark.min.js]: https://github.com/gnab/remark/blob/gh-pages/downloads/remark-0.13.min.js
+  [remark]: https://github.com/gnab/remark
diff --git a/web/handout/run/remark.min.js b/web/handout/run/remark.min.js
diff --git a/web/handout/slide-render.js b/web/handout/slide-render.js
@@ -0,0 +1,137 @@
+/*
+ * Slide Renderer
+ *
+ * Renders Markdown slides.
+ */
+
+// load JavaScript by injecting a <script> tag
+function require(url, callback) {
+  var deferred;
+  if ( ! callback) {
+    // if no callback function, return a Deferred that resolves when the script is loaded
+    deferred = $.Deferred();
+    callback = function() { deferred.resolve(); }
+  }
+
+  // fix relative URLs
+  url = url.replace('./', require.abspath);
+
+  var script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.src = url;
+  script.onerror = function(err) { throw err; }
+  script.onload = callback;
+  document.getElementsByTagName('body')[0].appendChild(script);
+
+  return deferred;
+}
+
+// render the page with all dependencies loaded
+function render() {
+
+  // presentation title, semester subtitle, authors
+  $('#source').prepend([
+    'class: chapter',
+    '# ' + $('head title').text(),
+    '## ' + HANDOUT_SEMESTER,
+    HANDOUT_AUTHORS,
+    '---\n'
+  ].join('\n'));
+
+  // convert presentation
+  var show = remark.create({
+    navigation: { scroll: false, touch: false },
+    highlightStyle: null,
+  });
+
+  // colors
+  $('.color').each(function() {
+    var span = this;
+    [].forEach.call(this.classList, function(name) {
+      var match = name.match(/color-(.*)/);
+      if (match) { span.style.color = '#' + match[1]; }
+    });
+  });
+
+  // countdown timers
+  addSlideTimerManager(show);
+
+  if (window.onSlideshowDidRender) { window.onSlideshowDidRender(show); }
+}
+
+// slides with class "timer" get a countdown timer
+// use a class of the form "timer-M-SS" to specify duration in minutes and seconds
+function addSlideTimerManager(show) {
+
+  var timer = null;
+
+  function start() {
+    var started = new Date();
+
+    var duration = 60; // 1-minute default
+    [].forEach.call(this.classList, function(name) {
+      var match = name.match(/timer-(\d+)-(\d\d)/);
+      if (match) { duration = parseInt(match[1]) * 60 + parseInt(match[2]); }
+    });
+
+    var clock = $('<div>').addClass('remark-slide-timer');
+    $(this).append(clock);
+
+    function update(force) {
+      var time = new Date() - started;
+      var remaining = duration - Math.round(time/1000);
+
+      if (remaining <= 0) {
+        clock.addClass('remark-slide-timer-expired');
+        stop();
+      }
+
+      var minutes = Math.floor(remaining/60);
+      var seconds = Math.floor(remaining) % 60;
+      if (force || remaining < 15 || seconds % 15 == 0) { // only update every 15 seconds until last 15 seconds
+        clock.text(minutes + (seconds > 9 ? ':' : ':0') + seconds);
+      }
+    }
+    update(true);
+    timer = setInterval(update, 1000);
+  }
+
+  function stop() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+  }
+
+  show.on('showSlide', function() {
+    setTimeout(function() {
+      stop();
+      $('.remark-slide-content .remark-slide-timer').remove();
+      $('.remark-slide-container.remark-visible .remark-slide-content.timer:not(.no-timer)').each(start);
+    }, 0);
+  });
+}
+
+//
+// main
+//
+
+// load jQuery, load other dependencies, and render
+require('https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js', function () {
+
+  // future calls to require can use relative paths
+  require.abspath = $('script[src*=slide-render]').attr('src').match(/.*\//)[0];
+
+  var stages = [
+    [ './course-setup.js', './run/remark.min.js' ],
+  ];
+  (function next() {
+    var scripts = stages.shift();
+
+    // when all scripts are loaded, render
+    if ( ! scripts) { return render(); }
+
+    // otherwise, require all scripts in this stage and recurse
+    $.when.apply($, scripts.map(function(script) { return require(script) })).done(next);
+  })();
+});