Make the slide shortcode easier to use

This commit is contained in:
dzello 2018-08-03 15:07:12 +01:00
parent aa464f40ac
commit 6f7767a751
6 changed files with 71 additions and 44 deletions

View File

@ -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:

View File

@ -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
{{</* 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
{{</* markdown */>}}
<!-- .slide: data-background="#FF4081" -->
# I'm a colorful slide

View File

@ -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
---
{{</* slide class="hello" */>}}
## 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
<small>This slide has a fast zoom transition.</small>
```markdown
{{</* slide id="custom-1" transition="zoom" transition-speed="fast" */>}}
## Custom slide 1
```
---
{{< slide id="custom-2" background="#FF4081" >}}
## Custom slide 2
```
{{%/* slide id="custom-2" background="#FF4081" */%}}
<small>This slide has a different background color.</small>
```markdown
{{</* slide id="custom-2" background="#FF4081" */>}}
## Custom slide 2
{{%/* /slide */%}}
```
{{% /slide %}}
---
💡 Tip: Setting a slide's `id` attribute makes it easy to link to from other parts of the presentation.
<br><br>
```markdown
---
{{</* slide id="custom-1" */>}}
## Custom slide 1
---
```
<br>
```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" */%}}
{{</* 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 %}}

View File

@ -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"
```
<br>
Set the `content` attribute to "home.example":
```
{{% slide content="home.example" /%}}
```markdown
{{< slide content="home.example" >}}
```
<br>

View File

@ -12,6 +12,7 @@
<!-- Only wrap in <section> tag if not already wrapped by shortcode -->
{{- if in . "data-noprocess" -}}
{{- . | safeHTML -}}
</section>
{{- else }}
<section>
{{- . | safeHTML }}

View File

@ -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" }}
<section data-noprocess data-shortcode-slide
{{- $template := $params.Get "template" -}}
{{- if $template -}}
@ -43,6 +42,8 @@
{{ $attrName | safeHTMLAttr }}="{{ $value }}"
{{- end -}}
{{- end -}}>
{{ . | safeHTML }}
{{ $svalue | safeHTML }}
{{- if ne $sindex (sub (len ($scratch.Get "slides")) 1) -}}
</section>
{{- end -}}
{{- end -}}