Store Reveal params in snakecase and convert

README.md

@@ -117,7 +117,9 @@ Customize the Reveal.js presentation by setting these values in `config.toml` or
 - `params.reveal_hugo.theme`: The Reveal.js theme used, defaults to "black"
 - `params.reveal_hugo.highlight_theme`: The [highlight.js](https://highlightjs.org/) theme used, defaults to "default"
 
-Include any other attributes in `params.reveal_hugo` that you'd like to be fed as arguments to `Reveal.initialize`. See the [extensive list of Reveal.js configuration options](https://github.com/hakimel/reveal.js/#configuration) here. The defaults used by this theme are located in `data/reveal_hugo.toml`.
+Include any other attributes in `params.reveal_hugo` that you'd like to be fed as arguments to `Reveal.initialize` in **snakecase**. So `slideNumber` becomes `slide_number`. The reason is that Hugo lowercases all params and Reveal.js is case-sensitive. Params are converted from snakecase to camelcase before passing to Reveal.js.
+
+See the [extensive list of Reveal.js configuration options](https://github.com/hakimel/reveal.js/#configuration) here. The defaults used by this theme are located in `data/reveal_hugo.toml`.
 
 If you're new to TOML, this is how it should look in your `config.toml`:
 

exampleSite/content/_index.md

@@ -1,6 +1,8 @@
 +++
 title = "reveal-hugo features and usage"
 outputs = ["Reveal"]
+[reveal_hugo]
+slide_number = true
 +++
 
 # reveal-hugo

exampleSite/content/home/usage.md

@@ -19,6 +19,35 @@ isHTML = true
 
 ---
 
+## Configure themes
+
+Optional. In `config.toml` or front matter.
+
+```toml
+[params.reveal_hugo]
+theme = "moon"
+highlight_theme = "zenburn"
+```
+
+[Reveal themes](https://github.com/hakimel/reveal.js/#theming) ·
+[highlight.js themes](https://highlightjs.org/static/demo/)
+
+---
+
+## Configure Reveal.js
+
+Set **snakecase** versions of Reveal.js params, which will be passed to `Reveal.initialize`.
+
+```toml
+[params.reveal_hugo]
+slide_number = true
+transition_speed = 'fast'
+```
+
+[Reveal config params](https://github.com/hakimel/reveal.js/#configuration)
+
+---
+
 ## Presentation for `/`
 
 In `content/_index.md`:

layouts/_default/baseof.reveal.html

@@ -50,16 +50,34 @@
     <script src="{{ $reveal_cdn }}/lib/js/head.min.js"></script>
     <script src="{{ $reveal_cdn }}/js/reveal.js"></script>
     <script type="text/javascript">
+      // Hugo lowercases all params and Reveal.js needs camelcase
+      // So params in Hugo must be stored in snakecase and we camelize them here
+      function camelize(map) {
+        if (map) {
+          Object.keys(map).forEach(function(k) {
+            newK = k.replace(/(\_\w)/g, function(m) { return m[1].toUpperCase() });
+            if (newK != k) {
+              map[newK] = map[k];
+              delete map[k];
+            }
+          });
+        }
+        return map;
+      }
       // pattern inspired by https://github.com/RealOrangeOne/hugo-theme-revealjs
       var revealHugoPageParams = JSON.parse(document.getElementById('reveal-hugo-page-params').innerHTML);
       var revealHugoSiteParams = JSON.parse(document.getElementById('reveal-hugo-site-params').innerHTML);
       var revealHugoDefaults = JSON.parse(document.getElementById('reveal-hugo-defaults').innerHTML);
+
       // See all options - https://github.com/hakimel/reveal.js#configuration
-      Reveal.initialize(Object.assign(
-        revealHugoDefaults,
-        revealHugoSiteParams,
-        revealHugoPageParams,
-        revealHugoDependencies));
+      var options = Object.assign(
+        camelize(revealHugoDefaults),
+        camelize(revealHugoSiteParams),
+        camelize(revealHugoPageParams),
+        revealHugoDependencies);
+
+      console.log(options);
+      Reveal.initialize(options);
     </script>
     {{ partial "reveal-hugo/body" . }}
   </body>