HTML widgets that don't work in the Academic theme

[apreshill]

Hi-

Using create_site_academic(), a few HTML widgets don't work out of the box:

• [x] plotly (I'm unable to debug this, it isn't just a jquery clash)

• [x] highcharter (this works if I add a page parameter to disable Academic's jquery version, but then for some reason the post title is partially hidden by the upper navbar 🤷‍♀️ )

• [x] DT::datatable (this only works if I add a page parameter to disable Academic's jquery version; does not appear to affect CSS)

• [ ] reactable does work, even without any page parameter.

I'll test out a few more, but wanted to start an issue to track this.

[hadley]

I suspect these are mostly going to be css/js clashes and hence (currently) outside the scope of hugodown, but it's worth documenting them listing known work arounds.

[natekratzer]

gt doesn't work out of the box, but there is an easy work around. Adding gtsave() to the end of the pipe seems to cause hugodown to treat it the same way it would a ggplot object. (My plan was to save the file and then call it back in with markdown, but it turns out that creates two copies as hugodown already automatically pulls the image file in when knitting.)

[ConorIA]

The issue with plotly seems to be related to its propensity to meddle in the MathJax config.

I got it to work by adding this line before the html_dependencies snippet in custom_head.html

<script>window.PlotlyConfig = {MathJaxConfig: 'local'}</script> 

Reference: https://github.com/plotly/plotly.js/blob/master/dist/README.md#to-support-mathjax

[ConorIA]

I'll add to the list of HTML widgets that need workarounds.

I can't get addAwesomeMarkers to work on my Leaflet maps (regular addMarkers seems to work fine).

@hadley, would you be interested in starting a wiki page for the community to track problematic widgets and their workarounds?

[SteadyGiant]

@apreshill: reactable works but with negative side effects.

First, the post's preview text looks like this:

Second, the Reactable doesn't display well in dark mode:

I tried to make this process minimal. I did this on a fresh R 4.1.0 installation on Windows 10 in RStudio 1.4.1717:

1. Run devtools::install_github("r-lib/hugodown").
2. Run hugodown::hugo_install("0.66.0").
3. Run hugodown::create_site_academic() in a test-site/ folder
4. In the new RStudio window, run hugodown::hugo_start()
5. Run hugodown::use_post("post/short-title") like the README says.
6. Add the following to the resultant content/post/short-title/index.Rmd under the YAML header:

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE, message = FALSE, warning = FALSE)
```

Lorem ispum.

```{r}
reactable::reactable(iris)
```

1. Knit the post.