Last active
December 1, 2024 03:00
-
-
Save ryanj/af84d40e58c5c2a908dd to your computer and use it in GitHub Desktop.
Gist-powered Revealjs slideshow presentations http://gist-reveal.it
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<section id='hello' data-background-transition='zoom' data-transition='concave' data-background='https://ryanjarvinen.com/presentations/shared/img/broadcast_reveal_dark.png' data-state='blackout'> | |
<h1 class='fragment grow'><a style='color:deepskyblue;' href='http://gist-reveal.it'>gist-reveal.it</a></h1> | |
<br/> | |
<h2>Gist-Powered</h2> | |
<h1>reveal.js slides</h1> | |
</section> | |
<section id='revealjs' data-transition='concave'> | |
<h3><a href="https://revealjs.com/">Reveal.js</a> is a framework</h3><p><span class='fragment'>for crafting</span> <br/><span class='fragment'>beautiful presentations</span><br/> <span class='fragment'>in <a href="https://revealjs.com/markup/">HTML</a></span> <br/> <span class='fragment'>and <a href="https://revealjs.com/markdown/">Markdown</a></span> | |
<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 id='gist-reveal'> | |
<h2><a href="https://github.com/ryanj/gist-reveal/">Gist-reveal</a> makes it easy</h2><p>to view and share reveal.js presentations <br/><span class='fragment'>using GitHub's <a href="https://gist.github.com/">Gist</a> service as a datastore</span></p> | |
<p class='fragment'>Slides are forkable using the "Presented by" link</p> | |
</section> | |
<section data-background-transition='zoom' style="text-align:left;" data-transition='linear' data-auto-animate id='try-it'> | |
<h2 data-id="try-title">Try it out!</h2> | |
<p><b>1.</b> Create a deck by placing <a href="https://github.com/hakimel/reveal.js/blob/master/demo.html#L31-L452">revealjs <section> tag content</a> into a fresh <a href="https://gist.github.com">gist</a>. Or, by forking a copy of <a href='https://gist.github.com/ryanj/c9427cb7829f4e4ba9c2614ac387105c'>this gist</a>: <br /><a href='https://gist.github.com/c9427cb7829f4e4ba9c2614ac387105c'>https://gist.github.com/c9427cb7829f4e4ba9c2614ac387105c</a></p> | |
<p><b>2.</b> Copy the resulting Gist ID, then view your slides at:</p> | |
<h3><a href='/c9427cb7829f4e4ba9c2614ac387105c'>https://gist-reveal.it/<b class='fragment highlight-green'>YOUR_GIST_ID_HERE</b></a></h3> | |
</section> | |
<section id='broadcast' data-auto-animate style="text-align:left;"> | |
<h2 data-id="try-title">Try it out!</h2> | |
<h3>Broadcast Your Presentations</h3> | |
<p><b>3.</b> Use <a href="/login"><code>/login</code></a> to authenticate and broadcast your slide transions to other viewers</p> | |
<blockquote>NOTE: Broadcasting is restricted to the gist owner. See the web console output for additional details.</blockquote> | |
<p><b>4.</b> Visit <a href="/logout"><code>/logout</code></a> to exit presentation mode</p> | |
</section> | |
<section data-transition='concave'> | |
<section id='themes' data-markdown> | |
## Reveal.js themes | |
Reveal.js presentation themes are available using the "`theme`" querystring input: | |
* [?theme=black](?theme=black#/themes) | |
* [?theme=white](?theme=white#/themes) | |
* [?theme=simple](?theme=simple#/themes) | |
* [?theme=moon](?theme=moon#/themes) | |
* [?theme=night](?theme=night#/themes) | |
* [?theme=dracula](?theme=dracula#/themes) | |
* [?theme=league](?theme=league#/themes) | |
* [?theme=sky](?theme=sky#/themes) | |
</section> | |
<section id='gist-themes' data-markdown> | |
## Gist-powered themes | |
CSS themes can also be extended via [another gist](https://gist.github.com/450836bbaebcf4c4ae08b331343a7886): | |
* [gist-reveal default theme](?theme=450836bbaebcf4c4ae08b331343a7886#/gist-themes) | |
* [a dark winter theme](?theme=60e54843de11a545897e#/gist-themes) | |
* [a theme from Kubecon 2020 NA](?theme=44a6634ee50a54b3bb4d0c06cdcb7d56#/gist-themes) | |
* [a theme from NodeInteractive 2018](?theme=9181e48c0dd8e6b45d692a11d5a72bd5#/gist-themes) | |
</section> | |
</section> | |
<section id='bitly' style="text-align:left;"> | |
<h3>Nicer presentation paths</h3> | |
<p>Creating a bit.ly shortname for your <a href="https://gist-reveal.it/4be4cf2bcac6b6106530bc16ddbefa42"><code>gist-reveal/gist_id</code> deck url</a> will also make your slides available at an alternate path.</p> | |
<p>This url path is much easier on the eyes:</p> | |
<ul> | |
<li><a href="https://gist-reveal.it/bitly/k8s-workshops">gist-reveal.it/bit.ly/k8s-workshops</a></li> | |
</ul> | |
</section> | |
<section> | |
<section data-auto-animate id='containers'> | |
<h2 data-id="run-it">Running gist-reveal</h2> | |
<h3>gist-reveal in a container</h3> | |
<p>Start gist-reveal on port 8080 using <code>docker</code> or <code>podman</code>:</p> | |
<pre><code contenteditable>docker run --rm -p 8080:8080 ryanj/gist-reveal</code></pre> | |
<p>Optionally configure the default gist_id:</p> | |
<pre><code contenteditable>docker run --rm -p 8080:8080 -e "DEFAULT_GIST=af84d40e58c5c2a908dd" ryanj/gist-reveal</code></pre> | |
<p>Include your own <a href="https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens">GitHub API Token</a> to avoid rate limiting:</p> | |
<pre><code contenteditable>docker run --rm -p 8080:8080 -e "GH_API_TOKEN=YOUR_API_TOKEN" ryanj/gist-reveal</code></pre> | |
</section> | |
<section data-auto-animate id='oauth' data-transition='concave'> | |
<h2 data-id="run-it">Running gist-reveal</h2> | |
<h3>Broadcast Presentations via Websockets</h3> | |
<p>To enable websockets, create a <a href="https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app">GitHub OAuth app</a> that redirects to: <code>YOUR_SITE/github/callback</code></p><p>Then configure your <code>CLIENT_ID</code> and <code>CLIENT_SECRET</code>:</p> | |
<pre><code contenteditable>docker run --rm -p 8080:8080 -e "CLIENT_SECRET=YOUR_SECRET_KEY" \ | |
-e "CLIENT_ID=YOUR_CLIENT_ID" ryanj/gist-reveal</code></pre> | |
</section> | |
<section data-auto-animate id='kubernetes'> | |
<h2 data-id="run-it">Running gist-reveal</h2> | |
<h3>gist-reveal on kubernetes</h3> | |
<p>Create a kubernetes pod and service:</p> | |
<pre><code contenteditable>kubectl run gist-reveal --image=ryanj/gist-reveal \ | |
--expose --port=8080 \ | |
--env="DEFAULT_GIST=YOUR_DEFAULT_GIST_ID" \ | |
--env="GH_API_TOKEN=YOUR_GH_API_TOKEN" \ | |
--env="CLIENT_SECRET=YOUR_GH_CLIENT_SECRET" \ | |
--env="CLIENT_ID=YOUR_GH_CLIENT_ID"</code></pre> | |
<p>See the <a href="https://github.com/ryanj/gist-reveal?tab=readme-ov-file#application-config">README</a> for additional app configuration options</p> | |
</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 \ | |
DEFAULT_GIST=YOUR_DEFAULT_GIST_ID \ | |
CLIENT_SECRET=YOUR_GH_CLIENT_SECRET \ | |
CLIENT_ID=YOUR_GH_CLIENT_ID \ | |
GH_API_TOKEN=YOUR_GH_API_TOKEN \ | |
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.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 id='goodbye'> | |
<h1>THE END</h1> | |
<h3><a href="http://gist-reveal.it">gist-reveal</a> by <a href="http://github.com/ryanj/">ryanj</a> and <a href="https://github.com/fkautz">fkautz</a></h3> | |
<h5>Revaljs by Hakim El Hattab / hakim.se</h5> | |
<br/> | |
<p><small><a style='font-weight:bold;color:deepskyblue;' href='http://github.com/ryanj/gist-reveal'>github.com/ryanj/gist-reveal</a> | |
<br/> <a style='font-weight:bold;color:deepskyblue;' href='https://hub.docker.com/r/ryanj/gist-reveal/'>hub.docker.com/r/ryanj/gist-reveal</a></small></p> | |
</section> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment