Modify pkgdown to use bookdown::htmldocument2 and use custom css to style captions and abstract (suitable for Biocstyle vignettes)

README.md

This gist provides a workaround proposed by Andrzej K. Oleś (@aoles) to use pkgdown with vignettes formatted with Biocstyle::html_document2 or bookdown::html_document2, see r-lib/pkgdown#323.

1. Copy extra.css to pkgdown/extra.css in your package sources (i.e. pkgdown is a top-level directory alongside R, man, etc) or merge with your existing extra.css.

2. Source build_rmarkdown_format.R before calling build_site() or build_articles(). Note build_site must be called to copy extra.css to docs, so must be used the first time extra.css is added or any time it is modified for the changes to take effect.

build_rmarkdown_format.R

# code by Andrzej K. Oleś @aoles
# https://github.com/hadley/pkgdown/issues/323#issuecomment-341907743
# added `number_sections = FALSE` for better compatibility with Biocstyle
library(pkgdown)
assignInNamespace(
    "build_rmarkdown_format",
    ns = "pkgdown",
    value = function(pkg = ".",
                     depth = 1L,
                     data = list(),
                     toc = TRUE) {
        # Render vignette template to temporary file
        path <- tempfile(fileext = ".html")
        suppressMessages(pkgdown::render_page(pkg, "vignette", data, path, depth = depth))
        
        list(
            path = path,
            format = bookdown::html_document2(
                toc = toc,
                toc_depth = 2,
                self_contained = FALSE,
                theme = NULL,
                template = path,
                number_sections = FALSE
            )
        )
    }
)

extra.css

/* add padding to figure/table anchors to allow space for navbar */
.figure, .table span {
  padding-top: 60px;
}
/* style figure captions as table captions */
.caption {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #777;
  text-align: left;
}
/* style abstract to stand out from main text */
p.abstract{
  font-size: 24px;
  font-family: inherit;
  text-align: center;
  font-weight: bold;
}
div.abstract{
  margin: auto;
  width: 90%;
  padding-bottom: 15px;
}
.contents{
  border-top: 1px solid #eee;
  padding-top: 9px;
}