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><a style='color:deepskyblue;' href='https://gist-reveal.it'>gist-reveal.it</a></h1>
  <br/>
  <h2 style='color:white;'>Gist-Powered</h2>
  <h1 style='white-space:nowrap;color:white;'>reveal.js slides</h1>
  <p><small style="background-color: rgb(0,0,0,0.35); font-style: italic; color: white;"> press F1 for usage notes </small></p>
</section>
<section id='revealjs' data-transition='concave'>
  <h3><a href="https://revealjs.com/">Reveal.js</a> is a framework</h3><p><span>for crafting presentations</span><br/> <span class='fragment'>in <a href="https://revealjs.com/markup/">HTML</a></span> <br/> <span class='fragment fade-up'>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 data-transition='zoom-in concave-out' 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>using GitHub's <a href="https://gist.github.com/">Gist</a> service as a datastore</span></p>
  <ul style="list-style: none;">
    <li class='fragment fade-left'>✔ CSS and JS includes are templated into each page request</li>
    <li class='fragment fade-left'>✔ Slide sources are available using the "Presented by" link</li>
  </ul>
</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 pasting <a href="https://gist.github.com/c9427cb7829f4e4ba9c2614ac387105c">revealjs &lt;section&gt;s</a> into <a href="https://gist.github.com">a new gist</a>.<br/>Or, by forking any existing deck using the "Presented by" button</p>
    <p><b>2.</b> Save and copy your resulting Gist ID, then view your slides at:</p>
    <p><a class="r-fit-text" href='/c9427cb7829f4e4ba9c2614ac387105c'>https://gist-reveal.it/<span class='fragment highlight-green'>YOUR_GIST_ID_HERE</span></a></p>
    <blockquote style='width:98%;' class='fragment fade-left'>For example, render the presentation from gist id <a href="https://gist.github.com/c9427cb7829f4e4ba9c2614ac387105c"><code style="color:#17ff2e;font-size: 80%;">c9427cb7829f4e4ba9c2616ac387105c</code></a> by visiting:<br/><a class='r-fit-text' href="/c9427cb7829f4e4ba9c2614ac387105c">https://gist-reveal.it/<span style='color:#17ff2e;'>c9427cb7829f4e4ba9c2614ac387105c</span></a></blockquote>
  </section>
  <section id='broadcast' data-auto-animate style="text-align:left;">
    <h2 data-id="try-title">Try it out!</h2>	  
    <h4><a href="/login">Login with GitHub</a> to broadcast your presentations</h4>
    <p><b>3.</b> Use <a href="/login"><code>/login</code></a> to authenticate via GitHub. Authenticated gist owners automatically broadcast their slide transitions using websockets</p>
    <blockquote style="width: 90%">NOTE: Websocket broadcasting is restricted to gist owners. See the web console output for usage info</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='print' data-markdown>
  ### Export slides as PDF
  Add "`print-pdf`" to the querystring to render a printer-friendly version of your slides:
   * [?print-pdf](?print-pdf)

  Then, [print to file](https://revealjs.com/pdf-export/#instructions) to generate the PDF
</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 id='goodbye' data-transition='convex'>
  <h1>THE END</h1>
  <h3><a href="https://github.com/ryanj/gist-reveal">gist-reveal</a> by <a href="https://github.com/ryanj/">ryanj</a> and <a href="https://github.com/fkautz">fkautz</a></h3>
  <h5>reveal.js by Hakim El Hattab / hakim.se</h5>
  <br/>	
  <p><small><a style='font-weight:bold;' href='https://github.com/ryanj/gist-reveal'>github.com/ryanj/gist-reveal</a>
  <br/> <a style='font-weight:bold;' href='https://hub.docker.com/r/ryanj/gist-reveal/'>hub.docker.com/r/ryanj/gist-reveal</a></small></p>
</section>