Skip to content
GitLab
Commit c2a1c92a authored by Bisca's avatar Bisca
Browse files

Merge branch '2022_linday' into 'master' 

Update for Linux Day 2022 (long version)

See merge request !2
parents dd7b4b25 3e326f7b
Pipeline #1659 passed with stage
in 1 minute and 7 seconds
Expand all Hide whitespace changes
Inline Side-by-side
README.md
View file @ c2a1c92a
# POuL reveal.js template
# reveal.js POuL Template
This is the `reveal.js` slides template for all POuL lessons.
This is the slides template for the [`reveal.js`](https://revealjs.com/) framework used in the majority of POuL courses.
It is mandatory for new courses to either use this or the Beamer base template.
It is mandatory for new courses to use this.
## Important - Slides versioning
## Features
Slides repositories should be placed under the appropriate suborganization, under
[/corsi](https://gitlab.poul.org/corsi).
- POuL **CSS**: custom colors and layouts.
- Uniformed **intro and outro slides**, with POuL branding.
- Small **presentation of the POuL association**, with [leaflet map](https://leafletjs.com/).
- Selection of suggested **licenses**, conforming to POuL ethics.
- Local **preview script**.
All years slides should be **in the same repo**, even if they use different
technologies. Use a branch `revealjs`/`beamer` to distinguish the two trees.
## Usage
All years slides must be tagged appropriately:
A guide on how to use this is available here: [How to write Slides for a POuL course](https://wiki.poul.page/courses/slides)
```bash
git tag -m 2019 2019
```
If you need to move a tag, add `--force`. You might need to ask a sysadmin if you
need to force-push.
## Getting Started
In order for the slides to work (ie. display anything) you need to run:
`git submodule update --init`
In case you need the mathjax submodule as well
`git submodule update --init --recursive`
You can add `--depth 1` to the previous commands to improve the update speed but only if you are using the latest `reveal.js` module.
## How do I use this thing?
### Where do I write my stuff?
1. Create a new repo into the appropriate sub-organization
1. Clone this repo
1. Change origin to your repo
1. Push
1. Add author's info in `./slides/intro.html` and `./slides/outro.html`
1. Put your content in `./slides/content.md` or add slides files in `./slides/` and link these in `./index.html`
All user-supplied content MUST be placed under the `slides` directory.
This allows to easily merge changes from this template without breaking the
slides.
If you're updating old slides you should resolve all the conflicts yourself and
migrate to the new layout described here.
### How do I write my stuff?
Using Vim.
[Here][markdown-guide] you can find a comprehensive guide to the Markdown syntax.
Remember to use three dashes (`---`) to create a new slide horizontally and
four dashes (`----`) to create a new one vertically.
Use `Notes:` to add reader notes to your slide.
Alternatively you can write your slides with pure **html**
### How do I see my stuff?
You can run `./deploy.py` with Python 3 and open the provided link in your browser.
## How do I make a PDF out of the slides?
### How do I make a PDF out of the slides?
Click on the printer symbol in the bottom-left corner to get the printable version of the slides.
......@@ -78,38 +27,3 @@ otherwise, for whatever reason, the background of the slides will be borked.
On **Firefox** it is advised to enable *Print Backgrounds* under the *Options* tab,
to select paper size *Choukei 2 Envelope* and *Landscape* orientation.
[download]: https://gitlab.poul.org/corsi/revealjs-poul/repository/archive.zip?ref=master
[markdown-guide]: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
## GitLab Pages slides preview
It is possible to use GitLab Pages to preview the slides in order to send them for review
to the mailing list.
#### Important
GitLab Pages **must not** be used to actually publish the slides, and links to it
**must not** be given to course attendants. Use [slides.poul.org](https://slides.poul.org)
instead.
A `.gitlab-ci.yml` config is provided in this template. It simply copies the whole
`master` branch of the repo to the Pages website.
To use it:
- Enable CI for your repository:
- Go to `Settings` > `General` > `Visibility`
- Enable `Pipelines` under the `Repository` section
A CI build job for the `master` branch should run automatically. If it doesn't, go to
`CI / CD` and click `Run Pipeline`.
You can find the link to your Pages preview under `Settings` > `Pages`.
## License selection
By deafault this template indicates the license as CC-BY-SA, however by editing
the `slides/outro.html` file one can pick a different license from the "suggested"
ones.
(This however does not forbid anyone from using a different license altogether,
just that those are the ones that we find suit best `;)` )
index.html
View file @ c2a1c92a
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<head>
<meta charset="utf-8"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<!-- Meta infos -->
<title>Ansible: the recipe for a good server</title>
<meta name="description" content="Software provisioning, config management and deployment"/>
<meta name="author" content="Paddy, Bisca"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"/>
<!-- Apple shenanigans -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<!-- reveal.js base stylesheel. Don't remove nor edit this. -->
<link href="./reveal.js/css/reveal.css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!-- POuL theme for reveal.js -->
<link href="./poul/css/poul.css" id="theme" rel="stylesheet"/>
<!-- Stylesheets -->
<!-- reveal.js base stylesheets. Don't remove nor edit these. -->
<link rel="stylesheet" href="./reveal.js/dist/reset.css"/>
<link rel="stylesheet" href="./reveal.js/dist/reveal.css"/>
<!-- POuL theme -->
<link rel="stylesheet" href="./poul/css/poul.css" id="theme"/>
<!-- print-button plugin style -->
<link href="./reveal.js/plugin_ext/print-button/style.css" rel="stylesheet"/>
<!-- Theme for code syntax highlighting -->
<link rel="stylesheet" href="./reveal.js/plugin/highlight/monokai.css"/>
<!-- Leaflet map style -->
<link rel="stylesheet" href="./poul/leaflet/leaflet.css"/>
</head>
<body>
<script src="./reveal.js/dist/reveal.js"></script>
<!-- Plugins -->
<script src="./reveal.js/plugin/zoom/zoom.js"></script>
<script src="./reveal.js/plugin/notes/notes.js"></script>
<script src="./reveal.js/plugin/search/search.js"></script>
<script src="./reveal.js/plugin/markdown/markdown.js"></script>
<script src="./reveal.js/plugin/highlight/highlight.js"></script>
<script src="./reveal.js/plugin/math/math.js"></script>
<!-- Non-revealjs plugins -->
<script src="./reveal.js/plugin_ext/print-button/print-button.js"></script>
<script src="./poul/leaflet/leaflet.js"></script>
<!-- print-button plugin style -->
<link href="./reveal.js/plugin/print-button/style.css" rel="stylesheet"/>
<!-- ---------- Slides ---------- -->
<div class="reveal">
<div class="slides">
<section data-external-replace="./slides/intro.html"></section>
<section data-external-replace="./slides/01-intro.html"></section>
<section data-external-replace="./slides/02-inventory.html"></section>
<section data-external-replace="./slides/03-play.html"></section>
<section data-external-replace="./slides/04-role.html"></section>
<section data-external-replace="./slides/05-modules.html"></section>
<section data-external-replace="./slides/06-priv-esc.html"></section>
<section data-external-replace="./slides/07-others.html"></section>
<section data-external-replace="./slides/outro.html"></section>
</div>
</div>
<!-- ---------------------------- -->
<!-- Code syntax highlighting -->
<link href="./reveal.js/lib/css_highlight/hopscotch.css" rel="stylesheet"/>
<!-- Printing and PDF exports -->
<script>
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.location.search.match(/print-pdf/gi)
? './poul/css/print/pdf.css' : './poul/css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<script src="./reveal.js/lib/js/head.min.js"></script>
<script src="./reveal.js/js/reveal.js"></script>
<!-- Init Reveal.js -->
<script>
document.addEventListener("DOMContentLoaded", () => {
Reveal.initialize({
controls: false,
slideNumber: true,
history: true,
transition: 'none',
pdfMaxPagesPerSlide: 1,
pdfSeparateFragments: false,
display: 'flex',
markdown: {
smartypants: true,
},
keyboard: {
38: 'prev', // Up arrow
40: 'next' // Down arrow
},
math: {
mathjax: './reveal.js/lib/js/mathjax/MathJax.js',
config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html
},
dependencies: [
{
src: './reveal.js/plugin/external/external.js',
condition: function () {
return !!document.querySelector('[data-external],[data-external-replace]');
}
},
{
src: './reveal.js/plugin/markdown/marked.js',
condition: function () {
return !!document.querySelector('[data-markdown]');
}
},
{
src: './reveal.js/plugin/markdown/markdown.js',
condition: function () {
return !!document.querySelector('[data-markdown]');
}
},
{
src: './reveal.js/plugin/highlight/highlight.js',
async: true,
callback: function () {
hljs.initHighlightingOnLoad();
}
},
{
src: './reveal.js/plugin/notes/notes.js',
async: true
},
{
src: './reveal.js/plugin/math/math.js',
async: true
},
{
src: './reveal.js/plugin/print-button/print-button.js'
}
]
});
});
</script>
</head>
<div class="reveal">
<div class="slides">
<section data-external-replace="./slides/intro.html"></section>
<section data-charset="utf-8"
data-markdown="./slides/content.md"
data-separator="^\r?\n---\r?\n$"
data-separator-notes="^Notes:"
data-separator-vertical="^\r?\n----\r?\n$">
</section>
<section data-external-replace="./slides/outro.html"></section>
</div>
</div>
\ No newline at end of file
<!-- reveal.js initialization -->
<script>
// document.addEventListener("DOMContentLoaded", () => {
Reveal.initialize({
controls: false,
slideNumber: true,
navigationMode: 'linear',
transition: 'none',
pdfMaxPagesPerSlide: 1,
pdfSeparateFragments: false,
display: 'flex',
plugins: [ RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight, RevealMath.MathJax3 ],
markdown: {
smartypants: true, // Changes quotes to nicer ones
},
keyboard: {
38: 'prev', // Up arrow
40: 'next' // Down arrow
},
mathjax3: {
mathjax: './reveal.js/plugin_ext/mathjax-local/tex-mml-chtml.js', // Use local mathjax
},
// Do not use this for newer plugins, it is needed for compatibility reasons
dependencies: [{
// Allow import of external HTML using data-external attribute
src: './reveal.js/plugin_ext/external/external.js',
condition: function() {
return !!document.querySelector( '[data-external],[data-external-replace]' );
}
}, ],
});
// });
</script>
</body>
</html>
poul/css/poul.css
View file @ c2a1c92a
......@@ -3,7 +3,7 @@
*
* Forked from the default black theme.
*/
@import url(../../reveal.js/lib/font/source-sans-pro/source-sans-pro.css);
@import url(../../reveal.js/dist/theme/fonts/source-sans-pro/source-sans-pro.css); */
section.has-light-background,
section.has-light-background h1,
......@@ -18,45 +18,67 @@ section.has-light-background h6 {
/*********************************************
* GLOBAL STYLES
*********************************************/
body {
background: #191919;
background-color: #191919;
}
.reveal {
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 38px;
font-weight: normal;
color: #fff;
:root {
--r-background-color: #191919;
--r-main-font: Source Sans Pro, Helvetica, sans-serif;
--r-main-font-size: 38px;
--r-main-color: #fff;
--r-block-margin: 20px;
--r-heading-margin: 0 0 20px 0;
--r-heading-font: Source Sans Pro, Helvetica, sans-serif;
--r-heading-color: #ffc600;
--r-heading-line-height: 1.2;
--r-heading-letter-spacing: normal;
--r-heading-text-transform: none; // Try uppercase
--r-heading-text-shadow: none;
--r-heading-font-weight: 600;
--r-heading1-text-shadow: none;
--r-heading1-size: 2.5em;
--r-heading2-size: 1.6em;
--r-heading3-size: 1.3em;
--r-heading4-size: 1em;
--r-code-font: monospace;
--r-link-color: #ffc600;
--r-link-color-dark: #068de9;
--r-link-color-hover: #aa8833;
--r-selection-background-color: #fc4a2c;
--r-selection-color: #fff;
}
.reveal-viewport {
background: #191919;
background-color: var(--r-background-color);
}
::selection {
color: #fff;
background: #fc4a2c;
text-shadow: none;
.reveal {
font-family: var(--r-main-font);
font-size: var(--r-main-font-size);
font-weight: normal;
color: var(--r-main-color);
}
.slides > section {
height: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.reveal ::selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.slides section > section {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.reveal ::-moz-selection {
color: var(--r-selection-color);
background: var(--r-selection-background-color);
text-shadow: none;
}
.reveal .slides > section,
.reveal .slides > section > section {
line-height: 1.3;
font-weight: inherit;
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/*********************************************
......@@ -68,415 +90,505 @@ body {
.reveal h4,
.reveal h5,
.reveal h6 {
margin: 0 0 20px 0;
color: #ffc600;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-weight: 600;
line-height: 1.2;
letter-spacing: normal;
text-shadow: none;
word-wrap: break-word;
margin: var(--r-heading-margin);
color: var(--r-heading-color);
font-family: var(--r-heading-font);
font-weight: var(--r-heading-font-weight);
line-height: var(--r-heading-line-height);
letter-spacing: var(--r-heading-letter-spacing);
text-transform: var(--r-heading-text-transform);
text-shadow: var(--r-heading-text-shadow);
word-wrap: break-word;
}
.reveal h1 {
font-size: 2.5em;
font-size: var(--r-heading1-size);
}
.reveal h2 {
font-size: 1.6em;
font-size: var(--r-heading2-size);
}
.reveal h3 {
font-size: 1.3em;
font-size: var(--r-heading3-size);
}
.reveal h4 {
font-size: 1em;
font-size: var(--r-heading4-size);
}
.reveal h1 {
text-shadow: none;
text-shadow: var(--r-heading1-text-shadow);
}
/* Optional top right section title */
.reveal x-section-title {
position: absolute;
top: 0;
right: 20px;
color: #ffc600;
font-weight: bold;
text-align: right;
position: absolute;
top: 0;
right: 20px;
color: var(--r-heading-color);
font-weight: bold;
text-align: right;
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: 20px 0;
line-height: 1.3;
margin: var(--r-block-margin) 0;
line-height: 1.3;
}
/* Remove trailing margins after titles */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
margin-bottom: 0;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
color: #ffc600;
font-weight: bold;
color: var(--r-heading-color);
}
.reveal em {
font-style: italic;
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
margin-left: 40px;
}
.reveal q,
.reveal blockquote {
quotes: none;
quotes: none;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: 20px auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
display: block;
position: relative;
width: 70%;
margin: var(--r-block-margin) auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
display: inline-block;
}
.reveal q {
font-style: italic;
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
min-width: 40em;