Lab 06: CS631

class: center, middle, inverse, title-slide

# Lab 06: CS631
## Making Slides in the Tada!-verse
### Alison Hill

---

class: center, middle, inverse

# First:

## Slides with `xaringan`

# Second:

## Sites with `blogdown`

---
background-image: url("https://media.giphy.com/media/uELDhoOZdSnUk/giphy.gif")
background-size: cover

---
# The name<sup>*</sup>

The R package name `xaringan` was derived from Sharingan, a dōjutsu in the Japanese anime Naruto with two abilities:

- the "Eye of Insight"

- the "Eye of Hypnotism"

>"I think a presentation is basically a way to communicate insights to the audience, and a great presentation may even "hypnotize" the audience."~ Yihui Xie (author)

.footnote[
[\*] From Yihui: https://slides.yihui.name/xaringan/#37.
]
---

# xaringan

- Don't ask me how to pronounce it.

- We'll use it to make slides in R Markdown.

- Install it:

```r
devtools::install_github('yihui/xaringan')
```

You don't have to load it to use it.

---

# Let's do this

- File ➡️ New File ➡️ R Markdown ➡️ Click OK

- Delete everything but YAML

.pull-left[

```r
---
title: "Tada!"
author: "Alison Hill"
date: "May 15, 2018"
output: html_document
---
```
]

.pull-right[

```r
---
title: "Tada!"
author: "Alison Hill"
date: "May 15, 2018"
*output: xaringan::moon_reader
---
```
]

- Save. (save, save, save!)

---
# Knit to moon reader

- Must mouse over to `Knit` drop-down menu and select "Knit to moon_reader"

---
# Infinite moon reader

- Now mouse up to "Addins" and select `xaringan`: Infinite Moon Reader. 
    - This option does live preview of slides- every time you **SAVE** the Rmd document, the slides will be automatically reloaded in RStudio Viewer.

- From here on, you won't need to knit before using Infinite Moon Reader.

- In RStudio viewer pane, you can `right-click` to select "open frame in new window", or you can open open the file in your browser.

---
class: center, middle, inverse

# 🖼
## You should be looking at two slides right now!

---
class: center, middle, inverse

## Using `xaringan`

---
# WT* YAML?

- YAML = YAML Ain't No Markup Language (not helpful)

- aka "R Markdown front-matter"

- You can only have one YAML front-matter for each .Rmd file (multiple YAMLs will confuse moon reader!)

```yaml
---
variable: "value"
---
```

---
# Edit the YAML

I deleted the `date`.

```r
---
*title: "Lab 06: CS631"
*subtitle: "Working in the Tada!-verse"
author: "Alison Hill"
output: xaringan::moon_reader
---
```

---
# Slide separators

.pull-left[
- The first slide starts right away.

- New slides are separated by three dashes in a row `---` on a line by itself (recommend keeping an empty line before)
]

.pull-right[
```
# Slide 1
This is slide 1

---
# Slide 2
This is slide 2
```
]

---
# Know your markdown

https://www.markdowntutorial.com

You can use markdown to do [links](https://www.markdowntutorial.com), *italics*, and **bold**.

.pull-left[
You can also:

- do
- bullets
- plus
  - nested
- lists
  - if you like
]

.pull-right[
```
1. or
1. numbered
1. lists
1. too
```

1. or
1. numbered
1. lists
1. too
]

---
# Pro-tip!

In RStudio, mouse over to Help ➡️ Markdown Quick Reference!

![](../images/markdown-quick-reference.png)

---
# Align your slides

Use the [`class` property](https://github.com/gnab/remark/wiki/Markdown#class) on the line immediately after the slide break:

- `class:`
    - `inverse`
    - `center` 
    - `left` (default)
    - `right` 
    - `middle` (vertically)
    - `bottom` 
    - `top` (default)

You can combine any of these using commas to separate. All my blue background slides are created with:

```
---
class: inverse, middle, center
```

---
# Title your slides
## This font is smaller

Slide titles and text follow Markdown formatting:
- A big title uses `#`
- But you can also use `##`

Try creating a new slide that uses 2 or more classes and has a big title!

```
---
class: inverse, middle, center
# Title your slides
## This font is smaller
```

---
# Two column slides

Another nice built-in CSS feature is `.pull-left[ ]` and `.pull-right[ ]`

Try this:
```
.pull-left[
on your left
]

.pull-right[
on your right
]
```
--

You should see:

.pull-left[
on your left
]

.pull-right[
on your right
]

---
# Make an incremental slide

One of my favorite things about `xaringan` is the ability to make any slide, anywhere, incremental. To do this, use `--` (that is right, two dashes on a line alone- not three which is a slide break!)

```
easy

does

it
```

easy

does

---
## Do this with a two column slide!

.pull-left[
increment
]

.pull-right[
this!
]

---
# Full image slides

Use the [`background-image` property](https://github.com/gnab/remark/wiki/Markdown#background-image) right after slide break (`---`):

- `background-image: url("actual url or file path here")`
- `background-size: cover` --> image is scaled to fit into the slide.
- `background-position:` play with [this](https://www.w3schools.com/cssref/pr_background-position.asp)

Try this in a new slide:

```
---
background-image: url("http://bit.ly/cs631-donkey")
background-size: cover
```

---
class: inverse
background-image: url("http://bit.ly/cs631-donkey")
background-size: cover

---
# Adding images to slides

Use an R chunk (we haven't even done R yet!)

```r
knitr::include_graphics("http://bit.ly/cs631-pygmy")
```

---
# Adding images to slides

Set the chunk option to `{r echo = FALSE}` to just show the image:

---
## Use images in an incremental two column slide!

.pull-left[

]

.pull-right[

<img src="http://bit.ly/cs631-sheep" width="80%" style="display: block; margin: auto;" />
]

---
# Local images

`xaringan` requires that all local image file paths are *relative*.

What does that mean?

It means you cannot use `here` within a call to `knitr::include_graphics`.
- It will work locally, but not if you are pushing to GitHub for example.

2 options:

- Use markdown: `![](path/to/my/image.jpg)` (no quotes, and in plain text of Rmd!)

- Or (path in quotes now, and within an R code chunk!):

```r
knitr::include_graphics("path/to/my/image.jpg")
```

---
## Local image file paths

- This image now is saved in a subfolder of my *current* "slides" working directory.

- *If* I could use `here`, this is the file path: `here("slides", "images", "sheep.jpg")`

```r
include_graphics("images/sheep.jpg")
```

---
## Going up a level

- Use `../` to go to a folder one level up from the current folder

- This image now is saved in a subfolder of my *current* "project" working directory, which is a level ⬆️ from my "slides" folder.

- *If* I could use `here`, this is the file path: `here("images", "sheep.jpg")`

```r
include_graphics("../images/sheep.jpg")
```

---
# Now for some R!

---
# Control your R

Use in your code chunks:
- `fig.width=` (here I did 10.5)
- `fig.height=` (here I did 4)

---
# Control all of your R

You can do this for all code chunks in your **global chunk options**:

```r
knitr::opts_chunk$set(warning = FALSE, message = FALSE, 
                      fig.width = 10.5, fig.height = 4, 
                      comment = NA, rows.print = 16)
```

---
# Tables

If you want to generate a table, make sure it is in the HTML format (instead of Markdown or other formats), e.g.,

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

<table>
 <thead>
  <tr>
   <th style="text-align:right;"> Sepal.Length </th>
   <th style="text-align:right;"> Sepal.Width </th>
   <th style="text-align:right;"> Petal.Length </th>
   <th style="text-align:right;"> Petal.Width </th>
   <th style="text-align:left;"> Species </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:right;"> 5.1 </td>
   <td style="text-align:right;"> 3.5 </td>
   <td style="text-align:right;"> 1.4 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 4.9 </td>
   <td style="text-align:right;"> 3.0 </td>
   <td style="text-align:right;"> 1.4 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 4.7 </td>
   <td style="text-align:right;"> 3.2 </td>
   <td style="text-align:right;"> 1.3 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 4.6 </td>
   <td style="text-align:right;"> 3.1 </td>
   <td style="text-align:right;"> 1.5 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 5.0 </td>
   <td style="text-align:right;"> 3.6 </td>
   <td style="text-align:right;"> 1.4 </td>
   <td style="text-align:right;"> 0.2 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
  <tr>
   <td style="text-align:right;"> 5.4 </td>
   <td style="text-align:right;"> 3.9 </td>
   <td style="text-align:right;"> 1.7 </td>
   <td style="text-align:right;"> 0.4 </td>
   <td style="text-align:left;"> setosa </td>
  </tr>
</tbody>
</table>

---
# Play with CSS in YAML

```r
---
title: "Lab 06: CS631"
subtitle: "Working in the Tada!-verse"
author: "Alison Hill"
date: "May 15, 2018"
output: xaringan::moon_reader
---
```

```r
---
title: "Lab 06: CS631"
subtitle: "Working in the Tada!-verse"
author: "Alison Hill"
date: "May 15, 2018"
*output:
* xaringan::moon_reader:
*   css: [default]
---
```

---
# Play with CSS in YAML

Use a built-in theme:

```r
names(xaringan:::list_css())
```

```
 [1] "chocolate-fonts"  "chocolate"        "default-fonts"    "default"         
 [5] "duke-blue"        "fc-fonts"         "fc"               "hygge-duke"      
 [9] "hygge"            "ki-fonts"         "ki"               "kunoichi"        
[13] "lucy-fonts"       "lucy"             "metropolis-fonts" "metropolis"      
[17] "middlebury-fonts" "middlebury"       "ninjutsu"         "rladies-fonts"   
[21] "rladies"          "robot-fonts"      "robot"            "rutgers-fonts"   
[25] "rutgers"          "shinobi"          "tamu-fonts"       "tamu"            
[29] "uo-fonts"         "uo"               "uol-fonts"        "uol"             
```

```r
---
title: "Lab 06: CS631"
subtitle: "Working in the Tada!-verse"
author: "Alison Hill"
date: "May 15, 2018"
output: 
  xaringan::moon_reader:
*   css: [default, metropolis, metropolis-fonts]
---
```

---
# More YAML!

```r
---
title: "Lab 06: CS631"
subtitle: "Working in the Tada!-verse"
author: "Alison Hill"
date: "May 15, 2018"
output: 
  xaringan::moon_reader:
    css: [default, metropolis, metropolis-fonts]
*   nature:
*     highlightStyle: atelier-lakeside-light
*     highlightLines: true
*     countIncrementalSlides: false
---
```

- There are 79 [highlight styles](https://highlightjs.org/static/demo/)
- Let's look at highlight lines!

---
# Highlight lines

Use `#<<`!

.pull-left[

````
```{r example-plot}
library(ggplot2)
ggplot(mtcars) + 
  aes(mpg, disp) + 
  geom_point() +   #<<
  geom_smooth()    #<<
```
````
]

.pull-right[

```r
library(ggplot2)
ggplot(mtcars) + 
  aes(mpg, disp) + 
* geom_point() +
* geom_smooth()
```
]

---
class: center, middle
## Want more control, but less CSS?

https://pkg.garrickadenbuie.com/xaringanthemer/

---
# Slide notes & presenter mode

```
# Slide

Some content.

???
note to self
```

Type `p` on your keyboard to enter presentation mode- you should be able to view your presenter notes.

???
note to self

---
## Want more YAML? Who doesn't??

```r
rmarkdown::yaml_front_matter(knitr::current_input())
```

```
$title
[1] "Lab 06: CS631"

$subtitle
[1] "Making Slides in the Tada!-verse"

$author
[1] "Alison Hill"

$output
$output$`xaringan::moon_reader`
$output$`xaringan::moon_reader`$css
[1] "default"            "css/ohsu.css"       "css/ohsu-fonts.css"

$output$`xaringan::moon_reader`$lib_dir
[1] "libs"

$output$`xaringan::moon_reader`$nature
$output$`xaringan::moon_reader`$nature$highlightStyle
[1] "atelier-lakeside-light"

$output$`xaringan::moon_reader`$nature$highlightLines
[1] TRUE

$output$`xaringan::moon_reader`$nature$countIncrementalSlides
[1] FALSE
```

???
Credit: https://twitter.com/ma_salmon/status/997194865174859776

---
## Extra extra: stupid file paths for local images

`xaringan` requires that all local image file paths are *relative*.

What does that mean?

It means you cannot use `here` within a call to `knitr::include_graphics`.
- It will work locally, but not if you are pushing to GitHub for example.

2 options:

- Use markdown: `![](path/to/my/image.jpg)` (no quotes, and in plain text of Rmd!)

- Or (path in quotes now, and within an R code chunk!):

```r
knitr::include_graphics("path/to/my/image.jpg")
```

---
## Local image file paths

- This image now is saved in a subfolder of my *current* "slides" working directory.

- *If* I could use `here`, this is the file path: `here("slides", "images", "goat_yoga_in_slides-images.jpg")`

```r
include_graphics("images/goat_yoga_in_slides-images.jpg")
```

---
## Local image file paths- try2

- This image now is saved in a subfolder, called "images", of my *current* "slides" working directory.

- *If* I could use `here`, this is the file path: `here("slides", "images", "goat_yoga_in_slides-images.jpg")`

```r
include_graphics(fs::path_rel(here::here("goat_yoga_in_slides-images.jpg"), 
                              here::here()))
```

---
## Going up a level

- Use `../` to go to a folder one level up from the current folder

- This image now is saved in a subfolder of my *current* "project" working directory, which is a level ⬆️ from my "slides" folder.

- *If* I could use `here`, this is the file path: `here("images", "goat_yoga_in_images.jpg")`

```r
include_graphics("../images/goat_yoga_in_images.jpg")
```

---

```r
library(rprojroot)
fs::path_dir(thisfile())
```

```
[1] "/Library/Frameworks/R.framework/Versions/3.6/Resources/library/blogdown/scripts"
```

```r
# ugh this is where it needs to start!
```

---

```r
include_graphics(fs::path_rel(path = here::here("slides", 
                                                "images",
                                                "goat_yoga_in_slides-images.jpg"),  
                              start = fs::path_dir(rprojroot::thisfile())))
```

---

```r
include_graphics(fs::path_rel(path = here::here("slides", 
                                                "images",
                                                "goat_yoga_in_slides-images.jpg"), 
                              start = here::here("slides")))
```