#+TITLE: Shower Example
#+DATE: <2024-02-18 Sun>
#+OPTIONS: toc:nil title:nil html-style:nil html-postamble:nil html-preamble:nil tags:nil num:nil
#+HTML_HEAD: <link rel="stylesheet" href="https://ict4g.net/shower/shower/themes/ribbon/styles/styles.css">
#+HTML_HEAD: <script src="https://ict4g.net/shower/shower/shower.js"></script>
#+HTML_HEAD: <style> div { display: contents; } </style>
#+HTML_HEAD: <style> pre { font-size: small; color: grey } </style>
#+HTML_HEAD: <style> .dark-background pre { font-size: small; color: white } </style>
#+HTML_HEAD: <style> .dark-background { color: white } </style>
#+HTML_HEAD: <style>#title-slide, .white { color: white; }</style>
#+HTML_CONTAINER: section
#+BEGIN_EXPORT HTML
<header class="caption">
<h1>Write Slides in Org Mode and export to Shower Presentation Engine</h1>
<p>Isn't that amazing!</p>
</header>
#+END_EXPORT
* Shower Slides using Org Mode HTML export engine :title:
:PROPERTIES:
:CUSTOM_ID: title-slide
:HTML_CONTAINER_CLASS: slide
:END:
#+ATTR_HTML: :class cover
https://www.thewowstyle.com/wp-content/uploads/2015/02/landscape-photography-image-free-wallpaper.jpg
* Requirements
A shower file requires to:
- Include Shower CSS and JavaScript
- A =body= tag with class =shower= and one =section= with class =slide= per slide
- An optional initial =header= section to set the title of the slide
* Approach
We are going to build a Shower HTML file by exporting an Org Mode file using
the standard HTML export engine. The Org Mode file contains a bit of
configuration and a bit of JavaScript, where the configuration is not
expressive enough.
You can also directly view the source of this presentation or download a
stripped-down template.
* Include Shower CSS and JavaScript
:PROPERTIES:
:HTML_CONTAINER_CLASS: slide
:END:
Include shower files (JavaScript and CSS) using =#+HTML_HEAD=:
#+begin_example org-mode
#+HTML_HEAD: <link rel="stylesheet" href="[...]/shower/shower/themes/ribbon/styles/styles.css">
#+HTML_HEAD: <script src="[...]/shower/shower/shower.js"></script>
#+end_example
Add the following special rule (to properly manage the =div= Org Mode uses to
wrap all content):
#+begin_example org-mode
#+HTML_HEAD: <style>div { display: contents; }</style>
#+end_example
* Body with class =shower= and one section per slide
- Add =#+HTML_CONTAINER: section= to the header of your file. This ensures each
heading is wrapped by a =<section>= tag
- Add the following JavaScript at the end of your presentation, which ensures =body=
and =section= are assigned the correct classes:
#+begin_example
<script>
document.body.classList.add('shower');
document.querySelectorAll('section').forEach(function(section) { section.classList.add('slide'); });
</script>
#+end_example
* An optional initial =header= in the overview
This is achieved by exporting to HTML:
#+BEGIN_EXAMPLE HTML
<header class="caption">
<h1>Write Slides in Org Mode and export to Shower Presentation Engine</h1>
<p>Isn't that amazing!</p>
</header>
#+END_EXAMPLE
* :title:
#+BEGIN_EXPORT html
<h2 class="shout grow">... and you are all set!</h2>
#+END_EXPORT
* Styling Tips
The following slides provide some formatting tips to translate Org Mode markup
language to the markup required by Shower CSS.
* Background images
:PROPERTIES:
:CUSTOM_ID: title-slide
:HTML_CONTAINER_CLASS: dark-background
:END:
Add an image and assign it the class =cover=, using =#+ATTR_HTML=, as in the example
below:
#+begin_example
#+ATTR_HTML: :class cover
https://www.thewowstyle.com/wp-content/uploads/2015/02/landscape-photography-image-free-wallpaper.jpg
#+end_example
#+ATTR_HTML: :class cover
https://www.thewowstyle.com/wp-content/uploads/2015/02/landscape-photography-image-free-wallpaper.jpg
Notice that a bit of CSS might be needed to style the text. Here, for instance, I am
using the property =:HTML_CONTAINER_CLASS:= to add a class =dark-background= to
the =section= of this slide.
* Markup for Rich Content
Org Mode markup works out of the box: *bold*, /italic/, =verbatim=,
~code~, +strikethrough+, links and lists.
Underlined text is an exception: _underlined is not really underlined_. If it is
important for you, add a CSS class to style =.underline= text, if you want.
* Structural Elements
Bulleted:
- slide 1
- slide 2
Ordered:
1. slide 1
2. slide 2
* Tables
Despite having fewer stars, Shower is a nice framework producing good looking
slides:
| CSS Framework | GitHub Stars | Last Commit |
|---------------+--------------+-------------|
| Shower | 4.8K | 3 years ago |
| Reveal.js | 66.5K | 2 weeks ago |
* Tables (II)
#+begin_export html
<style>
.simpler-table tr:not(:last-of-type) > * {
background-image: none !important;
}
</style>
#+end_export
You can override some of the table styles, to achieve a simpler look. Here,
for instance, I am overriding the =background-image= property of the rule =.slide
tr:not(:last-of-type) > *=:
#+ATTR_HTML: :class simpler-table
| CSS Framework | GitHub Stars | Last Commit |
|---------------+--------------+-------------|
| Shower | 4.8K | 3 years ago |
| Reveal.js | 66.5K | 2 weeks ago |
* :title:
You can have a slide with no title... simply by not setting the title of the
heading!
* Two columns
#+ATTR_HTML: :class columns two
#+BEGIN_DIV
#+BEGIN_P
Two columns can be obtained by exporting a =div= with two =p=.
#+END_P
#+BEGIN_P
A list on the second column:
- first point
- second point
#+END_P
#+END_DIV
* Serious Citations
Use =#+begin_quote=:
#+begin_quote
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia.
#+end_quote
* Inner Navigation
:PROPERTIES:
:HTML_CONTAINER_CLASS: inner-navigation
:END:
This is achieved with a trick. Add a class: =inner-navigation= to the slide or
to an element wrapping the list and let JavaScript add the required classes to
*all* elements of the enclosed list.
- This will appear first
- This will appear next
- And then this one
* :title:
#+BEGIN_EXPORT html
<h2 class="shout shrink">You can even shout!</h2>
#+END_EXPORT
* Documentation
:PROPERTIES:
:HTML_CONTAINER_CLASS: black dark-background
:END:
Documentation available here:
- https://github.com/shower/shower/blob/main/docs/features.md
* Conclusions
Shower produces nice slides publishable on the Web.
It is very simple to typeset the slides in Org Mode, adding a bit of
JavaScript, and then use the standard HTML export facilities to produce a
nice deck publishable on the web.
Go back to the blog post.
#+BEGIN_EXPORT html
<script>
document.body.classList.add('shower');
document.querySelectorAll('section').forEach(function(section) { section.classList.add('slide'); });
document.querySelectorAll('.inner-navigation ul li').forEach(function(section) { section.classList.add('next'); });
</script>
#+END_EXPORT