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 %}}
+

exampleSite/content/home/usage-shortcodes.md

@@ -1,97 +0,0 @@
-+++
-weight = 30
-+++
-
-# Shortcodes
-
----
-
-### 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 is like `fragment` but more terse. It accepts the content as the `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
-
----
-
-{{% 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 %}}
-
----
-
-### 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 %}}
-

exampleSite/content/home/usage.md

@@ -19,7 +19,7 @@ isHTML = true
 
 ---
 
-## Make a presentation for `/`
+## Presentation for `/`
 
 In `content/_index.md`:
 
@@ -51,12 +51,12 @@ weight = 10
 # Slide 4
 ```
 
-Use `weight` to specify the order
+Use `weight` to specify the order relative to other files.
 
 
 ---
 
-## Make a presentation for any Hugo section
+## For any Hugo section
 
 In `content/{section}/_index.md`:
 
@@ -89,4 +89,4 @@ weight = 10
 # Slide 4
 ```
 
-Use `weight` to specify the order
+Use `weight` to specify the order relative to other files.

layouts/_default/baseof.reveal.html

@@ -38,6 +38,9 @@
     <script type="text/javascript">
       window.revealHugoDependencies = {
         dependencies: [
+          { src: '{{ $reveal_cdn }}/lib/js/classList.js', condition: function() { return !document.body.classList; } },
+          { src: '{{ $reveal_cdn }}/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
+          { src: '{{ $reveal_cdn }}/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
           { src: '{{ $reveal_cdn }}/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
           { src: '{{ $reveal_cdn }}/plugin/zoom-js/zoom.js', async: true },
           // the notes plugin can't run off the CDN b/c the HTML file isn't there

layouts/_default/index.reveal.html

@@ -1,18 +1,3 @@
 {{ define "main" }}
-  <div class="reveal">
+  {{ partial "slides" (union (slice .Page) (where .Data.Pages "Type" "home")) }}
-    <!-- Any section element inside of this container is displayed as a slide -->
-    <div class="slides">
-      <!-- Find all pages with a type of reveal -->
-      {{ range union (slice .Page) (where .Data.Pages "Type" "home") }}
-        <!-- Don't process empty content files -->
-        {{ if ne (len .Content) 0 }}
-          <!-- Split the processed content by <hr /> tag -->
-          {{ range (split .Content "<hr />") }}
-            <!-- Output the content as safe  -->
-            <section>{{ . | safeHTML }}</section>
-          {{ end }}
-        {{ end }}
-      {{ end }}
-    </div>
-  </div>
 {{ end }}

layouts/_default/list.reveal.html

@@ -1,18 +1,3 @@
 {{ define "main" }}
-  <div class="reveal">
+  {{ partial "slides" (union (slice .Page) .Pages) }}
-    <!-- Any section element inside of this container is displayed as a slide -->
-    <div class="slides">
-      <!-- Find all pages inside of this section -->
-      {{ range union (slice .Page) .Pages }}
-      <!-- Don't process empty content files -->
-        {{ if ne (len .Content) 0 }}
-          <!-- Split the processed content by <hr /> tag -->
-          {{ range (split .Content "<hr />") }}
-            <!-- Output the content as safe  -->
-            <section>{{ . | safeHTML }}</section>
-          {{ end }}
-        {{ end }}
-      {{ end }}
-    </div>
-  </div>
 {{ end }}

layouts/partials/slides.html

@@ -0,0 +1,22 @@
+<div class="reveal">
+  <!-- Any section element inside of this container is displayed as a slide -->
+  <div class="slides">
+    <!-- Use the array of pages passed as a param -->
+    {{ range . -}}
+    <!-- Don't process empty content files -->
+      {{- if ne (len .Content) 0 -}}
+        <!-- Split the processed content by <hr /> tag -->
+        {{- range (split .Content "<hr />") -}}
+          <!-- Only wrap in <section> tag if not already wrapped by shortcode -->
+          {{- if in . "data-noprocess" -}}
+            {{- . | safeHTML -}}
+          {{- else -}}
+            <section>
+              {{ . | safeHTML }}
+            </section>
+          {{ end -}}
+        {{- end -}}
+      {{- end -}}
+    {{- end }}
+  </div>
+</div>

layouts/shortcodes/markdown.html

@@ -0,0 +1,5 @@
+<section data-noprocess data-markdown data-separator="^\r?\n---\r?\n$">
+  <script type="text/template">
+    {{ .Inner }}
+  </script>
+</section>

layouts/shortcodes/slide.html

@@ -0,0 +1,9 @@
+{{ $attributes := slice "background-color" "background-image" "background-size" "background-position" "background-repeat" "transition" "background-iframe" "background-interactive" "background-video" "background-video-loop" "background-video-muted" "background-size" }}
+{{ $params := . }}
+<section data-noprocess
+  {{ range $attribute := $attributes -}}
+    {{- with $params.Get $attribute }}data-{{ $attribute | safeHTMLAttr }}="{{ . }}"{{ end -}}
+  {{- end -}}
+  >
+{{ .Inner }}
+</section>