ATO2017 Lightning Talks - Revealjs presentation hacks with gist-reveal - http://bit.ly/ato-reveal

Fork-This-Talk.html

<section>
	<h2>ryanj @ red hat</h2>
	<h1>RevealJS Presentation Hacks</h1>
	<h4 class='fragment fade-up'><a href="http://bit.ly/ato-reveal">http://bit.ly/ato-reveal</a></h4>
</section>
<section data-markdown>
## reveal.js

https://github.com/hakimel/reveal.js#revealjs--

by Hakim El Hattab / hakim.se
</section>

<section>
<section>
<p>Reveal.js is a framework for easily crafting beautiful presentations in HTML</p>

<p class='fragment'>You'll need a browser with support for CSS 3D transforms to see it's full capabilities</p>

<p class='fragment'>reveal.js demo site: http://lab.hakim.se/reveal-js/</p>
</section>
<section data-markdown>
My experience with reveal.js:
	
1. I've been using it for 5+ years
2. I've tried contributing
3. If you want a nice WYSIWYG UI for editing reveal.js slides, take a look at http://slid.es
4. It's static html, so it can be hosted on gh-pages or in an S3 bucket
</section>
<section>
	<p>Easy PDF export option:</p>
	
	<a href="?print-pdf">?print-pdf</a>	
</section>
</section>

<section>
<p>My needs:</p>
<ol>
<li class='fragment'>slides are easy to create</li>
<li class='fragment'>slides are easy to share</li>
<li class='fragment'>slides include metrics collection</li>
</ol>
</section>
</section>

<section data-markdown>
> "What if slides were forkable and revision controlled?"
</section>

<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>
  <br/>
  <h1 class='fragment grow'><a style='color:deepskyblue;' href='http://gist-reveal.it'>gist-reveal.it</a></h1>
</section>
<section data-transition='convex'>
	<h4>I want you to</h4>
</section>
<section data-transition='zoom'>
	<h1>Fork</h1>
</section>
<section data-transition='zoom'>
	<h1>This</h1>
</section>
<section data-transition='zoom'>
	<h1>Talk</h1>
</section>


<section data-background-transition='zoom'>
<section data-background-transition='zoom' data-transition='linear' id='try-it'>
  <h2>Try it!</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' id='themes' data-markdown>
    ## Gist-powered Slideshow Themes

Available CSS themes include [the default reveal.js themes](http://lab.hakim.se/reveal-js/#/themes), but can be easily extended by storing new themes [in a gist](https://gist.github.com/450836bbaebcf4c4ae08b331343a7886):

 * [a theme from the CoreOS team](?theme=450836bbaebcf4c4ae08b331343a7886#/themes)
 * [a theme for OpenShift fans](?theme=60e54843de11a545897e#/themes)
 * [the revealjs black theme](?theme=black#/themes)
 * [the revealjs simple theme](?theme=simple#/themes)
 * [the revealjs league theme](?theme=default#/themes)
 * [the revealjs sky theme](?theme=sky#/themes)

Conference organizers can host their own modified gist-reveal templating service (with it's own default theme), to provide a consistent look for all presentations at an event.
  </section>

<section>
	<h3>Friendly urls w/ bit.ly</h3>
	<p><i>&lt;demo&gt;</i></p>
</section>
	
  <section id='kubernetes'>
    <h3>Host your own slideshow service on Kubernetes</h3>
    <p>To create a kubernetes deployment and NodePort service, both named gist-reveal, run:</p>
    <pre><code contenteditable>kubectl run gist-reveal --image=ryanj/gist-reveal \
--expose --port=8080 --service-overrides='{ "spec": { "type": "NodePort" } }' \
--env="DEFAULT_GIST=YOUR_DEFAULT_GIST_ID" \
--env="GH_CLIENT_SECRET=YOUR_GH_CLIENT_SECRET" \
--env="GH_CLIENT_ID=YOUR_GH_CLIENT_ID" \
--env="REVEAL_SOCKET_SECRET=0P3N-S0URC3" \
--env="GA_TRACKER=YOUR_GA_TRACKER"</code></pre>
    <div class='fragment'><p>Minikube users should be able to open the new service in their browser by running:</p>
	    <pre class='fragment'><code contenteditable>minikube service gist-reveal</code></pre></div>
  </section>
</section>

<section>
	<p>More slides to borrow / steal:</p>
	<ol>
	<li><a href="http://bit.ly/k8s-workshops">bit.ly/k8s-workshops</li>
	<li><a href="http://bit.ly/ato-k8s-">bit.ly/ato-k8s</li>
        </ol>
</section>

<section>
  <h1>May the Source be with You!</h1>
	<br/>
	<h2>❤️ @ryanj</h2>
	<br/>
	<p class='fragment grow'><a href='http://bit.ly/ato-reveal'>bit.ly/ato-reveal</a></p>
	<br/><br/>
	<p><i><span class='fragment fade-down'>mic</span> <span class='fragment fade-down'>drop?</span></i></p>
</section>