genofire/themen-hugo-35c3-reveal
genofire/themen-hugo-35c3-reveal
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Pass through all slide shortcode params to section

Browse source 
Now slides can have ids and arbitrary data attributes, and a whitelist of valid attributes no longer needs to be maintained.
This commit is contained in:
dzello 2018-07-22 18:25:48 +02:00
parent 27e0dc2aa0
commit 3e34fe3bc9
3 changed files with 28 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -158,10 +158,10 @@ Like fragment but more terse - content is placed inline in a self-closing shortc
#### slide shortcode
The slide shortcode lets you set custom Reveal.js attributes for each slide - things like transition, background color and [much more](https://github.com/hakimel/reveal.js/#slide-attributes).
The slide shortcode lets you set custom Reveal.js attributes for each slide - things like id, transition, background and [much more](https://github.com/hakimel/reveal.js/#slide-attributes).
```markdown
{{% slide background="#FFF" transition="zoom" transition-speed="fast" %}}
{{% slide id="hello" background="#FFF" transition="zoom" transition-speed="fast" %}}
# Hello, world!

25
exampleSite/content/home/shortcodes/slide.md
View file

@ -4,18 +4,18 @@ weight = 34
## Slide
Customize individual slide parameters like background color and transition.
Customize individual slide attributes like id, background color and transition. Use the same keys as Reveal.js but omit the 'data-' prefix.
[See all slide params](https://github.com/hakimel/reveal.js#slide-backgrounds)
[See more attributes](https://github.com/hakimel/reveal.js#slide-attributes)
---
{{% slide transition="zoom" transition-speed="fast" %}}
{{% slide id="custom-1" transition="zoom" transition-speed="fast" %}}
## Custom slide 1
```
{{%/* slide transition="zoom" transition-speed="fast" */%}}
{{%/* slide id="custom-1" transition="zoom" transition-speed="fast" */%}}
## Custom slide 1
@ -26,12 +26,12 @@ Customize individual slide parameters like background color and transition.
---
{{% slide background-color="#FF4081" %}}
{{% slide id="custom-2" background="#FF4081" %}}
## Custom slide 2
```
{{%/* slide background-color="#FF4081" */%}}
{{%/* slide id="custom-2" background="#FF4081" */%}}
## Custom slide 2
@ -42,6 +42,19 @@ Customize individual slide parameters like background color and transition.
---
💡 Tip: Setting a slide's `id` attribute makes it easy to link to from other parts of the presentation.
<br>
```markdown
Go to [custom slide 1](#custom-1)
```
<small>
Go to [custom slide 1](#custom-1)
</small>
---
{{% section %}}
{{% slide content="home.example" /%}}

10
layouts/shortcodes/slide.html
View file

@ -12,12 +12,16 @@
{{- $scratch.Add "slides" . -}}
{{- end -}}
{{- end -}}
{{- $attributes := slice "background-color" "background-image" "background-size" "background-position" "background-repeat" "transition" "transition-speed" "background-iframe" "background-interactive" "background-video" "background-video-loop" "background-video-muted" -}}
{{- $params := . -}}
{{- $noPrefix := slice "id" -}}
{{- $noOutput := slice "content" -}}
{{- range .Scratch.Get "slides" }}
<section data-noprocess data-shortcode-slide
{{- range $attribute := $attributes -}}
{{- with $params.Get $attribute }} data-{{ $attribute | safeHTMLAttr }}="{{ . }}"{{ end -}}
{{- range $key, $value := $.Params -}}
{{- if not (in $noOutput $key) -}}
{{- $attrName := cond (in $noPrefix $key) $key (delimit (slice "data" $key) "-") }}
{{ $attrName | safeHTMLAttr }}="{{ $value }}"
{{- end -}}
{{- end -}}>
{{ . | safeHTML }}
</section>