SFEIR School Theme

This repository is an Open Source theme for RevealJS presentations. It respect the graphical theme of @SFEIR company.

You can preview it here : https://sfeir-school-theme.netlify.app/

• Releases Notes

How to use it:

Npm

# run
$npm install sfeir-school-theme

Cloning the repo

Let's consider that the path to reveal engine is at $LIBS_PATH

Clone the repository in your project ($SFEIR_THEME_PATH)

Link

You should have a folder web_modules/sfeir-school-theme. In this folder you should have the bundled sfeir theme (either copy the demo web_modules or build it with npm run build).

In your index.html add the following lines:

...
<head>
    ...
    <!-- SFEIR Theme includes -->
    <script type="module" src="./scripts/slides.js"></script>
    <link
        rel="stylesheet"
        type="text/css"
        href="./web_modules/sfeir-school-theme/dist/sfeir-school-theme.css"
        id="theme" />
</head>
<body>
    <div class="reveal">
        <!-- Any section element inside of this container is displayed as a slide -->
        <div class="slides" data-type-show="prez"></div>
    </div>
</body>
...

and a basic slides.js:

import { SfeirThemeInitializer } from "../web_modules/sfeir-school-theme/dist/sfeir-school-theme.mjs";

// One method per module
function schoolSlides(typeShow) {
  return [
    "00_intro.md",
    "01_speaker.md",
    "10_chapter1.md",
    "11_layouts.md",
    "15_vertical.md",
    "20_specifics_slides.md",
    "30_code_slides.md",
    "40_helpers.md",
    "50_modes.md",
  ];
}

function formation(typeShow) {
  return [
    //
    ...schoolSlides(typeShow),
  ].map((slidePath) => {
    return { path: slidePath };
  });
}

SfeirThemeInitializer.init(formation);

Enjoy!

CLI

This repo also ships a CLI to check and scaffold your training: it validates slides, labs and assets against the theme's conventions.

See the CLI documentation for installation, commands and configuration.

RevealJS

This theme use target for RevealJS so all you can do with RevealJS is available with theme.

You can still use RevealJS API by importing Reveal object in import { Reveal } from "../web_modules/sfeir-school-theme/dist/sfeir-school-theme.mjs";

Features availables:

There is too many features to list them all, but here somes usefull:

• Code Higlighting (sequential highlighting will come after)
  • Choice of Dark code or Light code
  • Choice of font
  • Progess Highlithing
• As it's controlled by class, it's compatible with markdown syntax or html
• Fragment management to have progress display of elements
• Print the slides (see bellow)

Look at revealJS Site to see what is possible

TalkControl

The theme use TalkControl RevealJS extensions so all you can do with this extension is available in the theme

Features availables:

• Specifics slides management:
  • Speaker slide
  • Transition Slides
  • I18N for your slides mechanism
  • Multiple Columns layout
  • Copy/paste for code slides
  • Configurations for slides
  • Helpers for positionning / images size / credits notes
  • Admonition
  • Quotes slides
  • QrCodes
  • Font icons (material / feather / fontawesome)
  • UI
    • Slide selector
    • Define theme
    • Define data-type
    • Define language

See the documentation about all thoses features here

Features add to Sfeir School theme

• Specifics slides management:
  • First Slide
  • Speaker Slide (rework)
  • Transitions Slides (some configurations)
  • Three theme mode available : institute, school or conf
  • Blur slide
  • Exercices Slides

Play with mode theme

Lots of trainings given by SFEIR School program are also available with the paid program SFEIR Institute (training organism of SFEIR company). The program SFEIR School has a main theme color which is green whereas SFEIR Institute has a main theme color which is blue. To use the same support for both programs, V3 makes it possible to switch easily from one theme to another.

To this end, you have two possibilities:

• Use HTML attribute data-theme;
• Use URL parameter data-theme.

Below are index.html and URL examples for the available themes.

1. Institute

<body>
    <div class="reveal">
        <div class="slides" data-theme="institute">...</div>
    </div>
</body>

https://sfeir-school-theme.netlify.app/index.html?data-theme=institute#/

2. School (default theme)

<body>
    <div class="reveal">
        <div class="slides" data-theme="school">...</div>
    </div>
</body>

https://sfeir-school-theme.netlify.app/index.html?data-theme=school#/

3. Conf

<body>
    <div class="reveal">
        <div class="slides" data-theme="conf">...</div>
    </div>
</body>

https://sfeir-school-theme.netlify.app/index.html?data-theme=conf#/

The default value is "school" mode -> Green theme.

Here is an example of first slide according to if you set mode to institute or not.

Institute mode :

Conf mode :

Normal mode (or school mode):

Here are the impacts of the mode :

• Change the first slide
• If you use SFEIR background (transition-bg-sfeir-1 to transition-bg-sfeir-3), the background use will be green or blue
• The underline of titles in transitions slides
• The exercice slide
• The color of feather icons
• The header of tables

I18N your slides

If you want to translate your slides, you simply have to add the extension corresponding to the translate langage : XX-slide.EN.md.

The default langage used is French, so by default a file with no extension or when you ask french slides, the engine provides you the markdown files without lang suffix.

If your asking a slide that is not available in the asked langage, the engine will provide you the "default" langage slide.

To resume, asking FR langage will serve you default markdown files.

To specify the langage you want to use, you have two options :

• define the langage in the index.html
• adding a parameter specifying the langage

Configuration in the index.html

<body>
    <div class="reveal">
        <div class="slides" data-lang="EN">...</div>
    </div>
</body>

Configuration by URL

Simply add a query parameter in the URL data-lang with the wanted langage after.

Specifics Slides

First slide

<!-- .slide: class="first-slide" sfeir-level="1" sfeir-techno="pwa" -->

# **Welcome to SFEIR School**

## **PWA 100**

• Attribute: sfeir-level could change from 1 to 3
• Attribute: sfeir-techno display the technology of the SFEIR school in the badge of SFEIR school.

Speaker Slide

<!-- .slide: class="speaker-slide" -->

<div class="speaker-slide">

# Hello ! @SFEIR

## Jean-François <b>Garreau</b>

### CTO Front

### fake.email@sfeir.com

### @jefbinomed

![](./assets/images/jf.jpg 'speaker')

![](./assets/images/logo-sfeir-blanc.png 'company')

![](./assets/images/gde.png 'badge')

![](./assets/images/GDG-Logo-carre.png 'badge')

![](./assets/images/mts.png 'badge')

</div>

You can have up to 4 sub information (here CTO Front & @jefbinomed).

You can also have up to 6 badge

Transitions slides

<!-- .slide: class="transition" -->

# Management of custom slides

You can use those class for transitions slides :

• blue: the text underline of transition will be set to blue
• green: the text underline of transition will be set to blue
• left: the text will be left aligned
• right: the text will be right aligned
• top: the text will be stick to the top
• bottom: the text will be stick to the bottom
• bg-white / bg-blue / bg-green : the background will be in a different color
• transition-bg-sfeir-1 -> transition-bg-sfeir-3 : different background images linked to theme mode (school or institute)
• transition-bg-green-1 -> transition-bg-green-6 : different green backgrounds images
• transition-bg-blue-1 -> transition-bg-blue-3 : different blue backgrounds images

Transition with background text in blue or green

<!-- .slide: class="transition blue" -->

# Transition blue

or in green

Transition with text left aligned

<!-- .slide: class="transition left" -->

# Transition left

• transition right for right text aligned

• transition top for top text aligned

• transition bottom for bottom text aligned

Specifics Colors Backgrounds

Here is the list of possible backgrounds:

<!-- .slide: class="transition bg-white" -->

# Transition

• bg-white

• bg-blue

• bg-green

Transition background SFEIR and green and blue

Here is the list of possible grey background

• bg-sfeir-1 = bg-green-1 or bg-blue-1
• bg-sfeir-2 = bg-green-2 or bg-blue-2
• bg-sfeir-3 = bg-green-3 or bg-blue-3

<!-- .slide: class="transition-bg-sfeir-1" -->

# SFEIR bg SFEIR 1

• transition-bg-sfeir-1

• transition-bg-green-1

• transition-bg-green-2

• transition-bg-green-3

• transition-bg-green-4

• transition-bg-green-5

• transition-bg-green-6

• transition-bg-blue-1

• transition-bg-blue-2

• transition-bg-blue-3

Blur area slides

There is a way to show content in a blur area for introducing pause in your training

<!-- .slide: class="bg-blur" -->

<br>

### C'est l'heure de la pause

<br>

![](pause-circle 'tc-icons feather')<!-- .element: style="--tc-icon-size:300px; --tc-icon-color:var(--light-grey);" -->

<br>

On se retrouve à

<!-- .element: class="center" -->
<br>

![](clock 'tc-icons feather tc-big')<!-- .element: style="--tc-icon-color:var(--light-grey);" --> 10h

Exercices

To produce exercices slides:

<!-- .slide: class="exercice" -->

# Exercice Title

## Exercice

<br>
1. First step
2. Second step
3. Third step
<br>
Additionnal Advice
### Step: push-1

Create content for the restitution only

With this configuration option you can easily create content that is different between, what you will play on stage and what you will give to your attendees without a complete rewrite of your slides. This configuration is a pair between a key specified in your index.html or URL parameters and a key present in your slides.

Index.html Configuration

<body>
    <div class="reveal">
        <div class="slides" data-type="prez">...</div>
    </div>
</body>

https://sfeir-school-theme.netlify.app/index.html?data-type=prez#/

Slides configuration

<!-- .slide: data-type-show="prez" -->

## A slide for prez only

A few words !

The slide 'A slide for prez only' will be visible only if the attribute data-type-show on index.html is set to "prez" or if the type URL parameter is set to prez. Note that as for the themes described above, the URL parameter takes precedence over the HTML attribute.

With this technique, you can easily create 2 versions of your index.hml, one with data-type-show to prez and one with data-type-showto full and in your slides, you have something like that

<!-- .slide: data-type-show="prez" -->

## A slide for prez only

A few words !

##==##

<!-- .slide: data-type-show="full" -->

## A slide for publication only

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec risus leo. Vestibulum condimentum orci in urna auctor aliquet. Quisque mi erat, placerat non porttitor ut, gravida eu erat. Fusce semper ipsum vel nibh porttitor aliquam. Cras sed porttitor est, id scelerisque odio. Pellentesque sit amet imperdiet ex. Aliquam erat.

If nothing is set in the markdown, the slide will be available for both versions.

You can also set multiples data-type-show in the same slide (separated by a space) to create kind of specifics configurations for your slides.

<!-- .slide: data-type-show="prez other" -->

Print the slides

To print your presentation, simply follow the reveal.js tutorial : Pdf Export

Configuration	Description
index.html?print-pdf&show-notes	Show the notes in the exported page.
<div class="slides" data-show-notes/>	Show the notes in the exported page.
<div class="slides" data-show-notes="separate-page"/>	Show the notes of the exported page in a separate page.
<div class="slides" data-pdf-max-pages-per-slide="1"/>	Ensures that one slide is printed as one page.
index.html?print-pdf&pdf-max-pages-per-slide=1	Ensures that one slide is printed as one page.
<div class="slides" data-pdf-max-pages-per-slide="<number>"/>	Ensures that one slide is printed as <number> page maximum.
<div class="slides" data-pdf-dont-separate-fragments/>	Ensure that fragments are not separated in multiple pages.
index.html?print-pdf&pdf-dont-separate-fragments	Ensure that fragments are not separated in multiple pages.