diff --git a/README.md b/README.md index b0e9508..60e1901 100644 --- a/README.md +++ b/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="Two" />}} -- {{< frag c="Three" />}} +- {{< frag c="One" >}} +- {{< frag c="Two" >}} +- {{< 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: diff --git a/exampleSite/content/home/shortcodes/markdown.md b/exampleSite/content/home/shortcodes/markdown.md index 21167bd..0c49b4e 100644 --- a/exampleSite/content/home/shortcodes/markdown.md +++ b/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 {{}} # 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 {{}} # I'm a colorful slide diff --git a/exampleSite/content/home/shortcodes/slide.md b/exampleSite/content/home/shortcodes/slide.md index 473199e..6a135c1 100644 --- a/exampleSite/content/home/shortcodes/slide.md +++ b/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 +--- + +{{}} + +## 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 + +This slide has a fast zoom transition. + +```markdown +{{}} + +## Custom slide 1 +``` + +--- + +{{< slide id="custom-2" background="#FF4081" >}} ## Custom slide 2 -``` -{{%/* slide id="custom-2" background="#FF4081" */%}} +This slide has a different background color. + +```markdown +{{}} ## Custom slide 2 - -{{%/* /slide */%}} ``` -{{% /slide %}} - --- 💡 Tip: Setting a slide's `id` attribute makes it easy to link to from other parts of the presentation. +

+ +```markdown +--- +{{}} + +## Custom slide 1 + +--- +``` -
```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" */%}} +{{}} # 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 %}} diff --git a/exampleSite/data/home.toml b/exampleSite/data/home.toml index f242290..86b4d10 100644 --- a/exampleSite/data/home.toml +++ b/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" ```
Set the `content` attribute to "home.example": -``` -{{% slide content="home.example" /%}} +```markdown +{{< slide content="home.example" >}} ```
diff --git a/layouts/partials/reveal-hugo/slides.html b/layouts/partials/reveal-hugo/slides.html index e578882..3ee4432 100644 --- a/layouts/partials/reveal-hugo/slides.html +++ b/layouts/partials/reveal-hugo/slides.html @@ -11,7 +11,8 @@ {{- range (split $content "
") -}} {{- if in . "data-noprocess" -}} -{{- . | safeHTML -}} + {{- . | safeHTML -}} + {{- else }}
{{- . | safeHTML }} diff --git a/layouts/shortcodes/slide.html b/layouts/shortcodes/slide.html index 7bb41ec..be6f7e3 100644 --- a/layouts/shortcodes/slide.html +++ b/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" }}
- {{ . | safeHTML }} + {{ $svalue | safeHTML }} +{{- if ne $sindex (sub (len ($scratch.Get "slides")) 1) -}}
+{{- end -}} {{- end -}} \ No newline at end of file