diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index 60032d2..13b4600 100644 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -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. diff --git a/exampleSite/content/example/_index.md b/exampleSite/content/example/_index.md index 91a81a7..65d5b2b 100644 --- a/exampleSite/content/example/_index.md +++ b/exampleSite/content/example/_index.md @@ -3,6 +3,7 @@ title = "Example of a section presentation" outputs = ["Reveal"] [reveal_hugo] theme = "moon" +history = true +++ # Section Presentation diff --git a/exampleSite/content/home/features.md b/exampleSite/content/home/features.md index 70281ba..b00c363 100644 --- a/exampleSite/content/home/features.md +++ b/exampleSite/content/home/features.md @@ -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. diff --git a/exampleSite/content/home/resources.md b/exampleSite/content/home/resources.md index c8bc11d..fe036dc 100644 --- a/exampleSite/content/home/resources.md +++ b/exampleSite/content/home/resources.md @@ -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! + +--- + +# 👍 diff --git a/exampleSite/content/home/shortcodes/fragment.md b/exampleSite/content/home/shortcodes/fragment.md index 3d1b6bd..e53592c 100644 --- a/exampleSite/content/home/shortcodes/fragment.md +++ b/exampleSite/content/home/shortcodes/fragment.md @@ -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. diff --git a/exampleSite/content/home/shortcodes/introduction.md b/exampleSite/content/home/shortcodes/introduction.md new file mode 100644 index 0000000..2978a52 --- /dev/null +++ b/exampleSite/content/home/shortcodes/introduction.md @@ -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/) \ No newline at end of file diff --git a/exampleSite/content/home/shortcodes/markdown.md b/exampleSite/content/home/shortcodes/markdown.md index 409f515..802dc08 100644 --- a/exampleSite/content/home/shortcodes/markdown.md +++ b/exampleSite/content/home/shortcodes/markdown.md @@ -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. +``` +{{}} +# Hello world! +{{}} +``` [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. -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. ``` {{}} @@ -30,3 +30,4 @@ For example, an HTML comment can change the background color of a slide. ``` {{< /markdown >}} + diff --git a/exampleSite/content/home/shortcodes/other.md b/exampleSite/content/home/shortcodes/other.md index f6f6e44..c262852 100644 --- a/exampleSite/content/home/shortcodes/other.md +++ b/exampleSite/content/home/shortcodes/other.md @@ -2,7 +2,7 @@ weight = 38 +++ -## Note shortcode +## Note Add speaker notes to your presentation. @@ -20,5 +20,10 @@ You found the speaker notes!

Pure HTML Slide

-

Surround slides in a section tag with a data-noprocess attribute to write them in HTML.

+

Surround slides in a section tag with a data-noprocess attribute to write them in pure HTML.

+ 
+<section data-noprocess>
+  <h1>Hello world!</h1>
+<section>
+ 💡 This is useful if you can't get Markdown to output exactly what you want.
diff --git a/exampleSite/content/home/shortcodes/section.md b/exampleSite/content/home/shortcodes/section.md index 595729f..bd987fa 100644 --- a/exampleSite/content/home/shortcodes/section.md +++ b/exampleSite/content/home/shortcodes/section.md @@ -1,10 +1,10 @@ +++ -weight = 32 +weight = 36 +++ {{% section %}} -## Section shortcode +## Section The `section` shortcode groups slides into a vertical display. diff --git a/exampleSite/content/home/shortcodes/slide.md b/exampleSite/content/home/shortcodes/slide.md index 5aa8f91..b61e63d 100644 --- a/exampleSite/content/home/shortcodes/slide.md +++ b/exampleSite/content/home/shortcodes/slide.md @@ -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 */%}} ``` diff --git a/exampleSite/content/home/usage.md b/exampleSite/content/home/usage.md index e8cf7d8..af50dfa 100644 --- a/exampleSite/content/home/usage.md +++ b/exampleSite/content/home/usage.md @@ -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) · -[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. - +💡 Tip: Use `weight` to specify the order that files should be added. --- -## 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. +💡 Tip: Use `weight` to specify the order that files should be added. + +--- + +# 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) · +[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) + +
+ +They live in the `static/reveal-hugo/themes` folder and also [on Github](https://github.com/dzello/revealjs-themes). + + +--- + +## 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)