run in docker for fast preso switching

cff-readme.md

@@ -4,9 +4,44 @@ For simplicity, this fork of the repo contains all of the CFF modifications and
 
 All of the reveal.js functionality should still be available.  Modifications should be additive in nature.
 
+## Developing
+
+To make development of slides (and this reveal fork) easier, you need to use docker.  
+
+1. Get the image:
+  ```
+  $ docker pull rscale/node
+  ```
+1. Clone this repo (if you haven't already)
+1. You should already have the developer certification repo locally (if not, go get it.  we will wait).
+1. Run it with the included script (from the root of this repo):
+  ```
+  $ ./docker-run.sh <path-to-local-reveal-clone> <path-to-slides-dir>
+  ```
+  Example:
+  ```
+  $ ./docker-run.sh ~/workspace/resilientscale/reveal.js ~/workspace/cloudfoundry/developer-training-course/slides
+  ```
+  This will put you into the running docker container with the correct directory mappings (reveal + slides).  In the container:
+  1. `cd reveal.js`
+  1. `npm install` - You likely only have to do this once.
+  1. `npm start`
+  1. In a browser, you can now navigate to `http://localhost:8000?pres=<preso-folder-name>`
+    Example: `http://localhost:8000?pres=cf-mocf-motivators`
+
+  You can change presentations by changing the value of '<preso-folder-name>' without restarting the container.  
+
+### Conventions
+
+This assumes the following:
+
+* Slides are in a named folder in `developer-training-course/slides` in a file called `slides.md` (i.e. `developer-training-course/slides/cf-motivators/slides.md`)
+* Images should be placed in `developer-training-course/slides/<preso-name>/images`.  The folder has to be called `images` to avoid conflicts with global images in this repo and to make building easy.
+* Image references in slides should be relative to the `<preso-name>` directory: example: `images/some-image.png`. Background images and inline images are both supported using this convention.
+
 ## Sample presentation
 
-A sample presentation is included: `slides.md`.  This leverages all of the current functionality and slides layouts.
+Check out the `cf-motivators` presentation for examples.
 
 ### Last Slide
 

docker-run.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+if [ "$1" = "" ] || [ "$2" = "" ]; then
+  echo $0: usage: $0 path-to-local-reveal-clone path-to-slides-dir
+  exit
+fi
+
+if [ ! -e $1 ]; then
+  echo $0: Local reveal clone does not exist: $1
+  exit
+fi
+
+if [ ! -e $2 ]; then
+  echo $0: Slides directory does not exist: $2
+  exit
+fi
+
+docker run -v $1:/home/user/reveal.js -v $2:/home/user/reveal.js/slides/ -p 8000:8000 -p 35729:35729 -it --rm rscale/node /bin/bash

index.html

@@ -29,7 +29,7 @@
 		</div>
 		<div class="reveal">
 			<div class="slides">
-				 <section data-markdown="slides.md">
+				 <section class="markdown-slides">
 				 </section>
 				 <section class="last-slide" data-background-color="#000000" data-transition="zoom">
 					 <img src="img/logo-white.png" />
@@ -52,13 +52,16 @@
 				// More info https://github.com/hakimel/reveal.js#dependencies
 				dependencies: [
 					{ src: 'plugin/jquery/jquery-3.1.1.min.js' },
+					{ src: 'plugin/external-markdown/external-markdown.js' },
 					{ src: 'plugin/markdown/marked.js' },
 					{ src: 'plugin/markdown/markdown.js' },
+					{ src: 'plugin/external-markdown/image-loader.js' },
 					{ src: 'plugin/slide-layout/slide-layout.js' },
 					{ src: 'plugin/notes/notes.js', async: true },
 					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
 				]
 			});
+
 		</script>
 	</body>
 </html>

plugin/external-markdown/external-markdown.js

@@ -0,0 +1,22 @@
+(function(){
+
+  function setSlides() {
+    $("section.markdown-slides").attr("data-markdown", "slides/" + getQueryParamValue('pres') + "/slides.md");
+    window.presentation = getQueryParamValue('pres');
+  }
+
+  function getQueryParamValue(paramName) {
+    var query = window.location.search.substring(1);
+    var vars = query.split("&");
+    for (var i=0;i<vars.length;i++) {
+      var pair = vars[i].split("=");
+      if(pair[0] == paramName) {
+        return pair[1];
+      }
+    }
+    return "";
+  }
+
+  setSlides();
+
+})();

plugin/external-markdown/image-loader.js

@@ -0,0 +1,33 @@
+(function(){
+
+  function resolveImages() {
+    resolveBackgrounds();
+    resolveSlideImages();
+  }
+
+  function resolveBackgrounds() {
+    var sections = document.querySelectorAll( '[data-background-image]'), section;
+
+		for( var i = 0, len = sections.length; i < len; i++ ) {
+			section = sections[i];
+			if (section.getAttribute('data-background-image').length) {
+        var image = $(section).attr('data-background-image');
+        if ( image.startsWith("images/") ) {
+          $(section).attr('data-background-image', 'slides/' + window.presentation + "/" + image);
+        }
+			}
+		}
+	}
+
+  function resolveSlideImages() {
+    var images = $("img[src^='images/']");
+    for( var i = 0, len = images.length; i < len; i++ ) {
+      image = images[i];
+      src = $(image).attr("src");
+      $(image).attr("src", "slides/" + window.presentation + "/" + src);
+    }
+  }
+
+  resolveImages();
+
+})();