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

Improve exampleSite presentation

Browse source 
Better flow and more information

Plus... emoji!
This commit is contained in:
dzello 2018-07-19 16:49:24 +02:00
parent ad403c9682
commit faadedd499
11 changed files with 161 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
exampleSite/content/_index.md
View file

@ -4,12 +4,15 @@ description = "A Hugo theme for creating Reveal.js presentations"
outputs = ["Reveal"]
[reveal_hugo]
custom_theme = "reveal-hugo/themes/robot-lung.css"
history = true
margin = 0.2
highlight_theme = "color-brewer"
transition = "slide"
transition_speed = "fast"
+++
# 📽️
# reveal-hugo
A Hugo theme for creating Reveal.js presentations.

1
exampleSite/content/example/_index.md
View file

@ -3,6 +3,7 @@ title = "Example of a section presentation"
outputs = ["Reveal"]
[reveal_hugo]
theme = "moon"
history = true
+++
# Section Presentation

31
exampleSite/content/home/features.md
View file

@ -6,35 +6,14 @@ weight = 10
- 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
- Two custom Reveal.js themes (including this one)
---
## Features
- Markdown files are parsed into multiple slides
- Built-in shortcodes expose Reveal.js functionality
- Customize Reveal.js parameters including the theme
- Write slides in Markdown in one or more files
- Shorcodes for fragments, sections, slides & more
- All Reveal.js parameters can be customized
- Any Hugo section can be output as a presentation
---
## 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.

30
exampleSite/content/home/resources.md
View file

@ -1,15 +1,19 @@
+++
weight = 40
weight = 42
+++
### Learn more
- [reveal-hugo Github README](https://github.com/dzello/reveal-hugo)
- [Code for this presentation](https://github.com/dzello/reveal-hugo/tree/master/exampleSite)
# Resources
---
### Resources
## Get the code
- [reveal-hugo Github README](https://github.com/dzello/reveal-hugo)
- [Content for this presentation](https://github.com/dzello/reveal-hugo/tree/master/exampleSite)
---
## External resources
- [Reveal.js](https://revealjs.com/)
- [Hugo docs](https://gohugo.io/)
@ -17,11 +21,21 @@ weight = 40
---
### Service-ready
## Designed to...
- Deploy to [Netlify](https://netlify.com/)
- Edit with [Forestry](https://forestry.io/)
---
## Thanks!
# 🙏
Contribute by opening issues and pull requests.
---
# Thanks!
---
# 👍

4
exampleSite/content/home/shortcodes/fragment.md
View file

@ -2,7 +2,7 @@
weight = 30
+++
## Fragment shortcode
## Fragment
The `fragment` shortcode makes content appear incrementally.
@ -18,7 +18,7 @@ The `fragment` shortcode makes content appear incrementally.
---
## Frag shortcode
## Frag
The `frag` shortcode is more terse than `fragment`. It accepts a `c` attribute.

11
exampleSite/content/home/shortcodes/introduction.md Normal file
View file

@ -0,0 +1,11 @@
+++
weight = 29
+++
# Shortcodes
---
Hugo's shortcodes are similar to functions or templates that extend what you can do with Markdown.
[Shortcode documentation](https://gohugo.io/content-management/shortcodes/)

17
exampleSite/content/home/shortcodes/markdown.md
View file

@ -4,15 +4,15 @@ weight = 36
{{< markdown >}}
## Markdown Shortcode
## Markdown
This markdown is not processed by Hugo, but passed directly through to Reveal.js.
Markdown is not processed by Hugo but passed directly through to Reveal.js.
---
## Markdown Shortcode
Many handy slide shortcuts and customizations are possible.
```
{{</* markdown */>}}
# Hello world!
{{</* /markdown */>}}
```
[See the Reveal.js markdown docs](https://github.com/hakimel/reveal.js#markdown)
@ -20,7 +20,7 @@ Many handy slide shortcuts and customizations are possible.
<!-- .slide: data-background="#FF4081" -->
For example, an HTML comment can change the background color of a slide.
Reveaj.js Markdown uses HTML comments to change slide properties, like background color.
```
{{</* markdown */>}}
@ -30,3 +30,4 @@ For example, an HTML comment can change the background color of a slide.
```
{{< /markdown >}}

9
exampleSite/content/home/shortcodes/other.md
View file

@ -2,7 +2,7 @@
weight = 38
+++
## Note shortcode
## Note
Add speaker notes to your presentation.
@ -20,5 +20,10 @@ You found the speaker notes!
<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>
<p>Surround slides in a <code>section</code> tag with a <code>data-noprocess</code> attribute to write them in pure HTML.</p>
<pre>
&lt;section data-noprocess&gt;
&lt;h1&gt;Hello world!&lt;/h1&gt;
&lt;section&gt;</pre>
<small>💡 This is useful if you can't get Markdown to output exactly what you want.</small>
</section>

4
exampleSite/content/home/shortcodes/section.md
View file

@ -1,10 +1,10 @@
+++
weight = 32
weight = 36
+++
{{% section %}}
## Section shortcode
## Section
The `section` shortcode groups slides into a vertical display.

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

@ -2,11 +2,11 @@
weight = 34
+++
## Slide shortcode
## Slide
Customize individual slide parameters like background color and transition.
[See all parameters](https://github.com/hakimel/reveal.js#slide-backgrounds)
[See all slide params](https://github.com/hakimel/reveal.js#slide-backgrounds)
---
@ -16,7 +16,9 @@ Customize individual slide parameters like background color and transition.
```
{{%/* slide transition="zoom" transition-speed="fast" */%}}
## Custom slide 1
{{%/* /slide */%}}
```
@ -30,7 +32,9 @@ Customize individual slide parameters like background color and transition.
```
{{%/* slide background-color="#FF4081" */%}}
## Custom slide 2
{{%/* /slide */%}}
```

149
exampleSite/content/home/usage.md
View file

@ -8,7 +8,7 @@ weight = 20
## Prerequisite
Add this to your `config.toml`:
First, add this to your `config.toml`:
```toml
[outputFormats.Reveal]
@ -19,53 +19,9 @@ isHTML = true
---
## Configure themes
### Presentation at site root
Optional. In `config.toml` or front matter of individual presentations.
```toml
[params.reveal_hugo]
theme = "moon"
highlight_theme = "zenburn"
```
[Reveal.js themes](https://github.com/hakimel/reveal.js/#theming) &middot;
[highlight.js themes](https://highlightjs.org/static/demo/)
---
## Custom Reveal.js theme
Point to a file in the `static` directory.
```toml
[params.reveal_hugo]
custom_theme = "themes/dzello.css"
```
---
## Configure Reveal.js
Set **snakecase** versions of Reveal.js params, which will be camelized and passed to `Reveal.initialize`.
```toml
[params.reveal_hugo]
slide_number = true
transition_speed = 'fast'
```
[Reveal config params](https://github.com/hakimel/reveal.js/#configuration)
---
# Creating presentations
---
## Presentation at `/`
In `content/_index.md`:
Create `content/_index.md`:
```markdown
+++
@ -74,14 +30,34 @@ outputs = ["Reveal"]
# Slide 1
---
# Slide 2
Hello world!
```
---
Put more slides in `content/home/*.md`
### Add slides in same file
Separate them by `---`:
```
# Slide 1
Hello world!
---
# Slide 2
Hello program!
```
---
### Add slides with other files
Add slides to `content/home/*.md`
```markdown
+++
@ -95,12 +71,11 @@ weight = 10
# Slide 4
```
Use `weight` to specify the order relative to other files.
<small>💡 Tip: Use `weight` to specify the order that files should be added.</small>
---
## For any Hugo section
### Presentation at '/{section}/'
In `content/{section}/_index.md`:
@ -119,7 +94,7 @@ outputs = ["Reveal"]
---
Put more slides in `content/{section}/*.md`
Add slides from other files in `content/{section}/*.md`
```markdown
+++
@ -133,4 +108,66 @@ weight = 10
# Slide 4
```
Use `weight` to specify the order relative to other files.
<small>💡 Tip: Use `weight` to specify the order that files should be added.</small>
---
# Configuration
---
## Reveal.js themes
Put in `config.toml` or a presentation's front matter.
Use the `theme` key for themes that come with Reveal.js.
```toml
[params.reveal_hugo]
theme = "moon"
highlight_theme = "zenburn"
```
[Reveal.js themes](https://github.com/hakimel/reveal.js/#theming) &middot;
[highlight.js themes](https://highlightjs.org/static/demo/)
---
## Use a custom theme
Use the `custom_theme` key to point to a CSS file in the `static` directory.
```toml
[params.reveal_hugo]
custom_theme = "reveal-hugo/themes/robot-lung.css"
```
---
## Like this theme?
reveal-hugo comes with 2 extra Reveal.js themes:
- [robot-lung](https://github.com/dzello/revealjs-themes#robot-lung) (this one)
- [sunblind](https://github.com/dzello/revealjs-themes#sunblind)
<br>
<small>
They live in the `static/reveal-hugo/themes` folder and also [on Github](https://github.com/dzello/revealjs-themes).
</small>
---
## Reveal.js params
Set **snakecase** versions of Reveal.js params, which will be camelized and passed to `Reveal.initialize`.
```toml
[params.reveal_hugo]
history = true
slide_number = true
transition = 'zoom'
transition_speed = 'fast'
```
[Full list of params](https://github.com/hakimel/reveal.js/#configuration)