Improve the example presentation

This commit is contained in:
dzello 2018-04-30 11:04:48 -07:00
parent 9159d3c598
commit dcbeba670d
11 changed files with 195 additions and 115 deletions

View file

@ -2,7 +2,7 @@
A Hugo theme for [Reveal.js](https://revealjs.com/) that allows you to have multiple slides per markdown file. With it, you can turn any of your Hugo content into a presentation by adding `Reveal` to its output formats.
![screenshot of reveal-hugo](/images/reveal-hugo.png)
![screenshot of reveal-hugo](/images/screenshot.png)
The motivation behind creating this theme is pretty simple - I didn't want to have to manage one markdown file for every slide, which would add the overhead of coming up with a file name, setting a `weight` param in the front matter to keep it in order, etc, all for just a few lines of text. Instead, I like to organize groups of slides into a smaller number of markdown files, each representing a section of the presentation.

View file

@ -1,4 +1,4 @@
baseURL = "https://reveal-hugo.netlify.com/"
baseURL = "https://example.com/"
languageCode = "en-us"
title = "A Hugo theme for creating Reveal.js presentations"
disableKinds = ["sitemap", "RSS"]

View file

@ -1,8 +1,10 @@
+++
title = "reveal-hugo example presentation"
title = "Welcome to reveal-hugo!"
outputs = ["Reveal"]
+++
# reveal-hugo
A Hugo theme for creating Reveal.js presentations.
~ made by [@dzello](https://dzello.com/) ~

View file

@ -1,38 +0,0 @@
+++
weight = 20
+++
Content for the root presentation lives in `content/_index.md` and `content/home`.
---
Content files are ordered by `weight` when added to the presentation.
```toml
+++
weight = 20
+++
```
---
Create a presentation for any section of your site by adding this to its `_index.md`:
```toml
outputs = ["Reveal"]
```
---
**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 %}}

View file

@ -1,17 +1,26 @@
+++
weight = 30
weight = 40
+++
# reveal-hugo
If you want your markdown files to contain more than one slide each...
🤔
...this theme is for you!
---
### Learn more
[https://github.com/dzello/reveal-hugo](https://github.com/dzello/reveal-hugo)
- [reveal-hugo Github README](https://github.com/dzello/reveal-hugo)
- [Code for this presentation](https://github.com/dzello/reveal-hugo/tree/master/exampleSite)
---
### Resources
- [Reveal.js](https://revealjs.org)
- [Hugo output formats](https://gohugo.io/templates/output-formats/)
---
### Ready to use
- Deploy to [Netlify](https://netlify.com/)
- Edit with [Forestry](https://forestry.io/)
---
## Thanks!

View file

@ -0,0 +1,17 @@
+++
weight = 10
+++
## What's included?
- All Reveal.js HTML, CSS and JS (v3.6.0)
- All out-of-the-box Reveal.js themes
- A "Reveal" `outputFormat` that outputs a presentation for any Hugo section
---
## Features
- Markdown files are parsed into multiple slides
- Built-in shortcodes expose Reveal.js functionality
- Customize Reveal.js parameters including the theme

View file

@ -1,26 +0,0 @@
+++
weight = 10
+++
### Multiple slides per markdown file.
Separate slides with `---`
```markdown
# Slide 1
Body 1.
---
# Slide 2
Body 2.
```
---
Hello!
I'm a new slide from the same markdown file.

View file

@ -1,35 +0,0 @@
+++
weight = 25
+++
{{% section %}}
**The `section` shortcode** creates a batch of vertical slides.
Scroll down.
---
This is the code.
```markdown
{{%/* section */%}}
## Section slide 1
---
## Section slide 2
{{%/* /section */%}}
```
Keep scrolling down.
---
## End of section
Continue to the right.
{{% /section %}}

View file

@ -0,0 +1,57 @@
+++
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 %}}
---
{{% 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.
{{% /section %}}

View file

@ -0,0 +1,94 @@
+++
weight = 20
+++
# Usage
---
## Multiple slides per markdown file
Separate slides with `---`
```markdown
# Slide 1
Body 1.
---
# Slide 2
Body 2.
```
---
I'm a **new** slide from the **same** markdown file.
---
## Make a presentation for `/`
In `content/_index.md`:
```markdown
+++
outputs = ["Reveal"]
+++
# Slide 1
---
# Slide 2
```
---
Put more slides in `content/home/*.md`
```markdown
+++
weight = 20
+++
# Slide 3
```
Use `weight` to specify the order
---
## Make a presentation for a Hugo section
In `content/{section}/_index.md`:
```markdown
+++
outputs = ["Reveal"]
+++
# Slide 1
---
# Slide 2
```
---
Put more slides in `content/{section}/*.md`
```markdown
+++
weight = 20
+++
# Slide 3
```
Use `weight` to specify the order

View file

Before

Width:  |  Height:  |  Size: 59 KiB

After

Width:  |  Height:  |  Size: 59 KiB