Issues using CSS style sheet when rendering Quarto document from Shinyapp.

[RegalPlatypus]

Description

@cderv provided some initial help and I was able to get my shiny app working so that it renders the report (both when hosted locally and on shinyapps.io. My last issue is getting Quarto to use my external CSS style sheet. Any help would be appreciated!

The App:

library(shiny)
library(showtext)
#> Loading required package: sysfonts
#> Loading required package: showtextdb
library(gt)
library(lubridate)
#> 
#> Attaching package: 'lubridate'
#> The following objects are masked from 'package:base':
#> 
#>     date, intersect, setdiff, union
library(qbr)
library(tidyverse)
library(quarto)

ui <- fluidPage(

    titlePanel("My App"),

    sidebarLayout(
      sidebarPanel(width = 3,
        textInput(inputId = "user.string", label = "Input string:"),
        br(),
        downloadButton(outputId = "report", label = "Generate Report:"),
        br()
      ),
      mainPanel(
        
      )
    )
)

server <- function(input, output) {
  output$report <- downloadHandler(
    filename = "final_report.html",
    content = function(file) {
      
      temp_qmd <- file.path(tempdir(), "checklist.qmd")
      file.copy("checklist.qmd", temp_qmd, overwrite = TRUE)
      
      temp_css <- file.path(tempdir(), "markdown-style.css")
      file.copy("markdown-style.css", temp_css, overwrite = TRUE)
      
      quarto::quarto_render(
        temp_qmd,
        output_format = "html",
        output_file = "rendered_report.html",
        execute_params = list(userkey = input$user.string)
      )
      
      file.copy("rendered_report.html", file)
      
    }
  )
}

# Run the application 
shinyApp(ui = ui, server = server)
#> PhantomJS not found. You can install it with webshot::install_phantomjs(). If it is installed, please make sure the phantomjs executable can be found via the PATH variable.
#> 
#> Listening on http://127.0.0.1:8241

^{Created on 2023-07-04 with reprex v2.0.2}

The Quarto Doc ("checklist.qmd"):

  ---
  format:
    html:
      css: markdown-style.css
  params:
    user.string: NA
  ---
  
  ```{r}
  #| label: setup
  #| include: false
  knitr::opts_chunk$set(echo = TRUE, dev = "png", cache = FALSE)
  ```
  
  ```{r}
  #| label: head
  
  output <- params$user.string
  ```
 
  # Generic Heading
  
  The string was: `r output`

The CSS sheet ("markdown-style.css"):

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;1,300;1,500&display=swap');

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 14pt;
}

h1 {
  text-align: center;
}

Updates:

• Edited 7/5 to make formatting changes suggested by @mcanouil

[mcanouil]

Could format your Quarto document using more backticks around it?
Also, could you share the css file as a code block directly in the post instead of as an attached file?

---

You can share a Quarto document using the following syntax, i.e., using more backticks than you have in your document (usually four ````).

````qmd
---
title: "Reproducible Quarto Document"
format: html
---

This is a reproducible Quarto document using `format: html`.
It is written in Markdown and contains embedded R code.
When you run the code, it will produce a plot.

```{r}
plot(cars)
```

The end.
````

[RegalPlatypus]

Done and done! Thanks!

[cderv]

I think this is because you are using a downloadHandler() so this will offer the user to download the HTML.
However it does not offer to download a folder, so the CSS will not be downloaded, and the the HTML report will be missing the resource file. Using embed-resource: true could help with that.

However, you need to take care of how and where your files are rendered, accordingly to how quarto_render() is working - You are running the function from a R working dir that is different than where your file really are, and currently output the file in another directory.

It is best to do everything in the same folder really. And then move files yourself.

See how I modify your server part

server <- function(input, output) {
  output$report <- downloadHandler(
    filename = "final_report.html",
    content = function(file) {
      # create a temp dir for your app
      dir.create(temp_dir <- tempfile("dir-shinyapps-"))
      on.exit(unlink(temp_dir, recursive = TRUE), add = TRUE)
      # Copy resources there
      file.copy("checklist.qmd", temp_dir, overwrite = TRUE)
      file.copy("markdown-style.css", temp_dir, overwrite = TRUE)
      # Run Quarto in that directory with resource embedding and
      # and output to the temp file
      xfun::in_dir(temp_dir, {
        quarto::quarto_render(
          "checklist.qmd",
          output_format = "html",
          output_file = "rendered_report.html",
          execute_params = list(user.string = input$user.string)
        )
        file.copy("rendered_report.html", file)
      })
    }
  )
}

Key parts are :

• Copy resources to temp dir
• Render with Quarto as if you were working in that directory - every output will be written in temp dir. xfun::in_dir or withr::with_dir() are useful for this situations
• Copy results you need back to where it needs to be (here download handler).

embed-resources: true in YAML for your .qmd will insure that all resources are included in the single HTML file, suitable for the download.

Please study this to understand the logic on how path works with rendering.

Hope it helps and serve as example to build upon.

[RegalPlatypus]

@cderv I can't thank you enough! If I could send you cookies, I would. Everything you did makes sense; I think I understood the goal, I just wasn't familiar with some of the functions to make it happen.

One quick follow-up: In my original server code I had the following lines:

      temp_qmd <- file.path(tempdir(), "checklist.qmd")
      file.copy("checklist.qmd", temp_qmd, overwrite = TRUE)
      
      temp_css <- file.path(tempdir(), "markdown-style.css")
      file.copy("markdown-style.css", temp_css, overwrite = TRUE)

If I ran the app I could see that the files weren't being copied to the temporary directory, but if I ran the lines in isolation it would work. Can you think of why that might be? Understanding that might help me avoid some problems in the future.

Again, thank you so much!

[cderv]

If I ran the app I could see that the files weren't being copied to the temporary directory, but if I ran the lines in isolation it would work. Can you think of why that might be? Understanding that might help me avoid some problems in the future.

Not sure to understand what isolation means. Only thing I could think of regarding not working is that the copy is not happening in the right working directory meaning the checklist.qmd and other css are not found and so not copied.

Or maybe you mean they where not found by quarto_render and isolation means using xfun::in_dir(). In that case you need to understand and remember that:

• You are running from a R session - it has a temp directory for this session which is tmpdir()
• quarto_render() will run quarto CLI which will run R as a new process in a background session. This means new temp dir for this session tmpdir() will have a different value for this new process.

You need to understand how that works at the bottom layer to understand path issue.

Using xfun::in_dir(temp_dir, ...) you are insure quarto render is running where the files are copied. (even if it will create a new temp dir for the internal quarto R session).

Otherwise, you need to use a custom temp directory not tied to a R session. dirname(tempdir()) or TEMP env var

# tied to a R session - see the folder random name at the end
tempdir()
#> [1] "C:\\Users\\chris\\AppData\\Local\\Temp\\RtmpUrZ05r"
# OS temp dir
dirname(tempdir())
#> [1] "C:/Users/chris/AppData/Local/Temp"
# accessible in any program through env var usually
Sys.getenv("TEMP")
#> [1] "C:\\Users\\chris\\AppData\\Local\\Temp"

Hope it helps clarifies.