Improve exampleSite presentation

Better flow and more information

Plus... emoji!

exampleSite/content/_index.md

@@ -4,12 +4,15 @@ description = "A Hugo theme for creating Reveal.js presentations"
 outputs = ["Reveal"]
 [reveal_hugo]
 custom_theme = "reveal-hugo/themes/robot-lung.css"
+history = true
 margin = 0.2
 highlight_theme = "color-brewer"
 transition = "slide"
 transition_speed = "fast"
 +++
 
+# 📽️
+
 # reveal-hugo
 
 A Hugo theme for creating Reveal.js presentations.

exampleSite/content/example/_index.md

@@ -3,6 +3,7 @@ title = "Example of a section presentation"
 outputs = ["Reveal"]
 [reveal_hugo]
 theme = "moon"
+history = true
 +++
 
 # Section Presentation

exampleSite/content/home/features.md

@@ -6,35 +6,14 @@ weight = 10
 
 - All Reveal.js HTML, CSS and JS (v3.6.0)
 - All out-of-the-box Reveal.js themes
-- A "Reveal" `outputFormat` that outputs a presentation for any Hugo section
+- Two custom Reveal.js themes (including this one)
 
 ---
 
 ## Features
 
-- Markdown files are parsed into multiple slides
+- Write slides in Markdown in one or more files
-- Built-in shortcodes expose Reveal.js functionality
+- Shorcodes for fragments, sections, slides & more
-- Customize Reveal.js parameters including the theme
+- All Reveal.js parameters can be customized
+- Any Hugo section can be output as a presentation
 
----
-
-## Multiple slides per markdown file
-
-Separate slides with `---`
-
-```markdown
-# Slide 1
-
-Body 1.
-
----
-
-# Slide 2
-
-Body 2.
-
-```
-
----
-
-I'm a **new** slide from the **same** markdown file.

exampleSite/content/home/resources.md

@@ -1,15 +1,19 @@
 +++
-weight = 40
+weight = 42
 +++
 
-### Learn more
+# Resources
-
-- [reveal-hugo Github README](https://github.com/dzello/reveal-hugo)
-- [Code for this presentation](https://github.com/dzello/reveal-hugo/tree/master/exampleSite)
 
 ---
 
-### Resources
+## Get the code
+
+- [reveal-hugo Github README](https://github.com/dzello/reveal-hugo)
+- [Content for this presentation](https://github.com/dzello/reveal-hugo/tree/master/exampleSite)
+
+---
+
+## External resources
 
 - [Reveal.js](https://revealjs.com/)
 - [Hugo docs](https://gohugo.io/)
@@ -17,11 +21,21 @@ weight = 40
 
 ---
 
-### Service-ready
+## Designed to...
 
 - Deploy to [Netlify](https://netlify.com/)
 - Edit with [Forestry](https://forestry.io/)
 
 ---
 
-## Thanks!
+# 🙏
+
+Contribute by opening issues and pull requests.
+
+---
+
+# Thanks!
+
+---
+
+# 👍

exampleSite/content/home/shortcodes/fragment.md

@@ -2,7 +2,7 @@
 weight = 30
 +++
 
-## Fragment shortcode
+## Fragment
 
 The `fragment` shortcode makes content appear incrementally.
 
@@ -18,7 +18,7 @@ The `fragment` shortcode makes content appear incrementally.
 
 ---
 
-## Frag shortcode
+## Frag
 
 The `frag` shortcode is more terse than `fragment`. It accepts a `c` attribute.
 

exampleSite/content/home/shortcodes/introduction.md

@@ -0,0 +1,11 @@
++++
+weight = 29
++++
+
+# Shortcodes
+
+---
+
+Hugo's shortcodes are similar to functions or templates that extend what you can do with Markdown.
+
+[Shortcode documentation](https://gohugo.io/content-management/shortcodes/)

exampleSite/content/home/shortcodes/markdown.md

@@ -4,15 +4,15 @@ weight = 36
 
 {{< markdown >}}
 
-## Markdown Shortcode
+## Markdown
 
-This markdown is not processed by Hugo, but passed directly through to Reveal.js.
+Markdown is not processed by Hugo but passed directly through to Reveal.js.
 
----
+```
-
+{{</* markdown */>}}
-## Markdown Shortcode
+# Hello world!
-
+{{</* /markdown */>}}
-Many handy slide shortcuts and customizations are possible.
+```
 
 [See the Reveal.js markdown docs](https://github.com/hakimel/reveal.js#markdown)
 
@@ -20,7 +20,7 @@ Many handy slide shortcuts and customizations are possible.
 
 <!-- .slide: data-background="#FF4081" -->
 
-For example, an HTML comment can change the background color of a slide.
+Reveaj.js Markdown uses HTML comments to change slide properties, like background color.
 
 ```
 {{</* markdown */>}}
@@ -30,3 +30,4 @@ For example, an HTML comment can change the background color of a slide.
 ```
 
 {{< /markdown >}}
+

exampleSite/content/home/shortcodes/other.md

@@ -2,7 +2,7 @@
 weight = 38
 +++
 
-## Note shortcode
+## Note
 
 Add speaker notes to your presentation.
 
@@ -20,5 +20,10 @@ You found the speaker notes!
 
 <section data-noprocess>
   <h2>Pure HTML Slide</h2>
-  <p>Surround slides in a <code>section</code> tag with a <code>data-noprocess</code> attribute to write them in HTML.</p>
+  <p>Surround slides in a <code>section</code> tag with a <code>data-noprocess</code> attribute to write them in pure HTML.</p>
+  <pre>
+&lt;section data-noprocess&gt;
+  &lt;h1&gt;Hello world!&lt;/h1&gt;
+&lt;section&gt;</pre>
+  <small>💡 This is useful if you can't get Markdown to output exactly what you want.</small>
 </section>

exampleSite/content/home/shortcodes/section.md

@@ -1,10 +1,10 @@
 +++
-weight = 32
+weight = 36
 +++
 
 {{% section %}}
 
-## Section shortcode
+## Section
 
 The `section` shortcode groups slides into a vertical display.
 

exampleSite/content/home/shortcodes/slide.md

@@ -2,11 +2,11 @@
 weight = 34
 +++
 
-## Slide shortcode
+## Slide
 
 Customize individual slide parameters like background color and transition.
 
-[See all parameters](https://github.com/hakimel/reveal.js#slide-backgrounds)
+[See all slide params](https://github.com/hakimel/reveal.js#slide-backgrounds)
 
 ---
 
@@ -16,7 +16,9 @@ Customize individual slide parameters like background color and transition.
 
 ```
 {{%/* slide transition="zoom" transition-speed="fast" */%}}
+
 ## Custom slide 1
+
 {{%/* /slide */%}}
 ```
 
@@ -30,7 +32,9 @@ Customize individual slide parameters like background color and transition.
 
 ```
 {{%/* slide background-color="#FF4081" */%}}
+
 ## Custom slide 2
+
 {{%/* /slide */%}}
 ```
 

exampleSite/content/home/usage.md

@@ -8,7 +8,7 @@ weight = 20
 
 ## Prerequisite
 
-Add this to your `config.toml`:
+First, add this to your `config.toml`:
 
 ```toml
 [outputFormats.Reveal]
@@ -19,53 +19,9 @@ isHTML = true
 
 ---
 
-## Configure themes
+### Presentation at site root
 
-Optional. In `config.toml` or front matter of individual presentations.
+Create `content/_index.md`:
-
-```toml
-[params.reveal_hugo]
-theme = "moon"
-highlight_theme = "zenburn"
-```
-
-[Reveal.js themes](https://github.com/hakimel/reveal.js/#theming) ·
-[highlight.js themes](https://highlightjs.org/static/demo/)
-
----
-
-## Custom Reveal.js theme
-
-Point to a file in the `static` directory.
-
-```toml
-[params.reveal_hugo]
-custom_theme = "themes/dzello.css"
-```
-
----
-
-## Configure Reveal.js
-
-Set **snakecase** versions of Reveal.js params, which will be camelized and passed to `Reveal.initialize`.
-
-```toml
-[params.reveal_hugo]
-slide_number = true
-transition_speed = 'fast'
-```
-
-[Reveal config params](https://github.com/hakimel/reveal.js/#configuration)
-
----
-
-# Creating presentations
-
----
-
-## Presentation at `/`
-
-In `content/_index.md`:
 
 ```markdown
 +++
@@ -74,14 +30,34 @@ outputs = ["Reveal"]
 
 # Slide 1
 
----
+Hello world!
-
-# Slide 2
 ```
 
 ---
 
-Put more slides in `content/home/*.md`
+### Add slides in same file
+
+Separate them by `---`:
+
+```
+
+# Slide 1
+
+Hello world!
+
+---
+
+# Slide 2
+
+Hello program!
+
+```
+
+---
+
+### Add slides with other files
+
+Add slides to `content/home/*.md`
 
 ```markdown
 +++
@@ -95,12 +71,11 @@ weight = 10
 # Slide 4
 ```
 
-Use `weight` to specify the order relative to other files.
+<small>💡 Tip: Use `weight` to specify the order that files should be added.</small>
-
 
 ---
 
-## For any Hugo section
+### Presentation at '/{section}/'
 
 In `content/{section}/_index.md`:
 
@@ -119,7 +94,7 @@ outputs = ["Reveal"]
 
 ---
 
-Put more slides in `content/{section}/*.md`
+Add slides from other files in `content/{section}/*.md`
 
 ```markdown
 +++
@@ -133,4 +108,66 @@ weight = 10
 # Slide 4
 ```
 
-Use `weight` to specify the order relative to other files.
+<small>💡 Tip: Use `weight` to specify the order that files should be added.</small>
+
+---
+
+# Configuration
+
+---
+
+## Reveal.js themes
+
+Put in `config.toml` or a presentation's front matter.
+
+Use the `theme` key for themes that come with Reveal.js.
+
+```toml
+[params.reveal_hugo]
+theme = "moon"
+highlight_theme = "zenburn"
+```
+
+[Reveal.js themes](https://github.com/hakimel/reveal.js/#theming) &middot;
+[highlight.js themes](https://highlightjs.org/static/demo/)
+
+---
+
+## Use a custom theme
+
+Use the `custom_theme` key to point to a CSS file in the `static` directory.
+
+```toml
+[params.reveal_hugo]
+custom_theme = "reveal-hugo/themes/robot-lung.css"
+```
+
+---
+
+## Like this theme?
+
+reveal-hugo comes with 2 extra Reveal.js themes:
+
+- [robot-lung](https://github.com/dzello/revealjs-themes#robot-lung) (this one)
+- [sunblind](https://github.com/dzello/revealjs-themes#sunblind)
+
+<br>
+<small>
+They live in the `static/reveal-hugo/themes` folder and also [on Github](https://github.com/dzello/revealjs-themes).
+</small>
+
+---
+
+## Reveal.js params
+
+Set **snakecase** versions of Reveal.js params, which will be camelized and passed to `Reveal.initialize`.
+
+```toml
+[params.reveal_hugo]
+history = true
+slide_number = true
+transition = 'zoom'
+transition_speed = 'fast'
+```
+
+[Full list of params](https://github.com/hakimel/reveal.js/#configuration)