-
Notifications
You must be signed in to change notification settings - Fork 1
/
template.qmd
297 lines (199 loc) · 5.55 KB
/
template.qmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
---
title: UNHCR Quarto Theme
subtitle: For revealjs
format: unhcr-revealjs
embed-resources: true
---
## Presentation with Quarto
- Quarto integrates with Reveal.js to create stunning slideshows.
- Markdown syntax is used to structure and format content.
- Craft a finished **UNHCR branded** presentation with this template.
- Seamlessly weave together content and executable code.
To learn more about Quarto presentations see <https://quarto.org/docs/presentations/>.
## Presentation title
- YAML arguments define the content of the title slide.
- Add arguments as needed
```{yaml}
#| echo: true
#| eval: false
---
title: UNHCR Quarto Theme
subtitle: For revealjs
author: Cedric Vidonne
institute: IPDA
date: last-modified
format: unhcr-revealjs
---
```
## Basic slides
- Each slide starts with a level 2 heading (`## Slide 1`). For example:
```{markdown}
#| echo: true
#| eval: false
## Slide 1
Some content for slide 1
## Slide 2
Some content for slide 2
```
## Section slides
- A section starts with a level 1 heading (`# Section 1`). For example:
```{markdown}
#| echo: true
#| eval: false
# Section 1
Some content for section 1
```
# Section
Example of a section slide
# UNHCR section {.slide-blue}
Add `{.slide-blue}` class to make it UNHCR blue
## Lists
- To add bullet points to a slide, use the Markdown list syntax.
- Works the same way with numbered lists. For example:
```{markdown}
#| echo: true
#| eval: false
- Item 1
- Item 1.1
- Item 1.2
- Item 2
- Item 3
```
## Incremental list
- By default the lists are **not** incremental.
- Add the `{.incremental}` class, so each bullet will appear separately.
```{markdown}
#| echo: true
#| eval: false
::: {.incremental}
- Item 1
- Item 2
:::
```
::: {.incremental}
- This is the 1<sup>st</sup> incremental bullet.
- And here the 2<sup>nd</sup>.
:::
::: {.aside}
Include `incremental:true` in the YAML to set it globally.
:::
## Incremental content
- Use `. . .` to separate content and turn it incremental.
- Any content can be incremental. For example:
```{markdown}
#| echo: true
#| eval: false
This will appear first
. . .
And then that!
```
## UNHCR helpers
**Text**
- Use `{.text-blue}` to apply [UNHCR blue]{.text-blue} color
- Use `{.text-grey}` for [lighter text]{.text-grey} color
**Background**
- Use `{.bg-blue}` for [light blue]{.bg-blue} background
- Use `{.bg-grey}` for [light grey]{.bg-grey} background
::: {.aside}
For dark background slides use `{.text-yellow}` and `{.bg-yellow}` classes
:::
## Columns
- To create columns, use a `div` container with class `{.columns}`, containing two or more `div` containers with class `{.column}` and a `width` attribute. For example:
```{markdown}
#| echo: true
:::: {.columns}
::: {.column width="40%"}
Left column
:::
::: {.column width="60%"}
Right column
:::
::::
```
## Images
- To insert an image, use the Markdown image syntax. For example:
```{markdown}
#| echo: true
![](path/to/image.jpg)
```
![](https://raw.githubusercontent.com/vidonne/unhcrdown/master/inst/resources/img/cover-example.jpg)
## Code
- To include code, use fenced code blocks with a language specifier.
- By default the `echo` parameter of code block is set to `false`, turn it to `true` to see the code and the result.
```{markdown}
#| echo: true
\```{r}
#| echo: true
#| warning: false
library(tidyverse)
library(unhcrthemes)
\```
```
## Plots
- Use the [`{unhcrthemes}`](https://vidonne.github.io/unhcrthemes/) package to produce UNHCR branded plots directly in the presentation. For example:
```{r}
#| label: idp-plot
#| fig-align: center
library(tidyverse)
library(unhcrthemes)
dplyr::count(mpg, class) |>
dplyr::arrange(n) |>
dplyr::mutate(class = factor(class, levels = class)) |>
ggplot(aes(n, class)) +
geom_col(fill = unhcr_pal(n = 1, "pal_blue")) +
geom_text(aes(label = n), hjust = 0, nudge_x = 1) +
labs(
title = "Simple bar chart with labels using ggplot",
subtitle = "This plot shows the default style of theme_unhcr()",
caption = "Source: mtcars"
) +
scale_x_continuous(expand = expansion(c(0, 0.1))) +
theme_unhcr(grid = FALSE, axis = "y", axis_title = FALSE, axis_text = "y")
```
## Tables
- Use `knitr::kable()` function for simple table. For example:
```{r}
#| label: kable-ex
#| echo: false
#| eval: true
knitr::kable(head(select(mtcars, mpg, cyl, disp), n = 3))
```
## More tables
- Many packages can help you stylize tables, like `{gt}`, `{dt}` and more.
- Use them to customize further the table design in your presentations.
::: columns
::: {.column width="50%"}
```{r}
#| label: gt-ex
#| echo: true
#| eval: false
gt::gt(head(mtcars))
```
:::
::: {.column width="50%"}
```{r}
#| label: gt-ex
#| eval: true
```
:::
:::
## Speaker Notes:
- You can add speaker notes to your slides that are only visible to the presenter during the presentation.
- To add speaker notes, use the following syntax:
```{markdown}
#| echo: true
## Slide with speaker notes
Slide content
::: {.notes}
Speaker notes go here.
:::
```
## Exporting into PDF
- Toggle into Print View using the `E` key (or using the [Navigation Menu](https://quarto.org/docs/presentations/revealjs/presenting.html#navigation-menu)).
- Open the in-browser print dialog (CTRL/CMD+P).
- Change the destination setting to **Save as PDF**.
- Find more info on the print to PDF settings [here](https://quarto.org/docs/presentations/revealjs/presenting.html#print-to-pdf).
## More Information
You can learn more about controlling the appearance and layout of RevealJS output here: <https://quarto.org/docs/presentations/revealjs/>
# Thank you {.slide-blue}
Enjoy the template!