Possible features in minimal option, and a working example

[CharlesNepote]

Bug description

(This is my first feedback, so I want to start sharing that I find Quarto really awesome.)

In the documentation it is said that using the minimal option, When specifying minimal: true you can still selectively re-enable features you do want, for example:

---
title: "My Document"
format:
  html:
    minimal: true
    code-copy: true
---

But:

1. the example of code-copy: true does not work well as the button is created by a CSS class (class="code-copy-button") and not by a regular UTF-8 char (such as 📋): the button appears very small, without any char, and it's very difficult to understand this is a button and its usage
2. what features are we talking about? It would be great to know what features can be enabled.

Steps to reproduce

Create a new .qmd document and add the following YAML plus some code. Eg.

---
title: "My Document"
format:
  html:
    minimal: true
    code-copy: true
---

Just testing:
```{r}

# Some R code

#library(leaflet)
#leaflet() %>%
#  addTiles() %>%  # Add default OpenStreetMap map tiles
#  addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R")
```

Then render it.

Expected behavior

I would expect:

• to have an easy to read copy button
• to know what features can be enabled (and works)

Actual behavior

Your environment

Quarto 1.4.553
IDE: RStudio 2023.12.1 Build 402
OS: Garuda Linux (Arch based)

Quarto check output

[cscheid]

(In the future, please do make sure to fill out the entirety of the bug issue. We need to know, eg, which OS and version of Quarto you're running. That makes a difference)

what features are we talking about? It would be great to know what features can be enabled.

I think we have an open issue to better document the features that are enabled and disabled with minimal: true.

the example of code-copy: true does not work well as the button is created by a CSS class (class="code-copy-button") and not by a regular UTF-8 char (such as 📋): the button appears very small, without any char, and it's very difficult to understand this is a button and its usage

Unfortunately, CSS rules are not easily factored out in a way that would let us selectively include only the bits of CSS that are needed to enable each feature independently of each other.

The behavior might be unintuitive for you, but this is working as intended. The goal of minimal: true is to allow you to create your own CSS to handle the cases we don't. But if you add (for example) code-copy: true, then we will generate CSS classes that are your responsibility to fill out.

We should improve our docs to make this clear.

[cderv]

I think we have an open issue to better document the features that are enabled and disabled with minimal: true.

@cscheid was it this one?

• Document features disabled by 'minimal: true' #6639 - It was closed - should we reconsider ?

At least documenting that minimal: true means users needs to do some work is a good idea !

[cscheid]

I didn't remember that we decided to close it, but I agree with the reasoning for closing, so no action required there.

At least documentating that minimal: true means users needs to do some work is a good idea !

I also agree with this.

[CharlesNepote]

(In the future, please do make sure to fill out the entirety of the bug issue. We need to know, eg, which OS and version of Quarto you're running. That makes a difference)

Yes sorry, I have edited my initial report, added data in "Your Environment" section.

[CharlesNepote]

Thanks for your answers. Quarto could be a great tool for generating low-tech static websites (example). Unfortunately, using Bootstrap produces a 460 KB file containing a lot of useless stuff (just in case I guess). By using minimal: true I wanted to try to avoid Bootstrap, but there may be better solutions that I don't know about.

The first load of a default Quarto page is ~1 MB. I'd just like to try to reduce this by 2 or 5 or even 10. I fully understand that many of the features need their corresponding CSS and/or JS stuff. As a first step, I think I'll try to use PurgeCSS to see if there are significant gains.

(I'm sorry if this is off-topic, I'm going to switch to the "Discussions".)

[cderv]

Great project !

(I'm sorry if this is off-topic, I'm going to switch to the "Discussions".)

Yes please open a discussion, we can then use it to exchange on your work if you have any question. And it will be a good place to feature your work on this.

You probably need to experiment, but you can probably make a good custom format (https://quarto.org/docs/extensions/formats.html) by opting out Bootstrap and most of internal quarto stuff, even provide your own template for minimal rendering, and add feature you want using external low size JS tooling (Example for tabset feature without Bootstrap https://yihui.org/en/2023/10/section-tabsets/, or code copy button https://yihui.org/en/2023/09/copy-button/)

Unfortunately, using Bootstrap produces a 460 KB file containing a lot of useless stuff

BTW if you only want bootstrap out, you can change the theme argument only (https://quarto.org/docs/output-formats/html-themes.html#overview) by using none for your own CSS or pandoc to get CSS feature from Pandoc (and its variables for customisation)

Some feature depending on bootstrap won't work either. minimal: true goes further by opting out more quarto feature we insert through JS and CSS

Hope it helps

[CharlesNepote]

Thanks for your useful advises, @cderv. I have opened the discussion here: #9330.