Gist-powered Revealjs slideshow presentations http://gist-reveal.it

gist-reveal.it-slides.html

<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 &lt;section&gt; 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>