Add shortcodes for customizing slides, markdown, HTML

exampleSite/content/home/shortcodes/fragment.md

@@ -0,0 +1,41 @@
++++
+weight = 30
++++
+
+## Fragment shortcode
+
+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 shortcode
+
+The `frag` shortcode 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
+

exampleSite/content/home/shortcodes/markdown.md

@@ -0,0 +1,30 @@
++++
+weight = 36
++++
+
+{{< markdown >}}
+
+## Markdown Shortcode
+
+This markdown is not processed by Hugo, but by Reveal.js itself.
+
+---
+
+## Markdown Shortcode
+
+Many handy slide shortcuts and customizations are possible.
+
+[See them all](https://github.com/hakimel/reveal.js#markdown)
+
+---
+
+<!-- .slide: data-background="blue" -->
+
+For example, an HTML comment can change the background color of a slide.
+
+```
+<!-- .slide: data-background="blue" -->
+```
+
+{{< /markdown >}}
+

exampleSite/content/home/shortcodes/other.md

@@ -0,0 +1,24 @@
++++
+weight = 38
++++
+
+## Note shortcode
+
+Add speaker notes to your presentation.
+
+```markdown
+{{%/* note */%}}
+Type 's' to see this slide's speaker notes.
+{{%/* /note */%}}
+```
+
+{{% note %}}
+You found the speaker notes!
+{{% /note %}}
+
+---
+
+<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>
+</section>

exampleSite/content/home/shortcodes/section.md

@@ -0,0 +1,39 @@
++++
+weight = 32
++++
+
+{{% section %}}
+
+## Section shortcode
+
+The `section` shortcode groups slides into a vertical display.
+
+**To continue, use the down arrow or swipe down.**
+
+---
+
+Put the shortcode around the slides you want to group together.
+
+```markdown
+{{%/* section */%}}
+
+## Section slide 1
+
+---
+
+## Section slide 2
+
+{{%/* /section */%}}
+```
+
+Keep scrolling down.
+
+---
+
+## That's it!
+
+Use the right arrow or swipe right to continue.
+
+{{% /section %}}
+
+

exampleSite/content/home/shortcodes/slide.md

@@ -0,0 +1,38 @@
++++
+weight = 34
++++
+
+## Slide shortcode
+
+Used to customize the parameters of individual slides like background color and transition.
+
+[See all parameters](https://github.com/hakimel/reveal.js#slide-backgrounds)
+
+---
+
+{{% slide transition="zoom" %}}
+
+## Custom slide 2
+
+```
+{{%/* slide transition="zoom" */%}}
+## Custom slide 1
+{{%/* /slide */%}}
+```
+
+{{% /slide %}}
+
+---
+
+{{% slide background-color="white" %}}
+
+## Custom slide 2
+
+```
+{{%/* slide background-color="white" */%}}
+## Custom slide 2
+{{%/* /slide */%}}
+```
+
+{{% /slide %}}
+