demo.qmd

---
title: "Github Pages 🍦"
title-slide-attributes: 
  data-background-color: "#bdcad4"
  data-background-size: contain
format: 
  revealjs:
    theme: [default,assets/another.scss]
    chalkboard: true
    page-layout: custom
    margin: 0
echo: true
revealjs-plugins:
  - codewindow
editor: visual
knitr: true
---

#  {background-color="#bdcad4"}

![](images/Screen%20Shot%202023-09-07%20at%2010.41.36%20AM.png){style="myframe"}

# examples {background-color="#bdcad4"}

::: {layout-ncol="2"}
## R

```{=html}
<iframe width="500" height="500" src="https://dplyr.tidyverse.org/" title="Quarto Documentation" class="myframe"></iframe>
```
## Python

```{=html}
<iframe width="500" height="500" src="https://pandas.pydata.org/" title="Quarto Documentation" class="myframe"></iframe>
```
:::

# open a quarto project {background-color="#bdcad4"}

![](images/ezgif-5-4bfe38e796.gif){.myframe}

# files {background-color="#bdcad4"}

::: columns
::: {.column width="50%"}
::: {.codewindow width="500px"}
```{sass eval=FALSE}
#| code-line-numbers: false
.
├── _quarto.yml
├── about.qmd
├── index.qmd
├── make-ghpage-doc.Rproj
└── styles.css

1 directory, 5 files
```
:::
:::

::: {.column width="50%"}
-   `_quarto.yml` yaml for all documents
-   `about.qmd` example `qmd` file
-   `index.qmd` main document, [keep this]{.dark-blue}
-   `.Rproj` R project file
-   `styles.css` add spice to the site
:::
:::

------------------------------------------------------------------------

::: columns
::: {.column width="50%"}
::: {.codewindow .sass}
styles.css

```{sass eval=FALSE}
#| code-line-numbers: false
.pink {
  color: pink;
}
```
:::

::: {.codewindow .r}
index.qmd

```{sass eval=FALSE}
#| code-line-numbers: false
---
title: "make-ghpage-doc"
---

This is a Quarto website.

To learn more about Quarto websites visit <https://quarto.org/docs/websites>.


```
:::
:::

::: {.column width="50%"}
::: codewindow
\_quarto.yml

```{yaml eval=FALSE}
#| code-line-numbers: "6-10|"
project:
  type: website

website:
  title: "make-ghpage-doc"
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true

editor: visual
```
:::
:::
:::

# nav bar {background-color="#bdcad4"}

```{=html}
<iframe width="1000" height="500" src="https://edenian-prince.github.io/testing/" title="Quarto Documentation" class="myframe"></iframe>
```
# add more files {background-color="#bdcad4"}

::: {layout-ncol="2"}
::: {.column .express width="20%"}
```{sass}
#| code-line-numbers: "|6-9|"
#| eval: false
#| classes: myframe
folder tree
.
├── _quarto.yml
├── about.qmd
├── fancy-site-doc.Rproj
├── home
│   ├── how_to.qmd
│   ├── link_code.qmd
│   └── renv.qmd
├── index.qmd
├── plots
│   └── plot1.qmd
├── scripts
│   └── script.qmd
├── styles.css
└── styles.scss

4 directories, 11 files
```
:::

::: {.column width="80%"}
```{sass eval=FALSE}
#| code-line-numbers: "5-23|"
#| classes: myframe
_quarto.yml
project:
  type: website

website:
  title: "fancy-site-doc"
  navbar:
    left:
      - text: Home
        menu: 
          - href: index.qmd
            text: "0: Intro"
          - href: home/how_to.qmd
            text: "1: How to create this doc"
          - href: home/link_code.qmd
            text: "2: How to link code to doc"
          - href: home/renv.qmd
            text: "3: Virtual Environments"
      - text: Scripts
        menu:
          - href: scripts/script.qmd
            text: "0: my script"
      - text: Plots
        menu: 
          - href: plots/plot1.qmd
            text: "0: my plot"

format:
  html:
    theme: cosmo
    css: styles.css
    scss: styles.scss
    toc: true

editor: visual
```
:::
:::

# idk {background-color="aquamarine"}

:::{.express}
```{r}
#| eval: false
#| classes: myframe
#| code-line-numbers: "1-2"
mtcars |>
  filter(color==5) %>%
  mutate(hello=15)
# a comment

```
:::
# nav bar results {background-color="#bdcad4"}

```{=html}
edenian-prince.github.io/quarto-site/
<iframe width="1000" height="500" src="https://edenian-prince.github.io/quarto-site/" title="Quarto Documentation" class="myframe"></iframe>
```
# link external code to documentation

::: {layout-ncol="2"}
::: {.codewindow width="500px"}
external_script.R

```{r eval=FALSE}
#| code-line-numbers: "8,12"
# ----- Read in Libraries ----- #
## ---- libraries
library(dplyr)
library(magrittr)
## ---- stop

# ----- Read in the File ----- #
## ---- read-chunk
(df <- airquality %>%
  arrange(desc(Month)) %>%
  as_tibble())
## ---- stop
```
:::

::: {.codewindow width="500px"}
scripts/script.qmd

```{r read-chunk}
#| echo: fenced
#

```
:::
:::

# github actions - let's automate 🍕

# github actions

::: {.codewindow .sass width="500px"}
.github/workflows/quarto-publish.yml

```{sass}
#| eval: false
on:
  workflow_dispatch:
  push:
    branches: main

name: Quarto Publish

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - name: Check out repository
        uses: actions/checkout@v3

      - name: Set up Quarto
        uses: quarto-dev/quarto-actions/setup@v2
        
      - name: Setup Renv
        uses: r-lib/actions/setup-renv@v2

      - name: Render and Publish
        uses: quarto-dev/quarto-actions/publish@v2
        with:
          target: gh-pages
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
```
:::

# github actions

![](images/Screen%20Shot%202023-09-07%20at%206.08.31%20PM.png){.myframe}

# scss/css/sass

::: {.codewindow .sass width="500px"}
styles.scss

```{sass eval=FALSE}
/*-- scss:defaults --*/
/* potential themes */
$light-blue: #ABBECB;
$back-blue: #160e1d;
$med-back-blue: #274E5A;
$crash-blue: #88AEB3;
$fade-blue: #BDCFD4;
$text-blue: #DEE2E2;
$light-back : #bdcad4;

/*-- scss:rules --*/
.myframe {
  box-shadow: $back-blue 10px 5px 5px 0px;
}

.slide1{
  h1 {
    font-size: 1.5em;
    color: $text-blue;
    z-index: 1;
  }
  h2, p, pre {
    color: $text-blue;
    font-size: 2em;
    z-index: 1;

  }
  ul {
    text-align: center;
  }
  
}
```
:::

# html

```{r}
#| eval: false
<iframe width="500" height="500" src="https://dplyr.tidyverse.org/" title="Quarto Documentation" class="myframe"></iframe>
```

# js

# add more files

::: columns
::: {.column width="30%"}
```{sass}
#| code-line-numbers: "|6-9|"
#| eval: false
#| classes: express
folder tree
.
├── _quarto.yml
├── about.qmd
├── fancy-site-doc.Rproj
├── home
│   ├── how_to.qmd
│   ├── link_code.qmd
│   └── renv.qmd
├── index.qmd
├── plots
│   └── plot1.qmd
├── scripts
│   └── script.qmd
├── styles.css
└── styles.scss

4 directories, 11 files
```
:::

::: {.column width="70%"}
```{sass eval=FALSE}
#| code-line-numbers: "5-23|"
_quarto.yml
project:
  type: website

website:
  title: "fancy-site-doc"
  navbar:
    left:
      - text: Home
        menu: 
          - href: index.qmd
            text: "0: Intro"
          - href: home/how_to.qmd
            text: "1: How to create this doc"
          - href: home/link_code.qmd
            text: "2: How to link code to doc"
          - href: home/renv.qmd
            text: "3: Virtual Environments"
      - text: Scripts
        menu:
          - href: scripts/script.qmd
            text: "0: my script"
      - text: Plots
        menu: 
          - href: plots/plot1.qmd
            text: "0: my plot"

format:
  html:
    theme: cosmo
    css: styles.css
    scss: styles.scss
    toc: true

editor: visual
```
:::
:::