Add a button to test drive package on RStudio Cloud

[apreshill]

For tidymodels.org, Desiree designed a very nice "test drive" button:

https://github.com/tidymodels/tidymodels.org/blob/86352d84e04fd8f454d3cd5b5bd5e2707581c07f/static/css/tm.css#L1046-L1066

We inserted as a Hugo shortcode:
https://github.com/tidymodels/tidymodels.org/blob/86352d84e04fd8f454d3cd5b5bd5e2707581c07f/content/start/recipes/index.Rmarkdown#L48

But perhaps we could here add a pandoc div that uses the built-in bootstrap variables to style a nice little test drive button?

[cderv]

Sharing also the currently shortcode: https://github.com/tidymodels/tidymodels.org/blob/86352d84e04fd8f454d3cd5b5bd5e2707581c07f/layouts/shortcodes/test-drive.html

But perhaps we could here add a pandoc div that uses the built-in bootstrap variables to style a nice little test drive button?

Pandoc fenced div allow use to add class, id and attributes on an HTML div that will surround content of the fenced div. It may not be enough to provide a button with a link.

The more I think of it, the more I believe inline R code chunk is the equivalent of hugo shortcode. This would be

---
title: "Demo of test drive button"
output: html_document
---

```{r, include = FALSE}
add_test_drive_button <- function(url) {
  htmltools::tagList(
    htmltools::p("Alternatively, open an interactive version of this article in your browser:"),
    "",
    htmltools::a(
      href = url,
      htmltools::tags$button(class = "test-drive-btn",
                             htmltools::tags$i(class = "fa fa-cloud"),
                             "Test Drive on RStudio Cloud")
    )
  )
}
```

```{r, echo = FALSE}
htmltools::tagList(fontawesome::fa_html_dependency())
```

```{css, echo = FALSE}
/* Test Drive Button */

/* Style buttons */
.test-drive-btn {
  background-color: #eab0c46b;
  border: solid 1pt #ca225e47;
  color: #ca225e;
  padding: 12px 16px;
  font-size: 16px;
  cursor: pointer;
  margin: 1.5em auto;
  display: block;
  border-radius: 0;
}

/* Darker background on mouse-over */
.test-drive-btn:hover {
  background-color: #CA225E;
  color: #fcfcfc;
  border: 1pt solid;
}
```


Demo of the button

`r add_test_drive_button("https://rstudio.cloud")`

It renders to:

---

And just to confirm my understanding: this button would be useful in quillt to open a RStudio cloud project to test the last CRAN version of the package ? Or more for some demo vignettes we could create to give an intro project ?

[apreshill]

That looks great! Yes, use case is like here:

https://gt.rstudio.com/

https://rstudio.github.io/thematic/#run-some-examples