carpentries / workbench

Repository for Discussions and Materials about The Carpentries Workbench
https://carpentries.github.io/workbench/
Creative Commons Attribution 4.0 International
17 stars 7 forks source link

callout text all uppercase #59

Closed trhallam closed 1 month ago

trhallam commented 1 year ago

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

image

bencomp commented 1 year ago

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 commented 1 year ago

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 https://github.com/carpentries/sandpaper/issues/470#issuecomment-1561371631 for an example of what the output looks like).

zkamvar commented 1 year ago

And I apologise for not replying sooner. The last quarter has been nothing but chaos šŸ˜ž

trhallam commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Cool, thanks for following up!

froggleston commented 1 month ago

This is now resolved in https://github.com/carpentries/workbench/issues/81