index.qmd

---
title: "Template Revealjs Quarto site"
# format: revealjs
author:
  - name: Your Name
    orcid: 0000-0000-0000-0000
    email: email@address.work
    affiliations: Employers Name
from: markdown+emoji
format:
  clean-revealjs:
    incremental: false
    slide-number: true
    show-slide-number: speaker
    auto-stretch: false
    chalkboard: true
    # embed-resources: true
    # standalone: true
    header: Quarto RevealJS Template
revealjs-plugins:
  - confetti
footer: "**Slides** : [**github-username.github.io/<repository>**](https://github-username.github.io/<repository>)"
project:
  preview:
    port: 7864
    host: localhost
    watch-inputs: true
filters:
  - openlinksinnewpage
  - reveal-header
---

## Scan This

{{< qrcode <https://ns-rse.github.io/quarto-revealjs-template> qr1 width=400 height=400 >}}

[ns-rse.github.io/quarto-revealjs-template](https://ns-rse.github.io/quarto-revealjs-template)

## Quarto RevealJS Slides

This is a [Quarto](https://quarto.org/) template for creating [RevealJS](https://revealjs.com/) slides.

The template can be used as a starting point for your own slides and includes a number of different layouts and examples
of Markdown syntax, slide layout, links, embedding images and configuration options.

## Formatting

Quarto slides are written in [Markdown](https://quarto.org/docs/authoring/markdown-basics.html).

| Markdown Syntax                              | Output                                |
|:---------------------------------------------|:--------------------------------------|
| `*italics*`, `**bold**`, `***bolditalics***` | *italics*, **bold**, **bold italics** |
| `superscript^1^`, `subscript~2~`             | superscript^1^, subscript~2~          |
| `~~strikethrough~~`                          | ~~strikethrough~~                     |
| ```code```                                   | `code`                                |
| `[Quarto](https://quarto.org)`               | [Quarto](https://quarto.org)          |

::: {.notes}
Speaker Notes can be added to each slide. **Formatting** can be used here too.
:::

## Columns and Lists

Slides can have columns and you can create [lists](https://quarto.org/docs/authoring/markdown-basics.html#lists) of
different types.

:::: {.columns}

::: {.column width="50%"}
**ToDo** (code)

```markdown
+ Learn Markdown
+ Create Quarto Slides
+ Publish on GitHub
```

:::

::: {.column width="50%"}
**ToDo** (Rendered)

+ Learn Markdown
+ Create Quarto Slides
+ Publish on GitHub

:::
::::

::: {.notes}
Slides can have columns and we can create unordered lists.
:::

## Columns and Lists (cont.)

:::: {.columns}

::: {.column width="50%"}
**Ordered** (code)

```markdown
1. A comes before
2. B which is followed by
3. C
```

:::

::: {.column width="50%"}
**Ordered** (Rendered)

1. A comes before
2. B which is followed by
3. C

:::
::::

::: {.notes}
Or ordered lists.
:::

## Tables

You can manually add [tables](https://quarto.org/docs/authoring/markdown-basics.html#tables).

:::: {.columns}

::: {.column width="50%"}

```markdown
| Right | Left | Default | Center |
|------:|:-----|---------|:------:|
|   12  |  12  |    12   |    12  |
|  123  |  123 |   123   |   123  |
|    1  |    1 |     1   |     1  |
```

:::
::: {.column width="50%"}

| Right | Left | Default | Center |
|------:|:-----|---------|:------:|
|   12  |  12  |    12   |    12  |
|  123  |  123 |   123   |   123  |
|    1  |    1 |     1   |     1  |

:::
::::

::: {.notes}
Tables can be added, but there is a better way to include these programatically
:::

## Equations

| Markdown Syntax                    | Output                       |
|:----------------------------------:|:-----------------------------|
| `inline math $E = mc^{2}$`         | inline math $E = mc^{2}$     |
| ```display math: $$E = mc^{2}$$``` | display math: $$E = mc^{2}$$ |

::: {.notes}
You can write equations if you need to.
:::

## Embed Images

[Figures](https://quarto.org/docs/authoring/figures.html) can be embeded using a URL and resized.

```markdown
![Relaxing in the Julian Alps](https://live.staticflickr.com/65535/53144704609_c5e6fa8c77_k.jpg){width=700}
```

![Relaxing in the Julian Alps](https://live.staticflickr.com/65535/53144704609_c5e6fa8c77_k.jpg){width=700}

::: {.notes}
:::

## Embed Images (*cont.*)

You can also include images locally.^[Make sure to `git add` them otherwise they won't publish] and make them hyperlinks.

```markdown
![[OSC Sheffield](https://osc-international.com/osc-sheffield)](img/OSC_Sheffield.png){width=300}
```

![[OSC Sheffield](https://osc-international.com/osc-sheffield)](img/OSC_Sheffield.png){width=300}

::: {.notes}
:::

## R code

:::: {.columns}

::: {.column width="50%"}
Include [R code and output](https://quarto.org/docs/computations/r.html) with automatic referencing (see @fig-airquality2)

```{r}
#| label: fig-airquality
#| fig-cap: "Temperature and ozone level."
#| warning: false
#| eval: false
#| echo: true
library(ggplot2)

ggplot(airquality, aes(Temp, Ozone)) +
  geom_point() +
  geom_smooth(method = "loess")
```

:::
::: {.column width="50%"}

```{r}
#| label: fig-airquality2
#| fig-cap: "Temperature and ozone level."
#| warning: false

library(ggplot2)

ggplot(airquality, aes(Temp, Ozone)) +
  geom_point() +
  geom_smooth(method = "loess")
```

:::

::::

::: {.notes}
[R](https://www.r-project.org/) code can be embeded and executed to produce tables and figures.
:::

## Python code

::: {.column width="50%"}
Include [Python code and output](https://quarto.org/docs/computations/python.html) too

```{.python}
#| label: fig-polar
#| fig-cap: "A line plot on a polar axis."
#| warning: false
#| eval: false
#| echo: true
import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(
  subplot_kw = {'projection': 'polar'}
)
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
```

:::
::: {.column width="50%"}

```{.python}
#| label: fig-polar2
#| fig-cap: "A line plot on a polar axis."
#| warning: false
#| eval: true
#| echo: true
import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(
  subplot_kw = {'projection': 'polar'}
)
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
```

:::
::::

::: {.notes}
You can include [Python](https://www.python.org) code too
:::

## General code

There are lots of options for showing, hiding, highlighting [code
blocks](https://quarto.org/docs/presentations/revealjs/#code-blocks).

```{.python code-line-numbers="6-8"}
#| eval: true
#| echo: true
import numpy as np
import matplotlib.pyplot as plt

r = np.arange(0, 2, 0.01)
theta = 2 * np.pi * r
fig, ax = plt.subplots(subplot_kw={'projection': 'polar'})
ax.plot(theta, r)
ax.set_rticks([0.5, 1, 1.5, 2])
ax.grid(True)
plt.show()
```

## The Documentation is Good

The official documentation is really good.

+ [Get Started](https://quarto.org/docs/get-started/)
+ [Markdown Basics](https://quarto.org/docs/authoring/markdown-basics.html)
+ [Guide](https://quarto.org/docs/guide/) with many sections on [Presentations](https://quarto.org/docs/presentations/)
  [Website](https://quarto.org/docs/websites/), [Books](https://quarto.org/docs/books/) and more.

## Extensions

:::: {.columns}

::: {.column width="70%"}
[Extensions](https://quarto.org/docs/extensions/) for themes and other functionality
(press `c` whilst viewing these slides :wink: ).

+ [Shortcode/Filter](https://quarto.org/docs/extensions/listing-filters.html)
+ [Journal Articles](https://quarto.org/docs/extensions/listing-journals.html)
+ [Custom Formats](https://quarto.org/docs/extensions/listing-formats.html)
+ [**RevealJS**](https://quarto.org/docs/extensions/listing-revealjs.html)
+ [awesome-quarto](https://github.com/mcanouil/awesome-quarto) - Quarto tools & examples

:::
::: {.column width=30%}
This Template...
{{< qrcode <https://ns-rse.github.io/quarto-revealjs-template> qr2 width=400 height=400 >}}
:::
::::