Distill

class: center, middle, inverse, title-slide

# <span class="title">Distill</span>
## <span class="subtitle">for R Markdown</span>
### <span class="author">Michael Clark</span>
### <span class="institute">m-clark.github.io <br> <span class="citation">@statsdatasci</span> <br><br><br> CSCAR, UM</span>
### <span class="date">2020-12-08</span>

---

class: inverse

background-image: url(https://github.com/m-clark/m-clark.github.io/raw/master/img/Rlogo.svg)

<div>
<style type="text/css">.xaringan-extra-logo {
width: 5%;
height: 128px;
z-index: 0;
background-image: url(https://raw.githubusercontent.com/m-clark/m-clark.github.io/master/img/mc_logo.png);
background-size: contain;
background-repeat: no-repeat;
position: absolute;
bottom:-3em;left:1em;
}
</style>
<script>(function () {
  let tries = 0
  function addLogo () {
    if (typeof slideshow === 'undefined') {
      tries += 1
      if (tries < 10) {
        setTimeout(addLogo, 100)
      }
    } else {
      document.querySelectorAll('.remark-slide-content:not(.title-slide)')
        .forEach(function (slide) {
          const logo = document.createElement('a')
          logo.classList = 'xaringan-extra-logo'
          logo.href = 'https://m-clark.github.io'
          slide.appendChild(logo)
        })
    }
  }
  document.addEventListener('DOMContentLoaded', addLogo)
})()</script>
</div><style>.shareagain-bar {
--shareagain-foreground: rgb(255, 255, 255);
--shareagain-background: rgba(0, 0, 0, 0.5);
--shareagain-facebook: none;
--shareagain-pinterest: none;
--shareagain-reddit: none;
}</style>

---
class: inverse middle center

### **Introduction**
### **Demonstration of Features**
### **Overview of Websites**

---
class: inverse

# Goals

- To demonstrate a Distill article
  - Can be used as default Rmd
  - Serves as basis for website
  
- Have knowledge of what it offers over other formats
- Provide a sense of what is required for building a website

---
class: inverse middle center animated rollIn rollOut # https://animate.style/

# What is Distill?

---
class: inverse

# Basics

From RStudio:

> Distill for R Markdown is a web publishing format optimized for scientific and technical communication

> Features essential to technical writing like LaTeX math, citations, and footnotes.

> Flexible figure layout options (e.g. displaying figures at a larger width than the article text).

> A variety of ways to publish articles, including support for publishing sets of articles as a Distill website or as a Distill blog.

---
class: inverse

# Basics

All you have to do to get started is install the package...

```r
install.packages('distill')
```

---
class: inverse

# Basics

Now open up a new markdown via templates.

`File/New File/R Markdown/From Template/Distill Article`

---
class: inverse

# Starting Out

Let's try it out for ourselves!

---
class: inverse

# Summary of Article Features

- Nice, clean look from the start
- Geared toward scientific presentation
- Good support for citations, and making your work easily citable
- Code is clean and linkable
- Multiple visualization layout options

---
class: inverse middle center animated zoomIn # https://animate.style/

# Websites!

---
class: inverse

# Websites

Besides articles, you can create your own blog/website with Distill.

Why?
- Professional requirement
- Blogging can help you, help others

Requirement:
- Somewhere to host it

---
class: inverse middle center

# Publishing Options

RStudio Connect

GitHub Pages

Netlify

Google Firebase

Site44 (Dropbox)

Amazon S3

Other services

---
class: inverse center animated bounceIn bounceOut

# I Use GitHub!

---
class: inverse

# Why GitHub?

- A programming oriented community 💻

- Lots of data science 📈

- Lots of <i class="fab fa-r-project"></i> users

- Distill has configuration for GH pages 😎

- Did I mention... free? 💵

- Every repository you create will automatically be linkable from your site 🔗

---
class: inverse

# What You Need for GitHub

- An account

- A repository for your website 
  - account-name.github.io

- A minimal understanding of Git
  
- Set repo to do GitHub pages

---
class: inverse

# What You Need for a Distill Website

- Create a new RStudio project
- Choose Distill website

![](img/create-website.png)

---
class: inverse

# What You Need for a Distill Website

![](img/create-website2.png)

---
class: inverse

# My approach

Blog post:

- Basic distill article with some extras 
    - in the `_posts` directory
- Draft mode (don't publish until ready!)
- Tags, Categories, etc.
- When ready, 'build' the site
    - Same as you would an R package

---
class: inverse

# My approach

Bookdown:
- Create a repo
- Create a bookdown document
- Now linkable 
      - m-clark.github.io/new_bookdown/

Slides, or any other doc... same as bookdown

---
class: inverse

# Websites

Some additional files required:

- *_site.yaml*
    - Controls navbar and layout
    - Set the output_dir within _site.yml to match the repository directory your site is served from. (e.g. `"."`)

- *.nojekyll*
    - empty file to keep GitHub from using defaults

- Use a Distill theme or your own custom css

---
class: inverse middle center animated rollIn rollOut # https://animate.style/

# Enjoy Distill!

.pull-left[

<img src="img/RMarkdownOutputFormats.png" width="75%" style="display: block; margin: auto;" />
]

.pull-right[
<img src="img/distill-hex.png" width="75%" style="display: block; margin: auto;" />

]