From cae1a22d293d10ebde3365d2d6ac34febc1365fa Mon Sep 17 00:00:00 2001 From: Greg Lin Date: Fri, 9 Sep 2022 23:03:23 -0500 Subject: [PATCH] Enable static rendering for more examples Not enabled for examples that use themes because pkgdown puts styles in the body, causing FOUC. --- vignettes/100k-rows.Rmd | 2 ++ vignettes/nba-box-score/nba-box-score.Rmd | 23 ++++++++++------ .../twitter-followers/twitter-followers.Rmd | 21 +++++++-------- .../womens-world-cup/womens-world-cup.Rmd | 26 +++++++++++++------ 4 files changed, 45 insertions(+), 27 deletions(-) diff --git a/vignettes/100k-rows.Rmd b/vignettes/100k-rows.Rmd index 1d4ffb8a..d81b5819 100644 --- a/vignettes/100k-rows.Rmd +++ b/vignettes/100k-rows.Rmd @@ -7,6 +7,8 @@ output: html_document knitr::opts_chunk$set(echo = TRUE) set.seed(5) + +options(reactable.static = TRUE) ``` ```{r} diff --git a/vignettes/nba-box-score/nba-box-score.Rmd b/vignettes/nba-box-score/nba-box-score.Rmd index 161bdc0e..790b661f 100644 --- a/vignettes/nba-box-score/nba-box-score.Rmd +++ b/vignettes/nba-box-score/nba-box-score.Rmd @@ -7,6 +7,17 @@ resource_files: ```{r setup, include=FALSE} knitr::opts_chunk$set(echo = TRUE) + +options(reactable.static = TRUE) +``` + +```{css ref.label='styles', echo=FALSE} +``` + +```{r ref.label='font_styles', echo=FALSE} +``` + +```{css ref.label='pkgdown_styles', echo=FALSE} ``` ```{r box_score, echo=FALSE} @@ -174,11 +185,11 @@ Raw data: [`line_score.csv`](line_score.csv), [`player_stats.csv`](player_stats. ```{r ref.label="box_score", eval=FALSE} ``` -```{r} -tags$link(href = "https://fonts.googleapis.com/css?family=Roboto:400,500&display=fallback", rel = "stylesheet") +```{r font_styles, eval=FALSE} +htmltools::tags$link(href = "https://fonts.googleapis.com/css?family=Roboto:400,500&display=fallback", rel = "stylesheet") ``` -```{css} +```{css styles, eval=FALSE} .box-score { font-family: 'Roboto', Helvetica, Arial, sans-serif; } @@ -282,16 +293,12 @@ tags$link(href = "https://fonts.googleapis.com/css?family=Roboto:400,500&display } ``` -```{css echo=FALSE} +```{css pkgdown_styles, include=FALSE} /* rmarkdown html documents */ .main-container { max-width: 1024px !important; } -h1.title { - display: none; -} - /* pkgdown articles */ .row > main { max-width: 1024px; diff --git a/vignettes/twitter-followers/twitter-followers.Rmd b/vignettes/twitter-followers/twitter-followers.Rmd index d1e52303..1435972a 100644 --- a/vignettes/twitter-followers/twitter-followers.Rmd +++ b/vignettes/twitter-followers/twitter-followers.Rmd @@ -7,8 +7,15 @@ resource_files: ```{r setup, include=FALSE} knitr::opts_chunk$set(echo = TRUE) + +options(reactable.static = TRUE) +``` + +```{css ref.label="styles", echo=FALSE} ``` +```{r ref.label="font_styles", echo=FALSE} +``` ```{r table, echo=FALSE} library(reactable) @@ -94,12 +101,11 @@ How it was made: [Building the Twitter Followers Demo](../building-twitter-follo ```{r ref.label="table", eval=FALSE} ``` -```{r} -tags$link(href = "https://fonts.googleapis.com/css?family=Karla:400,700|Fira+Mono&display=fallback", - rel = "stylesheet") +```{r font_styles, eval=FALSE} +htmltools::tags$link(href = "https://fonts.googleapis.com/css?family=Karla:400,700|Fira+Mono&display=fallback", rel = "stylesheet") ``` -```{css} +```{css styles, eval=FALSE} .twitter-followers { margin: 0 auto; width: 575px; @@ -164,10 +170,3 @@ tags$link(href = "https://fonts.googleapis.com/css?family=Karla:400,700|Fira+Mon height: 100%; } ``` - -```{css echo=FALSE} -/* rmarkdown html documents */ -h1.title { - display: none; -} -``` \ No newline at end of file diff --git a/vignettes/womens-world-cup/womens-world-cup.Rmd b/vignettes/womens-world-cup/womens-world-cup.Rmd index ab026fc2..48785611 100644 --- a/vignettes/womens-world-cup/womens-world-cup.Rmd +++ b/vignettes/womens-world-cup/womens-world-cup.Rmd @@ -7,6 +7,17 @@ resource_files: ```{r setup, include=FALSE} knitr::opts_chunk$set(echo = TRUE) + +options(reactable.static = TRUE) +``` + +```{css ref.label="styles", echo=FALSE} +``` + +```{r ref.label="font_styles", echo=FALSE} +``` + +```{css ref.label="pkgdown_styles", echo=FALSE} ``` ```{r table, echo=FALSE} @@ -167,11 +178,14 @@ Full source: [`vignettes/womens-world-cup/womens-world-cup.Rmd`](https://github. ```{r ref.label="table", eval=FALSE} ``` -```{r} -tags$link(href = "https://fonts.googleapis.com/css?family=Karla:400,700|Fira+Mono&display=fallback", rel = "stylesheet") +```{r font_styles, eval=FALSE} +htmltools::tags$link( + href = "https://fonts.googleapis.com/css?family=Karla:400,700|Fira+Mono&display=fallback", + rel = "stylesheet" +) ``` -```{css} +```{css styles, eval=FALSE} .standings { font-family: Karla, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.875rem; @@ -267,16 +281,12 @@ tags$link(href = "https://fonts.googleapis.com/css?family=Karla:400,700|Fira+Mon ``` -```{css echo=FALSE} +```{css pkgdown_styles, include=FALSE} /* rmarkdown html documents */ .main-container { max-width: 1054px !important; } -h1.title { - display: none; -} - /* pkgdown articles */ .row > main { max-width: 1054px;