6 files changed, 433 insertions, 0 deletions
diff --git a/exampleSite/content/home/shortcodes/fragment.md b/exampleSite/content/home/shortcodes/fragment.md
new file mode 100644
index 0000000..e53592c
--- /dev/null
+++ b/exampleSite/content/home/shortcodes/fragment.md
@@ -0,0 +1,41 @@
++++
+weight = 30
++++
+
+## Fragment
+
+The `fragment` shortcode makes content appear incrementally.
+
+```
+{{%/* fragment */%}} One {{%/* /fragment */%}}
+{{%/* fragment */%}} Two {{%/* /fragment */%}}
+{{%/* fragment */%}} Three {{%/* /fragment */%}}
+```
+
+{{% fragment %}} One {{% /fragment %}}
+{{% fragment %}} Two {{% /fragment %}}
+{{% fragment %}} Three {{% /fragment %}}
+
+---
+
+## Frag
+
+The `frag` shortcode is more terse than `fragment`. It accepts a `c` attribute.
+
+```
+{{</* frag c="One" */>}}
+{{</* frag c="Two" */>}}
+{{</* frag c="Three" */>}}
+```
+
+{{< frag c="One" >}}
+{{< frag c="Two" >}}
+{{< frag c="Three" >}}
+
+---
+
+Both `fragment` and `frag` accept two additional parameters:
+
+- `class`: sets the class of the wrapping `span` element
+- `index`: controls the order in which sections will appear
+
diff --git a/exampleSite/content/home/shortcodes/introduction.md b/exampleSite/content/home/shortcodes/introduction.md
new file mode 100644
index 0000000..2978a52
--- /dev/null
+++ b/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/)
+\ No newline at end of file
diff --git a/exampleSite/content/home/shortcodes/markdown.md b/exampleSite/content/home/shortcodes/markdown.md
new file mode 100644
index 0000000..0c49b4e
--- /dev/null
+++ b/exampleSite/content/home/shortcodes/markdown.md
@@ -0,0 +1,38 @@
++++
+weight = 36
++++
+
+{{< markdown >}}
+
+## Markdown
+
+Reveal.js has its own [markdown processor](https://github.com/hakimel/reveal.js#markdown). To use that instead of Hugo, surround a slide with the markdown shortcode.
+
+```markdown
+{{</* markdown */>}}
+
+# Hello world!
+
+{{</* /markdown */>}}
+```
+
+<br>
+<small>
+💡 Make sure to use the `{{</* */>}}` shortcode syntax to avoid rendering by Hugo.
+</small>
+
+---
+
+<!-- .slide: data-background="#FF4081" -->
+
+Reveal.js markdown uses HTML comments to change slide properties, like background color.
+
+```markdown
+{{</* markdown */>}}
+<!-- .slide: data-background="#FF4081" -->
+# I'm a colorful slide
+{{</* /markdown */>}}
+```
+
+{{< /markdown >}}
+
diff --git a/exampleSite/content/home/shortcodes/other.md b/exampleSite/content/home/shortcodes/other.md
new file mode 100644
index 0000000..fda5276
--- /dev/null
+++ b/exampleSite/content/home/shortcodes/other.md
@@ -0,0 +1,49 @@
++++
+weight = 38
++++
+
+## Notes
+
+Add speaker notes (with markdown) to your presentation with the `note` shortcode. Type 's' to see this slide's speaker notes.
+
+```markdown
+---
+
+{{%/* note */%}}
+- You found the **speaker notes**!
+{{%/* /note */%}}
+
+---
+```
+
+{{% note %}}
+- You found the **speaker notes**!
+{{% /note %}}
+
+---
+
+{{< slide notes="You found the notes!" >}}
+
+## Notes
+
+You can also add notes with the `slide` shortcode and `notes` attribute:
+
+```markdown
+---
+
+{{%/* slide notes="You found the notes!" */%}}
+
+---
+```
+
+---
+
+<section data-noprocess>
+  <h2>Write slides in HTML</h2>
+  <p>Use a <code>section</code> tag with a <code>data-noprocess</code> attribute to avoid any processing by reveal-hugo.</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>
diff --git a/exampleSite/content/home/shortcodes/section.md b/exampleSite/content/home/shortcodes/section.md
new file mode 100644
index 0000000..797ba21
--- /dev/null
+++ b/exampleSite/content/home/shortcodes/section.md
@@ -0,0 +1,44 @@
++++
+weight = 33
++++
+
+{{% section %}}
+
+## Section
+
+The `section` shortcode groups slides into a **vertical display**.
+
+<br>
+<small>
+use the down arrow or swipe down to continue
+</small>
+<br>
+<a href="#" class="navigate-down">🔽</a>
+
+---
+
+Put the shortcode around the slides you want to group together.
+
+```markdown
+{{%/* section */%}}
+
+## Section slide 1
+
+---
+
+## Section slide 2
+
+{{%/* /section */%}}
+```
+
+Keep going down.
+
+---
+
+## That's it!
+
+Use the right arrow or swipe right to continue.
+
+{{% /section %}}
+
+
diff --git a/exampleSite/content/home/shortcodes/slide.md b/exampleSite/content/home/shortcodes/slide.md
new file mode 100644
index 0000000..3ce5b8c
--- /dev/null
+++ b/exampleSite/content/home/shortcodes/slide.md
@@ -0,0 +1,250 @@
++++
+weight = 34
++++
+
+## Slide
+
+Use this shortcode when you need to customize slide attributes like id, class, background color and transition.
+
+---
+
+{{< slide class="hello" >}}
+
+## Slide
+
+Add the shortcode above the slide's content, below the `---`.
+
+```markdown
+---
+
+{{</* slide class="hello" */>}}
+
+## Hello, world!
+
+---
+```
+
+---
+
+{{< slide transition="zoom" transition-speed="fast" >}}
+
+## Custom slide 1
+
+<small>Did you notice? This slide has a fast zoom transition.</small>
+
+```markdown
+---
+
+{{</* slide transition="zoom" transition-speed="fast" */>}}
+
+## Custom slide 1
+
+---
+```
+
+---
+
+{{< slide background-color="#FF4081" >}}
+
+## Custom slide 2
+
+<small>This slide has a different background color.</small>
+
+```markdown
+---
+
+{{</* slide background-color="#FF4081" */>}}
+
+## Custom slide 2
+
+---
+```
+
+---
+
+{{< slide background-image="/images/alex-litvin-790876-unsplash.jpg" background-color="#000000" >}}
+
+## Custom slide 3
+
+<small>This slide has a background image.</small>
+
+```markdown
+---
+
+{{</* slide background-image="/images/alex-litvin-790876-unsplash.jpg" */>}}
+
+---
+```
+
+<small>(credit <a href="https://unsplash.com/@alexlitvin">Alex Litvin</a>)</small>
+
+---
+
+{{< slide id="custom-slide" >}}
+
+💡 Tip: Setting a slide's `id` attribute makes it easy to link to from other parts of the presentation.
+<br><br>
+
+```markdown
+---
+
+{{</* slide id="custom-slide" */>}}
+
+## Custom slide
+
+---
+```
+
+---
+
+```markdown
+[Try the link](#custom-slide)
+```
+
+<br>
+
+[Try the link](#custom-slide)
+
+---
+
+Slide attribute possibilities from the [Reveal.js docs](https://github.com/hakimel/reveal.js):
+
+- `autoslide`
+- `state`
+- `background`
+- `background-color`
+- `background-image`
+- `background-size`
+- `background-position`
+- `background-repeat`
+
+---
+
+- `background-video`
+- `background-video-loop`
+- `background-video-muted`
+- `background-interactive`
+- `background-iframe`
+- `background-transition`
+- `transition` (can have different in and out transitions)
+- `transition-speed`
+- `notes` (can also use the note shortcode)
+- `timing`
+
+---
+
+{{% section %}}
+
+## Slide templates
+
+Store sets of common slide attributes in front matter variables and apply them to slides with the template attribute.
+
+<br>
+<small>
+navigate down to learn more
+</small>
+<br>
+<a href="#" class="navigate-down">🔽</a>
+
+---
+
+Create templates in config.toml, _index.md or the current page's front matter. Put them under the **templates** key with a meaningful name:
+
+```toml
+[reveal_hugo.templates.hotpink]
+class = "hotpink"
+background = "#FF4081"
+```
+
+---
+
+{{< slide template="hotpink" >}}
+
+Apply the template using the **template** attribute of the slide shortcode:
+
+```markdown
+{{</* slide template="hotpink" */>}}
+
+# I'm a hot pink slide!
+```
+
+---
+
+If a template exists in multiple configurations, it's properties will be merged. If a property is declared multiple times, the order of precedence is:
+
+- page
+- section (_index.md)
+- site (config.toml)
+
+{{% /section %}}
+
+---
+
+{{% section %}}
+
+{{< slide content="home.reusable" >}}
+
+---
+
+{{< slide content="common.nested.reusable" >}}
+
+{{% /section %}}
+
+---
+
+{{% section %}}
+
+## Slide-specific CSS
+
+Add more variety to your presentation by applying slide-specific CSS.
+
+<br>
+<small>
+navigate down to learn more
+</small>
+<br>
+<a href="#" class="navigate-down">🔽</a>
+
+---
+
+First, use the `slide` shortcode to give the slide a class:
+
+```markdown
+---
+
+{{</* slide class="side-by-side" */>}}
+
+# 📈
+
+# 📊
+
+---
+```
+
+---
+
+Next, use a layout extension partial like `reveal-hugo/head.html` to add CSS selectors:
+
+```html
+<style>
+.reveal section.side-by-side h1 {
+  position: absolute;
+}
+.reveal section.side-by-side h1:first-of-type {
+  left: 25%;
+}
+.reveal section.side-by-side h1:nth-of-type(2) {
+  right: 25%;
+}
+</style>
+```
+
+---
+
+{{< slide class="side-by-side" >}}
+
+# 📈
+
+# 📊
+
+{{% /section %}}