Use Docker, gist.github.com, and Reveal.js to produce themed slideshow presentations for conferences and / or hackathons

gist-reveal.it-slides.html

<section data-background-transition='zoom' data-transition='concave' data-background='http://ryanjarvinen.com/presentations/shared/img/broadcast_reveal_dark.png' data-state='blackout'>
  <h2>Gist-Powered</h2>
  <h1>Reveal.js</h1>
  <h2>Slideshow Presentations</h2>
  <p class='fragment'><small><a class='fragment' href='http://github.com/ryanj/gist-reveal.it'>github.com/ryanj/gist-reveal.it</a>
  <br/> <a class='fragment' href='https://registry.hub.docker.com/u/ryanj/gist-reveal.it/'>registry.hub.docker.com/u/ryanj/gist-reveal.it</a></small></p>
</section>
<section data-background-transition='zoom' data-transition='linear'>
	<h2>Embed</h2>
	<iframe webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" sandbox="allow-forms allow-scripts allow-popups allow-same-origin allow-pointer-lock" data-src="https://regex101.com/r/sB4uZ3/1"></iframe>
	<!--<script src="https://gist.github.com/morsdyce/6d7fb8d5a602a45a08e1.js"></script>-->
</section>
<section data-background-transition='zoom' data-transition='linear'>
  <h2>Try it out!</h2>
  <p>Create your own deck by forking a copy of <a href='https://gist.github.com/ryanj/af84d40e58c5c2a908dd'>this github gist</a>: <br /><a href='https://gist.github.com/ryanj/af84d40e58c5c2a908dd'>https://gist.github.com/ryanj/af84d40e58c5c2a908dd</a></p>
  <p>Or, by placing any valid Revealjs <a href="#sections">&lt;section&gt;</a> tag content into a fresh gist.</p>
  <br />
  <p class='fragment'>When you're ready to view your slides, grab your github gist id and add it to the end of this url:</p>
<p class='fragment grow'><a href='http://gist-reveal.it'>http://gist-reveal.it/YOUR_GIST_ID_HERE</a></p>
</section>
<section data-transition='concave'>
  <section data-transition='concave'>
    <h2>Presentations on the Open Web</h2>
    <p><span class='fragment'>Reveal.js is a framework</spam><br/><span class='fragment'>for easily crafting</span> <br/><span class='fragment'>beautiful presentations</span><br/> <span class='fragment'>in HTML</span> <br/><br/><div class='fragment'><p>You'll need a browser with support for CSS 3D transforms to see it's full capabilities.</p>
    <aside class="notes">Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).</aside>
  </section>
  <section>
    <h2>Tips on using Reveal.js</h2>
    <p class='fragment'>There is a lot of great information about using Reveal.js in the project's <a href='http://github.com/hakimel/reveal.js'>README page on GitHub</a>.</p>
    <p class='fragment'>Their <a href='http://lab.hakim.se/reveal-js/'>original slide deck sample conent</a> also contains a lot of great examples.</p>
  </section>
</section>
<section>
  <section>
    <h3>Host your own themed slideshow index with Docker</h3>
    <p class='fragment'>Start up a local development server on port 8080:</p>
    <pre class='fragment'><code contenteditable>docker run ryanj/gist-reveal.it</code></pre>
    <p class='fragment'>For production, I like to daemonize the process, configure a default gist_id, and make the container available on port 80:</p>
    <pre class='fragment'><code contenteditable>docker run -d -p 80:8080 -e "DEFAULT_GIST=af84d40e58c5c2a908dd" ryanj/gist-reveal.it</code></pre>
  </section>
  <section>
    <h3>GITHUB API RATE LIMITS</h3>
    <p class='fragment'>Include your own GitHub application keys if you plan on making more than 60 requests in 2 hours:</p>
    <pre class='fragment'><code contenteditable>docker run -e "GH_CLIENT_SECRET=11becbb840e0ff7414b19104e9e797556498fc3f" -e "GH_CLIENT_ID=639ffe9fd9dcc4f6eb4b" ryanj/gist-reveal.it</code></pre>
  </section>
  <section>
    <h3>Built-in Analytics</h3>
    <p class='fragment'>Include your own GA-TRACKER key:</p>
    <pre class='fragment'><code contenteditable>docker run -e "GA_TRACKER=UA-12345678" ryanj/gist-reveal.it</code></pre>
  </section>
  <section id='openshift'>
    <h3>Hosting on OpenShift</h3>
    <p>You can launch this application on OpenShift in a single command:</p>
    <pre class='fragment'><code contenteditable>rhc app create gistreveal nodejs-0.10 \
--from code=http://github.com/ryanj/gist-reveal.it \
DEFAULT_GIST=YOUR_DEFAULT_GIST_ID \
GH_CLIENT_SECRET=YOUR_GH_CLIENT_SECRET \
GH_CLIENT_ID=YOUR_GH_CLIENT_ID \
REVEAL_SOCKET_SECRET=0P3N-S0URC3 \
GA_TRACKER=YOUR_GA_TRACKER</code></pre>
    <p class='fragment'>Or, <a href="https://openshift.redhat.com/app/console/application_types/custom?name=reveal&initial_git_url=https%3A%2F%2Fgithub.com/ryanj/gist-reveal.it.git&cartridges[]=nodejs-0.10">click here to launch on the web!</a></p>
    <p class='fragment'>Then, use the <code>rhc env set</code> command to publish your application config and keys to the system environment.</p>
  </section>
</section>
<section data-transition='concave'>
  <section>
    <h2>Broadcasting Your Slide Transitions</h2><h1 class='fragment grow'>with Socket.IO</h1>
    <pre class='fragment'><code contenteditable>docker run -e "REVEAL_WEB_HOST=YOUR_HOSTNAME_HERE" -e "REVEAL_SOCKET_SECRET=0P3N-S0URC3" ryanj/gist-reveal.it</code></pre>
    <p>Configure your browser as a presentation device by setting the same key in your browser's localStorage</p>
    <pre class='fragment'><code contenteditable>localStorage.secret="YOUR_SECRET_KEY"</code></pre>
  </section>
  <section data-transition='zoom' data-background-transition='zoom'>
    <p>Be sure to use two different devices or brower types when testing your broadcasting relay<br/> <span class='fragment'>(FireFox vs. Chrome, desktop vs. mobile, etc.)</span></p>
  </section>
</section> 
<section>
  <h1>THE END</h1>
  <h3>Revaljs by Hakim El Hattab / hakim.se</h3>
  <h3><a href="http://gist-reveal.it">gist-reveal.it</a> by <a href="http://twitter.com/ryanj/">ryanj</a> and <a href="https://github.com/fkautz">fkautz</a></h3>
				</section>

test.js

import angular from 'angular';
import MyCtrl from './controllers/myctrl';


export default angular.module('myApp', [])
                      .controller('MyCtrl', MyCtrl);