first commit
commit
750dff73f3
|
|
@ -0,0 +1,3 @@
|
||||||
|
[submodule "themes/reveal-hugo"]
|
||||||
|
path = themes/reveal-hugo
|
||||||
|
url = https://github.com/dzello/reveal-hugo.git
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
# presentazione docker for dummies
|
||||||
|
|
||||||
|
## hugo dockerizzato
|
||||||
|
|
||||||
|
immagine docker di hugo (static site generator)
|
||||||
|
|
||||||
|
che usa un sottomodulo per avere un tema che usa reveal.js per gestire la presentazione in markdown
|
||||||
|
|
||||||
|
per scaricare il sottomodulo:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
foo@bar:~# git submodule update --init
|
||||||
|
```
|
||||||
|
|
||||||
|
utilizzo:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
foo@bar:~# docker-compose up -d
|
||||||
|
```
|
||||||
|
|
||||||
|
la presentazione e' visibile su
|
||||||
|
|
||||||
|
[http://localhost:1313](http://localhost:1313)
|
||||||
|
|
||||||
|
il contenuto della presentazione e' nella cartella content,
|
||||||
|
se lo si modifica viene immediatamente modificata la presentazione
|
||||||
|
(utile in fase di scrittura per avere una preview live)
|
||||||
|
|
||||||
|
|
||||||
|
al termine della presentazione:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
foo@bar:~# docker stop hugo && docker rm hugo
|
||||||
|
```
|
||||||
|
|
||||||
|
## hugo non dockerizzato
|
||||||
|
|
||||||
|
la stessa presentazione si puo' visualizzare usando direttamente hugo dopo averlo installato
|
||||||
|
sulla macchina.
|
||||||
|
|
||||||
|
(la versione 0.54 funziona, per le successive non so)
|
||||||
|
|
||||||
|
scaricare il sottomodulo:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
foo@bar:~# git submodule update --init
|
||||||
|
```
|
||||||
|
|
||||||
|
e lanciare hugo da questa cartella
|
||||||
|
|
||||||
|
```shell
|
||||||
|
foo@bar:~# hugo server
|
||||||
|
```
|
||||||
|
|
||||||
|
la presentazione e' visibile su
|
||||||
|
|
||||||
|
[http://localhost:1313](http://localhost:1313)
|
||||||
|
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
title = "Docker for dummies"
|
||||||
|
baseurl = "http://localhost:1313/"
|
||||||
|
languageCode = "en-us"
|
||||||
|
theme = "reveal-hugo"
|
||||||
|
|
||||||
|
[outputFormats.Reveal]
|
||||||
|
baseName = "index"
|
||||||
|
mediaType = "text/html"
|
||||||
|
isHTML = true
|
||||||
|
|
||||||
|
[params.reveal_hugo]
|
||||||
|
custom_theme = "reveal-hugo/themes/robot-lung.css"
|
||||||
|
#custom_theme = "reveal-hugo/themes/sunblind.css"
|
||||||
|
history = true
|
||||||
|
slide_number = true
|
||||||
|
transition = 'convex'
|
||||||
|
transition_speed = 'normal'
|
||||||
|
#highlight_theme = "zenburn"
|
||||||
|
#highlight_theme = "solarized-dark"
|
||||||
|
progress = true
|
||||||
|
#theme = "solarized"
|
||||||
|
|
||||||
|
[markup.goldmark.renderer]
|
||||||
|
unsafe = true
|
||||||
|
|
@ -0,0 +1,212 @@
|
||||||
|
+++
|
||||||
|
title = "Introduzione a pass"
|
||||||
|
outputs = ["Reveal"]
|
||||||
|
|
||||||
|
+++
|
||||||
|
|
||||||
|
# Il problema della condivisione dei segreti
|
||||||
|
|
||||||
|
* i segreti condivisi sono ancora segreti ?
|
||||||
|
|
||||||
|
* attenzione a con chi si condivide, la fiducia nelle pratiche altrui.
|
||||||
|
|
||||||
|
* quando e' necessario condividere un segreto ?
|
||||||
|
|
||||||
|
quando si lavora in gruppo, e tutto il gruppo deve avere accesso alle cose segrete del gruppo.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# problematiche nella condivisione dei segreti
|
||||||
|
|
||||||
|
i segreti devono essere custoditi e trasmessi crittati
|
||||||
|
|
||||||
|
se si vuole celarne ulteriormente l'esistenza anche il canale di comunicazione deve essere crittato
|
||||||
|
|
||||||
|
i segreti devono essere disponibili per il gruppo in modo immediato (no telefonate in urgenza)
|
||||||
|
|
||||||
|
i segreti (e gli eventuali loro aggiornamenti) devono essere resi disponibili in modo il piu'
|
||||||
|
possibile semplice ed automatizzato.
|
||||||
|
|
||||||
|
deve essere semplice revocare l'accesso ai segreti a una persona
|
||||||
|
|
||||||
|
deve essere semplice aggiungere una persona all'accesso dei segreti.
|
||||||
|
|
||||||
|
deve essere possibile tornare a una versione precedente in caso di problemi.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# il formato in cui salvare i segreti
|
||||||
|
|
||||||
|
ovviamente devono essere crittati in qualche modo:
|
||||||
|
|
||||||
|
crittografia simmetrica: 1 password uguale per tutti.
|
||||||
|
|
||||||
|
e' piu' semplice da implementare, ma c'e' il problema di comunicare la password a tutti
|
||||||
|
|
||||||
|
crittografia asimmetrica: ognuno ha le sue credenziali per decrittare
|
||||||
|
|
||||||
|
richiede che tutti usino un software che supporti questa funzione (es. gnupg)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# il modo in cui condividere i segreti
|
||||||
|
|
||||||
|
* mail - il piu' semplice ma non automatizzato
|
||||||
|
|
||||||
|
* cloud - puo' essere manuale o automatizzato ma non c'e' versioning
|
||||||
|
|
||||||
|
* git - puo' essere automatizzato e ha il versioning
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# PASS
|
||||||
|
|
||||||
|
https://www.passwordstore.org/
|
||||||
|
|
||||||
|
apt-get install pass
|
||||||
|
|
||||||
|
dipendenze:
|
||||||
|
|
||||||
|
* gnupg per la crittazione
|
||||||
|
|
||||||
|
* git per la distribuzione (non obbligatorio)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
* permette di salvare ogni singola password in un file crittato con gpg
|
||||||
|
|
||||||
|
* e' possibile specificare piu' di una chiave per cui crittare le password
|
||||||
|
|
||||||
|
* le password possono essere divise per progetto, ogni progetto con i suoi membri.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Inizializzazione dello store
|
||||||
|
|
||||||
|
pass init KEY-ID
|
||||||
|
|
||||||
|
questo crea la cartella $HOME/.password-store/ contenente il file .gpg-id
|
||||||
|
che contiene il KEY-ID (che puo' essere sia il key id della chiave che un indirizzo email)
|
||||||
|
|
||||||
|
in genere meglio usare il key-id per essere certi di usare proprio la chiave che vogliamo,
|
||||||
|
e non semplicemente la chiave associata a un indirizzo email (che chiunque potrebbe creare).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Aggiunta di una password
|
||||||
|
|
||||||
|
pass generate unit/wiki 32
|
||||||
|
|
||||||
|
genera (automaticamente) una password di 32 caratteri casuali e la salva crittata per la chiave
|
||||||
|
definita in $HOME/.password-store/.key-id nel file $HOME/.password-store/unit/wiki.gpg
|
||||||
|
|
||||||
|
pass insert unit/ldap-root
|
||||||
|
|
||||||
|
aggiunge una password che deve essere digitata (2 volte per conferma)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Visualizzazione di una password
|
||||||
|
|
||||||
|
pass ls
|
||||||
|
|
||||||
|
vi mostra tutto l'albero delle password salvate
|
||||||
|
|
||||||
|
pass show unit/wiki
|
||||||
|
|
||||||
|
vi mostra la password (a schermo) dopo averla decrittata (puo' essere necessario digitare la
|
||||||
|
password della chiave gpg se il gpg-agent non l'ha in memoria).
|
||||||
|
Per non mostrarla a video ma copiarla nella clipboard aggiungere l'opzione "-c"
|
||||||
|
|
||||||
|
(bash completion ???)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# modifica ed eliminazione di una password
|
||||||
|
|
||||||
|
pass edit unit/wiki
|
||||||
|
|
||||||
|
modificare una password esistente
|
||||||
|
|
||||||
|
pass rm unit/wiki
|
||||||
|
|
||||||
|
eliminare una password
|
||||||
|
|
||||||
|
pass mv unit/nextcloud unit/web_team/nextcloud
|
||||||
|
|
||||||
|
sposta una password in un'altra posizione
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# organizzare le password in cartelle/progetti
|
||||||
|
|
||||||
|
le password possono salvate come un albero di cartelle e files
|
||||||
|
|
||||||
|
pass generate personal/posta_ai
|
||||||
|
|
||||||
|
ora potete vedere le password divise per le varie cartelle/directory,
|
||||||
|
in pratica ogni directory puo' essere un progetto
|
||||||
|
ogni directory/progetto puo' avere il suo .gpg-id che contiene le chiavi per cui crittare le pwd in quel progetto
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# aggiungere chiavi di crittazione
|
||||||
|
|
||||||
|
se ad es. Terry entra nel progetto unit, bisogna aggiungere il suo key-id al file .gpg-id del progetto,
|
||||||
|
in ~/.password-store/unit/.gpg-id
|
||||||
|
|
||||||
|
NOTA IMPORTANTE: la sua chiave deve essere "trusted", quindi dovete importarla anche nel vostro keyring personale e firmarla
|
||||||
|
gpg --edit-key jane@acme.org
|
||||||
|
gpg> lsign
|
||||||
|
|
||||||
|
e poi il progetto va reinizializzato in modo che tutte le pwd al suo interno siano recrittate
|
||||||
|
usando i key-id aggiornati.
|
||||||
|
|
||||||
|
pass init -p unit/ $(cat ~/.password-store/unit/.gpg-id)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# la distribuzione
|
||||||
|
|
||||||
|
bisogna prendere tutta la cartella del progetto e passarla in qualche modo a chi di dovere
|
||||||
|
|
||||||
|
si puo' fare in molti modi, ma forse il piu' comodo e' git perche' consente il versioning.
|
||||||
|
|
||||||
|
inoltre e' possibile creare un repository git per i vari progetti, sincronizzando quindi i dati dei
|
||||||
|
diversi progetti in modo compartimentato.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# estensioni
|
||||||
|
|
||||||
|
* pass-tomb
|
||||||
|
* pass-otp
|
||||||
|
* pass-import
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# pass clients
|
||||||
|
|
||||||
|
* passmenu (dmenu script)
|
||||||
|
* qtpass (GUI per linux)
|
||||||
|
* passff (firefox extension)
|
||||||
|
* browserpass (chrome extension)
|
||||||
|
* password-store.el (emacs package)
|
||||||
|
* pass-git-helper (git credentials helper)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# ansible e pass
|
||||||
|
|
||||||
|
esiste un modulo ansible per usare pass che potrebbe consentire di non usare il vault ma direttamente
|
||||||
|
le pwd salvate in pass ????
|
||||||
|
|
||||||
|
https://docs.ansible.com/ansible/latest/plugins/lookup/passwordstore.html
|
||||||
|
|
||||||
|
|
||||||
|
# accortezze
|
||||||
|
|
||||||
|
* se qualcuno vede la cartella delle password, dai nomi dei file puo' capire a cosa serve la password
|
||||||
|
che c'e' in quel file. Quindi magari il repository pur contenendo password crittate e' meglio che non sia pubblico.
|
||||||
|
|
||||||
|
* non si deve usare su server remoti (perche' non e' una buona idea usare GPG su macchine remote).
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
version: '3'
|
||||||
|
|
||||||
|
services:
|
||||||
|
hugo:
|
||||||
|
image: jojomi/hugo:0.54.0
|
||||||
|
container_name: hugo
|
||||||
|
volumes:
|
||||||
|
- ./:/src
|
||||||
|
- /tmp/hugo-output/:/output
|
||||||
|
environment:
|
||||||
|
- HUGO_WATCH='true'
|
||||||
|
#- HUGO_REFRESH_TIME=3600
|
||||||
|
- HUGO_THEME=reveal-hugo
|
||||||
|
#- HUGO_BASEURL=mydomain.com
|
||||||
|
restart: unless-stopped
|
||||||
|
ports:
|
||||||
|
- 1313:1313
|
||||||
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
node_modules
|
||||||
|
public
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
# Contributor Covenant Code of Conduct
|
||||||
|
|
||||||
|
## Our Pledge
|
||||||
|
|
||||||
|
In the interest of fostering an open and welcoming environment, we as
|
||||||
|
contributors and maintainers pledge to making participation in our project and
|
||||||
|
our community a harassment-free experience for everyone, regardless of age, body
|
||||||
|
size, disability, ethnicity, sex characteristics, gender identity and expression,
|
||||||
|
level of experience, education, socio-economic status, nationality, personal
|
||||||
|
appearance, race, religion, or sexual identity and orientation.
|
||||||
|
|
||||||
|
## Our Standards
|
||||||
|
|
||||||
|
Examples of behavior that contributes to creating a positive environment
|
||||||
|
include:
|
||||||
|
|
||||||
|
* Using welcoming and inclusive language
|
||||||
|
* Being respectful of differing viewpoints and experiences
|
||||||
|
* Gracefully accepting constructive criticism
|
||||||
|
* Focusing on what is best for the community
|
||||||
|
* Showing empathy towards other community members
|
||||||
|
|
||||||
|
Examples of unacceptable behavior by participants include:
|
||||||
|
|
||||||
|
* The use of sexualized language or imagery and unwelcome sexual attention or
|
||||||
|
advances
|
||||||
|
* Trolling, insulting/derogatory comments, and personal or political attacks
|
||||||
|
* Public or private harassment
|
||||||
|
* Publishing others' private information, such as a physical or electronic
|
||||||
|
address, without explicit permission
|
||||||
|
* Other conduct which could reasonably be considered inappropriate in a
|
||||||
|
professional setting
|
||||||
|
|
||||||
|
## Our Responsibilities
|
||||||
|
|
||||||
|
Project maintainers are responsible for clarifying the standards of acceptable
|
||||||
|
behavior and are expected to take appropriate and fair corrective action in
|
||||||
|
response to any instances of unacceptable behavior.
|
||||||
|
|
||||||
|
Project maintainers have the right and responsibility to remove, edit, or
|
||||||
|
reject comments, commits, code, wiki edits, issues, and other contributions
|
||||||
|
that are not aligned to this Code of Conduct, or to ban temporarily or
|
||||||
|
permanently any contributor for other behaviors that they deem inappropriate,
|
||||||
|
threatening, offensive, or harmful.
|
||||||
|
|
||||||
|
## Scope
|
||||||
|
|
||||||
|
This Code of Conduct applies both within project spaces and in public spaces
|
||||||
|
when an individual is representing the project or its community. Examples of
|
||||||
|
representing a project or community include using an official project e-mail
|
||||||
|
address, posting via an official social media account, or acting as an appointed
|
||||||
|
representative at an online or offline event. Representation of a project may be
|
||||||
|
further defined and clarified by project maintainers.
|
||||||
|
|
||||||
|
## Enforcement
|
||||||
|
|
||||||
|
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
||||||
|
reported by contacting the project team at jdzielak@gmail.com. All
|
||||||
|
complaints will be reviewed and investigated and will result in a response that
|
||||||
|
is deemed necessary and appropriate to the circumstances. The project team is
|
||||||
|
obligated to maintain confidentiality with regard to the reporter of an incident.
|
||||||
|
Further details of specific enforcement policies may be posted separately.
|
||||||
|
|
||||||
|
Project maintainers who do not follow or enforce the Code of Conduct in good
|
||||||
|
faith may face temporary or permanent repercussions as determined by other
|
||||||
|
members of the project's leadership.
|
||||||
|
|
||||||
|
## Attribution
|
||||||
|
|
||||||
|
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
|
||||||
|
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
|
||||||
|
|
||||||
|
[homepage]: https://www.contributor-covenant.org
|
||||||
|
|
||||||
|
For answers to common questions about this code of conduct, see
|
||||||
|
https://www.contributor-covenant.org/faq
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
# Contributing to reveal-hugo
|
||||||
|
|
||||||
|
Contributions of all shapes and sizes are welcoming, including code, documentation, and examples. If you've built something with reveal-hugo, feel free to add it to the README.
|
||||||
|
|
||||||
|
To run the example site, clone this repository and run:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
hugo server -s exampleSite
|
||||||
|
```
|
||||||
|
|
||||||
|
or simply...
|
||||||
|
|
||||||
|
```shell
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
You can also build the site without watching it for changes by running:
|
||||||
|
|
||||||
|
```shell
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
GitHub issues and PRs are the preferred way to receive contributions. Please name your branch something recognizeable.
|
||||||
|
|
||||||
|
Before opening a PR, make sure that the reveal-hugo exampleSite builds. The demo presentations in exampleSite use nearly all of the available reveal-hugo functionality, so they're a good indicator of something that might have been broken. Still, there are no fully automated tests, so please make sure to manually test areas that could be impacted by your change.
|
||||||
|
|
||||||
|
If you need help contributing, don't hesitate to open an issue and ask. This is a welcoming and beginner-friendly project!
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2018 Josh Dzielak
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,39 @@
|
||||||
|
/**
|
||||||
|
* Beige theme for reveal.js.
|
||||||
|
*
|
||||||
|
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Default mixins and settings -----------------
|
||||||
|
@import "../template/mixins";
|
||||||
|
@import "../template/settings";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Include theme-specific fonts
|
||||||
|
@import url(../../lib/font/league-gothic/league-gothic.css);
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||||
|
|
||||||
|
|
||||||
|
// Override theme settings (see ../template/settings.scss)
|
||||||
|
$mainColor: #333;
|
||||||
|
$headingColor: #333;
|
||||||
|
$headingTextShadow: none;
|
||||||
|
$backgroundColor: #f7f3de;
|
||||||
|
$linkColor: #8b743d;
|
||||||
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
|
$selectionBackgroundColor: rgba(79, 64, 28, 0.99);
|
||||||
|
$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
|
||||||
|
|
||||||
|
// Background generator
|
||||||
|
@mixin bodyBackground() {
|
||||||
|
@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Theme template ------------------------------
|
||||||
|
@import "../template/theme";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
/**
|
||||||
|
* Black theme for reveal.js. This is the opposite of the 'white' theme.
|
||||||
|
*
|
||||||
|
* By Hakim El Hattab, http://hakim.se
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Default mixins and settings -----------------
|
||||||
|
@import "../template/mixins";
|
||||||
|
@import "../template/settings";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
// Include theme-specific fonts
|
||||||
|
@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
|
||||||
|
|
||||||
|
|
||||||
|
// Override theme settings (see ../template/settings.scss)
|
||||||
|
$backgroundColor: #191919;
|
||||||
|
|
||||||
|
$mainColor: #fff;
|
||||||
|
$headingColor: #fff;
|
||||||
|
|
||||||
|
$mainFontSize: 42px;
|
||||||
|
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||||
|
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||||
|
$headingTextShadow: none;
|
||||||
|
$headingLetterSpacing: normal;
|
||||||
|
$headingTextTransform: uppercase;
|
||||||
|
$headingFontWeight: 600;
|
||||||
|
$linkColor: #42affa;
|
||||||
|
$linkColorHover: lighten( $linkColor, 15% );
|
||||||
|
$selectionBackgroundColor: lighten( $linkColor, 25% );
|
||||||
|
|
||||||
|
$heading1Size: 2.5em;
|
||||||
|
$heading2Size: 1.6em;
|
||||||
|
$heading3Size: 1.3em;
|
||||||
|
$heading4Size: 1.0em;
|
||||||
|
|
||||||
|
section.has-light-background {
|
||||||
|
&, h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Theme template ------------------------------
|
||||||
|
@import "../template/theme";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
/**
|
||||||
|
* Blood theme for reveal.js
|
||||||
|
* Author: Walther http://github.com/Walther
|
||||||
|
*
|
||||||
|
* Designed to be used with highlight.js theme
|
||||||
|
* "monokai_sublime.css" available from
|
||||||
|
* https://github.com/isagalaev/highlight.js/
|
||||||
|
*
|
||||||
|
* For other themes, change $codeBackground accordingly.
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Default mixins and settings -----------------
|
||||||
|
@import "../template/mixins";
|
||||||
|
@import "../template/settings";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
||||||
|
// Include theme-specific fonts
|
||||||
|
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
|
||||||
|
|
||||||
|
// Colors used in the theme
|
||||||
|
$blood: #a23;
|
||||||
|
$coal: #222;
|
||||||
|
$codeBackground: #23241f;
|
||||||
|
|
||||||
|
$backgroundColor: $coal;
|
||||||
|
|
||||||
|
// Main text
|
||||||
|
$mainFont: Ubuntu, 'sans-serif';
|
||||||
|
$mainColor: #eee;
|
||||||
|
|
||||||
|
// Headings
|
||||||
|
$headingFont: Ubuntu, 'sans-serif';
|
||||||
|
$headingTextShadow: 2px 2px 2px $coal;
|
||||||
|
|
||||||
|
// h1 shadow, borrowed humbly from
|
||||||
|
// (c) Default theme by Hakim El Hattab
|
||||||
|
$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
|
||||||
|
|
||||||
|
// Links
|
||||||
|
$linkColor: $blood;
|
||||||
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
|
|
||||||
|
// Text selection
|
||||||
|
$selectionBackgroundColor: $blood;
|
||||||
|
$selectionColor: #fff;
|
||||||
|
|
||||||
|
|
||||||
|
// Theme template ------------------------------
|
||||||
|
@import "../template/theme";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
||||||
|
// some overrides after theme template import
|
||||||
|
|
||||||
|
.reveal p {
|
||||||
|
font-weight: 300;
|
||||||
|
text-shadow: 1px 1px $coal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal h1,
|
||||||
|
.reveal h2,
|
||||||
|
.reveal h3,
|
||||||
|
.reveal h4,
|
||||||
|
.reveal h5,
|
||||||
|
.reveal h6 {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal p code {
|
||||||
|
background-color: $codeBackground;
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 7px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal small code {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
/**
|
||||||
|
* League theme for reveal.js.
|
||||||
|
*
|
||||||
|
* This was the default theme pre-3.0.0.
|
||||||
|
*
|
||||||
|
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Default mixins and settings -----------------
|
||||||
|
@import "../template/mixins";
|
||||||
|
@import "../template/settings";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Include theme-specific fonts
|
||||||
|
@import url(../../lib/font/league-gothic/league-gothic.css);
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||||
|
|
||||||
|
// Override theme settings (see ../template/settings.scss)
|
||||||
|
$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2);
|
||||||
|
$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
|
||||||
|
|
||||||
|
// Background generator
|
||||||
|
@mixin bodyBackground() {
|
||||||
|
@include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) );
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Theme template ------------------------------
|
||||||
|
@import "../template/theme";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
/**
|
||||||
|
* Solarized Dark theme for reveal.js.
|
||||||
|
* Author: Achim Staebler
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Default mixins and settings -----------------
|
||||||
|
@import "../template/mixins";
|
||||||
|
@import "../template/settings";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Include theme-specific fonts
|
||||||
|
@import url(../../lib/font/league-gothic/league-gothic.css);
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Solarized colors by Ethan Schoonover
|
||||||
|
*/
|
||||||
|
html * {
|
||||||
|
color-profile: sRGB;
|
||||||
|
rendering-intent: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Solarized colors
|
||||||
|
$base03: #002b36;
|
||||||
|
$base02: #073642;
|
||||||
|
$base01: #586e75;
|
||||||
|
$base00: #657b83;
|
||||||
|
$base0: #839496;
|
||||||
|
$base1: #93a1a1;
|
||||||
|
$base2: #eee8d5;
|
||||||
|
$base3: #fdf6e3;
|
||||||
|
$yellow: #b58900;
|
||||||
|
$orange: #cb4b16;
|
||||||
|
$red: #dc322f;
|
||||||
|
$magenta: #d33682;
|
||||||
|
$violet: #6c71c4;
|
||||||
|
$blue: #268bd2;
|
||||||
|
$cyan: #2aa198;
|
||||||
|
$green: #859900;
|
||||||
|
|
||||||
|
// Override theme settings (see ../template/settings.scss)
|
||||||
|
$mainColor: $base1;
|
||||||
|
$headingColor: $base2;
|
||||||
|
$headingTextShadow: none;
|
||||||
|
$backgroundColor: $base03;
|
||||||
|
$linkColor: $blue;
|
||||||
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
|
$selectionBackgroundColor: $magenta;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Theme template ------------------------------
|
||||||
|
@import "../template/theme";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
@ -0,0 +1,34 @@
|
||||||
|
/**
|
||||||
|
* Black theme for reveal.js.
|
||||||
|
*
|
||||||
|
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Default mixins and settings -----------------
|
||||||
|
@import "../template/mixins";
|
||||||
|
@import "../template/settings";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
// Include theme-specific fonts
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
|
||||||
|
|
||||||
|
|
||||||
|
// Override theme settings (see ../template/settings.scss)
|
||||||
|
$backgroundColor: #111;
|
||||||
|
|
||||||
|
$mainFont: 'Open Sans', sans-serif;
|
||||||
|
$linkColor: #e7ad52;
|
||||||
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
|
$headingFont: 'Montserrat', Impact, sans-serif;
|
||||||
|
$headingTextShadow: none;
|
||||||
|
$headingLetterSpacing: -0.03em;
|
||||||
|
$headingTextTransform: none;
|
||||||
|
$selectionBackgroundColor: #e7ad52;
|
||||||
|
|
||||||
|
|
||||||
|
// Theme template ------------------------------
|
||||||
|
@import "../template/theme";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
/**
|
||||||
|
* A simple theme for reveal.js presentations, similar
|
||||||
|
* to the default theme. The accent color is brown.
|
||||||
|
*
|
||||||
|
* This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Default mixins and settings -----------------
|
||||||
|
@import "../template/mixins";
|
||||||
|
@import "../template/settings";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Override theme settings (see ../template/settings.scss)
|
||||||
|
$mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
|
||||||
|
$mainColor: #000;
|
||||||
|
$headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
|
||||||
|
$headingColor: #383D3D;
|
||||||
|
$headingTextShadow: none;
|
||||||
|
$headingTextTransform: none;
|
||||||
|
$backgroundColor: #F0F1EB;
|
||||||
|
$linkColor: #51483D;
|
||||||
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
|
$selectionBackgroundColor: #26351C;
|
||||||
|
|
||||||
|
.reveal a {
|
||||||
|
line-height: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Theme template ------------------------------
|
||||||
|
@import "../template/theme";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
/**
|
||||||
|
* A simple theme for reveal.js presentations, similar
|
||||||
|
* to the default theme. The accent color is darkblue.
|
||||||
|
*
|
||||||
|
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
|
||||||
|
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Default mixins and settings -----------------
|
||||||
|
@import "../template/mixins";
|
||||||
|
@import "../template/settings";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Include theme-specific fonts
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||||
|
|
||||||
|
|
||||||
|
// Override theme settings (see ../template/settings.scss)
|
||||||
|
$mainFont: 'Lato', sans-serif;
|
||||||
|
$mainColor: #000;
|
||||||
|
$headingFont: 'News Cycle', Impact, sans-serif;
|
||||||
|
$headingColor: #000;
|
||||||
|
$headingTextShadow: none;
|
||||||
|
$headingTextTransform: none;
|
||||||
|
$backgroundColor: #fff;
|
||||||
|
$linkColor: #00008B;
|
||||||
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
|
$selectionBackgroundColor: rgba(0, 0, 0, 0.99);
|
||||||
|
|
||||||
|
section.has-dark-background {
|
||||||
|
&, h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Theme template ------------------------------
|
||||||
|
@import "../template/theme";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
/**
|
||||||
|
* Sky theme for reveal.js.
|
||||||
|
*
|
||||||
|
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Default mixins and settings -----------------
|
||||||
|
@import "../template/mixins";
|
||||||
|
@import "../template/settings";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Include theme-specific fonts
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic);
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
|
||||||
|
|
||||||
|
|
||||||
|
// Override theme settings (see ../template/settings.scss)
|
||||||
|
$mainFont: 'Open Sans', sans-serif;
|
||||||
|
$mainColor: #333;
|
||||||
|
$headingFont: 'Quicksand', sans-serif;
|
||||||
|
$headingColor: #333;
|
||||||
|
$headingLetterSpacing: -0.08em;
|
||||||
|
$headingTextShadow: none;
|
||||||
|
$backgroundColor: #f7fbfc;
|
||||||
|
$linkColor: #3b759e;
|
||||||
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
|
$selectionBackgroundColor: #134674;
|
||||||
|
|
||||||
|
// Fix links so they are not cut off
|
||||||
|
.reveal a {
|
||||||
|
line-height: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Background generator
|
||||||
|
@mixin bodyBackground() {
|
||||||
|
@include radial-gradient( #add9e4, #f7fbfc );
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Theme template ------------------------------
|
||||||
|
@import "../template/theme";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
/**
|
||||||
|
* Solarized Light theme for reveal.js.
|
||||||
|
* Author: Achim Staebler
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Default mixins and settings -----------------
|
||||||
|
@import "../template/mixins";
|
||||||
|
@import "../template/settings";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Include theme-specific fonts
|
||||||
|
@import url(../../lib/font/league-gothic/league-gothic.css);
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Solarized colors by Ethan Schoonover
|
||||||
|
*/
|
||||||
|
html * {
|
||||||
|
color-profile: sRGB;
|
||||||
|
rendering-intent: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Solarized colors
|
||||||
|
$base03: #002b36;
|
||||||
|
$base02: #073642;
|
||||||
|
$base01: #586e75;
|
||||||
|
$base00: #657b83;
|
||||||
|
$base0: #839496;
|
||||||
|
$base1: #93a1a1;
|
||||||
|
$base2: #eee8d5;
|
||||||
|
$base3: #fdf6e3;
|
||||||
|
$yellow: #b58900;
|
||||||
|
$orange: #cb4b16;
|
||||||
|
$red: #dc322f;
|
||||||
|
$magenta: #d33682;
|
||||||
|
$violet: #6c71c4;
|
||||||
|
$blue: #268bd2;
|
||||||
|
$cyan: #2aa198;
|
||||||
|
$green: #859900;
|
||||||
|
|
||||||
|
// Override theme settings (see ../template/settings.scss)
|
||||||
|
$mainColor: $base00;
|
||||||
|
$headingColor: $base01;
|
||||||
|
$headingTextShadow: none;
|
||||||
|
$backgroundColor: $base3;
|
||||||
|
$linkColor: $blue;
|
||||||
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
|
$selectionBackgroundColor: $magenta;
|
||||||
|
|
||||||
|
// Background generator
|
||||||
|
// @mixin bodyBackground() {
|
||||||
|
// @include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) );
|
||||||
|
// }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Theme template ------------------------------
|
||||||
|
@import "../template/theme";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
/**
|
||||||
|
* White theme for reveal.js. This is the opposite of the 'black' theme.
|
||||||
|
*
|
||||||
|
* By Hakim El Hattab, http://hakim.se
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
// Default mixins and settings -----------------
|
||||||
|
@import "../template/mixins";
|
||||||
|
@import "../template/settings";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
// Include theme-specific fonts
|
||||||
|
@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
|
||||||
|
|
||||||
|
|
||||||
|
// Override theme settings (see ../template/settings.scss)
|
||||||
|
$backgroundColor: #fff;
|
||||||
|
|
||||||
|
$mainColor: #222;
|
||||||
|
$headingColor: #222;
|
||||||
|
|
||||||
|
$mainFontSize: 42px;
|
||||||
|
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||||
|
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||||
|
$headingTextShadow: none;
|
||||||
|
$headingLetterSpacing: normal;
|
||||||
|
$headingTextTransform: uppercase;
|
||||||
|
$headingFontWeight: 600;
|
||||||
|
$linkColor: #2a76dd;
|
||||||
|
$linkColorHover: lighten( $linkColor, 15% );
|
||||||
|
$selectionBackgroundColor: lighten( $linkColor, 25% );
|
||||||
|
|
||||||
|
$heading1Size: 2.5em;
|
||||||
|
$heading2Size: 1.6em;
|
||||||
|
$heading3Size: 1.3em;
|
||||||
|
$heading4Size: 1.0em;
|
||||||
|
|
||||||
|
section.has-dark-background {
|
||||||
|
&, h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Theme template ------------------------------
|
||||||
|
@import "../template/theme";
|
||||||
|
// ---------------------------------------------
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
@mixin vertical-gradient( $top, $bottom ) {
|
||||||
|
background: $top;
|
||||||
|
background: -moz-linear-gradient( top, $top 0%, $bottom 100% );
|
||||||
|
background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) );
|
||||||
|
background: -webkit-linear-gradient( top, $top 0%, $bottom 100% );
|
||||||
|
background: -o-linear-gradient( top, $top 0%, $bottom 100% );
|
||||||
|
background: -ms-linear-gradient( top, $top 0%, $bottom 100% );
|
||||||
|
background: linear-gradient( top, $top 0%, $bottom 100% );
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin horizontal-gradient( $top, $bottom ) {
|
||||||
|
background: $top;
|
||||||
|
background: -moz-linear-gradient( left, $top 0%, $bottom 100% );
|
||||||
|
background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) );
|
||||||
|
background: -webkit-linear-gradient( left, $top 0%, $bottom 100% );
|
||||||
|
background: -o-linear-gradient( left, $top 0%, $bottom 100% );
|
||||||
|
background: -ms-linear-gradient( left, $top 0%, $bottom 100% );
|
||||||
|
background: linear-gradient( left, $top 0%, $bottom 100% );
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin radial-gradient( $outer, $inner, $type: circle ) {
|
||||||
|
background: $outer;
|
||||||
|
background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||||
|
background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) );
|
||||||
|
background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||||
|
background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||||
|
background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||||
|
background: radial-gradient( center, $type cover, $inner 0%, $outer 100% );
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
// Base settings for all themes that can optionally be
|
||||||
|
// overridden by the super-theme
|
||||||
|
|
||||||
|
// Background of the presentation
|
||||||
|
$backgroundColor: #2b2b2b;
|
||||||
|
|
||||||
|
// Primary/body text
|
||||||
|
$mainFont: 'Lato', sans-serif;
|
||||||
|
$mainFontSize: 40px;
|
||||||
|
$mainColor: #eee;
|
||||||
|
|
||||||
|
// Vertical spacing between blocks of text
|
||||||
|
$blockMargin: 20px;
|
||||||
|
|
||||||
|
// Headings
|
||||||
|
$headingMargin: 0 0 $blockMargin 0;
|
||||||
|
$headingFont: 'League Gothic', Impact, sans-serif;
|
||||||
|
$headingColor: #eee;
|
||||||
|
$headingLineHeight: 1.2;
|
||||||
|
$headingLetterSpacing: normal;
|
||||||
|
$headingTextTransform: uppercase;
|
||||||
|
$headingTextShadow: none;
|
||||||
|
$headingFontWeight: normal;
|
||||||
|
$heading1TextShadow: $headingTextShadow;
|
||||||
|
|
||||||
|
$heading1Size: 3.77em;
|
||||||
|
$heading2Size: 2.11em;
|
||||||
|
$heading3Size: 1.55em;
|
||||||
|
$heading4Size: 1.00em;
|
||||||
|
|
||||||
|
$codeFont: monospace;
|
||||||
|
|
||||||
|
// Links and actions
|
||||||
|
$linkColor: #13DAEC;
|
||||||
|
$linkColorHover: lighten( $linkColor, 20% );
|
||||||
|
|
||||||
|
// Text selection
|
||||||
|
$selectionBackgroundColor: #FF5E99;
|
||||||
|
$selectionColor: #fff;
|
||||||
|
|
||||||
|
// Generates the presentation background, can be overridden
|
||||||
|
// to return a background image or gradient
|
||||||
|
@mixin bodyBackground() {
|
||||||
|
background: $backgroundColor;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,325 @@
|
||||||
|
// Base theme template for reveal.js
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* GLOBAL STYLES
|
||||||
|
*********************************************/
|
||||||
|
|
||||||
|
body {
|
||||||
|
@include bodyBackground();
|
||||||
|
background-color: $backgroundColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal {
|
||||||
|
font-family: $mainFont;
|
||||||
|
font-size: $mainFontSize;
|
||||||
|
font-weight: normal;
|
||||||
|
color: $mainColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
color: $selectionColor;
|
||||||
|
background: $selectionBackgroundColor;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
color: $selectionColor;
|
||||||
|
background: $selectionBackgroundColor;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: $headingMargin;
|
||||||
|
color: $headingColor;
|
||||||
|
|
||||||
|
font-family: $headingFont;
|
||||||
|
font-weight: $headingFontWeight;
|
||||||
|
line-height: $headingLineHeight;
|
||||||
|
letter-spacing: $headingLetterSpacing;
|
||||||
|
|
||||||
|
text-transform: $headingTextTransform;
|
||||||
|
text-shadow: $headingTextShadow;
|
||||||
|
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal h1 {font-size: $heading1Size; }
|
||||||
|
.reveal h2 {font-size: $heading2Size; }
|
||||||
|
.reveal h3 {font-size: $heading3Size; }
|
||||||
|
.reveal h4 {font-size: $heading4Size; }
|
||||||
|
|
||||||
|
.reveal h1 {
|
||||||
|
text-shadow: $heading1TextShadow;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* OTHER
|
||||||
|
*********************************************/
|
||||||
|
|
||||||
|
.reveal p {
|
||||||
|
margin: $blockMargin 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 blockquote {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 70%;
|
||||||
|
margin: $blockMargin 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%;
|
||||||
|
margin: $blockMargin auto;
|
||||||
|
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.55em;
|
||||||
|
font-family: $codeFont;
|
||||||
|
line-height: 1.2em;
|
||||||
|
|
||||||
|
word-wrap: break-word;
|
||||||
|
|
||||||
|
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal code {
|
||||||
|
font-family: $codeFont;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 tbody tr:last-child th,
|
||||||
|
.reveal table tbody tr:last-child td {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal sup {
|
||||||
|
vertical-align: super;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
.reveal sub {
|
||||||
|
vertical-align: sub;
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: $linkColor;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
-webkit-transition: color .15s ease;
|
||||||
|
-moz-transition: color .15s ease;
|
||||||
|
transition: color .15s ease;
|
||||||
|
}
|
||||||
|
.reveal a:hover {
|
||||||
|
color: $linkColorHover;
|
||||||
|
|
||||||
|
text-shadow: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal .roll span:after {
|
||||||
|
color: #fff;
|
||||||
|
background: darken( $linkColor, 15% );
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* IMAGES
|
||||||
|
*********************************************/
|
||||||
|
|
||||||
|
.reveal section img {
|
||||||
|
margin: 15px 0px;
|
||||||
|
background: rgba(255,255,255,0.12);
|
||||||
|
border: 4px solid $mainColor;
|
||||||
|
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal section img.plain {
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal a img {
|
||||||
|
-webkit-transition: all .15s linear;
|
||||||
|
-moz-transition: all .15s linear;
|
||||||
|
transition: all .15s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal a:hover img {
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
border-color: $linkColor;
|
||||||
|
|
||||||
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* NAVIGATION CONTROLS
|
||||||
|
*********************************************/
|
||||||
|
|
||||||
|
.reveal .controls {
|
||||||
|
color: $linkColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* PROGRESS BAR
|
||||||
|
*********************************************/
|
||||||
|
|
||||||
|
.reveal .progress {
|
||||||
|
background: rgba(0,0,0,0.2);
|
||||||
|
color: $linkColor;
|
||||||
|
}
|
||||||
|
.reveal .progress span {
|
||||||
|
-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||||
|
-moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||||
|
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* PRINT BACKGROUND
|
||||||
|
*********************************************/
|
||||||
|
@media print {
|
||||||
|
.backgrounds {
|
||||||
|
background-color: $backgroundColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
---
|
||||||
|
new_page_extension: md
|
||||||
|
auto_deploy: false
|
||||||
|
admin_path:
|
||||||
|
webhook_url:
|
||||||
|
sections:
|
||||||
|
upload_dir: "./exampleSite/static/uploads"
|
||||||
|
public_path: "/uploads"
|
||||||
|
front_matter_path: ''
|
||||||
|
use_front_matter_path: false
|
||||||
|
file_template: ":filename:"
|
||||||
|
version: 0.38.1
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
@import "reveal-js/css/theme/template/mixins";
|
||||||
|
@import "reveal-js/css/theme/template/settings";
|
||||||
|
|
||||||
|
$backgroundColor: rgb(3, 129, 45);
|
||||||
|
|
||||||
|
$mainColor: #fff;
|
||||||
|
$headingColor: #fff;
|
||||||
|
|
||||||
|
$mainFontSize: 38px;
|
||||||
|
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||||
|
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
|
||||||
|
$headingTextShadow: none;
|
||||||
|
$headingLetterSpacing: normal;
|
||||||
|
$headingTextTransform: uppercase;
|
||||||
|
$headingFontWeight: 600;
|
||||||
|
$linkColor: #42affa;
|
||||||
|
$linkColorHover: lighten( $linkColor, 15% );
|
||||||
|
$selectionBackgroundColor: lighten( $linkColor, 25% );
|
||||||
|
|
||||||
|
$heading1Size: 2.5em;
|
||||||
|
$heading2Size: 1.6em;
|
||||||
|
$heading3Size: 1.3em;
|
||||||
|
$heading4Size: 1.0em;
|
||||||
|
|
||||||
|
@import "reveal-js/css/theme/template/theme";
|
||||||
|
|
||||||
|
section.has-light-background {
|
||||||
|
&, h1, h2, h3, h4, h5, h6 {
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal pre {
|
||||||
|
margin: 50px auto;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
baseURL = "https://example.com/"
|
||||||
|
languageCode = "en-us"
|
||||||
|
title = "A Hugo theme for creating Reveal.js presentations"
|
||||||
|
disableKinds = ["sitemap", "RSS"]
|
||||||
|
theme = "."
|
||||||
|
themesDir = "../"
|
||||||
|
|
||||||
|
# uncomment for browsing at file:///
|
||||||
|
# relativeURLs = true
|
||||||
|
# uglyURLs = true
|
||||||
|
|
||||||
|
[author]
|
||||||
|
name = "Josh Dzielak"
|
||||||
|
|
||||||
|
# currently only the unsafe mode for goldmark is supported
|
||||||
|
[markup.goldmark.renderer]
|
||||||
|
unsafe = true
|
||||||
|
|
||||||
|
# choose between Hugo compile-time or Highlight.js
|
||||||
|
# syntax highlighting for code inside of code fences
|
||||||
|
[markup.highlight]
|
||||||
|
codeFences = false # use highlight.js
|
||||||
|
# codeFences = true # use hugo highlighting at compile time
|
||||||
|
style = "tango" # set a style for hugo highlighting
|
||||||
|
|
||||||
|
[outputFormats.Reveal]
|
||||||
|
baseName = "index"
|
||||||
|
mediaType = "text/html"
|
||||||
|
isHTML = true
|
||||||
|
|
||||||
|
[params.reveal_hugo]
|
||||||
|
history = true
|
||||||
|
|
||||||
|
# used in content/template-example
|
||||||
|
[params.reveal_hugo.templates.grey]
|
||||||
|
background = "#424242"
|
||||||
|
transition = "convex"
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
+++
|
||||||
|
title = "reveal-hugo"
|
||||||
|
description = "A Hugo theme for creating Reveal.js presentations"
|
||||||
|
outputs = ["Reveal"]
|
||||||
|
[reveal_hugo]
|
||||||
|
custom_theme = "reveal-hugo/themes/robot-lung.css"
|
||||||
|
margin = 0.2
|
||||||
|
highlight_theme = "color-brewer"
|
||||||
|
transition = "slide"
|
||||||
|
transition_speed = "fast"
|
||||||
|
[reveal_hugo.templates.hotpink]
|
||||||
|
class = "hotpink"
|
||||||
|
background = "#FF4081"
|
||||||
|
+++
|
||||||
|
|
||||||
|
# 📽️
|
||||||
|
|
||||||
|
# reveal-hugo
|
||||||
|
|
||||||
|
A Hugo theme for creating Reveal.js presentations.
|
||||||
|
|
||||||
|
~ made by [@dzello](https://dzello.com/) ~
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
+++
|
||||||
|
+++
|
||||||
|
|
||||||
|
If more markdown files are present in the bundle, their contents will be added to the presentation.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Specify `weight` in the frontmatter if it's necessary to order them.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
If you don't want them to be included, specify `layout = "list"` in the front matter instead of `layout = "bundle"`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## THE END
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
+++
|
||||||
|
title = "Bundle example presentation"
|
||||||
|
outputs = ["Reveal"]
|
||||||
|
layout = "bundle"
|
||||||
|
[reveal_hugo]
|
||||||
|
theme = "night"
|
||||||
|
margin = 0.2
|
||||||
|
+++
|
||||||
|
|
||||||
|
# Page Bundles
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
[Hugo page bundles](https://gohugo.io/content-management/page-bundles/) are a useful way to organize content.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
To create a reveal-hugo presentation from the `index.md` file of a leaf page bundle, you need to specify the layout manually.
|
||||||
|
|
||||||
|
```toml
|
||||||
|
layout = "bundle"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Why? By default, reveal-hugo doesn't create pages for single template types (foo.md), only for list template types (_index.md).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
This technique can also be used to output an HTML file for any section of a presentation, should you need to.
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
+++
|
||||||
|
title = "Custom theme example presentation"
|
||||||
|
outputs = ["Reveal"]
|
||||||
|
[reveal_hugo]
|
||||||
|
custom_theme = "custom-theme.scss"
|
||||||
|
custom_theme_compile = true
|
||||||
|
+++
|
||||||
|
|
||||||
|
## 🖌 ️
|
||||||
|
|
||||||
|
## Custom Themes
|
||||||
|
|
||||||
|
*with Hugo Pipes*
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
This presentation uses a custom Reveal.js theme written in SCSS that is compiled by Hugo, using [Hugo pipes](https://gohugo.io/hugo-pipes/).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Hugo pipes compiles the source code of the theme, located in `assets/custom-theme.scss`, into CSS.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 😄
|
||||||
|
|
||||||
|
No separate build process is required, which means you can iterate on your theme and your content at the same time.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
To set a custom theme and use Hugo to compile it:
|
||||||
|
|
||||||
|
```toml
|
||||||
|
[reveal_hugo]
|
||||||
|
custom_theme = "custom-theme.scss"
|
||||||
|
custom_theme_compile = true
|
||||||
|
```
|
||||||
|
|
||||||
|
`custom-theme.scss` must live in the `assets` folder.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
To pass compilation options, use the `custom_theme_options` param:
|
||||||
|
|
||||||
|
```toml
|
||||||
|
[reveal_hugo.custom_theme_options]
|
||||||
|
targetPath = "css/custom-theme.css"
|
||||||
|
enableSourceMap = true
|
||||||
|
```
|
||||||
|
|
||||||
|
See all the [available options](https://gohugo.io/hugo-pipes/scss-sass/#options).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Note: to use a custom theme that doesn't need compilation, put it in the `static` directory and do not set the `custom_theme_compile` parameter. It will be served to the browser directly.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Write a custom Reveal.js theme in four steps:
|
||||||
|
|
||||||
|
```text
|
||||||
|
1. Import `mixins` and `settings` from the templates directory
|
||||||
|
2. Override variables and functions for colors, fonts and sizes
|
||||||
|
3. Import `theme` from the templates directory
|
||||||
|
4. Add any additional selectors to override the built CSS
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
See the [Reveal.js theme docs](https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md) to learn what overrides are possible.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
See `assets/custom-theme.scss` or any file in `assets/reveal-js/css/theme/source` for an example.
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
+++
|
||||||
|
title = "Extend layout with configuration"
|
||||||
|
outputs = ["Reveal"]
|
||||||
|
[reveal_hugo]
|
||||||
|
theme = "night"
|
||||||
|
margin = 0.2
|
||||||
|
custom_css = "css/custom.css"
|
||||||
|
custom_js = "js/custom.js"
|
||||||
|
+++
|
||||||
|
|
||||||
|
### Extending an existing layout
|
||||||
|
|
||||||
|
If you are using an existing theme and you want to a specific CSS class or add a dynamic function using javascript. It is possible to extend existing layout.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Extending CSS
|
||||||
|
|
||||||
|
You can use `partials` or you can specify `custom_css` in your configuration :
|
||||||
|
|
||||||
|
```toml
|
||||||
|
[reveal_hugo]
|
||||||
|
custom_css = "css/custom.css"
|
||||||
|
```
|
||||||
|
<small>
|
||||||
|
The `custom.css` can be present in `static/css/custom.css`
|
||||||
|
</small>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Extending with javascript
|
||||||
|
|
||||||
|
Same as CSS you can extend your presentation with javascript using `partials` or with `custom_js` in your configuration:
|
||||||
|
|
||||||
|
```toml
|
||||||
|
[reveal_hugo]
|
||||||
|
custom_js = "js/custom.js"
|
||||||
|
```
|
||||||
|
|
||||||
|
<small>
|
||||||
|
The `custom.js` can be present in `static/js/custom.js`
|
||||||
|
</small>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
{{< slide class="custom" id="customjs" >}}
|
||||||
|
## Extend layout example
|
||||||
|
Here the slide has an additional css class `custom` using `slide` *shortcode*. This class is hosted in a custom CSS.
|
||||||
|
|
||||||
|
If you click on this text background-color will using a custom javascript file.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,160 @@
|
||||||
|
+++
|
||||||
|
title = "Reveal.js 3.9.0 highlighting example"
|
||||||
|
outputs = ["Reveal"]
|
||||||
|
|
||||||
|
[reveal_hugo]
|
||||||
|
theme = "white"
|
||||||
|
highlight_theme = "vs"
|
||||||
|
+++
|
||||||
|
|
||||||
|
## Multiline highlighting with Highlight.js
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
This presentation shows the use of the [new highlighting features](https://github.com/hakimel/reveal.js/blob/master/README.md#step-by-step-highlights) which were introduced with Reveal.js [v3.9.0](https://github.com/hakimel/reveal.js/releases/tag/3.9.0).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Prerequisite
|
||||||
|
|
||||||
|
Disable `codeFences` in to your `config.toml` to prevent Hugo's built-in highlighting for code inside of `---` fences.
|
||||||
|
|
||||||
|
{{< highlight toml "style=github" >}}
|
||||||
|
[markup.highlight]
|
||||||
|
codeFences = false
|
||||||
|
{{< /highlight >}}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Theme
|
||||||
|
|
||||||
|
Specify a theme for Highlight.js in `config.toml`
|
||||||
|
|
||||||
|
{{< highlight toml "style=github" >}}
|
||||||
|
[params.reveal_hugo]
|
||||||
|
highlight_theme = "github"
|
||||||
|
{{< /highlight >}}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
...or in the `_index.md` front matter
|
||||||
|
|
||||||
|
{{< highlight toml "style=github" >}}
|
||||||
|
[reveal_hugo]
|
||||||
|
highlight_theme = "github"
|
||||||
|
{{< /highlight >}}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
The line highlighting is configured by adding `{}` immediately after the language selection of the markdown code block.
|
||||||
|
|
||||||
|
{{< highlight md >}}
|
||||||
|
```foo{}
|
||||||
|
|
||||||
|
```
|
||||||
|
{{< /highlight >}}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Just line numbers
|
||||||
|
|
||||||
|
`{}`
|
||||||
|
|
||||||
|
{{< highlight md >}}
|
||||||
|
```go{}
|
||||||
|
package main
|
||||||
|
import "fmt"
|
||||||
|
func main() {
|
||||||
|
fmt.Println("Hello world!")
|
||||||
|
}
|
||||||
|
```
|
||||||
|
{{< /highlight >}}
|
||||||
|
|
||||||
|
```go{}
|
||||||
|
package main
|
||||||
|
import "fmt"
|
||||||
|
func main() {
|
||||||
|
fmt.Println("Hello world!")
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Highlight specific lines
|
||||||
|
|
||||||
|
`{<line numbers separated by comma>}`
|
||||||
|
|
||||||
|
{{< highlight md >}}
|
||||||
|
```go{1,3-5}
|
||||||
|
package main
|
||||||
|
import "fmt"
|
||||||
|
func main() {
|
||||||
|
fmt.Println("Hello world!")
|
||||||
|
}
|
||||||
|
```
|
||||||
|
{{< /highlight >}}
|
||||||
|
```go{1,3-5}
|
||||||
|
package main
|
||||||
|
import "fmt"
|
||||||
|
func main() {
|
||||||
|
fmt.Println("Hello world!")
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Multi step highlight
|
||||||
|
|
||||||
|
`{<line numbers separated by pipe>}`
|
||||||
|
|
||||||
|
{{< highlight md >}}
|
||||||
|
```go{1|2|3-5}
|
||||||
|
package main
|
||||||
|
import "fmt"
|
||||||
|
func main() {
|
||||||
|
fmt.Println("Hello world!")
|
||||||
|
}
|
||||||
|
```
|
||||||
|
{{< /highlight >}}
|
||||||
|
|
||||||
|
```go{1|2|3-5}
|
||||||
|
package main
|
||||||
|
import "fmt"
|
||||||
|
func main() {
|
||||||
|
fmt.Println("Hello world!")
|
||||||
|
}
|
||||||
|
```
|
||||||
|
---
|
||||||
|
|
||||||
|
## Hiding the line numbers
|
||||||
|
|
||||||
|
There is no Reveal.js parameter to use line highlighting *without* line numbers.
|
||||||
|
However it can be achieved by adding the some [custom CSS](https://github.com/dzello/reveal-hugo#adding-html-to-the-layout).
|
||||||
|
|
||||||
|
{{< highlight html "style=github" >}}
|
||||||
|
<style>
|
||||||
|
.hljs-ln-numbers {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
{{< /highlight >}}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
💡 Put the custom CSS in either of these partials:
|
||||||
|
|
||||||
|
```text
|
||||||
|
# for all presentations
|
||||||
|
layouts/partials/reveal-hugo/body.html
|
||||||
|
```
|
||||||
|
|
||||||
|
```text
|
||||||
|
# for one presentation
|
||||||
|
layouts/partials/{presentation-name}/reveal-hugo/body.html
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Thanks!
|
||||||
|
|
@ -0,0 +1,170 @@
|
||||||
|
+++
|
||||||
|
weight = 21
|
||||||
|
+++
|
||||||
|
|
||||||
|
# Configuration
|
||||||
|
|
||||||
|
Place configuration values in `config.toml` or a presentation's front matter (`_index.md`).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Reveal.js themes
|
||||||
|
|
||||||
|
Themes control the look and feel of your presentation. Set the `theme` param to any [valid Reveal.js theme](https://github.com/hakimel/reveal.js/#theming).
|
||||||
|
|
||||||
|
```toml
|
||||||
|
[params.reveal_hugo]
|
||||||
|
theme = "moon"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Use a custom theme
|
||||||
|
|
||||||
|
To use a custom Reveal.js theme, place the CSS file in the `static` directory and set the `custom_theme` param.
|
||||||
|
|
||||||
|
```toml
|
||||||
|
[params.reveal_hugo]
|
||||||
|
custom_theme = "reveal-hugo/themes/robot-lung.css"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Use a custom theme (advanced)
|
||||||
|
|
||||||
|
To use Hugo pipes to build a custom Reveal.js theme, place the source file (SCSS / PostCSS) in the `assets` directory and set the `custom_theme_compile` param.
|
||||||
|
|
||||||
|
```toml
|
||||||
|
[params.reveal_hugo]
|
||||||
|
custom_theme = "reveal-hugo/themes/custom-theme.scss"
|
||||||
|
custom_theme_compile = true
|
||||||
|
```
|
||||||
|
|
||||||
|
<small>
|
||||||
|
|
||||||
|
💡 See the [custom theme example presentation](/custom-theme-example/) for more details.
|
||||||
|
|
||||||
|
</small>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Bundled themes
|
||||||
|
|
||||||
|
reveal-hugo comes with 2 extra Reveal.js themes:
|
||||||
|
|
||||||
|
- [robot-lung](https://github.com/dzello/revealjs-themes#robot-lung) (this one)
|
||||||
|
- [sunblind](https://github.com/dzello/revealjs-themes#sunblind)
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<small>
|
||||||
|
|
||||||
|
They live in the `static/reveal-hugo/themes` folder and also [on Github](https://github.com/dzello/revealjs-themes).
|
||||||
|
|
||||||
|
</small>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Reveal.js params
|
||||||
|
|
||||||
|
Set **snakecase** versions of Reveal.js params, which will be camelized and passed to `Reveal.initialize`.
|
||||||
|
|
||||||
|
```toml
|
||||||
|
[params.reveal_hugo]
|
||||||
|
history = true
|
||||||
|
slide_number = true
|
||||||
|
transition = 'zoom'
|
||||||
|
transition_speed = 'fast'
|
||||||
|
```
|
||||||
|
|
||||||
|
[Full list of params](https://github.com/hakimel/reveal.js/#configuration)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## highlight.js themes
|
||||||
|
|
||||||
|
To change the syntax highlighting theme, set the `highlight_theme`
|
||||||
|
to a valid [highlight.js theme name](https://highlightjs.org/static/demo/).
|
||||||
|
|
||||||
|
```toml
|
||||||
|
[params.reveal_hugo]
|
||||||
|
highlight_theme = "zenburn"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Extending the layout
|
||||||
|
|
||||||
|
Use partials to add HTML to the page for one or all presentations at a time.
|
||||||
|
|
||||||
|
<small>
|
||||||
|
💡 This is the recommended way to add script and style tags to customize your presentations.
|
||||||
|
</small>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Here is where to put partials for different presentations and places in the DOM.
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
| Presentation | Before </head> | Before </body> |
|
||||||
|
|--------------|---------------------------------|---------------------------------|
|
||||||
|
| All | reveal-hugo/head.html | reveal-hugo/body.html |
|
||||||
|
| Root | home/reveal-hugo/head.html | home/reveal-hugo/body.html |
|
||||||
|
| Section | {section}/reveal-hugo/head.html | {section}/reveal-hugo/body.html |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<small>
|
||||||
|
|
||||||
|
💡 You can also create an `end.html` to put content before the end of the `.reveal` div tag.
|
||||||
|
|
||||||
|
</small>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Custom CSS Example
|
||||||
|
|
||||||
|
In `home/reveal-hugo/head.html`:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.reveal section h1 {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Custom JS Example
|
||||||
|
|
||||||
|
In `home/reveal-hugo/body.html`:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script type="text/javascript">
|
||||||
|
Reveal.addEventListener('slidechanged', function(event) {
|
||||||
|
console.log("🎞️ Slide is now " + event.indexh);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Extending the layout
|
||||||
|
#### (alternative)
|
||||||
|
|
||||||
|
You can declare a custom CSS or javascript in your configuration.
|
||||||
|
|
||||||
|
```toml
|
||||||
|
[reveal_hugo]
|
||||||
|
custom_css = "css/custom.css"
|
||||||
|
custom_js = "js/custom.js"
|
||||||
|
```
|
||||||
|
|
||||||
|
<small>
|
||||||
|
|
||||||
|
These files can be located in `static/css`, `static/js` folder
|
||||||
|
|
||||||
|
💡 See the [extending layout example](/extending-layout-example/#) for more details.
|
||||||
|
|
||||||
|
</small>
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
+++
|
||||||
|
weight = 10
|
||||||
|
+++
|
||||||
|
|
||||||
|
## What's included?
|
||||||
|
|
||||||
|
- All Reveal.js HTML, CSS and JS (v3.9.2)
|
||||||
|
- All out-of-the-box Reveal.js themes
|
||||||
|
- Two custom Reveal.js themes (including this one)
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
[see the code on github](https://github.com/dzello/reveal-hugo)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- Write slides in Markdown in one or more files
|
||||||
|
- Shortcodes for fragments, sections, slides & more
|
||||||
|
- All Reveal.js parameters can be customized
|
||||||
|
- Any Hugo section can be output as a presentation
|
||||||
|
- Supports offline development or using a CDN
|
||||||
|
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
+++
|
||||||
|
weight = 42
|
||||||
|
+++
|
||||||
|
|
||||||
|
# Resources
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Code and docs
|
||||||
|
|
||||||
|
- [reveal-hugo Github README](https://github.com/dzello/reveal-hugo)
|
||||||
|
- [Content for this presentation](https://github.com/dzello/reveal-hugo/tree/master/exampleSite)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## External resources
|
||||||
|
|
||||||
|
- [Reveal.js](https://revealjs.com/)
|
||||||
|
- [Hugo docs](https://gohugo.io/)
|
||||||
|
- [Hugo output format docs](https://gohugo.io/templates/output-formats/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Designed to...
|
||||||
|
|
||||||
|
- Deploy to [Netlify](https://netlify.com/)
|
||||||
|
- Edit with [Forestry](https://forestry.io/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 🙏
|
||||||
|
|
||||||
|
Contribute by opening issues and pull requests.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Thanks!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# ↩️
|
||||||
|
|
||||||
|
#### [Start over](#)
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
+++
|
||||||
|
weight = 30
|
||||||
|
+++
|
||||||
|
|
||||||
|
## Fragment
|
||||||
|
|
||||||
|
The `fragment` shortcode makes content appear incrementally.
|
||||||
|
|
||||||
|
```
|
||||||
|
{{%/* fragment */%}} One {{%/* /fragment */%}}
|
||||||
|
{{%/* fragment */%}} Two {{%/* /fragment */%}}
|
||||||
|
{{%/* fragment */%}} Three {{%/* /fragment */%}}
|
||||||
|
```
|
||||||
|
|
||||||
|
{{% fragment %}} One {{% /fragment %}}
|
||||||
|
{{% fragment %}} Two {{% /fragment %}}
|
||||||
|
{{% fragment %}} Three {{% /fragment %}}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Frag
|
||||||
|
|
||||||
|
The `frag` shortcode is more terse than `fragment`. It accepts a `c` attribute.
|
||||||
|
|
||||||
|
```
|
||||||
|
{{</* frag c="One" */>}}
|
||||||
|
{{</* frag c="Two" */>}}
|
||||||
|
{{</* frag c="Three" */>}}
|
||||||
|
```
|
||||||
|
|
||||||
|
{{< frag c="One" >}}
|
||||||
|
{{< frag c="Two" >}}
|
||||||
|
{{< frag c="Three" >}}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Both `fragment` and `frag` accept two additional parameters:
|
||||||
|
|
||||||
|
- `class`: sets the class of the wrapping `span` element
|
||||||
|
- `index`: controls the order in which sections will appear
|
||||||
|
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
+++
|
||||||
|
weight = 29
|
||||||
|
+++
|
||||||
|
|
||||||
|
# Shortcodes
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Hugo's shortcodes are similar to functions or templates that extend what you can do with Markdown.
|
||||||
|
|
||||||
|
[Shortcode documentation](https://gohugo.io/content-management/shortcodes/)
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
+++
|
||||||
|
weight = 36
|
||||||
|
+++
|
||||||
|
|
||||||
|
{{< markdown >}}
|
||||||
|
|
||||||
|
## Markdown
|
||||||
|
|
||||||
|
Reveal.js has its own [markdown processor](https://github.com/hakimel/reveal.js#markdown). To use that instead of Hugo, surround a slide with the markdown shortcode.
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
{{</* markdown */>}}
|
||||||
|
|
||||||
|
# Hello world!
|
||||||
|
|
||||||
|
{{</* /markdown */>}}
|
||||||
|
```
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<small>
|
||||||
|
💡 Make sure to use the `{{</* */>}}` shortcode syntax to avoid rendering by Hugo.
|
||||||
|
</small>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- .slide: data-background="#FF4081" -->
|
||||||
|
|
||||||
|
Reveal.js markdown uses HTML comments to change slide properties, like background color.
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
{{</* markdown */>}}
|
||||||
|
<!-- .slide: data-background="#FF4081" -->
|
||||||
|
# I'm a colorful slide
|
||||||
|
{{</* /markdown */>}}
|
||||||
|
```
|
||||||
|
|
||||||
|
{{< /markdown >}}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,49 @@
|
||||||
|
+++
|
||||||
|
weight = 38
|
||||||
|
+++
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
Add speaker notes (with markdown) to your presentation with the `note` shortcode. Type 's' to see this slide's speaker notes.
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
|
||||||
|
{{%/* note */%}}
|
||||||
|
- You found the **speaker notes**!
|
||||||
|
{{%/* /note */%}}
|
||||||
|
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
{{% note %}}
|
||||||
|
- You found the **speaker notes**!
|
||||||
|
{{% /note %}}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
{{< slide notes="You found the notes!" >}}
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
You can also add notes with the `slide` shortcode and `notes` attribute:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
|
||||||
|
{{%/* slide notes="You found the notes!" */%}}
|
||||||
|
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<section data-noprocess>
|
||||||
|
<h2>Write slides in HTML</h2>
|
||||||
|
<p>Use a <code>section</code> tag with a <code>data-noprocess</code> attribute to avoid any processing by reveal-hugo.</p>
|
||||||
|
<pre>
|
||||||
|
<section data-noprocess>
|
||||||
|
<h1>Hello world!</h1>
|
||||||
|
</section></pre>
|
||||||
|
<small>💡 This is useful if you can't get Markdown to output exactly what you want.</small>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
+++
|
||||||
|
weight = 33
|
||||||
|
+++
|
||||||
|
|
||||||
|
{{% section %}}
|
||||||
|
|
||||||
|
## Section
|
||||||
|
|
||||||
|
The `section` shortcode groups slides into a **vertical display**.
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<small>
|
||||||
|
use the down arrow or swipe down to continue
|
||||||
|
</small>
|
||||||
|
<br>
|
||||||
|
<a href="#" class="navigate-down">🔽</a>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Put the shortcode around the slides you want to group together.
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
{{%/* section */%}}
|
||||||
|
|
||||||
|
## Section slide 1
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Section slide 2
|
||||||
|
|
||||||
|
{{%/* /section */%}}
|
||||||
|
```
|
||||||
|
|
||||||
|
Keep going down.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## That's it!
|
||||||
|
|
||||||
|
Use the right arrow or swipe right to continue.
|
||||||
|
|
||||||
|
{{% /section %}}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,250 @@
|
||||||
|
+++
|
||||||
|
weight = 34
|
||||||
|
+++
|
||||||
|
|
||||||
|
## Slide
|
||||||
|
|
||||||
|
Use this shortcode when you need to customize slide attributes like id, class, background color and transition.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
{{< slide class="hello" >}}
|
||||||
|
|
||||||
|
## Slide
|
||||||
|
|
||||||
|
Add the shortcode above the slide's content, below the `---`.
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
|
||||||
|
{{</* slide class="hello" */>}}
|
||||||
|
|
||||||
|
## Hello, world!
|
||||||
|
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
{{< slide transition="zoom" transition-speed="fast" >}}
|
||||||
|
|
||||||
|
## Custom slide 1
|
||||||
|
|
||||||
|
<small>Did you notice? This slide has a fast zoom transition.</small>
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
|
||||||
|
{{</* slide transition="zoom" transition-speed="fast" */>}}
|
||||||
|
|
||||||
|
## Custom slide 1
|
||||||
|
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
{{< slide background-color="#FF4081" >}}
|
||||||
|
|
||||||
|
## Custom slide 2
|
||||||
|
|
||||||
|
<small>This slide has a different background color.</small>
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
|
||||||
|
{{</* slide background-color="#FF4081" */>}}
|
||||||
|
|
||||||
|
## Custom slide 2
|
||||||
|
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
{{< slide background-image="/images/alex-litvin-790876-unsplash.jpg" background-color="#000000" >}}
|
||||||
|
|
||||||
|
## Custom slide 3
|
||||||
|
|
||||||
|
<small>This slide has a background image.</small>
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
|
||||||
|
{{</* slide background-image="/images/alex-litvin-790876-unsplash.jpg" */>}}
|
||||||
|
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
<small>(credit <a href="https://unsplash.com/@alexlitvin">Alex Litvin</a>)</small>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
{{< slide id="custom-slide" >}}
|
||||||
|
|
||||||
|
💡 Tip: Setting a slide's `id` attribute makes it easy to link to from other parts of the presentation.
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
|
||||||
|
{{</* slide id="custom-slide" */>}}
|
||||||
|
|
||||||
|
## Custom slide
|
||||||
|
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
[Try the link](#custom-slide)
|
||||||
|
```
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
[Try the link](#custom-slide)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Slide attribute possibilities from the [Reveal.js docs](https://github.com/hakimel/reveal.js):
|
||||||
|
|
||||||
|
- `autoslide`
|
||||||
|
- `state`
|
||||||
|
- `background`
|
||||||
|
- `background-color`
|
||||||
|
- `background-image`
|
||||||
|
- `background-size`
|
||||||
|
- `background-position`
|
||||||
|
- `background-repeat`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
- `background-video`
|
||||||
|
- `background-video-loop`
|
||||||
|
- `background-video-muted`
|
||||||
|
- `background-interactive`
|
||||||
|
- `background-iframe`
|
||||||
|
- `background-transition`
|
||||||
|
- `transition` (can have different in and out transitions)
|
||||||
|
- `transition-speed`
|
||||||
|
- `notes` (can also use the note shortcode)
|
||||||
|
- `timing`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
{{% section %}}
|
||||||
|
|
||||||
|
## Slide templates
|
||||||
|
|
||||||
|
Store sets of common slide attributes in front matter variables and apply them to slides with the template attribute.
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<small>
|
||||||
|
navigate down to learn more
|
||||||
|
</small>
|
||||||
|
<br>
|
||||||
|
<a href="#" class="navigate-down">🔽</a>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Create templates in config.toml, _index.md or the current page's front matter. Put them under the **templates** key with a meaningful name:
|
||||||
|
|
||||||
|
```toml
|
||||||
|
[reveal_hugo.templates.hotpink]
|
||||||
|
class = "hotpink"
|
||||||
|
background = "#FF4081"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
{{< slide template="hotpink" >}}
|
||||||
|
|
||||||
|
Apply the template using the **template** attribute of the slide shortcode:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
{{</* slide template="hotpink" */>}}
|
||||||
|
|
||||||
|
# I'm a hot pink slide!
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
If a template exists in multiple configurations, it's properties will be merged. If a property is declared multiple times, the order of precedence is:
|
||||||
|
|
||||||
|
- page
|
||||||
|
- section (_index.md)
|
||||||
|
- site (config.toml)
|
||||||
|
|
||||||
|
{{% /section %}}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
{{% section %}}
|
||||||
|
|
||||||
|
{{< slide content="home.reusable" >}}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
{{< slide content="common.nested.reusable" >}}
|
||||||
|
|
||||||
|
{{% /section %}}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
{{% section %}}
|
||||||
|
|
||||||
|
## Slide-specific CSS
|
||||||
|
|
||||||
|
Add more variety to your presentation by applying slide-specific CSS.
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<small>
|
||||||
|
navigate down to learn more
|
||||||
|
</small>
|
||||||
|
<br>
|
||||||
|
<a href="#" class="navigate-down">🔽</a>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
First, use the `slide` shortcode to give the slide a class:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
---
|
||||||
|
|
||||||
|
{{</* slide class="side-by-side" */>}}
|
||||||
|
|
||||||
|
# 📈
|
||||||
|
|
||||||
|
# 📊
|
||||||
|
|
||||||
|
---
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Next, use a layout extension partial like `reveal-hugo/head.html` to add CSS selectors:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
.reveal section.side-by-side h1 {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.reveal section.side-by-side h1:first-of-type {
|
||||||
|
left: 25%;
|
||||||
|
}
|
||||||
|
.reveal section.side-by-side h1:nth-of-type(2) {
|
||||||
|
right: 25%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
{{< slide class="side-by-side" >}}
|
||||||
|
|
||||||
|
# 📈
|
||||||
|
|
||||||
|
# 📊
|
||||||
|
|
||||||
|
{{% /section %}}
|
||||||
|
|
@ -0,0 +1,109 @@
|
||||||
|
+++
|
||||||
|
weight = 20
|
||||||
|
+++
|
||||||
|
|
||||||
|
# Usage
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Prerequisite
|
||||||
|
|
||||||
|
First, add this to your `config.toml`:
|
||||||
|
|
||||||
|
```toml
|
||||||
|
[outputFormats.Reveal]
|
||||||
|
baseName = "index"
|
||||||
|
mediaType = "text/html"
|
||||||
|
isHTML = true
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Presentation at site root
|
||||||
|
|
||||||
|
Create `content/_index.md`:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
+++
|
||||||
|
outputs = ["Reveal"]
|
||||||
|
+++
|
||||||
|
|
||||||
|
# Slide 1
|
||||||
|
|
||||||
|
Hello world!
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Add slides
|
||||||
|
|
||||||
|
Separate them by `---` surrounded by blank lines:
|
||||||
|
|
||||||
|
```
|
||||||
|
# Slide 1
|
||||||
|
|
||||||
|
Hello world!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Slide 2
|
||||||
|
|
||||||
|
Hello program!
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Add slides with other files
|
||||||
|
|
||||||
|
Add slides to `content/home/*.md`
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
+++
|
||||||
|
weight = 10
|
||||||
|
+++
|
||||||
|
|
||||||
|
# Slide 3
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Slide 4
|
||||||
|
```
|
||||||
|
|
||||||
|
<small>💡 Tip: Use `weight` to specify the order that files should be considered.</small>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Presentation at '/{section}/'
|
||||||
|
|
||||||
|
Add slides to `content/{section}/_index.md`:
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
+++
|
||||||
|
outputs = ["Reveal"]
|
||||||
|
+++
|
||||||
|
|
||||||
|
# Slide 1
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Slide 2
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Add slides from other files in `content/{section}/*.md`
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
+++
|
||||||
|
weight = 10
|
||||||
|
+++
|
||||||
|
|
||||||
|
# Slide 3
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Slide 4
|
||||||
|
```
|
||||||
|
|
||||||
|
<small>💡 Tip: Use `weight` to specify the order that files should be considered.</small>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
+++
|
||||||
|
title = "Hugo highlighting example"
|
||||||
|
outputs = ["Reveal"]
|
||||||
|
|
||||||
|
[reveal_hugo]
|
||||||
|
theme = "simple"
|
||||||
|
+++
|
||||||
|
|
||||||
|
## Hugo Highlighter Presentation
|
||||||
|
|
||||||
|
This is an example of a presentation using Hugo's compile-time syntax highlighter.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Reveal.js uses Javascript for syntax highlighting (via Highlight.js). This might slow the presentation down if many slides contain code.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Hugo has a built-in [compile-time highlighter](https://gohugo.io/content-management/syntax-highlighting/), and it's lightning fast too!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
You can enable it using the `highlight` shortcode.
|
||||||
|
|
||||||
|
{{< highlight go >}}
|
||||||
|
{{</* highlight go */>}}
|
||||||
|
|
||||||
|
package main
|
||||||
|
|
||||||
|
import "fmt"
|
||||||
|
|
||||||
|
func main() {
|
||||||
|
fmt.Println("Hello world!")
|
||||||
|
}
|
||||||
|
|
||||||
|
{{</* /highlight */>}}
|
||||||
|
{{< /highlight >}}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Several options are supported, check [Hugo's documentation](https://gohugo.io/content-management/syntax-highlighting/).
|
||||||
|
|
||||||
|
{{< highlight go "style=github,linenos=inline,hl_lines=8" >}}
|
||||||
|
{{</* highlight go "style=github,linenos=inline,hl_lines=6" */>}}
|
||||||
|
|
||||||
|
package main
|
||||||
|
|
||||||
|
import "fmt"
|
||||||
|
|
||||||
|
func main() {
|
||||||
|
fmt.Println("Hello world!")
|
||||||
|
}
|
||||||
|
|
||||||
|
{{</* /highlight */>}}
|
||||||
|
{{< / highlight >}}
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
You can also use Hugo's highlighter in markdown code fences,
|
||||||
|
by putting this in `config.toml`:
|
||||||
|
|
||||||
|
{{< highlight toml "style=github" >}}
|
||||||
|
|
||||||
|
# use Hugo's hl in markdown (with or without a language tag)
|
||||||
|
[markup.highlight]
|
||||||
|
codeFences = true
|
||||||
|
style = "github"
|
||||||
|
|
||||||
|
{{< /highlight >}}
|
||||||
|
|
||||||
|
(This can only be enabled globally for all presentations.)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
- Highlight.js is automatically disabled in code blocks highlighted by Hugo.
|
||||||
|
- The two highlighters can be even mixed.
|
||||||
|
|
||||||
|
{{< highlight go >}}
|
||||||
|
package main
|
||||||
|
|
||||||
|
import "fmt"
|
||||||
|
|
||||||
|
func main() {
|
||||||
|
fmt.Println("Hello world!")
|
||||||
|
}
|
||||||
|
{{< / highlight >}}
|
||||||
|
|
||||||
|
```go
|
||||||
|
package main
|
||||||
|
|
||||||
|
import "fmt"
|
||||||
|
|
||||||
|
func main() {
|
||||||
|
fmt.Println("Hello world!")
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
If you don't need highlight.js at all, you can prevent it from loading.
|
||||||
|
|
||||||
|
{{< highlight toml "style=github" >}}
|
||||||
|
|
||||||
|
# This works both in config.toml and a presentation's front
|
||||||
|
# matter. Default plugins include highlight.js, so disable them
|
||||||
|
# and load those that we want manually.
|
||||||
|
|
||||||
|
[params.reveal_hugo]
|
||||||
|
load_default_plugins = false
|
||||||
|
plugins = [
|
||||||
|
"reveal-js/plugin/zoom-js/zoom.js",
|
||||||
|
"reveal-js/plugin/notes/notes.js",
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,103 @@
|
||||||
|
+++
|
||||||
|
title = "Logo presentation example"
|
||||||
|
outputs = ["Reveal"]
|
||||||
|
[logo]
|
||||||
|
src = "github-logo.png"
|
||||||
|
alt = "GitHub logo with Octocat"
|
||||||
|
[reveal_hugo]
|
||||||
|
custom_theme = "reveal-hugo/themes/robot-lung.css"
|
||||||
|
margin = 0.2
|
||||||
|
+++
|
||||||
|
|
||||||
|
## logo-example
|
||||||
|
|
||||||
|
This presentation shows how to add a logo to each slide, like the GitHub one you see above.
|
||||||
|
|
||||||
|
You can generalize the concept to add any additional markup to your presentations.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
[See the code for this presentation](https://github.com/dzello/reveal-hugo/blob/master/exampleSite/content/logo-example/_index.md)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
First, create a partial called `body.html` and put it in this directory:
|
||||||
|
|
||||||
|
```text
|
||||||
|
layouts/partials/{section}/reveal-hugo/body.html
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Substitute `{section}` for `home` if you are adding a logo to the presentation at `content/_index.md`. Otherwise, substitute the name of the Hugo section where your presentation lives.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
The presentation you're looking at right now is in `content/logo-example`, so the partial to add the logo lives in:
|
||||||
|
|
||||||
|
```text
|
||||||
|
layouts/partials/logo-example/reveal-hugo/body.html
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
💡 Tip: to make the logo appear in every presentation, put it here:
|
||||||
|
|
||||||
|
```text
|
||||||
|
layouts/partials/reveal-hugo/body.html
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
💡 Tip: In addition to `body.html`, you can create partials `head.html` and `end.html` in any of those directories.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
- head.html: Add markup just before the closing `</head>` tag
|
||||||
|
- body.html: Add markup just before the closing `</body>` tag
|
||||||
|
- end.html: Add markup just before the closing of the Reveal.js `div.slides` container
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Once the partial exists in `body.html`, we can add our image tag to it:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img id="logo" src="{{ .Param "logo.src" }}" alt="{{ .Param "logo.alt" }}">
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
In this example, the src and alt attributes are set to values from the content's front matter or site's configuration, which you can see in `logo-example/_index.md`:
|
||||||
|
|
||||||
|
```toml
|
||||||
|
[logo]
|
||||||
|
src = "/images/github-logo.png"
|
||||||
|
alt = "GitHub logo with Octocat"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
To position the logo, we can add a style tag to `body.html`:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style>
|
||||||
|
#logo {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 20px;
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
<small>
|
||||||
|
💡 Depending on the theme you're using, your styles will be different. <br>You may also prefer to put your CSS in an external file or your Reveal.js theme.
|
||||||
|
</small>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# 🤗
|
||||||
|
|
||||||
|
That's it.
|
||||||
|
|
||||||
|
Happy Hugo-ing!
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
|
|
@ -0,0 +1,83 @@
|
||||||
|
+++
|
||||||
|
title = "plugin-example"
|
||||||
|
description = "Shows how a Reveal.js plugin can be added and used"
|
||||||
|
outputs = ["Reveal"]
|
||||||
|
[reveal_hugo]
|
||||||
|
theme = "night"
|
||||||
|
margin = 0.2
|
||||||
|
plugins = ["plugin/gallery/gallery.plugin.js"]
|
||||||
|
+++
|
||||||
|
|
||||||
|
# plugin-example
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
This presentation demonstrates how a Reveal.js plugin can be added.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
The plugin is called [revealjs-simple-gallery](https://github.com/marcins/revealjs-simple-gallery).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
It can make any slide an image gallery. Here are a few examples.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<ul class="gallery">
|
||||||
|
<li><img src="sample1.jpg" alt="Default settings (Photo by Oscar Fernandez Alonso on Flickr)"></li>
|
||||||
|
<li><img src="sample2.jpg" alt="Default settings (Photo by bullcitydogs on Flickr)"></li>
|
||||||
|
<li><img src="sample3.jpg" alt="Default settings (Photo by Lance McCord on Flickr)"></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<ul class="gallery" data-iterations="0" data-interval="1">
|
||||||
|
<li><img src="sample1.jpg" alt="Infinite iterations, fast transition (Photo by Oscar Fernandez Alonso on Flickr)"></li>
|
||||||
|
<li><img src="sample2.jpg" alt="Infinite iterations, fast transition (Photo by bullcitydogs on Flickr)"></li>
|
||||||
|
<li><img src="sample3.jpg" alt="Infinite iterations, fast transition (Photo by Lance McCord on Flickr)"></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
<ul class="gallery" data-iterations="2" data-interval="2" data-mode="full-screen">
|
||||||
|
<li><img src="sample1.jpg" alt="Full screen, two iterations, slow transition (Photo by Oscar Fernandez Alonso on Flickr)"></li>
|
||||||
|
<li><img src="sample2.jpg" alt="Full screen, two iterations, slow transition (Photo by bullcitydogs on Flickr)"></li>
|
||||||
|
<li><img src="sample3.jpg" alt="Full screen, two iterations, slow transition (Photo by Lance McCord on Flickr)"></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
See the [revealjs-simple-gallery GitHub repo](https://github.com/marcins/revealjs-simple-gallery) to learn about more customization options.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
These were the steps to use this plugin for this reveal-hugo presentation.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 1
|
||||||
|
|
||||||
|
Copy the plugin CSS and JavaScript into the static directory
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 2
|
||||||
|
|
||||||
|
Add the JavaScript file path to the `plugins` field in the front matter
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 3
|
||||||
|
|
||||||
|
Create a `head.html` partial inside of `layouts/partials/plugin-example/reveal-hugo`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4
|
||||||
|
|
||||||
|
In `head.html`, add a stylesheet link tag that loads the plugin CSS
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## THE END
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 316 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 173 KiB |
|
|
@ -0,0 +1,19 @@
|
||||||
|
+++
|
||||||
|
title = "Section presentation example"
|
||||||
|
outputs = ["Reveal"]
|
||||||
|
[reveal_hugo]
|
||||||
|
theme = "night"
|
||||||
|
margin = 0.2
|
||||||
|
+++
|
||||||
|
|
||||||
|
# Section Presentation
|
||||||
|
|
||||||
|
This is an example of a section presentation.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Section presentations are completely separate from the root presentation and each other.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Additional content files can be placed in the section and will be added to the presentation in the order of their weight.
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
+++
|
||||||
|
weight = 10
|
||||||
|
+++
|
||||||
|
|
||||||
|
# Including...
|
||||||
|
|
||||||
|
Content from files like this one.
|
||||||
|
|
||||||
|
|
@ -0,0 +1,45 @@
|
||||||
|
+++
|
||||||
|
title = "Template presentation"
|
||||||
|
outputs = ["Reveal"]
|
||||||
|
[reveal_hugo]
|
||||||
|
theme = "night"
|
||||||
|
margin = 0.2
|
||||||
|
[reveal_hugo.templates.blue]
|
||||||
|
background = "#0011DD"
|
||||||
|
transition = "zoom"
|
||||||
|
+++
|
||||||
|
|
||||||
|
## Template Example
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
This presentation shows how to take advantage of reveal-hugo's slide template feature.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Slide templates let you specify groups of slide attributes in one place and reuse them throughout the presentation.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
{{< slide template="blue" >}}
|
||||||
|
|
||||||
|
Here's an example of using a template called `blue`, defined in the front matter of this presentation's `_index.md` file.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
The template can contain any valid slide customization params:
|
||||||
|
|
||||||
|
```toml
|
||||||
|
[reveal_hugo.templates.blue]
|
||||||
|
background = "#0011DD"
|
||||||
|
transition = "zoom"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Then add it to any slide using the slide shortcode:
|
||||||
|
|
||||||
|
```
|
||||||
|
{{</* slide template="blue" */>}}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
@ -0,0 +1,16 @@
|
||||||
|
+++
|
||||||
|
+++
|
||||||
|
|
||||||
|
{{< slide template="grey" >}}
|
||||||
|
|
||||||
|
Templates can be specified in `config.toml` as well, for reusability across multiple presentations.
|
||||||
|
|
||||||
|
```
|
||||||
|
[params.reveal_hugo.templates.grey]
|
||||||
|
background = "#424242"
|
||||||
|
transition = "convex"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## THE END
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
reusable = '''
|
||||||
|
|
||||||
|
You can organize reusables into folder.
|
||||||
|
|
||||||
|
An an `example` key in `data/common/nested.toml`
|
||||||
|
|
||||||
|
```toml
|
||||||
|
example = "I'm a slide"
|
||||||
|
```
|
||||||
|
<br>
|
||||||
|
|
||||||
|
Set the `content` attribute to "common.nested.example":
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
{{< slide content="common.nested.example" >}}
|
||||||
|
```
|
||||||
|
|
||||||
|
'''
|
||||||
|
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
# Note: it seems that under goldmark, markdown in data templates has issues.
|
||||||
|
# In particular "---" is converted to <hr> even inside code fences!
|
||||||
|
|
||||||
|
reusable = '''
|
||||||
|
|
||||||
|
## Reusable slides
|
||||||
|
|
||||||
|
Store markdown in a [data template](https://gohugo.io/templates/data-templates/) and reuse it in multiple sections or presentations.
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<small>
|
||||||
|
navigate down to learn more
|
||||||
|
</small>
|
||||||
|
<br>
|
||||||
|
<a href="#" class="navigate-down">🔽</a>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Add a `example` key to data/home.toml:
|
||||||
|
|
||||||
|
```toml
|
||||||
|
example = "I'm a slide"
|
||||||
|
```
|
||||||
|
<br>
|
||||||
|
|
||||||
|
Set the `content` attribute to "home.example":
|
||||||
|
|
||||||
|
```markdown
|
||||||
|
{{< slide content="home.example" >}}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
💡 Each data template entry can contain one or more slides, separated by `---` with newlines.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
💡 All other slide shortcode attributes (background, transition, etc.) can be used and will be applied to each slide in the data template entry.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
💡 Adding a new file in `data` folder requires to restart `hugo`
|
||||||
|
|
||||||
|
💡 Symbolinc links are not allowed in `data` folder
|
||||||
|
|
||||||
|
'''
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
<!-- hide Highlight.js line numbers -->
|
||||||
|
<style>
|
||||||
|
.hljs-ln-numbers {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<!-- This partial is included before the end of the body tag for only the 'example' presentation -->
|
||||||
|
<!-- A common use would be to add JavaScript to the page to customize interactions -->
|
||||||
|
<!-- The Reveal.js JavaScript API is located at https://github.com/hakimel/reveal.js/#api -->
|
||||||
|
<script type="text/javascript">
|
||||||
|
// Log the current slide to the console when it changes
|
||||||
|
Reveal.addEventListener('slidechanged', function(event) {
|
||||||
|
console.log("🎞️ Slide is now " + event.indexh);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
<div class="line top"></div>
|
||||||
|
<div class="line bottom"></div>
|
||||||
|
<div class="line left"></div>
|
||||||
|
<div class="line right"></div>
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!-- This partial is included before the end of the head tag for only the 'example' presentation -->
|
||||||
|
<!-- A common use would be to add CSS to the page to customize the theme -->
|
||||||
|
<style>
|
||||||
|
/* Add padding, margin and a hover effect on code samples */
|
||||||
|
.reveal section pre {
|
||||||
|
box-shadow: none;
|
||||||
|
margin-top: 25px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
border: 1px solid lightgrey;
|
||||||
|
}
|
||||||
|
.reveal section pre:hover {
|
||||||
|
border: 1px solid grey;
|
||||||
|
transition: border 0.3s ease;
|
||||||
|
}
|
||||||
|
.reveal section pre > code {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.reveal table {
|
||||||
|
font-size: 0.65em;
|
||||||
|
}
|
||||||
|
/* For slide-specific CSS example */
|
||||||
|
.reveal section.side-by-side h1 {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.reveal section.side-by-side h1:first-of-type {
|
||||||
|
left: 25%;
|
||||||
|
}
|
||||||
|
.reveal section.side-by-side h1:nth-of-type(2) {
|
||||||
|
right: 25%;
|
||||||
|
}
|
||||||
|
.reveal section[data-background-image] a,
|
||||||
|
.reveal section[data-background-image] p,
|
||||||
|
.reveal section[data-background-image] h2 {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.reveal section[data-background-image] a {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
<style>
|
||||||
|
#logo {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 20px;
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<img id="logo" src="{{ .Param "logo.src" }}" alt="{{ .Param "logo.alt" }}">
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<link rel="stylesheet" href="/plugin/gallery/gallery.css">
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
||||||
|
{"Target":"_.min.debb4e7703d02f02d0510843db28b0aecb70d4c1394da8410aac6d3593ceec29.css","MediaType":"text/css","Data":{"Integrity":"sha256-3rtOdwPQLwLQUQhD2yiwrstw1ME5TahBCqxtNZPO7Ck="}}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
# Redirect default Netlify subdomain to primary domain
|
||||||
|
https://reveal-hugo.netlify.com/* https://reveal-hugo.dzello.com/:splat 301!
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
.custom em{
|
||||||
|
color: #a32843
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom code{
|
||||||
|
color: #ff2f86
|
||||||
|
}
|
||||||
|
|
||||||
|
.customjs {
|
||||||
|
background-color: #504e9e
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
|
|
@ -0,0 +1,3 @@
|
||||||
|
document.getElementById("customjs").addEventListener("click", function(){
|
||||||
|
this.className += " customjs"
|
||||||
|
})
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
.reveal ul.gallery {
|
||||||
|
position: relative;
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 960px;
|
||||||
|
height: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reveal ul.gallery[data-mode=full-screen] {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery li {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 960px;
|
||||||
|
height: 700px;
|
||||||
|
opacity: 0;
|
||||||
|
-webkit-transition: opacity 0.3s ease-in-out;
|
||||||
|
-moz-transition: opacity 0.3s ease-in-out;
|
||||||
|
transition: opacity 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery[data-mode=full-screen] li {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-attachment:fixed;
|
||||||
|
background-position: center;
|
||||||
|
-webkit-background-size: cover;
|
||||||
|
-moz-background-size: cover;
|
||||||
|
-o-background-size: cover;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.gallery .active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery .inactive {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery img {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gallery label {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20px;
|
||||||
|
min-width: 150px;
|
||||||
|
left: 0;
|
||||||
|
padding: 10px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,119 @@
|
||||||
|
(function(Gallery) {
|
||||||
|
var galleryTimer, galleryMode;
|
||||||
|
|
||||||
|
Gallery.step = function (items, iterations) {
|
||||||
|
var length = items.length,
|
||||||
|
ptr = 0,
|
||||||
|
loops = 0;
|
||||||
|
|
||||||
|
return function () {
|
||||||
|
if (iterations > 0 && loops === iterations) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
items[ptr].className = "inactive";
|
||||||
|
if (ptr === length - 1) {
|
||||||
|
loops++;
|
||||||
|
if (iterations === 0 || loops < iterations) {
|
||||||
|
ptr = 0;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
ptr++;
|
||||||
|
}
|
||||||
|
items[ptr].className = "active";
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
Gallery.start = function (galleryNode, contextNode) {
|
||||||
|
contextNode = contextNode || document.body.firstChild;
|
||||||
|
galleryMode = galleryNode.dataset.mode || 'normal';
|
||||||
|
|
||||||
|
if (galleryMode === 'full-screen') {
|
||||||
|
// FIXME remove depenency on Reveal, have a callback? function
|
||||||
|
// that will get a root node to move full screen slides to (ie. slidesNode)
|
||||||
|
|
||||||
|
// for full screen mode we need to:
|
||||||
|
// - take the gallery out of the flow and insert it before "slides"
|
||||||
|
// - hide slides
|
||||||
|
// - make it full screen
|
||||||
|
|
||||||
|
var placeholder = document.createElement("div");
|
||||||
|
placeholder.id = "gallery-placeholder";
|
||||||
|
galleryNode.parentNode.replaceChild(placeholder, galleryNode);
|
||||||
|
|
||||||
|
if (contextNode.parentNode) {
|
||||||
|
contextNode.parentNode.insertBefore(galleryNode, contextNode);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var items = Array.prototype.slice.apply(galleryNode.querySelectorAll("li"));
|
||||||
|
items.forEach(function (item, index) {
|
||||||
|
if (index === 0) {
|
||||||
|
item.className = "active";
|
||||||
|
} else {
|
||||||
|
item.className = "inactive";
|
||||||
|
}
|
||||||
|
var label = item.querySelector("label");
|
||||||
|
var img = item.querySelector("img");
|
||||||
|
|
||||||
|
if (galleryMode === 'full-screen') {
|
||||||
|
img.style.display = "none";
|
||||||
|
item.style.backgroundImage = "url(" + img.src + ")";
|
||||||
|
} else {
|
||||||
|
img.style.display = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!label && img.attributes.alt) {
|
||||||
|
label = document.createElement("label");
|
||||||
|
label.innerHTML = img.attributes.alt.value;
|
||||||
|
item.appendChild(label);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var iterations = galleryNode.dataset.iterations ? +galleryNode.dataset.iterations : 1;
|
||||||
|
var interval = (galleryNode.dataset.interval || 1) * 1000;
|
||||||
|
galleryTimer = setInterval(Gallery.step(items, iterations), interval);
|
||||||
|
};
|
||||||
|
|
||||||
|
// FIXME Gallery.stop should take elem and root nodes as well
|
||||||
|
Gallery.stop = function (galleryNode, contextNode) {
|
||||||
|
clearInterval(galleryTimer);
|
||||||
|
|
||||||
|
if (galleryMode === "full-screen") {
|
||||||
|
// - put the gallery back where it was
|
||||||
|
var placeholder = document.getElementById("gallery-placeholder");
|
||||||
|
placeholder.parentNode.replaceChild(galleryNode, placeholder);
|
||||||
|
|
||||||
|
var items = Array.prototype.slice.apply(galleryNode.querySelectorAll("li"));
|
||||||
|
items.forEach(function (item, index) {
|
||||||
|
var img = item.querySelector("img");
|
||||||
|
item.style.backgroundImage = "";
|
||||||
|
img.style.display = "";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})(window.Gallery = window.Gallery || {});(function() {
|
||||||
|
if( typeof window.addEventListener === 'function' ) {
|
||||||
|
var slidesNode = document.querySelector(".slides");
|
||||||
|
Reveal.addEventListener("slidechanged", function (event) {
|
||||||
|
console.log(event)
|
||||||
|
var galleryNode = event.previousSlide.querySelector('.gallery') || document.querySelector('.reveal > .gallery');
|
||||||
|
if (galleryNode) {
|
||||||
|
Gallery.stop(galleryNode, slidesNode);
|
||||||
|
}
|
||||||
|
|
||||||
|
galleryNode = event.currentSlide.querySelector('.gallery');
|
||||||
|
if (galleryNode) {
|
||||||
|
Gallery.start(galleryNode, slidesNode);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
// during initial load
|
||||||
|
if (Reveal.getCurrentSlide()) {
|
||||||
|
var galleryNode = Reveal.getCurrentSlide().querySelector('.gallery');
|
||||||
|
if (galleryNode) {
|
||||||
|
Gallery.start(galleryNode, slidesNode);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
@ -0,0 +1,340 @@
|
||||||
|
/**
|
||||||
|
|
||||||
|
[ robot-lung ]
|
||||||
|
|
||||||
|
A hot pink theme for Reveal.js with Roboto fonts and a colorful border.
|
||||||
|
By Josh Dzielak, https://dzello.com/, License MIT
|
||||||
|
|
||||||
|
The bold border is optional and requires some HTML. To use it:
|
||||||
|
|
||||||
|
1. Add 4 divs to your HTML page:
|
||||||
|
<div class="line top"></div>
|
||||||
|
<div class="line bottom"></div>
|
||||||
|
<div class="line left"></div>
|
||||||
|
<div class="line right"></div>
|
||||||
|
|
||||||
|
2. Set { margin: 0.2 } in the Reveal.js initializer to make sure
|
||||||
|
your presentation content doesn't collide with the frame.
|
||||||
|
|
||||||
|
Like the theme but don't like the colors? Don't fret. Just change
|
||||||
|
$borderColor and/or $linkColor below to something else and rebuild.
|
||||||
|
|
||||||
|
Or if you don't want to rebuild the theme just override the .line background
|
||||||
|
property with some CSS:
|
||||||
|
|
||||||
|
.line {
|
||||||
|
background: <new-color>;
|
||||||
|
}
|
||||||
|
|
||||||
|
*/
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:300,700);
|
||||||
|
@import url(https://fonts.googleapis.com/css?family=Roboto:700);
|
||||||
|
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: #141414; }
|
||||||
|
|
||||||
|
.reveal .controls {
|
||||||
|
right: 50px;
|
||||||
|
bottom: 50px; }
|
||||||
|
|
||||||
|
.line {
|
||||||
|
content: '';
|
||||||
|
position: fixed;
|
||||||
|
background: #FF4081;
|
||||||
|
z-index: 105; }
|
||||||
|
.line.top {
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px; }
|
||||||
|
@media (max-width: 840px) {
|
||||||
|
.line.top {
|
||||||
|
height: 15px; } }
|
||||||
|
.line.bottom {
|
||||||
|
left: 0;
|
||||||
|
top: auto;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px; }
|
||||||
|
@media (max-width: 840px) {
|
||||||
|
.line.bottom {
|
||||||
|
height: 15px; } }
|
||||||
|
.line.left {
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 30px;
|
||||||
|
height: 200%; }
|
||||||
|
@media (max-width: 840px) {
|
||||||
|
.line.left {
|
||||||
|
width: 15px; } }
|
||||||
|
.line.right {
|
||||||
|
left: auto;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 30px;
|
||||||
|
height: 200%; }
|
||||||
|
@media (max-width: 840px) {
|
||||||
|
.line.right {
|
||||||
|
width: 15px; } }
|
||||||
|
|
||||||
|
.reveal.has-dark-background .line {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* GLOBAL STYLES
|
||||||
|
*********************************************/
|
||||||
|
body {
|
||||||
|
background: #fff;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
.reveal {
|
||||||
|
font-family: "Roboto Slab", serif;
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #363636; }
|
||||||
|
|
||||||
|
::selection {
|
||||||
|
color: #fff;
|
||||||
|
background: #ffc0d5;
|
||||||
|
text-shadow: none; }
|
||||||
|
|
||||||
|
::-moz-selection {
|
||||||
|
color: #fff;
|
||||||
|
background: #ffc0d5;
|
||||||
|
text-shadow: none; }
|
||||||
|
|
||||||
|
.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: #141414;
|
||||||
|
font-family: "Roboto", sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.2;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-shadow: none;
|
||||||
|
word-wrap: break-word; }
|
||||||
|
|
||||||
|
.reveal h1 {
|
||||||
|
font-size: 2.6em; }
|
||||||
|
|
||||||
|
.reveal h2 {
|
||||||
|
font-size: 2.2em; }
|
||||||
|
|
||||||
|
.reveal h3 {
|
||||||
|
font-size: 1.7em; }
|
||||||
|
|
||||||
|
.reveal h4 {
|
||||||
|
font-size: 1.4em; }
|
||||||
|
|
||||||
|
.reveal h1 {
|
||||||
|
text-shadow: none; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* 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; }
|
||||||
|
|
||||||
|
.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 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%;
|
||||||
|
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;
|
||||||
|
text-transform: none; }
|
||||||
|
|
||||||
|
.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 tbody tr:last-child th,
|
||||||
|
.reveal table tbody 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: #FF4081;
|
||||||
|
text-decoration: none;
|
||||||
|
-webkit-transition: color .15s ease;
|
||||||
|
-moz-transition: color .15s ease;
|
||||||
|
transition: color .15s ease; }
|
||||||
|
|
||||||
|
.reveal a:hover {
|
||||||
|
color: #ff8db3;
|
||||||
|
text-shadow: none;
|
||||||
|
border: none; }
|
||||||
|
|
||||||
|
.reveal .roll span:after {
|
||||||
|
color: #fff;
|
||||||
|
background: #f30053; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* IMAGES
|
||||||
|
*********************************************/
|
||||||
|
.reveal section img {
|
||||||
|
margin: 15px 0px;
|
||||||
|
background: rgba(255, 255, 255, 0.12);
|
||||||
|
border: 4px solid #363636;
|
||||||
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
|
||||||
|
|
||||||
|
.reveal section img.plain {
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none; }
|
||||||
|
|
||||||
|
.reveal a img {
|
||||||
|
-webkit-transition: all .15s linear;
|
||||||
|
-moz-transition: all .15s linear;
|
||||||
|
transition: all .15s linear; }
|
||||||
|
|
||||||
|
.reveal a:hover img {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
border-color: #FF4081;
|
||||||
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* NAVIGATION CONTROLS
|
||||||
|
*********************************************/
|
||||||
|
.reveal .controls {
|
||||||
|
color: #FF4081; }
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* PROGRESS BAR
|
||||||
|
*********************************************/
|
||||||
|
.reveal .progress {
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
color: #FF4081; }
|
||||||
|
|
||||||
|
.reveal .progress span {
|
||||||
|
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||||
|
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
||||||
|
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
||||||
|
|
||||||
|
.reveal .progress {
|
||||||
|
z-index: 1000;
|
||||||
|
color: #FF80A1; }
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
{{ partial "layout/head" . }}
|
||||||
|
{{ partial "layout/theme" . }}
|
||||||
|
<!-- To insert markup before the closing head tag for all presentations,
|
||||||
|
create layouts/partials/reveal-hugo/head.html -->
|
||||||
|
{{- partial "reveal-hugo/head" . -}}
|
||||||
|
<!-- To insert markup at the end of the head tag for a specific presentation,
|
||||||
|
create layouts/partials/{section}/reveal-hugo/head.html -->
|
||||||
|
{{- $sectionHeadPartial := printf "%s/reveal-hugo/head" (.Page.Section | default "home") -}}
|
||||||
|
{{- if fileExists (printf "layouts/partials/%s.html" $sectionHeadPartial) -}}{{ partial $sectionHeadPartial . }}{{- end }}
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="reveal">
|
||||||
|
<div class="slides">
|
||||||
|
{{- block "main" . -}}{{- end -}}
|
||||||
|
</div>
|
||||||
|
<!-- To insert markup at the end of the .reveal tag for all presentations,
|
||||||
|
create layouts/partials/reveal-hugo/end.html -->
|
||||||
|
{{- partial "reveal-hugo/end" . -}}
|
||||||
|
<!-- To insert markup at the end of the .reveal tag for a specific presentation,
|
||||||
|
create layouts/partials/{section}/reveal-hugo/end.html -->
|
||||||
|
{{- $sectionHeadPartial := printf "%s/reveal-hugo/end" (.Page.Section | default "home") -}}
|
||||||
|
{{- if fileExists (printf "layouts/partials/%s.html" $sectionHeadPartial) -}}{{ partial $sectionHeadPartial . }}{{- end }}
|
||||||
|
</div>
|
||||||
|
{{- partial "layout/javascript" . }}
|
||||||
|
<!-- To insert markup before the closing body tag for all presentations,
|
||||||
|
create layouts/partials/reveal-hugo/body.html -->
|
||||||
|
{{- partial "reveal-hugo/body" . }}
|
||||||
|
<!-- To insert markup at the end of the head tag for a specific presentation,
|
||||||
|
create layouts/partials/{section}/reveal-hugo/body.html -->
|
||||||
|
{{- $sectionBodyPartial := printf "%s/reveal-hugo/body" (.Page.Section | default "home") -}}
|
||||||
|
{{- if fileExists (printf "layouts/partials/%s.html" $sectionBodyPartial) -}}{{ partial $sectionBodyPartial . }}{{- end }}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{{ define "main" }}
|
||||||
|
{{ partial "reveal-hugo/slides" (slice .Page) }}
|
||||||
|
{{ partial "reveal-hugo/slides" (.Resources.ByType "page") }}
|
||||||
|
{{ end }}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{{ define "main" }}
|
||||||
|
{{ partial "reveal-hugo/slides" (slice .Page) }}
|
||||||
|
{{ partial "reveal-hugo/slides" (where .Site.RegularPages "Type" "home") }}
|
||||||
|
{{ end }}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{{ define "main" }}
|
||||||
|
{{ partial "reveal-hugo/slides" (slice .Page) }}
|
||||||
|
{{ partial "reveal-hugo/slides" (where .Pages "Kind" "page") }}
|
||||||
|
{{ end }}
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>{{ or .Page.Title .Site.Title }}</title>
|
||||||
|
{{ with $.Param "description" }}<meta name="description" content="{{ . }}">{{ end }}
|
||||||
|
{{ with .Site.Author.name }}<meta name="author" content="{{ . }}">{{ end }}
|
||||||
|
<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">
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
<!-- polyfill needed for IE11 and below -->
|
||||||
|
<script type="text/javascript" src={{ "reveal-hugo/object-assign.js" | relURL }}></script>
|
||||||
|
<!-- Printing and PDF exports -->
|
||||||
|
<!-- use Hugo to create the right path for the print stylesheet, then conditionally include it -->
|
||||||
|
{{- $reveal_location := $.Param "reveal_hugo.reveal_cdn" | default "reveal-js" -}}
|
||||||
|
<a href="{{ printf "%s/css/print/" $reveal_location | relURL }}" id="print-location" style="display: none;"></a>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var printLocationElement = document.getElementById('print-location');
|
||||||
|
var link = document.createElement('link');
|
||||||
|
link.rel = 'stylesheet';
|
||||||
|
link.type = 'text/css';
|
||||||
|
link.href = printLocationElement.href + (window.location.search.match(/print-pdf/gi) ? 'pdf.css' : 'paper.css');
|
||||||
|
document.getElementsByTagName('head')[0].appendChild(link);
|
||||||
|
</script>
|
||||||
|
<!-- output Hugo parameters into JavaScript to be used when initializing Reveal.js -->
|
||||||
|
<script type="application/json" id="reveal-hugo-site-params">{{ jsonify .Site.Params.reveal_hugo | safeJS }}</script>
|
||||||
|
<script type="application/json" id="reveal-hugo-page-params">{{ jsonify .Page.Params.reveal_hugo | safeJS }}</script>
|
||||||
|
<!-- load Reveal.js javascripts -->
|
||||||
|
<script src="{{ printf "%s/js/reveal.js" $reveal_location | relURL }}"></script>
|
||||||
|
<!-- load Reveal.js plugins -->
|
||||||
|
<script type="text/javascript">
|
||||||
|
// Hugo lowercases all params and Reveal.js needs camelcase
|
||||||
|
// So params in Hugo must be stored in snakecase and we camelize them here
|
||||||
|
function camelize(map) {
|
||||||
|
if (map) {
|
||||||
|
Object.keys(map).forEach(function(k) {
|
||||||
|
newK = k.replace(/(\_\w)/g, function(m) { return m[1].toUpperCase() });
|
||||||
|
if (newK != k) {
|
||||||
|
map[newK] = map[k];
|
||||||
|
delete map[k];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return map;
|
||||||
|
}
|
||||||
|
// pattern inspired by https://github.com/RealOrangeOne/hugo-theme-revealjs
|
||||||
|
var revealHugoDefaults = { center: true, controls: true, history: true, progress: true, transition: "slide" };
|
||||||
|
var revealHugoSiteParams = JSON.parse(document.getElementById('reveal-hugo-site-params').innerHTML);
|
||||||
|
var revealHugoPageParams = JSON.parse(document.getElementById('reveal-hugo-page-params').innerHTML);
|
||||||
|
// See all options - https://github.com/hakimel/reveal.js#configuration
|
||||||
|
var options = Object.assign({},
|
||||||
|
camelize(revealHugoDefaults),
|
||||||
|
camelize(revealHugoSiteParams),
|
||||||
|
camelize(revealHugoPageParams));
|
||||||
|
Reveal.initialize(options);
|
||||||
|
</script>
|
||||||
|
<!-- load Reveal.js plugins after Reveal.js is initialized -->
|
||||||
|
{{ if $.Param "reveal_hugo.load_default_plugins" | default true }}
|
||||||
|
{{ $default_plugins := slice "plugin/markdown/marked.js" "plugin/markdown/markdown.js" "plugin/highlight/highlight.js" "plugin/zoom-js/zoom.js" }}
|
||||||
|
{{ range $default_plugins }}
|
||||||
|
<script type="text/javascript" src="{{ printf "%s/%s" $reveal_location . | relURL }}"></script>
|
||||||
|
{{ end }}
|
||||||
|
<!-- always use local version of the notes plugin since HTML file it requires isn't on CDN -->
|
||||||
|
<script type="text/javascript" src="{{ "reveal-js/plugin/notes/notes.js" | relURL }}"></script>
|
||||||
|
{{ end }}
|
||||||
|
<!-- load custom plugins locally only (not CDN since many plugins won't exist there) -->
|
||||||
|
{{ range $.Param "reveal_hugo.plugins" }}
|
||||||
|
<script type="text/javascript" src="{{ . | relURL }}"></script>
|
||||||
|
{{ end }}
|
||||||
|
{{- $custom_js := $.Param "reveal_hugo.custom_js" -}}
|
||||||
|
{{- if $custom_js -}}
|
||||||
|
<script type="text/javascript" src="{{ $custom_js | relURL }}"></script>
|
||||||
|
{{- end -}}
|
||||||
|
|
@ -0,0 +1,28 @@
|
||||||
|
<!-- Theme used for presentation -->
|
||||||
|
{{- $reveal_location := $.Param "reveal_hugo.reveal_cdn" | default "reveal-js" -}}
|
||||||
|
{{- $highlight_location := $.Param "reveal_hugo.highlight_cdn" | default "highlight-js" -}}
|
||||||
|
{{- $custom_theme := $.Param "reveal_hugo.custom_theme" -}}
|
||||||
|
<link rel="stylesheet" href="{{ printf "%s/css/reset.css" $reveal_location | relURL }}">
|
||||||
|
<link rel="stylesheet" href="{{ printf "%s/css/reveal.css" $reveal_location | relURL }}">
|
||||||
|
{{- $custom_theme := $.Param "reveal_hugo.custom_theme" -}}
|
||||||
|
{{- if $custom_theme -}}
|
||||||
|
{{- $custom_theme_options := $.Param "reveal_hugo.custom_theme_options" | default dict -}}
|
||||||
|
{{- if $.Param "reveal_hugo.custom_theme_compile" -}}
|
||||||
|
{{ $asset := resources.Get $custom_theme | resources.ExecuteAsTemplate "_.scss" . | toCSS $custom_theme_options | minify | fingerprint }}
|
||||||
|
<link rel="stylesheet" href="{{ $asset.Permalink | relURL }}" id="theme">
|
||||||
|
{{- else -}}
|
||||||
|
<link rel="stylesheet" href="{{ $custom_theme | relURL }}" id="theme">
|
||||||
|
{{- end -}}
|
||||||
|
{{ else -}}
|
||||||
|
{{- $theme := $.Param "reveal_hugo.theme" | default "black" -}}
|
||||||
|
<link rel="stylesheet" href="{{ printf "%s/css/theme/%s.css" $reveal_location $theme | relURL }}" id="theme">
|
||||||
|
{{ end -}}
|
||||||
|
{{ if $.Param "reveal_hugo.load_default_plugins" | default true -}}
|
||||||
|
<!-- Theme used for syntax highlighting of code -->
|
||||||
|
{{- $highlight_theme := $.Param "reveal_hugo.highlight_theme" | default "default" -}}
|
||||||
|
<link rel="stylesheet" href="{{ printf "%s/%s.min.css" $highlight_location $highlight_theme | relURL }}">
|
||||||
|
{{- end }}
|
||||||
|
{{- $custom_css := $.Param "reveal_hugo.custom_css" -}}
|
||||||
|
{{- if $custom_css -}}
|
||||||
|
<link rel="stylesheet" href="{{ $custom_css | relURL }}" id="custom_css">
|
||||||
|
{{- end -}}
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<!-- override this partial to add content before the body tag closes -->
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<!-- override this partial to add content before the .reveal tag closes -->
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
<!-- override this partial to add content before the head tag closes -->
|
||||||
|
|
@ -0,0 +1,26 @@
|
||||||
|
<!-- Use the array of pages passed as a param -->
|
||||||
|
{{ range . -}}
|
||||||
|
<!-- Don't process empty content files -->
|
||||||
|
{{- if ne (len .Content) 0 -}}
|
||||||
|
<!-- Remove the <hr /> tag generated by blackfriday for footnotes -->
|
||||||
|
{{- $content := replace .Content "<div class=\"footnotes\">\n\n<hr />" "<div class=\"footnotes\">" -}}
|
||||||
|
<!-- <code> blocks processed by Hugo's highlighter have a data-lang attribute. For those, we disable -->
|
||||||
|
<!-- highlight.js by changing the language class to "nohighlight", and adding "data-noescape". -->
|
||||||
|
{{- $content := replaceRE `<code class="language-\w+"\s+data-lang="\w+"` `<code class="nohighlight" data-noescape` $content -}}
|
||||||
|
<!-- enable Highlight.js line numbers when the markdown code block language selection is followed by "{}" e.g. ```js{} -->
|
||||||
|
{{- $content := replaceRE `(<code class="language-\w+){}(">)` `$1" data-line-numbers>` $content -}}
|
||||||
|
<!-- enable Highlight.js line highlights when the language selection is followed by "{<line numbers>}" e.g. ```js{1,5-7} -->
|
||||||
|
{{- $content := replaceRE `(<code class="language-\w+){(\S+)}(">)` `$1" data-line-numbers="$2">` $content -}}
|
||||||
|
<!-- Support both <hr /> (blackfriday) and <hr> (mmark) -->
|
||||||
|
{{- $content := replace $content "<hr>" "<hr />" -}}
|
||||||
|
<!-- Split the processed content by <hr /> tag -->
|
||||||
|
{{- range (split $content "<hr />") -}}
|
||||||
|
<!-- Only wrap in <section> tag if not already wrapped by shortcode -->
|
||||||
|
{{- if not (in . "data-noprocess") -}}
|
||||||
|
<section>
|
||||||
|
{{- end -}}
|
||||||
|
{{- . | safeHTML -}}
|
||||||
|
</section>
|
||||||
|
{{- end -}}
|
||||||
|
{{- end -}}
|
||||||
|
{{- end }}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
<span class='fragment {{ .Get "class" }}'
|
||||||
|
{{ with .Get "index" }}data-fragment-index='{{ . }}'{{ end }}>
|
||||||
|
{{ .Get "c" }}
|
||||||
|
</span>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
{{/* Render .Inner before processing the shortcode. */}}
|
||||||
|
{{ $_hugo_config := `{ "version": 1 }` }}
|
||||||
|
<span class='fragment {{ .Get "class" }}'
|
||||||
|
{{ with .Get "index" }}data-fragment-index='{{ . }}'{{ end }}>
|
||||||
|
{{ .Inner }}
|
||||||
|
</span>
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
<section data-noprocess data-markdown
|
||||||
|
data-separator="^\r?\n---\r?\n$"
|
||||||
|
data-separator-vertical="^\r?\n------\r?\n$"
|
||||||
|
data-separator-notes="notes?:">
|
||||||
|
<script type="text/template">
|
||||||
|
{{ .Inner }}
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
{{/* Markdown is not rendered inside <aside> tags! So we use the following */}}
|
||||||
|
{{/* config which causes .Inner to be rendered before processing the shortcode. */}}
|
||||||
|
{{ $_hugo_config := `{ "version": 1 }` }}
|
||||||
|
<aside class="notes">{{ .Inner }}</aside>
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
{{/* Render .Inner before processing the shortcode. */}}
|
||||||
|
{{ $_hugo_config := `{ "version": 1 }` }}
|
||||||
|
<section data-shortcode-section>
|
||||||
|
{{ .Inner }}
|
||||||
|
</section>
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
{{- $scratch := .Scratch -}}
|
||||||
|
{{- $scratch.Set "slides" slice -}}
|
||||||
|
{{- $content := .Get "content" -}}
|
||||||
|
{{- if $content -}}
|
||||||
|
{{- $lookup := split $content "." }}
|
||||||
|
{{ $markdownContent := .Page.Site.Data }}
|
||||||
|
{{- range $dataPath := $lookup -}}
|
||||||
|
{{- $markdownContent = index $markdownContent $dataPath -}}
|
||||||
|
{{- end -}}
|
||||||
|
{{- $html := $markdownContent | markdownify -}}
|
||||||
|
{{- $html := replace $html "<hr>" "<hr />" -}}
|
||||||
|
{{- $slides := split $html "<hr />" -}}
|
||||||
|
{{- range $slides -}}
|
||||||
|
{{- $scratch.Add "slides" . -}}
|
||||||
|
{{- end -}}
|
||||||
|
{{- else -}}
|
||||||
|
{{- $scratch.Add "slides" "" -}}
|
||||||
|
{{- end -}}
|
||||||
|
{{- $params := . -}}
|
||||||
|
{{- $noPrefix := slice "id" "class" -}}
|
||||||
|
{{- $noOutput := slice "content" "template" -}}
|
||||||
|
{{- $template := $params.Get "template" -}}
|
||||||
|
{{- if $template -}}
|
||||||
|
{{- $scratch.Add "templateParams" slice -}}
|
||||||
|
{{- with $.Site.Params.reveal_hugo.templates -}}
|
||||||
|
{{- $scratch.Add "templateParams" . -}}
|
||||||
|
{{- end -}}
|
||||||
|
{{- if ne $.Page.File.LogicalName "_index.md" -}}
|
||||||
|
{{- $scratch.Add "templateParams" ($.Site.GetPage $.Page.Section).Params.reveal_hugo.templates -}}
|
||||||
|
{{- end -}}
|
||||||
|
{{- with $.Page.Params.reveal_hugo.templates -}}
|
||||||
|
{{- $scratch.Add "templateParams" . -}}
|
||||||
|
{{- end -}}
|
||||||
|
{{- $scratch.Add "templateParams" (slice $.Page.Params.reveal_hugo.templates) -}}
|
||||||
|
{{- $templateParams := $scratch.Get "templateParams" }}
|
||||||
|
{{- range $templateParams -}}
|
||||||
|
{{- if (ne . nil) -}}
|
||||||
|
{{- range $key, $value := (index . $template) -}}
|
||||||
|
{{- $scratch.SetInMap "template" $key $value | safeHTMLAttr -}}
|
||||||
|
{{- end -}}
|
||||||
|
{{- end -}}
|
||||||
|
{{- end -}}
|
||||||
|
{{- end -}}
|
||||||
|
{{- range $sindex, $svalue := $scratch.Get "slides" }}
|
||||||
|
<section data-noprocess data-shortcode-slide
|
||||||
|
{{- if $template -}}
|
||||||
|
{{- range $key, $value := ($scratch.Get "template") }}
|
||||||
|
{{- $attrName := cond (in $noPrefix $key) $key (delimit (slice "data" $key) "-") }}
|
||||||
|
{{ $attrName | safeHTMLAttr }}="{{ $value }}"
|
||||||
|
{{- end }}
|
||||||
|
data-template="{{ $template }}"
|
||||||
|
{{- end -}}
|
||||||
|
{{- range $key, $value := $.Params -}}
|
||||||
|
{{- if not (in $noOutput $key) -}}
|
||||||
|
{{- $attrName := cond (in $noPrefix $key) $key (delimit (slice "data" $key) "-") }}
|
||||||
|
{{ $attrName | safeHTMLAttr }}="{{ $value }}"
|
||||||
|
{{- end -}}
|
||||||
|
{{- end -}}>
|
||||||
|
{{ $svalue | safeHTML }}
|
||||||
|
{{- if ne $sindex (sub (len ($scratch.Get "slides")) 1) -}}
|
||||||
|
</section>
|
||||||
|
{{- end -}}
|
||||||
|
{{- end -}}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
[build]
|
||||||
|
command = "hugo -b $URL -s exampleSite"
|
||||||
|
publish = "exampleSite/public"
|
||||||
|
|
||||||
|
[context.production.environment]
|
||||||
|
HUGO_VERSION = "0.65.3"
|
||||||
|
|
||||||
|
[context.deploy-preview.environment]
|
||||||
|
HUGO_VERSION = "0.65.3"
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"scripts": {
|
||||||
|
"start": "hugo server -s exampleSite",
|
||||||
|
"build": "hugo -s exampleSite"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"npm": "^6.13.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue