Asciidoctor reveal.js template

Press for next slide

Marti

This is the template I have been using for all my recent slide decks.

It’s been useful and though it is not perfect, it has everything I need.

Feel free to adapt it to your needs and share it with the community.

Template provided under CC BY

Controls

Press for the next slide

Navigation

for next section.

next slide in a section.

Press o for overview.

Press m to obtain the menu.

Notes

Press s to open notes (allow popups and you might need to press s twice)

=== Notes
Press `s` to open notes  (allow popups and you might need to press `s` twice)

[.notes]
--
Those are the slide notes

*You can Use the common format*

* And
* Lists
--

Canvas

Press c toggle draw mode on slide.

b will toggle the chaklboard.

Text

Important quote

We engineers must remember that we carry a responsibility to work toward the kind of world that we want to live in: a world that treats people with humanity and respect.

— Martin Kleppmann

Quotes

Use [quote] and quote blocks to obtain this

[quote, "Martin Kleppmann"]
--
We engineers ...
--

Admonitions^[1]

The usual admonition blocks are available using NOTE, TIP, IMPORTANT CAUTION WARNING

You can also encase them in a block

[IMPORTANT]
.You can also encase them in a block
\====
(remove the \ )
\====

1. Admonition docs

Steps

Make text blocks or list elements appear with [%step]

This
Is a
List

Or just text

Highlight

Lorem ipsum [.yellow-highlight]#ipsum#

Lorem step ipsum [.highlight-strong.step]#step#

Important text

[.important,transition="zoom"]
=== Important text

Also inline in steps

[.important%step]
Also inline in steps

Footnotes

footnote:[This is a footnote] ^[1]

Use footnote:reuse[To reuse a footnote] ^[2]

footnote:reuse[] ^[2]

For links in footnotes ^[3]

footnote:[link:https://asciidoctor.org[More Info on Footnotesb]]

1. This is a footnote

2. To reuse a footnote

3. More Info on Footnotes

A lot of text

Use [.muchotxt] for slides or blocks with a lot of text.

sometimes it’s just better to split the slides

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Arcu cursus vitae congue mauris rhoncus aenean vel elit. Ut sem viverra aliquet eget sit. Tellus at urna condimentum mattis. Massa vitae tortor condimentum lacinia. In eu mi bibendum neque egestas congue. Aenean pharetra magna ac placerat vestibulum lectus mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet consectetur. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Euismod elementum nisi quis eleifend quam adipiscing vitae proin. Enim ut sem viverra aliquet. Placerat in egestas erat imperdiet. Facilisi etiam dignissim diam quis enim lobortis. Lectus arcu bibendum at varius vel pharetra vel turpis nunc. Malesuada nunc vel risus commodo viverra maecenas accumsan. Feugiat in fermentum posuere urna nec tincidunt praesent semper. Nunc sed velit dignissim sodales ut eu sem integer vitae. Mauris sit amet massa vitae tortor. Tortor aliquam nulla facilisi cras fermentum.

Smaller text in the slide

Also use [.muchotxt] applied to the slide title

Lorem ipsum dolor sit amet,
- consectetur adipiscing elit,
- sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Arcu cursus vitae congue mauris rhoncus aenean vel elit.
Ut sem viverra aliquet eget sit. Tellus at urna condimentum mattis.
Massa vitae tortor condimentum lacinia.
In eu mi bibendum neque egestas congue.
Aenean pharetra magna ac placerat vestibulum lectus mauris.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
Suspendisse faucibus interdum posuere lorem ipsum dolor sit amet consectetur.
Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras.
Euismod elementum nisi quis eleifend quam adipiscing vitae proin.
Enim ut sem viverra aliquet.

Smaller text in the slide

=== A lot of text
Use `[.muchotxt]` for slides or blocks with a lot of text.

TIP: sometimes it's just better to split the slides

[.muchotxt]
--
Lorem ipsum dolor sit amet...
--

[.muchotxt]
=== A long list
Also use `[.muchotxt]` applied to the slide title

* Lorem ipsum dolor sit amet,

Layouts

Layout

Use Columns

Force Layouts

is-three-quarters
is-two-thirds
is-half
is-one-third
is-one-quarter
is-full

[.columns.is-vcentered]
=== Layout
[.column.is-one-quarter]
Use Columns


[.column]
Force Layouts

[.column.is-half]
[source,asciidoc]

Layout Blocks

Use -- to encapsulate blocks lasting several lines

[.column]
--
Force Layouts

* `is-three-quarters`
* `is-two-thirds`
* `is-half`
* `is-one-third`
* `is-one-quarter`
* `is-full`
--

Use == ! and === ! for slides with no headers.

Auto-animation

It’s really nice. Using just %auto-animate and some magic with setting identifiers, you’ll have automated animations. Check the examples!

Examples

Check source code to see how are they done

Network concepts

DNS

LAYERS

LAN/WAN

ROUTER+SWITCH

Example 2

Options

Docker Compose

Kubernetes

Elastic Container Service

Docker Compose

Docker-maintained tool for

Defining multi-container Docker applications
- Services (containers)
- Healthcheck
- Volumes
- Network
- Secrets
Start all of them with one command
Single machine

Example 3

Recap Data-Intensive applications ideas

SCALABILITY

RELIABILITY

MAINTAINABILITY

SCALABILITY

Measuring Load and Performance
Latency, Percentiles throughput

Example 4

What does it mean for us?

Figure 1. EC2

Elastic Compute Cloud (VM)

Figure 2. RDS

Relational Database System

Figure 3. VPC

Virtual Private Cloud (Networking)

Figure 4. IAM

Identity and Access Management

Activity: AWS console

Log in to AWS console
Take a look at the offering
Check out the services to use

100 100 100 100

Example 5

Between VM and Serverless

Virtual Machines

Serverless

Between VM and Serverless

Virtual Machines

Containers

Serverless

Customizations

Custom Styles

Asciidoc compiles to html code and uses CSS for styles.

Update the file reveal-override.css to adapt colors, icon, sizes, widths…

Custom Logo

Easy way: just replace the file called images/logo.png

To show the logo when printing, there are two places where we specify the logo.

css/reveal-override.css

.reveal-viewport {
    background-image: url(../images/logo.png);
    background-size: 12%;
    background-repeat: no-repeat;
    background-position: 97% 3%;
}

Custom Logo for printing

docinfo-footer.html

<div id="watermark"><img src="images/logo.png" alt="logo"></div>

css/reveal-override.css

.reveal-viewport {
    background-image: url(../images/logo.png);
    background-size: 12%;
    background-repeat: no-repeat;
    background-position: 97% 3%;
}


  #watermark {
    opacity: 1;
  	position: fixed;
  	height: 60px;
	  z-index: 20;
    top: 40px;
    left: 1300px;
  }

Custom footer

Update those lines to personalize the footer.

docinfo-footer.html

<footer id="title-footer" class="white_bg">
    <p>martsec - 2023 - <a href="https://8vi.cat">8vi.cat</a></p>
</footer>

Accent color

Change the occurences of #009fe3 in the css files for the color you desire.

Icons and Images

Background images

[.white_bg]
=== Background images
image::angele-kamp-bDuh4oK_MCU-unsplash.jpg[background]

Limited height

image::martin-pechy-....jpg[height=600]

Background Images contained

Use it for screenshots

=== !
image::martin-pechy-....jpg[background, size=contain]

Font Awesome icons

With icon:font-awesome[] you can improve the eye cachiness of your slides

v.5.13.0 Free and Brands icons available

Icon customization

Play with the extra variables size and set for variation as well as your css styles

[.red]
icon:python[set=fab,size=7x]

css/reveal-override.css

/* Main color */
.icon > i,
svg {
   color: #009fe3;
}

/* Specify custom colors */
div.red > p > span.icon > i {
  color: red;
}

Showing Code

Code blocks

You can use ---- and .... to limit code blocks

[source]
----
pi = 3
----

Syntax highlight

We can use highlight.js library to make our code shine.

Choose in the main slide deck all the languages you want to use

:source-highlighter: highlightjs
:highlightjs-languages: asciidoc,python,yaml,Dockerfile,dockerfile,Bash

And specify the language in the block

[source, python]
----
pi = 3
----

Syntax highlight Result

pi = 3.1415
name = "m"

Do not duplicate code

Get your code directly from files!

[source,python]
----
include::../code_examples/flask_app.py[]
----

Or just some lines

[source,python]
----
include::../code_examples/flask_app.py[lines=1]
include::../code_examples/flask_app.py[lines=6..10]
----

from flask import Flask
import sqlite3

DB_FILE = "my_app.db"

app = Flask(__name__)

@app.route("/")
def main_page():
    return "<p>Hello, World!</p>"

from flask import Flask
app = Flask(__name__)

@app.route("/")
def main_page():
    return "<p>Hello, World!</p>"

Line numbers

Use source%linenums to show line numbers. ^[1]

[source%linenums,python]
----
include::../code_examples/flask_app.py[]
----

1. |test|

Line numbers

from flask import Flask
import sqlite3

DB_FILE = "my_app.db"

app = Flask(__name__)

@app.route("/")
def main_page():
    return "<p>Hello, World!</p>"

Highlight lines of code

Use highlight= to draw the atention to the lines you are explaining.

, acts as and, .. is to indicate a line range and | indicates different steps.

[source,python,highlight="1,6|7..10"]
----
include::../code_examples/flask_app.py[]
----

Don’t use source%linenums with this since in some cases causes conflicts

Highlight lines of code

from flask import Flask
import sqlite3

DB_FILE = "my_app.db"

app = Flask(__name__)

@app.route("/")
def main_page():
    return "<p>Hello, World!</p>"

Incrementally reveal code

from flask import Flask

Incrementally reveal code

from flask import Flask

app = Flask(__name__)

@app.route("/")
def main_page():
    return "<p>Hello, World!</p>"

Incrementally reveal code

from flask import Flask
import sqlite3

DB_FILE = "my_app.db"

app = Flask(__name__)

@app.route("/")
def main_page():
    return "<p>Hello, World!</p>"

How to do it?

Use a combination of [%auto-animate] and data-id=xyz in different slides

[%auto-animate]
=== Incrementally reveal code
[source,python,highlight="1,3",data-id=flask-app]
----
include::../code_examples/flask_app.py[lines=1,6]
----

[%auto-animate]
=== Incrementally reveal code
[source,python,highlight="4..7",data-id=flask-app]
----
include::../code_examples/flask_app.py[lines=1]

include::../code_examples/flask_app.py[lines=6..10]
----

[%auto-animate]
=== Incrementally reveal code
[source,python,highlight="2..4",data-id=flask-app]
----
include::../code_examples/flask_app.py[]
----

Extra Plugins

We’ve enabled some plugins

Countdown

I’ve added the Countdown.js plugin to add timers to your slides

Time to finish the slide

Use t to start/stop timer and + and - to modify time.

+ and - keys are keyboard-specific so you’ll need to change them in docinfo-footer.html

+++<countdown time="60" autostart="yes" />+++

Canvas^[1]

Press c toggle draw mode on slide.

b will toggle the chaklboard.

1. From reveal.js-plugins

Menu^[1]

Press m to obtain the menu.

1. From reveal.js-plugins

CustomControls^[1]

Those icons on the bottom left!

1. From reveal.js-plugins

Extra plugins to configure

reveal.js-plugins provides more plugins that you can make available just modifying docinfo-footer.html

Animations via SVG.js
Anything for plots via D3.JS and many other things (check live demo)
Audio slideshow for audio playback and recording

Resources

Image Credits

"Showing code" photo by James Harrison on Unsplash
"Layouts" photo by Grant Lemons on Unsplash
"Icons and Images" photo by Angèle Kamp on Unsplash
"Background Images contained" photo by Martin Péchy on Unsplash
"Resources" photo by Giammarco Boscaro on Unsplash

Asciidoctor reveal.js template

Controls

Navigation

Notes

Canvas

Text

Important quote

Quotes

Admonitions[1]

Steps

Highlight

Important text

Important text

Footnotes

A lot of text

Smaller text in the slide

Smaller text in the slide

Layouts

Layout

Layout Blocks

Auto-animation

Examples

Network concepts

Example 2

Options

Docker Compose

Example 3

Recap Data-Intensive applications ideas

Example 4

What does it mean for us?

Activity: AWS console

Example 5

Between VM and Serverless

Between VM and Serverless

Customizations

Custom Styles

Custom Logo

Custom Logo for printing

Custom footer

Accent color

Icons and Images

Background images

Limited height

Background Images contained

Font Awesome icons

Icon customization

Showing Code

Code blocks

Syntax highlight

Syntax highlight Result

Do not duplicate code

Line numbers

Line numbers

Highlight lines of code

Highlight lines of code

Incrementally reveal code

Incrementally reveal code

Incrementally reveal code

Incrementally reveal code

How to do it?

Extra Plugins

Countdown

Canvas[1]

Menu[1]

CustomControls[1]

Extra plugins to configure

Resources

Image Credits

Admonitions^[1]

Canvas^[1]

Menu^[1]

CustomControls^[1]