Reveal should be an outputFormat

Now any Hugo section can be configured to generate a presentation without altering its type, and the theme is more easily copied into existing sites without conflicting with any preexisting layouts.
This commit is contained in:
dzello 2018-04-27 22:56:09 -07:00
parent 4a59fa2a58
commit 4e0d34413b
82 changed files with 78 additions and 28 deletions

View file

@ -31,16 +31,14 @@ The only requirement is to demarcate slides with `---` surrounded by newlines.
Visit [https://dzello.com/reveal-hugo/](https://dzello.com/reveal-hugo/) to see an presentation created with this theme that shows more ways to use it. You can also check out this repository [running on Netlify](https://reveal-hugo.netlify.com/). Visit [https://dzello.com/reveal-hugo/](https://dzello.com/reveal-hugo/) to see an presentation created with this theme that shows more ways to use it. You can also check out this repository [running on Netlify](https://reveal-hugo.netlify.com/).
# Usage # Step-by-step guide to create a presentation
[Install Hugo](https://gohugo.io/) and create a new Hugo site. [Install Hugo](https://gohugo.io/) and create a new Hugo site:
```shell ```shell
$ hugo new site my-presentation $ hugo new site my-presentation
``` ```
*Note: if you wish to add a Reveal.js presentation to an existing Hugo site without changing its theme, you can see [an example here](https://github.com/dzello/dzello-dot-com).*
Change into the directory of the new site: Change into the directory of the new site:
```shell ```shell
@ -53,11 +51,21 @@ Clone this repository into the themes directory:
$ git clone git@github.com:dzello/reveal-hugo.git themes/reveal-hugo $ git clone git@github.com:dzello/reveal-hugo.git themes/reveal-hugo
``` ```
Open `config.toml` and add a new output format called `Reveal`:
```toml
[outputFormats.Reveal]
baseName = "index"
mediaType = "text/html"
isHTML = true
```
Create a file in `content/_index.md` with this contents: Create a file in `content/_index.md` with this contents:
``` ```markdown
+++ +++
title = "My presentation" title = "My presentation"
outputs = ["Reveal"]
+++ +++
# Hello world! # Hello world!
@ -75,7 +83,7 @@ Navigate to [http://localhost:1313/](http://localhost:1313/) and you should see
![New site with reveal-hugo](/images/reveal-hugo-hello-world.png) ![New site with reveal-hugo](/images/reveal-hugo-hello-world.png)
To add more slides, just add content to `_index.md`. Remember to separate each slide separated by `---` surrounded by newlines. To add more slides, you can add content to `_index.md` or create new markdown files in `content/home`. Remember to separate each slide separated by `---` surrounded by newlines.
```markdown ```markdown
@ -102,17 +110,48 @@ weight = 20
### Section presentations ### Section presentations
To create more presentations in the same repository, place the content into sections. Section presentations will include content from each file in that section including an `_index.md` file if it exists. Again, use the `weight` param to order the sections (`_index.md` will always be first). To create a presentation for the content of any section of your Hugo site, just add `Reveal` to its list of `outputFormats` in the front matter of `section/_index.md`:
Section presentations can use a different Reveal.js theme by specifying the `reveal_theme` parameter in the front matter of the section's `_index.md` file. ```toml
outputs = ["Reveal"]
```
Section presentations will include content from each file in that section. Again, use the `weight` param to order the sections, knowing that any content in `_index.md` will come first.
Presentations can use a different Reveal.js theme by specifying the `reveal_theme` parameter in the front matter of the section's `_index.md` file.
```toml ```toml
reveal_theme = "moon" reveal_theme = "moon"
``` ```
### Add a Reveal.js presentation to an existing Hugo site
If your Hugo site already has a theme but you'd like to create a presentation from some of its content, that's very easy. First, manually copy a few files out of this theme into a few of your site's directories:
```shell
$ cd my-hugo-site
$ git clone git@github.com:dzello/reveal-hugo.git themes/reveal-hugo
$ cp -r themes/reveal-hugo/static/reveal static/reveal
$ cp themes/reveal-hugo/layouts/_default/*.reveal.html layouts/_default
$ cp themes/reveal-hugo/layouts/shortcodes/* layouts/shortcodes
```
Next, add the Reveal output format to your site's `config.toml` file
```toml
[outputFormats.Reveal]
baseName = "index"
mediaType = "text/html"
isHTML = true
```
Now you can add `outputs = ["Reveal"]` to the front matter of any section's `_index.md` file and that sections content will be combined into a presentation and saved to `index.html`. If you already have a normal `index.html` page for that section, just change the `baseName` above to `reveal` and the presentation will be placed in a `reveal.html` file instead.
Note: If you specify `outputs = ["Reveal"]` for a single content file, you can make sure nothing is generated for that file. This is handy if you other default layouts that would have created a regular HTML file from it. Only the list file is required for the presentation.
### Fragments ### Fragments
Fragments are a Reveal.js concept that lets you introduce content into each slide incrementally. Borrowing the concept from [hugo-theme-revealjs](https://github.com/RealOrangeOne/hugo-theme-revealjs), you can use a `fragment` shortcode to accomplish this in reveal-hugo in the same way. Fragments are a Reveal.js concept that lets you introduce content into each slide incrementally. Borrowing the idea from [hugo-theme-revealjs](https://github.com/RealOrangeOne/hugo-theme-revealjs) (thanks!), you can use a `fragment` shortcode to accomplish this in reveal-hugo in the same way.
```markdown ```markdown
# Let's count to three... # Let's count to three...
@ -121,7 +160,8 @@ Fragments are a Reveal.js concept that lets you introduce content into each slid
{{% fragment %}} Three {{% /fragment %}} {{% fragment %}} Three {{% /fragment %}}
``` ```
# Configuration # Configuration
These settings go in `config.toml`:
- `params.reveal_theme`: The Reveal.js theme used, defaults to "black" - `params.reveal_theme`: The Reveal.js theme used, defaults to "black"

View file

@ -1,6 +1,7 @@
baseURL = "https://reveal-hugo.netlify.com/" baseURL = "https://reveal-hugo.netlify.com/"
languageCode = "en-us" languageCode = "en-us"
title = "A Hugo theme for creating Reveal.js presentations" title = "A Hugo theme for creating Reveal.js presentations"
disableKinds = ["sitemap", "RSS"]
[author] [author]
name = "Josh Dzielak" name = "Josh Dzielak"
@ -8,3 +9,8 @@ name = "Josh Dzielak"
[params] [params]
description = "A description of this presentation" description = "A description of this presentation"
reveal_theme = "solarized" reveal_theme = "solarized"
[outputFormats.Reveal]
baseName = "index"
mediaType = "text/html"
isHTML = true

View file

@ -1,5 +1,6 @@
+++ +++
title = "reveal-hugo example presentation" title = "reveal-hugo example presentation"
outputs = ["Reveal"]
+++ +++
# reveal-hugo # reveal-hugo

View file

@ -1,5 +1,6 @@
+++ +++
title = "Example of a section presentation" title = "Example of a section presentation"
outputs = ["Reveal"]
reveal_theme = "moon" reveal_theme = "moon"
+++ +++

View file

@ -22,7 +22,11 @@ weight = 20
# reveal-hugo # reveal-hugo
Create multiple presentations, one for each section in `content`. Create a presentation for any section by adding this to its `_index.md`:
```toml
outputs = ["Reveal"]
```
--- ---

View file

@ -8,28 +8,27 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="{{ "css/reveal.css" | relURL }}"> <link rel="stylesheet" href="{{ "reveal/css/reveal.css" | relURL }}">
{{ $theme := or .Page.Params.reveal_theme .Site.Params.reveal_theme "black" }} {{ $theme := or .Page.Params.reveal_theme .Site.Params.reveal_theme "black" }}
<link rel="stylesheet" href="{{ printf "css/theme/%s.css" $theme | relURL }}" id="theme"> <link rel="stylesheet" href="{{ printf "reveal/css/theme/%s.css" $theme | relURL }}" id="theme">
<!-- Theme used for syntax highlighting of code --> <!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="{{ "lib/css/zenburn.css" | relURL }}"> <link rel="stylesheet" href="{{ "reveal/lib/css/zenburn.css" | relURL }}">
<!-- Printing and PDF exports --> <!-- Printing and PDF exports -->
<script> <script>
var link = document.createElement( 'link' ); var link = document.createElement( 'link' );
link.rel = 'stylesheet'; link.rel = 'stylesheet';
link.type = 'text/css'; link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? '{{ "css/print/pdf.css" | relURL }}' : '{{ "css/print/paper.css" | relURL }}'; link.href = window.location.search.match( /print-pdf/gi ) ? '{{ "reveal/css/print/pdf.css" | relURL }}' : '{{ "reveal/css/print/paper.css" | relURL }}';
document.getElementsByTagName( 'head' )[0].appendChild( link ); document.getElementsByTagName( 'head' )[0].appendChild( link );
</script> </script>
<!--[if lt IE 9]> <!--[if lt IE 9]>
<script src="{{ "lib/js/html5shiv.js" | relURL }}"></script> <script src="{{ "reveal/lib/js/html5shiv.js" | relURL }}"></script>
<![endif]--> <![endif]-->
</head> </head>
<body> <body>
{{ block "main" . }} {{ block "main" . }}{{ end }}
{{ end }} <script src="{{ "reveal/lib/js/head.min.js" | relURL }}"></script>
<script src="{{ "lib/js/head.min.js" | relURL }}"></script> <script src="{{ "reveal/js/reveal.js" | relURL }}"></script>
<script src="{{ "js/reveal.js" | relURL }}"></script>
<script> <script>
// More info https://github.com/hakimel/reveal.js#configuration // More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({ Reveal.initialize({
@ -40,13 +39,13 @@
transition: 'slide', // none/fade/slide/convex/concave/zoom transition: 'slide', // none/fade/slide/convex/concave/zoom
// More info https://github.com/hakimel/reveal.js#dependencies // More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [ dependencies: [
{ src: '{{ "lib/js/classList.js" | relURL }}', condition: function() { return !document.body.classList; } }, { src: '{{ "reveal/lib/js/classList.js" | relURL }}', condition: function() { return !document.body.classList; } },
{ src: '{{ "plugin/markdown/marked.js" | relURL }}', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: '{{ "reveal/plugin/markdown/marked.js" | relURL }}', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '{{ "plugin/markdown/markdown.js" | relURL }}', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: '{{ "reveal/plugin/markdown/markdown.js" | relURL }}', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '{{ "plugin/highlight/highlight.js" | relURL }}', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, { src: '{{ "reveal/plugin/highlight/highlight.js" | relURL }}', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: '{{ "plugin/search/search.js" | relURL }}', async: true }, { src: '{{ "reveal/plugin/search/search.js" | relURL }}', async: true },
{ src: '{{ "plugin/zoom-js/zoom.js" | relURL }}', async: true }, { src: '{{ "reveal/plugin/zoom-js/zoom.js" | relURL }}', async: true },
{ src: '{{ "plugin/notes/notes.js" | relURL }}', async: true } { src: '{{ "reveal/plugin/notes/notes.js" | relURL }}', async: true }
] ]
}); });
</script> </script>

View file

View file

@ -1 +0,0 @@
<script>document.location.href = "/";</script>