diff --git a/README.md b/README.md index 380bcc0..9f276d6 100644 --- a/README.md +++ b/README.md @@ -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. diff --git a/exampleSite/config.toml b/exampleSite/config.toml index e6ea537..665f24f 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -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"] diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index 934afaf..4ae57d1 100644 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -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. \ No newline at end of file +A Hugo theme for creating Reveal.js presentations. + +~ made by [@dzello](https://dzello.com/) ~ \ No newline at end of file diff --git a/exampleSite/content/home/body.md b/exampleSite/content/home/body.md deleted file mode 100644 index 307c0c0..0000000 --- a/exampleSite/content/home/body.md +++ /dev/null @@ -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 %}} diff --git a/exampleSite/content/home/conclusion.md b/exampleSite/content/home/conclusion.md index 93308a8..322e237 100644 --- a/exampleSite/content/home/conclusion.md +++ b/exampleSite/content/home/conclusion.md @@ -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! diff --git a/exampleSite/content/home/features.md b/exampleSite/content/home/features.md new file mode 100644 index 0000000..c6166b7 --- /dev/null +++ b/exampleSite/content/home/features.md @@ -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 diff --git a/exampleSite/content/home/introduction.md b/exampleSite/content/home/introduction.md deleted file mode 100644 index dfb1164..0000000 --- a/exampleSite/content/home/introduction.md +++ /dev/null @@ -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. diff --git a/exampleSite/content/home/section.md b/exampleSite/content/home/section.md deleted file mode 100644 index 6bb83bc..0000000 --- a/exampleSite/content/home/section.md +++ /dev/null @@ -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 %}} diff --git a/exampleSite/content/home/usage-shortcodes.md b/exampleSite/content/home/usage-shortcodes.md new file mode 100644 index 0000000..b66a57e --- /dev/null +++ b/exampleSite/content/home/usage-shortcodes.md @@ -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 %}} diff --git a/exampleSite/content/home/usage.md b/exampleSite/content/home/usage.md new file mode 100644 index 0000000..ab5b877 --- /dev/null +++ b/exampleSite/content/home/usage.md @@ -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 diff --git a/images/reveal-hugo.png b/images/screenshot.png similarity index 100% rename from images/reveal-hugo.png rename to images/screenshot.png