Slides-Template

What and Why

Tired of fighting PowerPoint or Keynote to show basic code blocks? Want a web-native presentation
template solution? One that can show code off quickly and easily with syntax highlighting,
collapsible regions, and line numbers? Or a d3 visualization? Or maybe a simple twitter embed?

Do you want everything preconfigured out of the box (a non-trivial task), but ready to extend?
Well, this is simply the fastest way to get to an in-memory, ready to run template for
tech & code presentations - especially if you TypeScript and Sass.

Quick Start

To install the dependencies (make sure you have Node.js installed before beginning) and start the application:

Shell:
```
 npm install
 npm start
```
Browser: Go to http://localhost/presentations/index.html.

Technical Stack

Here is the tech integrated and working is this template:

Reveal.js: The open source slide framework used by http://slid.es, here is what is preconfigured:
- Marked/Markdown: Built in plugin to add support for markdown blocks
- Highlight.js: Built in plugin that provides a simplistic syntax highlighting of
  blocks
- Zoom.js: Built in plugin that allows speakers to alt-click a slide to zoom in
- Speaker Notes: Built in plugin that allows speakers to press s to show a speaker notes view
- Reveal.js-Menu: Adds a menu slideout (lists slides, allows theme & transition changes)
- Reveal.js-Ace: Allows embedding an Ace editor into an iframe
- Reveald3: Allows embedding a d3 html document into an iframe
- Badges: Adds a language badge to Hightlight.js code blocks only
- Elapsed Time Bar: Shows a time bar above the progressbar to help with talk pacing
- Embed Tweet: Allows embedding a tweet (totally formatted) of any given tweet url
- addHeader(): A custom extension to show the title (from your tag) next to the Reveal.js-menu hamburger</li><li>addVenue(): A custom extension to show the venue in the lower left corner, from your meta:<ul> <li>Venue: <code><meta name="venue" content="NOVA CodeCamp 2018.1"></code></li></ul> </li><li>addDetailsToToast(): A custom extension to show slide details in a pill (just like slid.es does):<ul> <li>Author: <code><meta name="author" content="{Author Name Here}"></code></li><li>Author Image (from your github profile): <code><meta name="github" content="{Your Github name}"></code></li><li>Title: <code><title>{Author Name Here}</title></code></li></ul> </li><li>Ace editor’s also get badges for JS, TS, & HTML (<code>reveal.scss > div.ace-container</code>)</li></ul> </li><li><p><strong><a href="https://www.typescriptlang.org/">TypeScript</a></strong>: JavaScript at scale is everywhere, even the <code>webpack.config.ts</code></p> </li><li><strong><a href="http://sass-lang.com/">Sass</a></strong>: CSS with superpowers</li><li><strong><a href="http://fontawesome.io/">FontAwesome</a></strong>: The iconic font and CSS toolkit</li><li><strong><a href="https://ace.c9.io/">Ace Editor</a></strong>: High performance code editor for the web, now ready to embed in your slide<ul> <li>Custom theme, <code>ace-theme-aurelia-dark-plus</code> included matches the vscode <code>aurelia-dark-plus</code> theme by the Aurelia team</li></ul> </li><li><strong><a href="https://d3js.org/">D3JS</a></strong>: The library used to bring data to life<ul> <li>Sample d3 figures are in <code>/d3-fig/*</code>, a few of which are shown in use on the sample slide <code>/src/presentations/index.html</code></li></ul> </li><li>Prebuilt <a href="#included-layouts"><strong><code>layouts</code></strong></a> available to allow you, the speaker, to quickly focus on the presentation content</li><li><strong><a href="https://webpack.js.org/">Webpack 3</a></strong> - completely built with Webpack… <em>using</em> <strong>TypeScript</strong>, preconfigured with an API to<br>read and serve up the local presentations<ul> <li>Uses <a href="https://github.com/webpack/webpack-dev-server">webpack-dev-server</a> to serve the site in memory (no deployment)</li><li>Extended to serve an express route <code>/api/files</code> to list all HTML files in <code>/src/presentations</code> (except the sample slide <code>/src/presentations/index.html</code>)</li></ul> </li></ol> <h2 id="h2-presentation-list"><a name="Presentation List" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Presentation List</h2><p><a href="https://localhost/">https://localhost/</a></p> <p><img src="./src/images/presentation-list.png" alt="Presentation List"></p> <blockquote> <p>Note: This list is from my local machine, yours will be empty until you create<br>new html files under <code>/src/presentations/*</code></p> </blockquote> <h3 id="h3-title-author-presented"><a name="Title, Author, Presented" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Title, Author, Presented</h3><p>Use <meta> tags & the <title> tag to get your presentation details to show up on the presentation list.</p> <pre><code class="lang-html"><title>Slides Template</title> <meta name="author" content="Steve Hartzog"> <meta name="presented" content="{Date Presented}" scheme="YYYY-MM-DD"> <meta name="venue" content="{Venue Name}"> </code></pre> <h3 id="h3-technology"><a name="Technology" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Technology</h3><p>To get a technology group to show on the list, create a folder underneath <code>presentations</code>:</p> <table> <thead> <tr> <th>Group</th> <th>Directory Example</th> </tr> </thead> <tbody> <tr> <td>JavaScript</td> <td>/src/presentations/<strong>javascript</strong>/intro-101.html</td> </tr> <tr> <td>TypeScript</td> <td>/src/presentations/<strong>typescript</strong>/intro-101/index.html</td> </tr> <tr> <td>Webpack</td> <td>/src/presentations/<strong>webpack</strong>/webpack-501/index.html</td> </tr> </tbody> </table> <h2 id="h2-slide-configuration"><a name="Slide Configuration" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Slide Configuration</h2><h3 id="h3-disable-plugins"><a name="Disable Plugins" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Disable Plugins</h3><p>By default all plugins are enabled, but you can disable some plugins if you<br>don’t need them. To disable one of these plugins just add a CSV list of plugins<br>to disable in the <code>data-disable-plugins</code> attribute on <code>.slides</code>:</p> <pre><code class="lang-html"><div class="slides" data-disable-plugins="d3, ace"> </code></pre> <blockquote> <p>Valid Plugins to disable include: <code>ace, badges, d3, hljs, menu, timeBar, tweets</code></p> </blockquote> <h3 id="h3-timer"><a name="Timer" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Timer</h3><p>To enable a timer above your progressbar (on the bottom), just add the time in <em>minutes</em> to your <code>.slides</code> container:</p> <pre><code class="lang-html"><div class="slides" data-timer="15"> </code></pre> <h3 id="h3-included-layouts"><a name="Included Layouts" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Included Layouts</h3><p><code>Layouts</code> are classes you can assign that provide some structure to your slide.<br>This structure comes from the <code>./src/styles/layouts.scss</code> style sheet.<br>Here are a few to start (all using grid) and must be wrapped with <code><div class="reveal grid"></code>:</p> <ol> <li><code><section class="title"></code>: Standard title slide</li><li><code><section class="two-column"></code>: Two columns, small left (with shaded background), big right column</li><li><code><section class="two-row"></code>: Two rows, large big (with shaded background, designed for a ‘hero’ image), smaller bottom row</li><li><code><section class="two-row"></code>: Two rows, small big (with shaded background), large bottom row</li><li><code><section class="two-row-bottom"></code>: For an information packed final slide, 2 columns in the first row (1 image column, 1 data column), 2nd row for contact details (2 columns).</li></ol> <blockquote> <p><em>Theme Compatability</em>. These layouts should work with all themes (all em’s<br>to support font-size changes). More slide layouts to come, or submit your own<br>as a pull request!</p> </blockquote> <h4 id="h4-centering"><a name="Centering" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Centering</h4><p>By default, the slide content will be centered.<br>If you wish to override this setting by adding the <code>top</code> class to a slide column<br>or the <code>left</code> class to a slide row:</p> <pre><code class="lang-javascript"> <section class="two-column"> <div>...</div> <div class="top"> ... content here is top aligned now. </div> </section>  <section class="two-row-top"> <div>...</div> <div class="left"> ... content here is left aligned now. </div> </section> </code></pre> <h4 id="h4-figures"><a name="Figures" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Figures</h4><p>Occasionally you will want an image “floated” to the left.<br>There is no need to use floats anymore… just use the <code><figure></code> element,<br>which I have pre-styled to give the same effect.</p> <pre><code class="lang-javascript"><figure> <img src="xyz.gif" width="150px" /> <figcaption>Text here will show up on the right of the image</figcaption> </figure> </code></pre> <h4 id="h4-example-slide-using-all-options"><a name="Example Slide using all options" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Example Slide using all options</h4><pre><code class="lang-html"><div class="reveal grid"><div class="slides" data-timer="15"> <section class="two-column"> <div> <h3>First Column Header</h3> <blockquote>Special quote</blockquote> </div> <div class="top"> <h3 class="bullet fragment">Bullet One</h3> <h3 class="bullet fragment">Bullet Two</h3> <ul class="fragment"> <li class="bullet">First item<br/> <span class="indent">second line of first item, indented</span> </li> </ul> <h4 class="bullet fragment">Sub Bullet one</h4> <h3 class="bullet fragment">Bullet Three</h3> <h3 class="bullet fragment">Bullet Four</h3> </div> </section> </div></div> </code></pre> <h3 id="h3-additional-styles"><a name="Additional Styles" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Additional Styles</h3><h4 id="h4-bullets"><a name="Bullets" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Bullets</h4><p>Add the <code>bullet</code> class to add a bullet arrow to the left of any element,<br>it is automatically added to <code>ul</code> & <code>ol</code>, but is manually added to any other:</p> <pre><code class="lang-javascript"><h1 class="bullet">H3 Bullet</h1> <h2 class="bullet">H3 Bullet</h2> <h3 class="bullet">H3 Bullet</h3> <h4 class="bullet">H3 Bullet</h4> </code></pre> <h4 id="h4-fragments"><a name="Fragments" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Fragments</h4><p>Reveal provides a <code>fragment</code> class that can be added to have items appear as you<br>advance (like PowerPoint’s Animation: Appear):</p> <pre><code class="lang-javascript"><h1 class="fragment">H3 Bullet</h1> <ol class="frgrament"> <li></li> </ol> <ol> <li>First item shows immediately</li> <li class="fragment">Shows up after advancing</li> </ol> </code></pre> <h4 id="h4-indents"><a name="Indents" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Indents</h4><p>Occasionally you may went to wrap and indent an <code>li</code>:</p> <pre><code class="lang-javascript"><ul> <li>A long string of text<br/> <span class="indent">A second line of text</span> </li> </ul> </code></pre> <h3 id="h3-reveal-js-menu"><a name="Reveal.js-Menu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Reveal.js-Menu</h3><p>To add a custom slide title (by default it grabs the first h# tag), just add the<br><code>data-menu-title</code> attribute on any gives <code>section</code> tag:</p> <pre><code class="lang-html"><section data-menu-title="My Custom Title"> </code></pre> <h2 id="h2-rest-endpoint-code-api-files-code-"><a name="REST Endpoint: <code>/api/files</code>" class="reference-link"></a><span class="header-link octicon octicon-link"></span>REST Endpoint: <code>/api/files</code></h2><p>This endpoint, which is also served when you <code>npm start</code>, will show a listing of all html<br>files under <code>./src/presentations/</code> (except for the template slide, <code>./src/presentations/index.html</code>).<br>To view what is served by this endpoint:</p> <ul> <li><a href="http://localhost/api/files">http://localhost/api/files</a> with your browser</li><li><a href="https://insomnia.rest/">Insomnia.rest</a>: The best REST API tester ever.</li></ul> <h2 id="h2-future-fixes-amp-features"><a name="Future Fixes & Features" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Future Fixes & Features</h2><p>Feedback is requested. Let me know what you need as a speaker.<br>Until then I’ll be working on the following:</p> <ol> <li>Fix print/pdf output to properly hide the menu and venue.</li><li>Update slide layout styles to support font sizes on all themes (switch from px to em)</li><li>More and higher quality layouts</li><li>Package the extended features as Reveal.js plugins</li><li>Enable more plugins to be disabled, or possibly disable all and have an enabled-plugins feature</li></ol>