Initial commit
This commit is contained in:
Killian Kemps
170
themes/reveal-hugo/exampleSite/content/home/configuration.md
Normal file
170
themes/reveal-hugo/exampleSite/content/home/configuration.md
Normal file
@ -0,0 +1,170 @@
|
||||
+++
|
||||
weight = 21
|
||||
+++
|
||||
|
||||
# Configuration
|
||||
|
||||
Place configuration values in `config.toml` or a presentation's front matter (`_index.md`).
|
||||
|
||||
---
|
||||
|
||||
## Reveal.js themes
|
||||
|
||||
Themes control the look and feel of your presentation. Set the `theme` param to any [valid Reveal.js theme](https://github.com/hakimel/reveal.js/#theming).
|
||||
|
||||
```toml
|
||||
[params.reveal_hugo]
|
||||
theme = "moon"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Use a custom theme
|
||||
|
||||
To use a custom Reveal.js theme, place the CSS file in the `static` directory and set the `custom_theme` param.
|
||||
|
||||
```toml
|
||||
[params.reveal_hugo]
|
||||
custom_theme = "reveal-hugo/themes/robot-lung.css"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Use a custom theme (advanced)
|
||||
|
||||
To use Hugo pipes to build a custom Reveal.js theme, place the source file (SCSS / PostCSS) in the `assets` directory and set the `custom_theme_compile` param.
|
||||
|
||||
```toml
|
||||
[params.reveal_hugo]
|
||||
custom_theme = "reveal-hugo/themes/custom-theme.scss"
|
||||
custom_theme_compile = true
|
||||
```
|
||||
|
||||
<small>
|
||||
|
||||
💡 See the [custom theme example presentation](/custom-theme-example/) for more details.
|
||||
|
||||
</small>
|
||||
|
||||
---
|
||||
|
||||
## Bundled themes
|
||||
|
||||
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)
|
||||
|
||||
---
|
||||
|
||||
## highlight.js themes
|
||||
|
||||
To change the syntax highlighting theme, set the `highlight_theme`
|
||||
to a valid [highlight.js theme name](https://highlightjs.org/static/demo/).
|
||||
|
||||
```toml
|
||||
[params.reveal_hugo]
|
||||
highlight_theme = "zenburn"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Extending the layout
|
||||
|
||||
Use partials to add HTML to the page for one or all presentations at a time.
|
||||
|
||||
<small>
|
||||
💡 This is the recommended way to add script and style tags to customize your presentations.
|
||||
</small>
|
||||
|
||||
---
|
||||
|
||||
Here is where to put partials for different presentations and places in the DOM.
|
||||
<br><br>
|
||||
|
||||
| Presentation | Before </head> | Before </body> |
|
||||
|--------------|---------------------------------|---------------------------------|
|
||||
| All | reveal-hugo/head.html | reveal-hugo/body.html |
|
||||
| Root | home/reveal-hugo/head.html | home/reveal-hugo/body.html |
|
||||
| Section | {section}/reveal-hugo/head.html | {section}/reveal-hugo/body.html |
|
||||
|
||||
|
||||
|
||||
<small>
|
||||
|
||||
💡 You can also create an `end.html` to put content before the end of the `.reveal` div tag.
|
||||
|
||||
</small>
|
||||
|
||||
---
|
||||
|
||||
## Custom CSS Example
|
||||
|
||||
In `home/reveal-hugo/head.html`:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.reveal section h1 {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Custom JS Example
|
||||
|
||||
In `home/reveal-hugo/body.html`:
|
||||
|
||||
```html
|
||||
<script type="text/javascript">
|
||||
Reveal.addEventListener('slidechanged', function(event) {
|
||||
console.log("🎞️ Slide is now " + event.indexh);
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Extending the layout
|
||||
#### (alternative)
|
||||
|
||||
You can declare a custom CSS or javascript in your configuration.
|
||||
|
||||
```toml
|
||||
[reveal_hugo]
|
||||
custom_css = "css/custom.css"
|
||||
custom_js = "js/custom.js"
|
||||
```
|
||||
|
||||
<small>
|
||||
|
||||
These files can be located in `static/css`, `static/js` folder
|
||||
|
||||
💡 See the [extending layout example](/extending-layout-example/#) for more details.
|
||||
|
||||
</small>
|
||||
25
themes/reveal-hugo/exampleSite/content/home/features.md
Normal file
25
themes/reveal-hugo/exampleSite/content/home/features.md
Normal file
@ -0,0 +1,25 @@
|
||||
+++
|
||||
weight = 10
|
||||
+++
|
||||
|
||||
## What's included?
|
||||
|
||||
- All Reveal.js HTML, CSS and JS (v3.9.2)
|
||||
- All out-of-the-box Reveal.js themes
|
||||
- Two custom Reveal.js themes (including this one)
|
||||
|
||||
<br>
|
||||
<br>
|
||||
|
||||
[see the code on github](https://github.com/dzello/reveal-hugo)
|
||||
|
||||
---
|
||||
|
||||
## Features
|
||||
|
||||
- Write slides in Markdown in one or more files
|
||||
- Shortcodes for fragments, sections, slides & more
|
||||
- All Reveal.js parameters can be customized
|
||||
- Any Hugo section can be output as a presentation
|
||||
- Supports offline development or using a CDN
|
||||
|
||||
43
themes/reveal-hugo/exampleSite/content/home/resources.md
Normal file
43
themes/reveal-hugo/exampleSite/content/home/resources.md
Normal file
@ -0,0 +1,43 @@
|
||||
+++
|
||||
weight = 42
|
||||
+++
|
||||
|
||||
# Resources
|
||||
|
||||
---
|
||||
|
||||
## Code and docs
|
||||
|
||||
- [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/)
|
||||
- [Hugo output format docs](https://gohugo.io/templates/output-formats/)
|
||||
|
||||
---
|
||||
|
||||
## Designed to...
|
||||
|
||||
- Deploy to [Netlify](https://netlify.com/)
|
||||
- Edit with [Forestry](https://forestry.io/)
|
||||
|
||||
---
|
||||
|
||||
# 🙏
|
||||
|
||||
Contribute by opening issues and pull requests.
|
||||
|
||||
---
|
||||
|
||||
# Thanks!
|
||||
|
||||
---
|
||||
|
||||
# ↩️
|
||||
|
||||
#### [Start over](#)
|
||||
@ -0,0 +1,41 @@
|
||||
+++
|
||||
weight = 30
|
||||
+++
|
||||
|
||||
## Fragment
|
||||
|
||||
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
|
||||
|
||||
The `frag` shortcode is 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
|
||||
|
||||
@ -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/)
|
||||
@ -0,0 +1,38 @@
|
||||
+++
|
||||
weight = 36
|
||||
+++
|
||||
|
||||
{{< markdown >}}
|
||||
|
||||
## Markdown
|
||||
|
||||
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!
|
||||
|
||||
{{</* /markdown */>}}
|
||||
```
|
||||
|
||||
<br>
|
||||
<small>
|
||||
💡 Make sure to use the `{{</* */>}}` shortcode syntax to avoid rendering by Hugo.
|
||||
</small>
|
||||
|
||||
---
|
||||
|
||||
<!-- .slide: data-background="#FF4081" -->
|
||||
|
||||
Reveal.js markdown uses HTML comments to change slide properties, like background color.
|
||||
|
||||
```markdown
|
||||
{{</* markdown */>}}
|
||||
<!-- .slide: data-background="#FF4081" -->
|
||||
# I'm a colorful slide
|
||||
{{</* /markdown */>}}
|
||||
```
|
||||
|
||||
{{< /markdown >}}
|
||||
|
||||
@ -0,0 +1,49 @@
|
||||
+++
|
||||
weight = 38
|
||||
+++
|
||||
|
||||
## Notes
|
||||
|
||||
Add speaker notes (with markdown) to your presentation with the `note` shortcode. Type 's' to see this slide's speaker notes.
|
||||
|
||||
```markdown
|
||||
---
|
||||
|
||||
{{%/* note */%}}
|
||||
- You found the **speaker notes**!
|
||||
{{%/* /note */%}}
|
||||
|
||||
---
|
||||
```
|
||||
|
||||
{{% note %}}
|
||||
- You found the **speaker notes**!
|
||||
{{% /note %}}
|
||||
|
||||
---
|
||||
|
||||
{{< slide notes="You found the notes!" >}}
|
||||
|
||||
## Notes
|
||||
|
||||
You can also add notes with the `slide` shortcode and `notes` attribute:
|
||||
|
||||
```markdown
|
||||
---
|
||||
|
||||
{{%/* slide notes="You found the notes!" */%}}
|
||||
|
||||
---
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
<section data-noprocess>
|
||||
<h2>Write slides in HTML</h2>
|
||||
<p>Use a <code>section</code> tag with a <code>data-noprocess</code> attribute to avoid any processing by reveal-hugo.</p>
|
||||
<pre>
|
||||
<section data-noprocess>
|
||||
<h1>Hello world!</h1>
|
||||
</section></pre>
|
||||
<small>💡 This is useful if you can't get Markdown to output exactly what you want.</small>
|
||||
</section>
|
||||
@ -0,0 +1,44 @@
|
||||
+++
|
||||
weight = 33
|
||||
+++
|
||||
|
||||
{{% section %}}
|
||||
|
||||
## Section
|
||||
|
||||
The `section` shortcode groups slides into a **vertical display**.
|
||||
|
||||
<br>
|
||||
<small>
|
||||
use the down arrow or swipe down to continue
|
||||
</small>
|
||||
<br>
|
||||
<a href="#" class="navigate-down">🔽</a>
|
||||
|
||||
---
|
||||
|
||||
Put the shortcode around the slides you want to group together.
|
||||
|
||||
```markdown
|
||||
{{%/* section */%}}
|
||||
|
||||
## Section slide 1
|
||||
|
||||
---
|
||||
|
||||
## Section slide 2
|
||||
|
||||
{{%/* /section */%}}
|
||||
```
|
||||
|
||||
Keep going down.
|
||||
|
||||
---
|
||||
|
||||
## That's it!
|
||||
|
||||
Use the right arrow or swipe right to continue.
|
||||
|
||||
{{% /section %}}
|
||||
|
||||
|
||||
250
themes/reveal-hugo/exampleSite/content/home/shortcodes/slide.md
Normal file
250
themes/reveal-hugo/exampleSite/content/home/shortcodes/slide.md
Normal file
@ -0,0 +1,250 @@
|
||||
+++
|
||||
weight = 34
|
||||
+++
|
||||
|
||||
## Slide
|
||||
|
||||
Use this shortcode when you need to customize slide attributes like id, class, background color and transition.
|
||||
|
||||
---
|
||||
|
||||
{{< slide class="hello" >}}
|
||||
|
||||
## Slide
|
||||
|
||||
Add the shortcode above the slide's content, below the `---`.
|
||||
|
||||
```markdown
|
||||
---
|
||||
|
||||
{{</* slide class="hello" */>}}
|
||||
|
||||
## Hello, world!
|
||||
|
||||
---
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
{{< slide transition="zoom" transition-speed="fast" >}}
|
||||
|
||||
## Custom slide 1
|
||||
|
||||
<small>Did you notice? This slide has a fast zoom transition.</small>
|
||||
|
||||
```markdown
|
||||
---
|
||||
|
||||
{{</* slide transition="zoom" transition-speed="fast" */>}}
|
||||
|
||||
## Custom slide 1
|
||||
|
||||
---
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
{{< slide background-color="#FF4081" >}}
|
||||
|
||||
## Custom slide 2
|
||||
|
||||
<small>This slide has a different background color.</small>
|
||||
|
||||
```markdown
|
||||
---
|
||||
|
||||
{{</* slide background-color="#FF4081" */>}}
|
||||
|
||||
## Custom slide 2
|
||||
|
||||
---
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
{{< slide background-image="/images/alex-litvin-790876-unsplash.jpg" background-color="#000000" >}}
|
||||
|
||||
## Custom slide 3
|
||||
|
||||
<small>This slide has a background image.</small>
|
||||
|
||||
```markdown
|
||||
---
|
||||
|
||||
{{</* slide background-image="/images/alex-litvin-790876-unsplash.jpg" */>}}
|
||||
|
||||
---
|
||||
```
|
||||
|
||||
<small>(credit <a href="https://unsplash.com/@alexlitvin">Alex Litvin</a>)</small>
|
||||
|
||||
---
|
||||
|
||||
{{< slide id="custom-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-slide" */>}}
|
||||
|
||||
## Custom slide
|
||||
|
||||
---
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```markdown
|
||||
[Try the link](#custom-slide)
|
||||
```
|
||||
|
||||
<br>
|
||||
|
||||
[Try the link](#custom-slide)
|
||||
|
||||
---
|
||||
|
||||
Slide attribute possibilities from the [Reveal.js docs](https://github.com/hakimel/reveal.js):
|
||||
|
||||
- `autoslide`
|
||||
- `state`
|
||||
- `background`
|
||||
- `background-color`
|
||||
- `background-image`
|
||||
- `background-size`
|
||||
- `background-position`
|
||||
- `background-repeat`
|
||||
|
||||
---
|
||||
|
||||
- `background-video`
|
||||
- `background-video-loop`
|
||||
- `background-video-muted`
|
||||
- `background-interactive`
|
||||
- `background-iframe`
|
||||
- `background-transition`
|
||||
- `transition` (can have different in and out transitions)
|
||||
- `transition-speed`
|
||||
- `notes` (can also use the note shortcode)
|
||||
- `timing`
|
||||
|
||||
---
|
||||
|
||||
{{% section %}}
|
||||
|
||||
## Slide templates
|
||||
|
||||
Store sets of common slide attributes in front matter variables and apply them to slides with the template attribute.
|
||||
|
||||
<br>
|
||||
<small>
|
||||
navigate down to learn more
|
||||
</small>
|
||||
<br>
|
||||
<a href="#" class="navigate-down">🔽</a>
|
||||
|
||||
---
|
||||
|
||||
Create templates in config.toml, _index.md or the current page's front matter. Put them under the **templates** key with a meaningful name:
|
||||
|
||||
```toml
|
||||
[reveal_hugo.templates.hotpink]
|
||||
class = "hotpink"
|
||||
background = "#FF4081"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
{{< slide template="hotpink" >}}
|
||||
|
||||
Apply the template using the **template** attribute of the slide shortcode:
|
||||
|
||||
```markdown
|
||||
{{</* slide template="hotpink" */>}}
|
||||
|
||||
# I'm a hot pink 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:
|
||||
|
||||
- page
|
||||
- section (_index.md)
|
||||
- site (config.toml)
|
||||
|
||||
{{% /section %}}
|
||||
|
||||
---
|
||||
|
||||
{{% section %}}
|
||||
|
||||
{{< slide content="home.reusable" >}}
|
||||
|
||||
---
|
||||
|
||||
{{< slide content="common.nested.reusable" >}}
|
||||
|
||||
{{% /section %}}
|
||||
|
||||
---
|
||||
|
||||
{{% section %}}
|
||||
|
||||
## Slide-specific CSS
|
||||
|
||||
Add more variety to your presentation by applying slide-specific CSS.
|
||||
|
||||
<br>
|
||||
<small>
|
||||
navigate down to learn more
|
||||
</small>
|
||||
<br>
|
||||
<a href="#" class="navigate-down">🔽</a>
|
||||
|
||||
---
|
||||
|
||||
First, use the `slide` shortcode to give the slide a class:
|
||||
|
||||
```markdown
|
||||
---
|
||||
|
||||
{{</* slide class="side-by-side" */>}}
|
||||
|
||||
# 📈
|
||||
|
||||
# 📊
|
||||
|
||||
---
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Next, use a layout extension partial like `reveal-hugo/head.html` to add CSS selectors:
|
||||
|
||||
```html
|
||||
<style>
|
||||
.reveal section.side-by-side h1 {
|
||||
position: absolute;
|
||||
}
|
||||
.reveal section.side-by-side h1:first-of-type {
|
||||
left: 25%;
|
||||
}
|
||||
.reveal section.side-by-side h1:nth-of-type(2) {
|
||||
right: 25%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
{{< slide class="side-by-side" >}}
|
||||
|
||||
# 📈
|
||||
|
||||
# 📊
|
||||
|
||||
{{% /section %}}
|
||||
109
themes/reveal-hugo/exampleSite/content/home/usage.md
Normal file
109
themes/reveal-hugo/exampleSite/content/home/usage.md
Normal file
@ -0,0 +1,109 @@
|
||||
+++
|
||||
weight = 20
|
||||
+++
|
||||
|
||||
# Usage
|
||||
|
||||
---
|
||||
|
||||
## Prerequisite
|
||||
|
||||
First, add this to your `config.toml`:
|
||||
|
||||
```toml
|
||||
[outputFormats.Reveal]
|
||||
baseName = "index"
|
||||
mediaType = "text/html"
|
||||
isHTML = true
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Presentation at site root
|
||||
|
||||
Create `content/_index.md`:
|
||||
|
||||
```markdown
|
||||
+++
|
||||
outputs = ["Reveal"]
|
||||
+++
|
||||
|
||||
# Slide 1
|
||||
|
||||
Hello world!
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Add slides
|
||||
|
||||
Separate them by `---` surrounded by blank lines:
|
||||
|
||||
```
|
||||
# Slide 1
|
||||
|
||||
Hello world!
|
||||
|
||||
---
|
||||
|
||||
# Slide 2
|
||||
|
||||
Hello program!
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Add slides with other files
|
||||
|
||||
Add slides to `content/home/*.md`
|
||||
|
||||
```markdown
|
||||
+++
|
||||
weight = 10
|
||||
+++
|
||||
|
||||
# Slide 3
|
||||
|
||||
---
|
||||
|
||||
# Slide 4
|
||||
```
|
||||
|
||||
<small>💡 Tip: Use `weight` to specify the order that files should be considered.</small>
|
||||
|
||||
---
|
||||
|
||||
### Presentation at '/{section}/'
|
||||
|
||||
Add slides to `content/{section}/_index.md`:
|
||||
|
||||
```markdown
|
||||
+++
|
||||
outputs = ["Reveal"]
|
||||
+++
|
||||
|
||||
# Slide 1
|
||||
|
||||
---
|
||||
|
||||
# Slide 2
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Add slides from other files in `content/{section}/*.md`
|
||||
|
||||
```markdown
|
||||
+++
|
||||
weight = 10
|
||||
+++
|
||||
|
||||
# Slide 3
|
||||
|
||||
---
|
||||
|
||||
# Slide 4
|
||||
```
|
||||
|
||||
<small>💡 Tip: Use `weight` to specify the order that files should be considered.</small>
|
||||
|
||||
Reference in New Issue
Block a user