Add shortcodes for customizing slides, markdown, HTML

This commit is contained in:
dzello 2018-04-30 18:47:20 -07:00
parent 05130b7ce6
commit f7427d4631
13 changed files with 217 additions and 133 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -38,6 +38,9 @@
<script type="text/javascript"> <script type="text/javascript">
window.revealHugoDependencies = { window.revealHugoDependencies = {
dependencies: [ 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/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: '{{ $reveal_cdn }}/plugin/zoom-js/zoom.js', async: true }, { 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 // the notes plugin can't run off the CDN b/c the HTML file isn't there

View File

@ -1,18 +1,3 @@
{{ define "main" }} {{ 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 }} {{ end }}

View File

@ -1,18 +1,3 @@
{{ define "main" }} {{ 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 }} {{ end }}

View File

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

View File

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

View File

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