bootstrap 5?

[eitsupi]

This looks awesome, thanks for your all works!
I am wondering if this will work with bootstrap 5 as well.
https://pkgdown.r-lib.org/#pkgdown-200-and-bootstrap-5

[coatless]

@eitsupi great question. In short, yes. But, the issue we have is we're not actually looking at any of the bootstrap CSS variables. So, I'll likely do a pass on that in the {rocleteer} repository.

[eitsupi]

Thanks for the reply. Sorry I don't understand the technical details, but are you saying that this cannot be addressed by simply changing the pkgdown template?

[coatless]

@eitsupi sorry, I was terse on the response.

This works well with any version of pkgdown. To illustrate, I've added a _pkgdown.yml file with bootstrap: 5 explicitly set:

webr-in-pkgdown/_pkgdown.yml

Line 3 in c7c98d5

bootstrap: 5

If you visit the latest website, you can see everything working well:

https://rd.thecoatlessprofessor.com/webr-in-pkgdown/reference/residual_surrealism.html

The issue we have at the moment is styling (via inline CSS styles) are not adapting to how {pkgdown} handles bootstrap styles. To fix this, we'd need to move the inline styling on the webR created section into CSS.

Something along the lines of:

/*
 * WebR Interactive Examples CSS
 *
 * We use CSS variables to allow for easy theming and customization. Specifically, we use:
 *
 * - Private variables (--_*): Used internally within the component
 * - Public variables (--rocleteer-webr-*): For user customization
 * - Bootstrap variables (--bs-*): Used as fallbacks
 *
 * To customize the appearance:
 * 1. Override Bootstrap variables to affect all Bootstrap components
 * 2. Set --rocleteer-webr-* variables to specifically style webR components
 * 3. Use class-specific styles for fine-grained control
 */

.rocleteer-webr-container {
  /* Custom Properties for Theming
   * Each property follows the pattern:
   * --_internal: var(--rocleteer-webr-public, var(--bs-bootstrap, fallback))
   */
}

Garrick and I used this kind of idea in {quarto-bluesky-comments}. I think it should work well for this context. The only hiccup is we're going to be embedding it inline or adding it via a call to an asset file stored in the package's inst/ for use in the documentation pages.

[coatless]

So, this is in:

coatless-rpkg/rocleteer#4

You can explore it here:

https://rd.thecoatlessprofessor.com/webr-in-pkgdown/reference/residual_surrealism.html#webr

Going to aim to push this over to CRAN when it returns on Aug 18, 2025.

[eitsupi]

Looks nice!