From bf4801d37b16b340dce8356d08f5b821f98c9d53 Mon Sep 17 00:00:00 2001
From: dzello <jdzielak@gmail.com>
Date: Mon, 23 Jul 2018 00:49:48 +0200
Subject: [PATCH] Document usage of class slide attribute and don't pfx it

---
 README.md                                    | 4 ++--
 exampleSite/content/_index.md                | 1 +
 exampleSite/content/home/shortcodes/slide.md | 3 ++-
 layouts/shortcodes/slide.html                | 5 +++--
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 4b40827..b0e9508 100644
--- a/README.md
+++ b/README.md
@@ -158,7 +158,7 @@ Like fragment but more terse - content is placed inline in a self-closing shortc
 
 #### slide shortcode
 
-The slide shortcode lets you set custom Reveal.js attributes for each slide - things like id, 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.
+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.
 
 ```markdown
 {{% slide id="hello" background="#FFF" transition="zoom" transition-speed="fast" %}}
@@ -189,7 +189,7 @@ Here's a list of documented slide attributes from the Reveal.js docs:
 - `notes` (can also use the note shortcode)
 - `timing`
 
-You can also pass through your own, a `data-` prefix will be added automatically to each one.
+You can also pass through your own, a `data-` prefix will be added automatically to each one (except for `id` and `class`).
 
 #### section shortcode
 
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index 0d3dff5..fba3be6 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -9,6 +9,7 @@ highlight_theme = "color-brewer"
 transition = "slide"
 transition_speed = "fast"
 [reveal_hugo.templates.hotpink]
+class = "hotpink"
 background = "#FF4081"
 +++
 
diff --git a/exampleSite/content/home/shortcodes/slide.md b/exampleSite/content/home/shortcodes/slide.md
index 02c8e3a..93c4215 100644
--- a/exampleSite/content/home/shortcodes/slide.md
+++ b/exampleSite/content/home/shortcodes/slide.md
@@ -4,7 +4,7 @@ weight = 34
 
 ## Slide
 
-Customize individual slide attributes like id, background color and transition. Use the same keys as Reveal.js but omit the 'data-' prefix.
+Customize individual slide attributes like id, class, background color and transition. Use the same keys as Reveal.js but omit the 'data-' prefix.
 
 ---
 
@@ -98,6 +98,7 @@ Create templates in config.toml, _index.md or the current page's front matter. P
 
 ```toml
 [reveal_hugo.templates.hotpink]
+class = "hotpink"
 background = "#FF4081"
 ```
 
diff --git a/layouts/shortcodes/slide.html b/layouts/shortcodes/slide.html
index a260029..352021d 100644
--- a/layouts/shortcodes/slide.html
+++ b/layouts/shortcodes/slide.html
@@ -13,7 +13,7 @@
   {{- end -}}
 {{- end -}}
 {{- $params := . -}}
-{{- $noPrefix := slice "id" -}}
+{{- $noPrefix := slice "id" "class" -}}
 {{- $noOutput := slice "content" "template" -}}
 {{- range $scratch.Get "slides" }}
 <section data-noprocess data-shortcode-slide
@@ -28,7 +28,8 @@
       {{- end -}}
     {{- end -}}
     {{- range $key, $value := ($scratch.Get "template") }}
-      data-{{ $key | safeHTMLAttr }}="{{ $value }}"
+      {{- $attrName := cond (in $noPrefix $key) $key (delimit (slice "data" $key) "-") }}
+      {{ $attrName | safeHTMLAttr }}="{{ $value }}"
     {{- end }}
     data-template="{{ $template }}"
   {{- end -}}