callout text all uppercase

[trhallam]

I'm currently migrating a lesson to the new workbench template and it appears that all of the callout markup is Uppercase and Underlined.

This doesn't reflect the current examples (e.g. https://carpentries.github.io/sandpaper-docs/episodes.html#what-is-the-.rmd-extension).

The Rmd to create the attached image and HTML is.

:::::::::: callout
# Being certain which system your terminal is connected to

If you ever need to be certain which system a terminal you are using is
connected to then use the following command: `$ hostname`.
::::::::::

Output from HTML inspector

<div id="callout3" class="callout">
<div class="callout-square">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell callout-icon"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
</div>
<div class="section level3 callout-title callout-inner">
<h3 class="callout-title" id="being-certain-which-system-your-terminal-is-connected-to">Being certain which system your terminal is
connected to<a class="anchor" aria-label="anchor" href="#being-certain-which-system-your-terminal-is-connected-to"></a></h3>
<div class="callout-content">
<p>If you ever need to be certain which system a terminal you are using
is connected to then use the following command:
<code>$ hostname</code>.</p>
</div>
</div>
</div>

CSS styling for the uppercase underlined text appears to be applied to the <div class="section level3 callout-title callout-inner"> which contains h3 and the class callout-content.

Package List

R: 4.1.2
R6                   R6   2.5.1
Rcpp               Rcpp  1.0.10
askpass         askpass     1.1
assertthat   assertthat   0.2.1
base64enc     base64enc   0.1-3
brio               brio   1.1.3
bslib             bslib   0.5.0
cachem           cachem   1.0.8
callr             callr   3.7.3
cli                 cli   3.6.1
clipr             clipr   0.8.0
commonmark   commonmark   1.9.0
cpp11             cpp11   0.4.3
crayon           crayon   1.5.2
credentials credentials   1.3.2
desc               desc   1.4.2
digest           digest  0.6.31
downlit         downlit   0.4.2
ellipsis       ellipsis   0.3.2
evaluate       evaluate    0.21
fansi             fansi   1.0.4
fastmap         fastmap   1.1.1
fontawesome fontawesome   0.5.1
fs                   fs   1.6.2
gert               gert   1.9.2
gh                   gh   1.4.0
gitcreds       gitcreds   0.1.2
glue               glue   1.6.2
highr             highr    0.10
htmltools     htmltools   0.5.5
httpuv           httpuv  1.6.11
httr               httr   1.4.6
httr2             httr2   0.2.3
ini                 ini   0.3.1
jquerylib     jquerylib   0.1.4
jsonlite       jsonlite   1.8.5
knitr             knitr    1.43
later             later   1.3.1
lifecycle     lifecycle   1.0.3
magrittr       magrittr   2.0.3
memoise         memoise   2.0.1
mime               mime    0.12
openssl         openssl   2.0.6
pegboard       pegboard   0.5.2
pillar           pillar   1.9.0
pkgconfig     pkgconfig   2.0.3
pkgdown         pkgdown   2.0.7
processx       processx   3.8.1
promises       promises 1.2.0.1
ps                   ps   1.7.5
purrr             purrr   1.0.1
rappdirs       rappdirs   0.3.3
renv               renv  0.17.3
rlang             rlang   1.1.1
rmarkdown     rmarkdown    2.22
rprojroot     rprojroot   2.0.3
rstudioapi   rstudioapi    0.14
sandpaper     sandpaper  0.12.3
sass               sass   0.4.6
servr             servr    0.27
stringi         stringi  1.7.12
stringr         stringr   1.5.0
sys                 sys   3.4.2
tibble           tibble   3.2.1
tinkr             tinkr   0.2.0
tinytex         tinytex    0.45
usethis         usethis   2.2.0
utf8               utf8   1.2.3
varnish         varnish  0.2.17
vctrs             vctrs   0.6.2
whisker         whisker   0.4.1
withr             withr   2.5.0
xfun               xfun    0.39
xml2               xml2   1.3.4
xslt               xslt   1.4.4
yaml               yaml   2.3.7
zip                 zip   2.3.0

[bencomp]

I had the same issue, but only on my machine. I think it still happens locally, but somehow it does not affect the online website; that shows everything as it should be. See carpentries/sandpaper#470 for some discussion.

Do you see that it happens online too (if you use the standard workflows with GitHub Actions)?

[zkamvar]

HI @trhallam, I am afraid I cannot reproduce this behaviour.

I have created an example in https://zkamvar.github.io/test-workbench-59/#being-certain-which-system-your-terminal-is-connected-to and it appears to work correctly.

Would you mind providing a little more information by providing the output of sessioninfo::session_info() after you build the lesson? This would give me more information regarding your version of R and pandoc and where your version of {sandpaper} is coming from (see carpentries/sandpaper#470 (comment) for an example of what the output looks like).

[zkamvar]

And I apologise for not replying sooner. The last quarter has been nothing but chaos 😞

[trhallam]

I had the same issue, but only on my machine. I think it still happens locally, but somehow it does not affect the online website; that shows everything as it should be. See carpentries/sandpaper#470 for some discussion.

Do you see that it happens online too (if you use the standard workflows with GitHub Actions)?

This appears to be correct. For some reason the locally built version has the capitalised text while for the Github Actions output it does not. For example.

And I apologise for not replying sooner. The last quarter has been nothing but chaos 😞

Not a problem @zkamvar , the lesson was fine in the end, and I know I'm migrating content across as an early adopter. I had quite a few comments on the design from students which I will put in another issue.

I am using the docker-serve method to work on my lessons but here is the output of session_info()

session_info()

- Session info -------------------------------------------------------------------------------------------------------
 setting  value
 version  R version 4.1.2 (2021-11-01)
 os       Ubuntu 22.04.2 LTS
 system   x86_64, linux-gnu
 ui       X11
 language (EN)
 collate  C
 ctype    C
 tz       Etc/UTC
 date     2023-07-21
 pandoc   3.1.3 @ /usr/bin/ (via rmarkdown)

- Packages -----------------------------------------------------------------------------------------------------------
 package     * version date (UTC) lib source
 askpass       1.1     2019-01-13 [1] RSPM (R 4.1.0)
 assertthat    0.2.1   2019-03-21 [1] RSPM (R 4.1.0)
 cachem        1.0.8   2023-05-01 [1] RSPM (R 4.1.0)
 callr         3.7.3   2022-11-02 [1] RSPM (R 4.1.0)
 cli           3.6.1   2023-03-23 [1] RSPM (R 4.1.0)
 commonmark    1.9.0   2023-03-17 [1] RSPM (R 4.1.0)
 credentials   1.3.2   2021-11-29 [1] RSPM (R 4.1.0)
 desc          1.4.2   2022-09-08 [1] RSPM (R 4.1.0)
 digest        0.6.33  2023-07-07 [1] RSPM (R 4.1.0)
 downlit       0.4.3   2023-06-29 [1] RSPM (R 4.1.0)
 evaluate      0.21    2023-05-05 [1] RSPM (R 4.1.0)
 fansi         1.0.4   2023-01-22 [1] RSPM (R 4.1.0)
 fastmap       1.1.1   2023-02-24 [1] RSPM (R 4.1.0)
 fs            1.6.2   2023-04-25 [1] RSPM (R 4.1.0)
 gert          1.9.2   2023-07-20 [1] https://carpentries.r-universe.dev (R 4.1.2)
 glue          1.6.2   2022-02-24 [1] RSPM (R 4.1.0)
 htmltools     0.5.5   2023-03-23 [1] RSPM (R 4.1.0)
 knitr         1.43    2023-05-25 [1] RSPM (R 4.1.0)
 lifecycle     1.0.3   2022-10-07 [1] RSPM (R 4.1.0)
 magrittr      2.0.3   2022-03-30 [1] RSPM (R 4.1.0)
 memoise       2.0.1   2021-11-26 [1] RSPM (R 4.1.0)
 openssl       2.1.0   2023-07-15 [1] RSPM (R 4.1.0)
 pegboard      0.5.2   2023-07-20 [1] https://carpentries.r-universe.dev (R 4.1.2)
 pillar        1.9.0   2023-03-22 [1] RSPM (R 4.1.0)
 pkgconfig     2.0.3   2019-09-22 [1] RSPM (R 4.1.0)
 pkgdown       2.0.7   2022-12-14 [1] RSPM (R 4.1.0)
 processx      3.8.2   2023-06-30 [1] RSPM (R 4.1.0)
 ps            1.7.5   2023-04-18 [1] RSPM (R 4.1.0)
 purrr         1.0.1   2023-01-10 [1] RSPM (R 4.1.0)
 R6            2.5.1   2021-08-19 [1] RSPM (R 4.1.0)
 Rcpp          1.0.11  2023-07-06 [1] RSPM (R 4.1.0)
 rlang         1.1.1   2023-04-28 [1] RSPM (R 4.1.0)
 rmarkdown     2.23    2023-07-01 [1] RSPM (R 4.1.0)
 rprojroot     2.0.3   2022-04-02 [1] RSPM (R 4.1.0)
 sandpaper     0.12.4  2023-07-20 [1] https://carpentries.r-universe.dev (R 4.1.2)
 sessioninfo   1.2.2   2021-12-06 [1] RSPM (R 4.1.0)
 tibble        3.2.1   2023-03-20 [1] RSPM (R 4.1.0)
 tinkr         0.2.0   2023-07-20 [1] https://carpentries.r-universe.dev (R 4.1.2)
 utf8          1.2.3   2023-01-31 [1] RSPM (R 4.1.0)
 varnish       0.2.17  2023-07-20 [1] https://carpentries.r-universe.dev (R 4.1.2)
 vctrs         0.6.3   2023-06-14 [1] RSPM (R 4.1.0)
 whisker       0.4.1   2022-12-05 [1] RSPM (R 4.1.0)
 withr         2.5.0   2022-03-03 [1] RSPM (R 4.1.0)
 xfun          0.39    2023-04-20 [1] RSPM (R 4.1.0)
 xml2          1.3.5   2023-07-20 [1] https://carpentries.r-universe.dev (R 4.1.2)
 xslt          1.4.4   2023-07-20 [1] https://carpentries.r-universe.dev (R 4.1.2)
 yaml          2.3.7   2023-01-23 [1] RSPM (R 4.1.0)

 [1] /usr/local/lib/R/site-library
 [2] /usr/lib/R/site-library
 [3] /usr/lib/R/library

[bencomp]

I did see that the test's snapshot includes the callout-title class on the <div> where it shouldn't be.

https://github.com/carpentries/sandpaper/blob/4b2a219522a30132e33fb05aea2bf37bcb9a7f32/tests/testthat/_snaps/render_html.md?plain=1#L110

When I modify that snapshot manually and run the test suite, the test fails because the callout-title is added back. test-render_html.R does not check explicitly that the <div> does not have the class.

The callout-title class is also present on <div> elements in lines 11 and 23 of

https://github.com/carpentries/sandpaper/blob/4b2a219522a30132e33fb05aea2bf37bcb9a7f32/tests/testthat/examples/callout-ids.html

All of this still does not explain why the behaviour cannot be reproduced or why local build output is different from GitHub build output. 😞

[zkamvar]

Thank you for posting your Session Information, @trhallam! I can now reproduce the behaviour! The source of the change is pandoc. We use 2.19.2 to build lessons on GitHub, but officially we support any version later than 2.11.4, which includes version 3.1.3, as you have in your session info: pandoc 3.1.3 @ /usr/bin/ (via rmarkdown)

I can now reproduce the behavior:

lsn <- usethis::create_from_github("zkamvar/test-workbench-59", destdir = tempdir())
#> ℹ Defaulting to 'https' Git protocol
#> ✔ Setting `fork = FALSE`
#> ✔ Creating '/tmp/Rtmp24N1j4/test-workbench-59/'
#> ✔ Cloning repo from 'https://github.com/zkamvar/test-workbench-59.git' into '/tmp/Rtmp24N1j4/test-workbench-59'
#> ✔ Setting active project to '/tmp/Rtmp24N1j4/test-workbench-59'
#> ℹ Default branch is 'main'
#> ✔ Setting active project to '<no active project>'
pandoc::pandoc_activate("3.1.3")
#> ✔ Version '3.1.3' is now the active one.
#> ℹ Pandoc version also activated for rmarkdown functions.
sandpaper::build_lesson(lsn, quiet = TRUE, preview = FALSE)
idx <- xml2::read_html(fs::path(lsn, "site/docs/index.html"))
xml2::xml_find_first(idx, ".//div[starts-with(@class, 'callout')]") |> as.character() |> writeLines()
#> <div id="callout1" class="callout">
#> <div class="callout-square">
#> <i class="callout-icon" data-feather="bell"></i>
#> </div>
#> <div class="section level3 callout-title callout-inner">
#> <h3 class="callout-title" id="being-certain-which-system-your-terminal-is-connected-to">Being certain which system your terminal is
#> connected to<a class="anchor" aria-label="anchor" href="#being-certain-which-system-your-terminal-is-connected-to"></a>
#> </h3>
#> <div class="callout-content">
#> <p>If you ever need to be certain which system a terminal you are using
#> is connected to then use the following command:
#> <code>$ hostname</code>.</p>
#> </div>
#> </div>
#> </div>

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

I believe it's coming from this part of the lua filter where we place the callout header (which has the "callout-title" class) inside of the "callout-inner" block:

https://github.com/carpentries/sandpaper/blob/4b2a219522a30132e33fb05aea2bf37bcb9a7f32/inst/rmarkdown/lua/lesson.lua#L278

Now that I know what to look for I can make sure it's patched before lessons are deployed via pandoc 3.

[trhallam]

Cool, thanks for following up!