Optimizations, configuration management and simplification plugins

README.md

@@ -34,6 +34,28 @@ master branch to create a new presentation:
     git branch presentation2
     git checkout presentation2
 
+## Configuring the presentation
+
+You can configure almost any reveal.js setting using the _config.yml-settings file in the
+root directory.
+
+* title: The title of your presentation (displayed in the browser's title bar)
+* reveal_theme: The reveal.js-theme to use [default.css]
+* reveal_transition: The reveal.js-transition to use [default]
+* reveal_theme_path: The path to the reveal.js-theme (can be changed for custom themes) [reveal.js/css/theme/]
+* reveal_notes_server: Wether to support the speaker notes server [false (only local speaker notes)]
+* reveal_options: Additional reveal.js [options][]
+* reveal_dependencies: Additional reveal.js [dependencies][]
+* reveal_path: Path to the reveal.js-installation [reveal.js]
+
+## Custom reveal.js-themes
+
+If you want to use your custom reveal.js-theme, we recommend adding a directory "theme", putting the file(s)
+there and referencing that directory in the configuration "reveal_theme_path".
+
+Don't mess with the reveal.js subdirectory as it is a subrepository and doesn't adhere to your repository's
+branches.
+
 ## Slide filenames
 
 Because we're using the Jekyll post framework here, we're bound to the conventions
@@ -48,13 +70,9 @@ But everything should work well, if you just name the files
 
 and so forth.
 
-[Reveal.js]:      http://lab.hakim.se/reveal-js/#/
-[Jekyll]:         http://jekyllrb.com/
-[install Jekyll]: http://jekyllrb.com/docs/installation/  
-
-## Markdown extensions
+## Markdown extensions and simplification
 
-Jekyll-Revealjs implements the following extensions:
+### Multiple slides
 
 To use multiple slides in one slide file, use a newline, three dashes and another newline like this:
 
@@ -68,6 +86,8 @@ To use multiple slides in one slide file, use a newline, three dashes and anothe
 
     This is the content of Slide 2
 
+### Vertical slides
+
 To use vertical slides, do the same, but use two dashes:
 
     # Slide 1
@@ -78,18 +98,34 @@ To use vertical slides, do the same, but use two dashes:
 
     And this is a vertical slide below Slide 1
 
-To use fragments, you can use the features also described in the Reveal.js-documentation:
+### Fragments
+
+Fragments allow slide elements to come one by one. This is often used in lists to subsequently show
+fragments of a list during a presentation.
+
+To use fragments, jekyll-reveal.js includes a jekyll-plugin, that simplifies the use of fragments
+in markdown. To specify the current element as a fragment, use the {% fragment %}-tag like this:
 
     # Slide
 
-    * This <!-- .element: class="fragment" -->
-    * will <!-- .element: class="fragment" -->
-    * come one by one <!-- .element: class="fragment" -->
+    * This {% fragment %}
+    * will {% fragment %}
+    * come one by one {% fragment %}
 
-Use the same technique to set slide backgrounds:
+### Slide backgrounds
+
+To modify the background of the current slide, jekyll-reveal.js also includes a simplification
+plugin:
 
     # Slide
 
-    <!-- .slide: data-background="#ffffff" -->
+    {% background white %}
 
     This slide has a white background
+
+[Reveal.js]:      http://lab.hakim.se/reveal-js/#/
+[Jekyll]:         http://jekyllrb.com/
+[install Jekyll]: http://jekyllrb.com/docs/installation/  
+[options]: https://github.com/hakimel/reveal.js#configuration
+[depedencies]: https://github.com/hakimel/reveal.js#dependencies
+

_config.yml

@@ -1,6 +1,29 @@
-name: Jekyll and Reveal.js
+# Your presentation title
+title: Jekyll and Reveal.js
+
+# The Reveal theme
+reveal_theme: default.css
+
+# The Reveal transition
+reveal_transition: default
+
+# Path to the used theme (defaults to the Reveal.js standard theme path)
+reveal_theme_path: reveal.js/css/theme/ 
+
+# Embed Server-side speaker notes?
+reveal_notes_server: false
+
+# Additional reveal.js options
+reveal_options: 
+
+# Additional reveal.js dependencies
+reveal_dependencies: 
+
+# Reveal.js subdirectory
+reveal_path: reveal.js/
+
+# Don't change anything below
 markdown: redcarpet
 pygments: true
 markdown_ext: ignoreme
-reveal_theme: default
-reveal_transition: default
+

_layouts/reveal.html

@@ -4,7 +4,7 @@
 	<head>
 		<meta charset="utf-8">
 
-		<title>{{ page.title }}</title>
+		<title>{{ site.title }}</title>
 
 		<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
 		<meta name="author" content="Hakim El Hattab">
@@ -14,19 +14,19 @@
 
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
-		<link rel="stylesheet" href="reveal.js/css/reveal.min.css">
-		<link rel="stylesheet" href="reveal.js/css/theme/{{ site.reveal_theme }}.css" id="theme">
+		<link rel="stylesheet" href="{{ site.reveal_path }}css/reveal.min.css">
+		<link rel="stylesheet" href="{{ site.reveal_theme_path }}{{ site.reveal_theme }}" id="theme">
 
 		<!-- For syntax highlighting -->
-		<link rel="stylesheet" href="reveal.js/lib/css/zenburn.css">
+		<link rel="stylesheet" href="{{ site.reveal_path }}lib/css/zenburn.css">
 
 		<!-- If the query includes 'print-pdf', use the PDF print sheet -->
 		<script>
-			document.write( '<link rel="stylesheet" href="reveal.js/css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
+			document.write( '<link rel="stylesheet" href="{{ site.reveal_path }}css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
 		</script>
 
 		<!--[if lt IE 9]>
-		<script src="reveal.js/lib/js/html5shiv.js"></script>
+		<script src="{{ site.reveal_path }}lib/js/html5shiv.js"></script>
 		<![endif]-->
 	</head>
 
@@ -42,8 +42,8 @@
 
 		</div>
 
-		<script src="reveal.js/lib/js/head.min.js"></script>
-		<script src="reveal.js/js/reveal.min.js"></script>
+		<script src="{{ site.reveal_path }}lib/js/head.min.js"></script>
+		<script src="{{ site.reveal_path }}js/reveal.min.js"></script>
 
 		<script>
 
@@ -58,18 +58,28 @@
 				theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
 				transition: '{{ site.reveal_transition }}', // default/cube/page/concave/zoom/linear/fade/none
 
-				// Parallax scrolling
-				// parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg',
-				// parallaxBackgroundSize: '2100px 900px',
+                {% if site.reveal_options %}
+
+                {{ site.reveal_options | append:',' }}
+
+                {% endif %}
 
 				// Optional libraries used to extend on reveal.js
 				dependencies: [
-					{ src: 'reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
-					{ src: 'reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
-					{ src: 'reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
-					{ src: 'reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
-					{ src: 'reveal.js/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
-					{ src: 'reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
+					{ src: '{{ site.reveal_path }}lib/js/classList.js', condition: function() { return !document.body.classList; } },
+					{ src: '{{ site.reveal_path }}plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
+					{ src: '{{ site.reveal_path }}plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
+					{ src: '{{ site.reveal_path }}plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
+					{ src: '{{ site.reveal_path }}plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
+                    {% if site.reveal_notes_server %}
+                    { src: '{{ site.reveal_path }}socket.io/socket.io.js', async: true },
+                    { src: '{{ site.reveal_path }}plugin/notes-server/client.js', async: true }
+                    {% else %}
+					{ src: '{{ site.reveal_path }}plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
+                    {% endif %}
+                    {% if site.reveal_dependencies %}
+                    , {{ site.reveal_dependencies }}
+                    {% endif %}
 				]
 			});
 

_plugins/background.rb

@@ -0,0 +1,18 @@
+module Jekyll
+
+    class RenderBackground < Liquid::Tag
+
+        def initialize(tag_name, text, tokens)
+            super
+            @text = text
+        end
+
+        def render(context)
+            "<!-- .slide: data-background=\"#{@text}\" -->"
+        end
+
+    end
+
+end
+
+Liquid::Template.register_tag('background', Jekyll::RenderBackground)

_plugins/fragment.rb

@@ -0,0 +1,13 @@
+module Jekyll
+
+    class RenderFragment < Liquid::Tag
+
+        def render(context)
+            "<!-- .element: class=\"fragment\" -->"
+        end
+
+    end
+
+end
+
+Liquid::Template.register_tag('fragment', Jekyll::RenderFragment)

_posts/1-1-1-3.md

@@ -2,5 +2,5 @@
 
 It's also possible to do fragments.
 
-- Like <!-- .element: class="fragment" -->
-- This <!-- .element: class="fragment" -->
+- Like {% fragment %}
+- This {% fragment %}

_posts/1-1-1-5.md

@@ -0,0 +1,5 @@
+# Backgrounds
+
+{% background green %} 
+
+Or use different backgrounds.

index.html

@@ -1,6 +1,6 @@
 ---
 layout: reveal
-title: Reveal.js Example presentation
+title: not used. Use _config.yml!
 ---
 
 {% for post in site.posts reversed %}