From f7427d463195ccfcb1df42e51c2c222f4ddd529e Mon Sep 17 00:00:00 2001
From: dzello <jdzielak@gmail.com>
Date: Mon, 30 Apr 2018 18:47:20 -0700
Subject: [PATCH] Add shortcodes for customizing slides, markdown, HTML

---
 .../content/home/shortcodes/fragment.md       | 41 ++++++++
 .../content/home/shortcodes/markdown.md       | 30 ++++++
 exampleSite/content/home/shortcodes/other.md  | 24 +++++
 .../content/home/shortcodes/section.md        | 39 ++++++++
 exampleSite/content/home/shortcodes/slide.md  | 38 ++++++++
 exampleSite/content/home/usage-shortcodes.md  | 97 -------------------
 exampleSite/content/home/usage.md             |  8 +-
 layouts/_default/baseof.reveal.html           |  3 +
 layouts/_default/index.reveal.html            | 17 +---
 layouts/_default/list.reveal.html             | 17 +---
 layouts/partials/slides.html                  | 22 +++++
 layouts/shortcodes/markdown.html              |  5 +
 layouts/shortcodes/slide.html                 |  9 ++
 13 files changed, 217 insertions(+), 133 deletions(-)
 create mode 100644 exampleSite/content/home/shortcodes/fragment.md
 create mode 100644 exampleSite/content/home/shortcodes/markdown.md
 create mode 100644 exampleSite/content/home/shortcodes/other.md
 create mode 100644 exampleSite/content/home/shortcodes/section.md
 create mode 100644 exampleSite/content/home/shortcodes/slide.md
 delete mode 100644 exampleSite/content/home/usage-shortcodes.md
 create mode 100644 layouts/partials/slides.html
 create mode 100644 layouts/shortcodes/markdown.html
 create mode 100644 layouts/shortcodes/slide.html

diff --git a/exampleSite/content/home/shortcodes/fragment.md b/exampleSite/content/home/shortcodes/fragment.md
new file mode 100644
index 0000000..2702ca7
--- /dev/null
+++ b/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
+
diff --git a/exampleSite/content/home/shortcodes/markdown.md b/exampleSite/content/home/shortcodes/markdown.md
new file mode 100644
index 0000000..c3f1000
--- /dev/null
+++ b/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 >}}
+
diff --git a/exampleSite/content/home/shortcodes/other.md b/exampleSite/content/home/shortcodes/other.md
new file mode 100644
index 0000000..f6f6e44
--- /dev/null
+++ b/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>
diff --git a/exampleSite/content/home/shortcodes/section.md b/exampleSite/content/home/shortcodes/section.md
new file mode 100644
index 0000000..595729f
--- /dev/null
+++ b/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 %}}
+
+
diff --git a/exampleSite/content/home/shortcodes/slide.md b/exampleSite/content/home/shortcodes/slide.md
new file mode 100644
index 0000000..7843322
--- /dev/null
+++ b/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 %}}
+
diff --git a/exampleSite/content/home/usage-shortcodes.md b/exampleSite/content/home/usage-shortcodes.md
deleted file mode 100644
index 8704a0e..0000000
--- a/exampleSite/content/home/usage-shortcodes.md
+++ /dev/null
@@ -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 %}}
-
diff --git a/exampleSite/content/home/usage.md b/exampleSite/content/home/usage.md
index 4ba5893..5dc21d3 100644
--- a/exampleSite/content/home/usage.md
+++ b/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.
diff --git a/layouts/_default/baseof.reveal.html b/layouts/_default/baseof.reveal.html
index fbacff4..a406b90 100644
--- a/layouts/_default/baseof.reveal.html
+++ b/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
diff --git a/layouts/_default/index.reveal.html b/layouts/_default/index.reveal.html
index fb72e73..2b88d1d 100644
--- a/layouts/_default/index.reveal.html
+++ b/layouts/_default/index.reveal.html
@@ -1,18 +1,3 @@
 {{ define "main" }}
-  <div class="reveal">
-    <!-- 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>
+  {{ partial "slides" (union (slice .Page) (where .Data.Pages "Type" "home")) }}
 {{ end }}
diff --git a/layouts/_default/list.reveal.html b/layouts/_default/list.reveal.html
index 127fca5..1f6786e 100644
--- a/layouts/_default/list.reveal.html
+++ b/layouts/_default/list.reveal.html
@@ -1,18 +1,3 @@
 {{ define "main" }}
-  <div class="reveal">
-    <!-- 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>
+  {{ partial "slides" (union (slice .Page) .Pages) }}
 {{ end }}
diff --git a/layouts/partials/slides.html b/layouts/partials/slides.html
new file mode 100644
index 0000000..e6ad35a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/layouts/shortcodes/markdown.html b/layouts/shortcodes/markdown.html
new file mode 100644
index 0000000..d0c40e5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/layouts/shortcodes/slide.html b/layouts/shortcodes/slide.html
new file mode 100644
index 0000000..6d35a32
--- /dev/null
+++ b/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>
\ No newline at end of file