Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
ATO2017 Lightning Talks - Revealjs presentation hacks with gist-reveal - http://bit.ly/ato-reveal
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment