Make the slide shortcode easier to use

README.md

@@ -151,21 +151,25 @@ Wrap any content in the fragment shortcode and it will appear incrementally. Gre
 Like fragment but more terse - content is placed inline in a self-closing shortcode.
 
 ```markdown
-- {{< frag c="One" />}}
+- {{< frag c="One" >}}
-- {{< frag c="Two" />}}
+- {{< frag c="Two" >}}
-- {{< frag c="Three" />}}
+- {{< frag c="Three" >}}
 ```
 
 #### slide shortcode
 
 The slide shortcode lets you set custom HTML and Reveal.js attributes for each slide - things like id, class, transition, background and [much more](https://github.com/hakimel/reveal.js/#slide-attributes). The names are the same as Reveal.js but without the 'data-' prefix.
 
+Add the shortcode above the slide content, below the `---` separator. Do not place content inside of the shortcode.
+
 ```markdown
-{{% slide id="hello" background="#FFF" transition="zoom" transition-speed="fast" %}}
+---
+
+{{< slide id="hello" background="#FFF" transition="zoom" transition-speed="fast" >}}
 
 # Hello, world!
 
-{{% /slide %}}
+---
 ```
 
 Here's a list of documented slide attributes from the Reveal.js docs:
@@ -355,6 +359,10 @@ Here are a few useful Reveal.js-related tools:
 
 Find many more on the Reveal.js wiki: [Plugins, tools and hardware](https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware).
 
+## Changelog
+
+- 2018-08-03: The slide shortcode is now easier to use. An auto-closing version sits inside the slide instead of needing to surround its content and add a closing tag.
+
 ## Contributing
 
 Contributions are very welcome. To run the example site in this repository locally, clone this repository and run:

exampleSite/content/home/shortcodes/markdown.md

@@ -8,7 +8,7 @@ weight = 36
 
 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!
@@ -27,7 +27,7 @@ Reveal.js has its own [markdown processor](https://github.com/hakimel/reveal.js#
 
 Reveal.js markdown uses HTML comments to change slide properties, like background color.
 
-```
+```markdown
 {{</* markdown */>}}
 <!-- .slide: data-background="#FF4081" -->
 # I'm a colorful slide

exampleSite/content/home/shortcodes/slide.md

@@ -4,45 +4,66 @@ weight = 34
 
 ## Slide
 
-Customize individual slide attributes like id, class, background color and transition. Use the same keys as Reveal.js but omit the 'data-' prefix.
+Use this shortcode when you need to customize slide attributes like id, class, background color and transition.
 
 ---
 
-{{% slide id="custom-1" transition="zoom" transition-speed="fast" %}}
+## Slide
 
-## Custom slide 1
+Add the shortcode above the slide's content, below the `---`.
 
+```markdown
+---
+
+{{</* slide class="hello" */>}}
+
+## Hello, world!
+
+---
 ```
-{{%/* slide id="custom-1" transition="zoom" transition-speed="fast" */%}}
-
-## Custom slide 1
-
-{{%/* /slide */%}}
-```
-
-{{% /slide %}}
 
 ---
 
-{{% slide id="custom-2" background="#FF4081" %}}
+{{< slide id="custom-1" transition="zoom" transition-speed="fast" >}}
+
+## Custom slide 1
+
+<small>This slide has a fast zoom transition.</small>
+
+```markdown
+{{</* slide id="custom-1" transition="zoom" transition-speed="fast" */>}}
+
+## Custom slide 1
+```
+
+---
+
+{{< slide id="custom-2" background="#FF4081" >}}
 
 ## Custom slide 2
 
-```
+<small>This slide has a different background color.</small>
-{{%/* slide id="custom-2" background="#FF4081" */%}}
+
+```markdown
+{{</* slide id="custom-2" background="#FF4081" */>}}
 
 ## Custom slide 2
-
-{{%/* /slide */%}}
 ```
 
-{{% /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-1" */>}}
+
+## Custom slide 1
+
+---
+```
 
-<br>
 ```markdown
 Go to [custom slide 1](#custom-1)
 ```
@@ -104,20 +125,16 @@ background = "#FF4081"
 
 ---
 
-{{% slide template="hotpink" %}}
+{{< slide template="hotpink" >}}
 
 Apply the template using the **template** attribute of the slide shortcode:
 
 ```markdown
-{{%/* slide template="hotpink" */%}}
+{{</* slide template="hotpink" */>}}
 
 # I'm a hot pink slide!
-
-{{%/* /slide */%}}
 ```
 
-{{% /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:
@@ -132,6 +149,6 @@ If a template exists in multiple configurations, it's properties will be merged.
 
 {{% section %}}
 
-{{% slide content="home.example" /%}}
+{{< slide content="home.reusable" >}}
 
 {{% /section %}}

exampleSite/data/home.toml

@@ -1,4 +1,4 @@
-example = '''
+reusable = '''
 
 # Reusable slides
 
@@ -13,17 +13,17 @@ navigate down to learn more
 
 ---
 
-Add an `example` key to data/home.toml:
+Add a `example` key to data/home.toml:
 
-```
+```toml
 example = "I'm a slide"
 ```
 <br>
 
 Set the `content` attribute to "home.example":
 
-```
+```markdown
-{{% slide content="home.example" /%}}
+{{< slide content="home.example" >}}
 ```
 
 <br>

layouts/partials/reveal-hugo/slides.html

@@ -11,7 +11,8 @@
         {{- range (split $content "<hr />") -}}
           <!-- Only wrap in <section> tag if not already wrapped by shortcode -->
           {{- if in . "data-noprocess" -}}
-{{- . | safeHTML -}}
+  {{- . | safeHTML -}}
+</section>
           {{- else }}
 <section>
   {{- . | safeHTML }}

layouts/shortcodes/slide.html

@@ -1,8 +1,5 @@
 {{- $scratch := .Scratch -}}
 {{- $scratch.Set "slides" slice -}}
-{{- if len .Inner -}}
-  {{- $scratch.Add "slides" .Inner -}}
-{{- end -}}
 {{- $content := .Get "content" -}}
 {{- if $content -}}
   {{- $lookup := split $content "." }}
@@ -11,11 +8,13 @@
   {{- range $slides -}}
     {{- $scratch.Add "slides" . -}}
   {{- end -}}
+{{- else -}}
+  {{- $scratch.Add "slides" "" -}}
 {{- end -}}
 {{- $params := . -}}
 {{- $noPrefix := slice "id" "class" -}}
 {{- $noOutput := slice "content" "template" -}}
-{{- range $scratch.Get "slides" }}
+{{- range $sindex, $svalue := $scratch.Get "slides" }}
 <section data-noprocess data-shortcode-slide
   {{- $template := $params.Get "template" -}}
   {{- if $template -}}
@@ -43,6 +42,8 @@
       {{ $attrName | safeHTMLAttr }}="{{ $value }}"
     {{- end -}}
   {{- end -}}>
-  {{ . | safeHTML }}
+  {{ $svalue | safeHTML }}
+{{- if ne $sindex (sub (len ($scratch.Get "slides")) 1) -}}
 </section>
 {{- end -}}
+{{- end -}}