Commit ad8aadc2 authored by JackV's avatar JackV
Browse files

Import revealjs template

parents
variables:
GIT_SUBMODULE_STRATEGY: recursive
pages:
stage: deploy
script:
- mkdir .public
- cp -r * .public
- rm .public/deploy.py
- mv .public public
artifacts:
paths:
- public
only:
- master
[submodule "reveal.js"]
path = reveal.js
url = https://gitlab.poul.org/corsi/reveal.js
branch = poul
# POuL reveal.js template
This is the `reveal.js` slides template for all POuL lessons.
It is mandatory for new courses to either use this or the Beamer base template.
## Important - Slides versioning
Slides repositories should be placed under the appropriate suborganization, under
[/corsi](https://gitlab.poul.org/corsi).
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.
All years slides must be tagged appropriately:
```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?
Click on the printer symbol in the bottom-left corner to get the printable version of the slides.
Then just use the print function of your browser to make a PDF of the page.
On **Chrome/ium** make sure you **scroll to the top** of your slides before printing,
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`.
#!/usr/bin/env python3
import sys
from time import sleep
from threading import Thread
from argparse import ArgumentParser
from socketserver import TCPServer
from http.server import SimpleHTTPRequestHandler as Handler
import webbrowser
DEFAULT_ADDR = '127.0.0.1'
DEFAULT_PORT = 8080
parser = ArgumentParser(description="Serve reveal.js slides.")
parser.add_argument('port', metavar='PORT', type=int, nargs='?',
default=DEFAULT_PORT)
parser.add_argument('--show', action='store_true', default=False,
help="Open in browser.")
arg = parser.parse_args()
class stoppable_httpd(Thread):
def run(self):
print("Serving at http://{}:{}".format(DEFAULT_ADDR, arg.port))
self.s = TCPServer((DEFAULT_ADDR, arg.port), Handler)
self.s.serve_forever()
def stop(self):
self.s.shutdown()
def show():
webbrowser.open("http://{}:{}/".format(DEFAULT_ADDR, arg.port))
if __name__ == '__main__':
httpd = stoppable_httpd()
httpd.start()
if arg.show:
show()
try:
while True:
sleep(60 * 60 * 24)
except (KeyboardInterrupt, SystemExit):
httpd.stop()
sys.exit(0)
<!doctype html>
<head>
<meta charset="utf-8"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<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"/>
<!-- reveal.js base stylesheel. Don't remove nor edit this. -->
<link href="./reveal.js/css/reveal.css" rel="stylesheet"/>
<!-- POuL theme for reveal.js -->
<link href="./poul/css/poul.css" id="theme" rel="stylesheet"/>
<!-- print-button plugin style -->
<link href="./reveal.js/plugin/print-button/style.css" rel="stylesheet"/>
<!-- 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
/**
* POuL reveal.js theme.
*
* Forked from the default black theme.
*/
@import url(../../reveal.js/lib/font/source-sans-pro/source-sans-pro.css);
section.has-light-background,
section.has-light-background h1,
section.has-light-background h2,
section.has-light-background h3,
section.has-light-background h4,
section.has-light-background h5,
section.has-light-background h6 {
color: #222;
}
/*********************************************
* 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;
}
::selection {
color: #fff;
background: #fc4a2c;
text-shadow: none;
}
.slides > section {
height: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.slides section > section {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.reveal .slides > section,
.reveal .slides > section > section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.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;
}
.reveal h1 {
font-size: 2.5em;
}
.reveal h2 {
font-size: 1.6em;
}
.reveal h3 {
font-size: 1.3em;
}
.reveal h4 {
font-size: 1em;
}
.reveal h1 {
text-shadow: none;
}
.reveal x-section-title {
position: absolute;
top: 0;
right: 20px;
color: #ffc600;
font-weight: bold;
text-align: right;
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: 20px 0;
line-height: 1.3;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
color: #ffc600;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal q,
.reveal blockquote {
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);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
min-width: 40em;
margin: 20px auto;
text-align: left;
font-size: 0.55em;
font-family: monospace;
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
}
.reveal code {
font-family: monospace;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align="center"],
.reveal table td[align="center"] {
text-align: center;
}
.reveal table th[align="right"],
.reveal table td[align="right"] {
text-align: right;
}
.reveal table tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
}
.reveal sub {
vertical-align: sub;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: #ffc600;
text-decoration: none;
-webkit-transition: color 0.15s ease;
-moz-transition: color 0.15s ease;
transition: color 0.15s ease;
}
.reveal a:hover {
color: #aa8833;
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: #068de9;
}
/*********************************************
* IMAGES
*********************************************/
.reveal img {
max-width: 67%;
margin: 2%;
}
.reveal img.plain {
border: 0;
box-shadow: none;
}
.reveal a img {
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
}
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
border-color: #fc4a2c;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
.reveal img.shadow {
box-shadow: 5px 5px 8px #000;
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls .navigate-left,
.reveal .controls .navigate-left.enabled {
border-right-color: #ffc600;
}
.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
border-left-color: #ffc600;
}
.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
border-bottom-color: #ffc600;
}