Zweiter Advent 2020 – Die Installation von reveal.js

Code of Advent 75%

Installation Second Code of Advent

The installation of reveal.js

There are several ways to install reveal.js. We decide to go for the full setup. For this we need node.js (at least version 10) and yarn. As an editor we use Visual Studio Code.

(Line 1) First, we create a new directory on disk, e.g. dockerdemo.

(line 2) Then we navigate to this directory using the command line (e.g. CMD) and

(line 3) clone reveal.js there.

(line 4) Now we navigate into the cloned directory and

(line 5) install the dependencies with yarn or npm.

(line 6) Finally, we open the directory in Visual Studio Code.

Picture of Code

This completes the installation.

Start reveal.js

With the following command (executed from a command line) you can now start reveal.js, provided you are in the above directory:

				
					1. yarn start
				
			

If port 8000 is busy, an error message is displayed. With the command

				
					1. yarn start -- --port=8001 
				
			

you can simply specify a different port. Now open the browser and

				
					1. http: //localhost:8000 
				
			

(or enter the changed port). Already the first presentation opens, which consists of two slides.

Slide 1

First, in the index.html file, we change the title from reveal.js to docker-cheat-sheet and the theme to white.css. In addition, we will create a file called app.css in the css folder – this is where we will define our styles.

Picture of Code

If you take a closer look at the index.html file in VSCode, you will notice the section with slides and sections.

Picture of Code

Within slides the individual sections are embedded. Even though slides actually means slides, you should think of the sections as slides instead.

Change background

You can easily change the background of a section. To do this, create a new directory in the reveal.js folder called assets, and create the images folder there. There you place the desired image – you can assign this image to each section:

Picture of Code

If we now look at the result, the background seems a bit too intense. We dim it a bit. To do this, we add the following to app.css:

Picture of small Code

We then assign the class dim to each section:

Picture of Code

Here is the result:

Docker Slide 1

Foil arrangement

With reveal.js you can arrange the slides in two planes: horizontally and vertically. Sections, which are direct “children” of slides, are arranged horizontally. In contrast, the framework arranges child elements of sections vertically. So you can navigate in all directions.

Arrangement of slides in our presentation

Our presentation aims to give the viewer a small overview of the most important Docker commands. The slides should look like this, with reveal.js automatically adding the navigation:

You can implement this arrangement immediately. In the code it reads like this:

Bild mit Code

Once you have successfully completed this step, the presentation will look like this:

Flowchart

That’s it for part 2 of the series. In the third part, we will take a closer look at the individual contents of the presentation.

Table of contents