-
Notifications
You must be signed in to change notification settings - Fork 4
Migration guide: V2 V3
This guide will help you to migrate your theme V2 to V3.
This slide was using to display School program and show WIFI code if it was usefull. You have two possibilities
- Do not replace this slide (because very few person use it and we generally skip it)
- Use the blur slide instead
To replace by blue slide, here is what to do :
Old slide
<!-- .slide: class="school-presentation" -->
<div class="wifi">
<span class="key">wifi:</span><span>SSID</span><br>
<span class="key">mdp:</span><span>PASSWORD</span>
</div>Replace it by
<!-- .slide: class="bg-blur" -->
<br>
### Wifi available
<br>
<!-- .element: style="--icon-size:300px; --icon-color:var(--light-grey);" -->
<br>
Credentials
<!-- .element: class="center" -->
<br>
<!-- .element: style="--icon-color:var(--light-grey);" --> SSID
<!-- .element: style="--icon-color:var(--light-grey);" --> PWD
As thoses slides were transitions slides, simply replace them by the generics transition-bg-sfeir-1 to 3. You will have to choose between 3 background. You can also if you prefer play with transition-bg-green-1 to 6.
As the new theme only use underline transition screen. We will recommand you to migrate to the basic transition class : 'transition'. If you want a particular color, you could only compose with green or blue.
As pink isn't anymore in the new theme, use the correct color bg-green, bg-white,bg-blue in remplacment.
Nothing to do because the meta data will not be use. So it's better to clean your html
<!-- .slide: class="speaker-slide blue" -->
or
<!-- .slide: class="speaker-slide green" -->
or
<!-- .slide: class="speaker-slide pink" -->is to replace by
<!-- .slide: class="speaker-slide" -->You could do nothing because meta data will not be render or you can clean your code
<h2>Jean-François<span> Garreau</span></h2>
### CTO front
<!-- .element: class="icon-rule icon-first" -->
### @jefbinomed
<!-- .element: class="icon-twitter icon-second" -->
### fake.email@sfeir.com
<!-- .element: class="icon-mail icon-third" -->to replace by (warning, don't clean icon-rule, it is use to identify the rule of speaker)
<h2>Jean-François<span> Garreau</span></h2>
### CTO front
<!-- .element: class="icon-rule icon-first" -->
### @jefbinomed
<!-- .element: class="icon-second" -->
### fake.email@sfeir.com
<!-- .element: class="icon-third" -->The old version of two column layout is now deprecated and will be removed in version 3.1.0. So the migration is very easy to do :
<!-- .slide: class="two-column-layout"-->
# A Title
##--##
content left
##--##
content right
Is to migrate this way :
<!-- .slide: class="two-column" -->
## A title
content left
##--##
content rightthere is no need to have a "global" title. Now simply choose the content you want on the slide you want. Please have a look at the documentation to see the new features offer with the two-column system
You have a new kind of quotes slides with <!-- .slide: class="quote-slide" -->
If you where using "exercice" as h2 in exercice slides, prefer the word "Lab" now
In this new theme, by defaut, no filter is set on the image, so you have to precise with the class "mask" when you want to add a kind of layer between the image and your text.
- Update .nvmrc to version 16
- Update docker-compose.yaml to node version 16.17
Here are the addition, modification you have to report in your package.json
{
"scripts": {
"sass": "sass ./scss/slides.scss:./css/slides.css --source-map --watch",
"sass-once": "sass ./scss/slides.scss:./css/slides.css --source-map",
"test": "echo \"Error: no test specified\" && exit 1",
"serve": "live-server --port=4242 --open=\"./index.html\" --watch=\"markdown,scripts/\"",
"start": "parallelshell \"npm run serve\" \"npm run sass\"",
"prepare": "node ./scripts/dont-touch/prepare-script.js"
},
"dependencies": {
"sfeir-school-theme": "^3.0.0"
},
"devDependencies": {
"chokidar-cli": "^3.0.0",
"live-server": "^1.2.1",
"sass": "^1.51.0",
"parallelshell": "3.0.1",
"shelljs": "^0.8.5"
}
}You can remove snowpack from package.json. This part is not useful anymore.
Don't forget the <!DOCTYPE html> it will cause rendering problems else
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SFEIR School - XXX</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- ----------------------------------------------------
---------------- PREZ STYLES ---------------------------
------------------------------------------------------ -->
<script type="module" src="./scripts/slides.js"></script>
<link rel="stylesheet" type="text/css" href="./web_modules/sfeir-school-theme/sfeir-school-theme.css" id="theme" />
<link rel="stylesheet" type="text/css" href="./css/slides.css" id="theme-custo" />
</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>
</html>RevealJS is not anymore the entry point for theme. Now, it's all around SfeirTheme. So we have to update slide.js to import the Init method of sfeir theme
import { SfeirThemeInitializer } from '../web_modules/sfeir-school-theme/sfeir-school-theme.mjs';
...
// and
/*
export function usedSlides() {
return formation();
}
*/
// Is to replace by
SfeirThemeInitializer.init(formation);You can now delete files :
scripts/dont-touch/import-slides.jsscripts/dont-touch/reveal-config.js
const shelljs = require('shelljs');
shelljs.rm('-rf', './web_modules');
shelljs.mkdir('-p', './web_modules/sfeir-school-theme');
shelljs.cp('-rf', './node_modules/sfeir-school-theme/*', './web_modules/sfeir-school-theme');As the new version of node supported is 16, you will have to update your node_modules with npm i.