index.Rmd

---
title: "`R` Xaringan Package Slide Deck"
subtitle: "ScPo template"
author: "Florian Oswald"
date: "SciencesPo Paris </br> `r Sys.Date()`"
output:
  xaringan::moon_reader:
    lib_dir: libs
    css: [default, "scpo.css", "scpo-fonts.css"]
    nature:
      beforeInit: ["js/ru_xaringan.js"]
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
      ratio: "16:9"
    includes:
      in_header: "./libs/partials/header.html"
---



```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```

background-size: 100%
background-image: url(https://media.giphy.com/media/94iS62lx8CRQA/giphy.gif)

???

Image test. Taken from google. 

---


background-size: 100%
background-image: url(https://media.giphy.com/media/J3GSVuDnnYeDEd4Nrr/giphy.gif)

???

Second Image test. Taken from google. 


---

layout: true
  
<div class="my-footer"><img src="./img/logo/ScPo-shield.png" style="height: 60px;"/></div> 

---

# Attribution

- This template is based on a fork of
[jvcasillas](https://github.com/jvcasillas/ru_xaringan) template for Rutgers University.

- I changed some small things in the CSS.
    1. Used SciencesPo Logos
    1. Added a ScPo logo in the footer of standard slides.
    
- The template is now here: https://github.com/ScPoEcon/scpo_xaringan. Visit to check out instructions.

---

# Maths without Beamer!

## You must be kidding me.

You can write $\LaTeX$ math expressions inside a pair of dollar signs, e.g. `$\alpha+\beta$` renders $\alpha+\beta$. (No blanks after `$`!). You can use the display style with double dollar signs:

```latex
$$\bar{X}=\frac{1}{n}\sum_{i=1}^nX_i$$
```

$$\bar{X}=\frac{1}{n}\sum_{i=1}^nX_i$$

--

## OK, fine. What about multiple lines?

---

# Multiple Lines of Math

```latex
$$\begin{align}
x &= 3 \\
y &= \log z  \\
\psi &= \int \frac{x}{y} dx
\end{align}$$
```

$$\begin{align}
x &= 3 \\
y &= \log{z} \\
\psi &= \int \frac{x}{y} dx
\end{align}$$

* Must be written *exactly* like that (no spaces or linebreaks)

---

# (Working) Code in a Slideshow?

- Sometimes it is useful to show code.

--

- Particularly when teaching.

--

- You want that code to *actually work* (i.e. not just copy and paste input and output into your slides). 

--

- Right?




---

# Standard slide with R code

This slide runs code and shows the output.


```{r tidy=FALSE, fig.width=12, fig.retina=2, fig.align='center',fig.height=5, warning=FALSE, message=FALSE}
library(tidyverse)
# can highlight lines of code!
ggplot(cars, aes(x = dist, y = speed)) + geom_point() + 
  {{ geom_smooth(method = 'lm', formula = y ~ poly(x, 2)) }}

```

---

# Slide with table

A table directly generared from `R` code.

```{r}
knitr::kable(head(iris), format = "html")
```

---

# Slide basics

- Unordered lists
  - can be created using "-"
  - and they can be nested using 2 or 4 spaces
- We can also make `blockquotes`
  - we can use `<ru-blockquote>text</ru-blockquote>` 
  - or `>`

<ru-blockquote>This is a blocked quote</ru-blockquote>

- Footnotes<sup>1</sup>

.footnote[
[1] Information here.
]

---

# More basics

### Ordered list

1. one
2. two 
3. three

--

- Spaced

--

- List

--

- with increments

--

An incremental 
--
sentence with 
--
separation.

---

layout: true
  
<div class="my-footer"></div> 

---
background-image: url(`r xaringan:::karl`)
background-position: 50% 50%
class: center, bottom, inverse

# You only live once!

---

layout: true
  
<div class="my-footer"><img src="./img/logo/ScPo-shield.png" style="height: 60px;"/></div> 

---
background-image: url("./img/logo/ScPo-econ.png")
background-position: 90% 50%
background-size: 300pt

# Another example

### Lists to the left

- We can place images
- anywhere on the screen
- by using **background-image**
- in conjunction with 
- **background-position**

### Image to the right

- This can replicate my 'float right' hack
- We can control the 
- size of the image
- by using the 
- **background-size** option

---

layout: true
  
<div class="my-footer"></div> 

---
class: center, middle


# Text adjustments

--

It is also possible to change the .blue[color] of any  
text by using... 

--

    .color[text here]

--

For example

--

    .grey[grey]

--

will make text .grey[grey]

--

We can do this with white, .grey[grey], .black[black], .RUred[red] and .blue[blue]. 

--

To really make text stand out we can just use \*\*text\*\* like **this**.

---

layout: true
  
<div class="my-footer"><img src="./img/logo/ScPo-shield.png" style="height: 60px;"/></div> 


---

# Two columns!

.pull-left[

### Some things on the left

1. List of things

1. Plain Markdown;

1. blah blah

1. Plain Markdown;

]

--

.pull-right[

### and other things on the right

1. We do this by using the 

1. \.pull-left[] and \.pull-right[]

1. commands. Just put any text inside the 

1. brackets and you're good to go

]

---

# R code and highlighting (I never use this)

.pull-left[
An example using a leading `*`:

    ```r
    if (TRUE) {
    ** message("Very important!")
    }
    ```
Output:
```r
if (TRUE) {
* message("Very important!")
}
```

This is invalid R code, so it is a plain fenced code block that is not executed.
]

.pull-right[
An example using `{{}}`:

    `r ''````{r tidy=FALSE}
    if (TRUE) {
    *{{ message("Very important!") }}
    }
    ```
Output:
```{r tidy=FALSE}
if (TRUE) {
{{ message("Very important!") }}
}
```

It is valid R code so you can run it.
]

---
class: middle, bottom
background-image: url(./img/logo/ScPo-shield.png)
background-size: contain

### <grey>You can</grey>  
### <grey>fill the</grey>  
### <grey>screen with </grey>  
### **background-size: contain**

---

# Macros

- We can insert javascript macros into our presentations
- For example, if we put the following code into `macros.js`...

```js
remark.macros.scale = function (percentage) {
  var url = this;
  return '<img src="' + url + '" style="width: ' + percentage + '" />';
};
```

- ...we can use the markdown call to resize images...

```md
![:scale 25%](./img/logo/ScPo-econ.png)
```

- These calls can also be put inside html divs so as to control where they appear. 

<div align="center">
![:scale 20%](./img/logo/ScPo-econ.png)
</div>

- All we need to do is include `beforeInit: "macros.js"` under nature in our YAML front matter

---

# ScPo stuff

### General

- The theme was designed to work with a 16:9 aspect ratio
- Set the aspect ratio under the **nature** output parameter...  
    nature:  
      &nbsp; &nbsp; ratio: "16:9"


### Sections

- We can create section dividers with ScPo red and grey by using the `class` call:

```md
class: title-slide-section-red
```

or 

```md
class: title-slide-section-grey
```

---
class: title-slide-section-red

# ScPo red section divider

### This is the H3 font color

- Our text goes here

- We can use **bold**

- and .blue[blue]

- and also .grey[grey]

---
class: title-slide-section-grey

# ScPo grey section divider

### This is the H3 font color

- Our text goes here

- We can use **bold**

- and .blue[blue]

- and also .black[black]

---

# Tables

### Centering

- Tables are centered by default in **xaringan**. 
- We can override this using...

    .pull-left[], .pull-right[], etc. 


.pull-right[

|  This |  is |   a    |    Table     |
| :---- | :-- | :----- | :----------: |
| It is | now | pulled | to the right |
| 12    | 34  | 56     |      78      |

]

---
background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg)
background-size: 100px
background-position: 90% 8%

# xaringan

- Press `h` or `?` to see the possible ninjutsu you can use in remark.js.

- You can see all the goodies like this.

- Check out more in-depth tutorial [here](https://slides.yihui.name/xaringan/#1)

---
class: title-slide-final, middle
background-image: url(./img/logo/ScPo-Econ.png)
background-size: 250px
background-position: 9% 19%

# Thanks!

## This is the final slide

### you can add your email, twitter, github, etc. info here

Here is an example:  

|                                                                                                            |                                   |
| :--------------------------------------------------------------------------------------------------------- | :-------------------------------- |
| <a href="mailto:florian.oswald@sciencespo.fr">.ScPored[<i class="fa fa-paper-plane fa-fw"></i>]               | florian.oswald@sciencespo.fr       |
| <a href="https://scpoecon.github.io/scpo_xaringan">.ScPored[<i class="fa fa-link fa-fw"></i>] | slides |
| <a href="http://twitter.com/ScPoEcon">.ScPored[<i class="fa fa-twitter fa-fw"></i>]                          | @ScPoEcon                         |
| <a href="http://github.com/ScPoEcon">.ScPored[<i class="fa fa-github fa-fw"></i>]                          | @ScPoEcon                       |