Alice’s Adventures in Wonderland
by Lewis Carroll, illustrated by Disney
An example of how the Grav Presentation-plugin operates. The plugin source is available on GitHub, as is this demo content. You can also find usage instructions and configuration details there.
Enable notes to follow along with how things work.
Great!
Notes are now active; as you can see in the address bar of your browser because it includes ?showNotes=true. This is one of the query-parameters the plugin uses to manage how the presentation renders.
Down the Rabbit-Hole
Alice was beginning to get very tired of sitting by her sister on the bank, when suddenly a White Rabbit with pink eyes ran close by her.
Like Alice, look downwards and notice the navigational arrows. Reveal.js let’s you navigate vertically, as well as horizontally. When presenting, the linear progression is to go downwards, then to the right when there are no more slides below.
You can, however, navigate freely between the slides using the Overview, by pressing esc or o on your keyboard.
There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself,
‘Oh dear! Oh dear! I shall be late!’
The Rabbit actually took a watch out of its waistcoat-pocket , and looked at it, and then hurried on…
These pages are structured like this:
/user/pages/book
├── presentation.md
├── 01.down-the-rabbit-hole
│ └── slide.md
├── 02.advice-from-a-caterpillar
│ └── slide.md
├── 03.were-all-mad-here
│ └── slide.md
├── 04.a-mad-tea-party
│ └── slide.md
├── 05.the-queens-crocquet-ground
│ └── slide.md
├── 06.postscript
└───└── slide.mdEach slide.md uses --- to create thematic breaks for vertical slides.
This slide uses shortcodes to declare a custom text color, font weight, and background image.
This slide uses a shortcode to change the class of the slide to skinny. You can create any customizations you want in your theme by creating /user/themes/MYTHEME/css/custom.css, in which you add your own classes. The plugin automatically looks for that file and loads it if found.
Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with a waistcoat-pocket, and burning with curiosity, she ran across the field after it, just in time to see it pop down a large rabbit-hole under the hedge.
In another moment down went Alice after it, never once considering how in the world she was to get out again.
The plugin, through Reveal.js, can handle varying amounts of text on each slide. The plugin uses some custom CSS — and as we shall see later, some extra logic — to enhance the Reveal.js defaults.
Advice from a Caterpillar
The following slides belong to the same Page in Grav, which has declared the following FrontMatter:
style:
color: '#eee8d5'
background-color: '#be281b'Because the Page declares this, all slides within the Page have the same styles applied.
It was the White Rabbit, trotting slowly back again, and looking anxiously about as it went, as if it had lost something; and she heard it muttering to itself
The Duchess! The Duchess! Oh my dear paws! Oh my fur and whiskers! She’ll get me executed, as sure as ferrets are ferrets! Where can I have dropped them, I wonder?
Like with normal Markdown, Grav — and hence the Plugin — supports a syntax that is easy to read and write as normal text.
The Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.
> ‘Who are you ?’ said the Caterpillar.
This slide uses fragments, which highlight individual elements on a slide. Each fragment must be wrapped in a fragment-shortcode, with no newlines within it — the syntax does not allow for this currently. You can also pass a fragment-style in as the parameter.
_-_c06543_03.jpg/737px-John_Tenniel_-_Illustration_from_The_Nursery_Alice_(1890)_-_c06543_03.jpg "Alice meets the Caterpillar")
Normal images are rendered as Grav would, but the Plugin centers them automatically.
We’re all mad here
The Cat only grinned when it saw Alice. It looked good- natured, she thought: still it had very long claws and a great many teeth, so she felt that it ought to be treated with respect.
Unlike the previous slides, this Page does not set any universal styles, so it uses the theme from Reveal.js. By default, the plugin has theme: moon set.
Notes are written within an opening and a closing notes-shortcode, and can also contain any Markdown.
Talking to the Cat
Alice
‘Would you tell me, please, which way I ought to go from here?’
The Cat
‘That depends a good deal on where you want to get to,’
Alice
‘I don’t much care where —’
The Cat
‘Then it doesn’t matter which way you go’
This slide uses the data-textsize-scale and data-textsize-modifier shortcodes. If Textsizing is enabled in the plugin, this can be used to dynamically change the size of the headers relative to the body text.
The data-textsize-modifier-shortcode proportions the base pixel size for the slide by multiplying with it, whilst data-textsize-scale sets the rhythm to apply to headings. The higher the number the scale is, the more distance there will be between header font sizes and the base font size. 1.125 is also known as the Major Second in musical terms, otherwise expressed as “8:9”, and yields this particular distance between the headers and the block text.
Base font sizes are determined by the breakpoints-option, which matches the breakpoint using bigger than or equal to width of the browser’s viewpoint, and sets the base font size from the given value.
Finding her way
‘— so long as I get somewhere ,’
Alice added as an explanation.
‘Oh, you’re sure to do that,’
said the Cat,
‘if you only walk long enough.’
Alice felt that this could not be denied, so she tried another question.
‘What sort of people live about here?’
To which the Cat replied, waving its paws round,
‘In that direction, lives a Hatter: and in that direction, lives a March Hare. Visit either you like: they’re both mad.’
The plugin treats content just as Grav does: Using Parsedown to render Markdown content, and Pages to create slides. When a Page contain sections, create by horizontal rules in HTML, it is split up in slides as well.
This and the previous slide has data-textsize-modifier set to 0.75, which means 75% of normal base font size will be applied.
A Mad Tea-Party
There was a table set out under a tree in front of the house, and the March Hare and the Hatter were having tea at it: a Dormouse was sitting between them, fast asleep, and the other two were using it as a cushion, resting their elbows on it, and talking over its head. ‘Very uncomfortable for the Dormouse,’ thought Alice; ‘only, as it’s asleep, I suppose it doesn’t mind.’
This slide uses a style-justify-content set to center to align content in the middle vertically.
The table was a large one, but the three were all crowded together at one corner of it: ‘No room! No room!’ they cried out when they saw Alice coming. ‘There’s plenty of room!’ said Alice indignantly, and she sat down in a large arm-chair at one end of the table.
‘Have some wine,’ the March Hare said in an encouraging tone.
Alice looked all round the table, but there was nothing on it but tea. ‘I don’t see any wine,’ she remarked.
When synchronizing, and the GET-parameter admin is set to yes, you are controlling the presentation. Commands are sent from the browser-window that controls the presentation to any other browser-window accessing it normally.
For this to actually have an effect the sync-option in the plugin’s settings must be set.
‘There isn’t any,’ said the March Hare.
‘Then it wasn’t very civil of you to offer it,’ said Alice angrily.
‘It wasn’t very civil of you to sit down without being invited,’ said the March Hare.
‘I didn’t know it was your table,’ said Alice; ‘it’s laid for a great many more than three.’
If sync is set to browser, commands are only shared between windows in the same browser - so you’d open a new window and drag it to another screen.
If sync is set to poll, the presentation can be controlled remotely. When viewing the presentation, the slides are controlled by checking with the website if they have changed.
Commands are logged in the browser’s console, which you can open using the browser’s developer tools. If using the poll-mode, a notification will be displayed to the user asking them to reload the window, if the connection to the server is lost.
The Queen’s Croquet-Ground
Any content that Grav can render, can generally be used with the plugin. For example other Shortcodes or embedded media. If you need to add specific assets like CSS or JavaScript to the presentation, use the presentation-group when adding them through the Asset Manager, or extend the presentation.html.twig-template in your theme.
‘Idiot!’ said the Queen, tossing her head impatiently; and, turning to Alice, she went on, ‘What’s your name, child?’
‘My name is Alice, so please your Majesty,’ said Alice very politely; but she added, to herself, ‘Why, they’re only a pack of cards, after all. I needn’t be afraid of them!’
The Queen turned crimson with fury, and, after glaring at her for a moment like a wild beast, screamed ‘Off with her head! Off —’
There are many ways of using or extending the Plugin, see its homepage for details.
This slide uses data-background-* shortcodes that correspond to the Reveal.js options for Slide Backgrounds, yielding an image as the background for the slide.
Note how style-background-color=transparent is used to unset the color that are applied to all slides within this Page, to make sure it does not block out the video.
This slide uses data-background-* shortcodes, yielding a video as the background for the slide. In this instance, it is a short excerpt from the Open Source 2008 short Big Buck Bunny.
Postscript
An example of how the Grav Presentation-plugin operates, a Plugin by Ole Vik.
- Alice in Wonderland Rendered into HTML by Steve Thomas.
- Published in 2009 by eBooks@Adelaide at http://ebooks.adelaide.edu.au/c/carroll/lewis/alice/, last updated 11 January 2011.
- Converted to Markdown for creating source-embedded EPUB by Brendan Kidwell in November 2011.
- The work is licensed under a Creative Commons Licence (available at http://creativecommons.org/licenses/by-nc-sa/2.5/au/).
- Illustrations licensed under Creative Commons Attribution NonCommercial license (CC-BY-NC 3.0) by The Disney Wiki, and under Public Domain by the British Library.
Hopefully the preceding slides gave you an impression of what can be done with the Plugin, and if you were following along with the notes they were hopefully understandable. More details are available on the GitHub repository.