Add BS4 templates and assets (with help from @jayhesselberth).

DESCRIPTION

@@ -27,12 +27,14 @@ BugReports: https://github.com/r-lib/pkgdown/issues
 Depends: 
     R (>= 3.1.0)
 Imports: 
+    bslib,
     callr (>= 2.0.2),
     crayon,
     desc,
     digest,
     downlit,
     fs (>= 1.3.0),
+    htmltools,
     httr (>= 1.4.2),
     magrittr,
     memoise,
@@ -65,5 +67,5 @@ VignetteBuilder:
 Config/testthat/edition: 3
 Encoding: UTF-8
 Roxygen: list(markdown = TRUE)
-RoxygenNote: 7.1.1
+RoxygenNote: 7.1.1.9001
 SystemRequirements: pandoc

NAMESPACE

@@ -131,6 +131,8 @@ export(template_navbar)
 export(template_reference)
 import(fs)
 import(rlang)
+importFrom(htmltools,tagList)
+importFrom(htmltools,tags)
 importFrom(magrittr,"%>%")
 importFrom(memoise,memoise)
 importFrom(utils,installed.packages)

NEWS.md

@@ -1,5 +1,7 @@
 # pkgdown (development version)
 
+* pkgdown now support Bootstrap 4 (@jayhesselberth)
+
 * Authors configuration is more flexible. Users can now:
   * Choose the roles used for filtering authors for the sidebar and footer.
   * Choose the text before authors in the footer.

R/build-home-index.R

@@ -25,7 +25,8 @@ build_home_index <- function(pkg = ".", quiet = TRUE) {
     dst_path,
     tweak_homepage_html,
     strip_header = strip_header,
-    sidebar = !isFALSE(pkg$meta$home$sidebar)
+    sidebar = !isFALSE(pkg$meta$home$sidebar),
+    bs_version = get_bs_version(pkg)
   )
 
   invisible()

R/build-news.R

@@ -259,7 +259,7 @@ pkg_timeline <- function(package) {
 tweak_news_heading <- function(x, versions, timeline) {
   x %>%
     xml2::xml_find_all(".//h1") %>%
-    xml2::xml_set_attr("class", "page-header")
+    xml2::xml_set_attrs(c("class" = "pb-2 mt-4 mb-2 border-bottom"))
 
   x %>%
     xml2::xml_find_all(".//h1") %>%
@@ -271,13 +271,17 @@ tweak_news_heading <- function(x, versions, timeline) {
   date <- timeline$date[match(versions, timeline$version)]
   date_str <- ifelse(is.na(date), "Unreleased", as.character(date))
 
-  date_nodes <- paste(" <small>", date_str, "</small>", collapse = "") %>%
+  cran_release_string <- sprintf(
+    "<h6 class='text-muted' data-toc-skip> CRAN release: %s</h6>",
+    date_str
+  )
+  date_nodes <- cran_release_string %>%
     xml2::read_html() %>%
-    xml2::xml_find_all(".//small")
+    xml2::xml_find_all(".//h6")
 
   x %>%
     xml2::xml_find_all(".//h1") %>%
-    xml2::xml_add_child(date_nodes, .where = 1)
+    xml2::xml_add_sibling(date_nodes, .where = "after")
 
   invisible()
 }

R/html-tweak.R

@@ -159,7 +159,10 @@ tweak_rmarkdown_html <- function(html, input_path, pkg = pkg) {
   invisible()
 }
 
-tweak_homepage_html <- function(html, strip_header = FALSE, sidebar = TRUE) {
+tweak_homepage_html <- function(
+  html, strip_header = FALSE, sidebar = TRUE,
+  bs_version
+  ) {
 
   html <- tweak_sidebar_html(html, sidebar = sidebar)
 
@@ -172,7 +175,11 @@ tweak_homepage_html <- function(html, strip_header = FALSE, sidebar = TRUE) {
   if (strip_header) {
     xml2::xml_remove(header, free = TRUE)
   } else {
-    page_header_text <- paste0("<div class='page-header'>", header, "</div>")
+     page_header_text <- if (bs_version == 3) {
+      paste0("<div class='page-header'>", header, "</div>")
+    } else {
+      sprintf("<div class='pb-2 mt-4 mb-2 border-bottom'>%s</div>", header)
+      }
     page_header <- xml2::read_html(page_header_text) %>% xml2::xml_find_first("//div")
     xml2::xml_replace(header, page_header)
   }

R/init.R

@@ -59,7 +59,13 @@ copy_assets <- function(pkg = ".") {
 
   # Copy default assets
   if (!identical(template$default_assets, FALSE)) {
-    copy_asset_dir(pkg, path_pkgdown("assets"))
+    copy_asset_dir(
+      pkg,
+      path_pkgdown(
+        "assets",
+        paste0("BS", get_bs_version(pkg))
+      )
+    )
   }
 
   # Copy extras
@@ -74,8 +80,12 @@ copy_assets <- function(pkg = ".") {
   if (!is.null(template$package)) {
     copy_asset_dir(
       pkg,
-      path_package_pkgdown(template$package, bs_version = NULL, "assets")
+      path_package_pkgdown(
+        template$package,
+        bs_version = get_bs_version(pkg),
+        "assets"
       )
+    )
   }
 }
 

R/navbar.R

@@ -18,14 +18,25 @@ data_navbar <- function(pkg = ".", depth = 0L) {
   left <- navbar$left %||% components[left_comp]
   right <- navbar$right %||% components[right_comp]
 
+  if (get_bs_version(pkg) == 3) {
+    return(
+      list(
+      type = navbar$type %||% "default",
+      left = render_navbar_links(left, depth = depth, get_bs_version(pkg)),
+      right = render_navbar_links(right, depth = depth, get_bs_version(pkg))
+      )
+    )
+  }
+
   list(
-    type = navbar$type %||% "default",
-    left = render_navbar_links(left, depth = depth),
-    right = render_navbar_links(right, depth = depth)
+    type = navbar$type %||% "light",
+    bg = navbar$bg %||% "light",
+    left = render_navbar_links(left, depth = depth, get_bs_version(pkg)),
+    right = render_navbar_links(right, depth = depth, get_bs_version(pkg))
   )
 }
 
-render_navbar_links <- function(x, depth = 0L) {
+render_navbar_links <- function(x, depth = 0L, bs_version) {
   stopifnot(is.integer(depth), depth >= 0L)
 
   tweak <- function(x) {
@@ -43,7 +54,13 @@ render_navbar_links <- function(x, depth = 0L) {
   if (depth != 0L) {
     x <- lapply(x, tweak)
   }
-  rmarkdown::navbar_links_html(x)
+
+  if (bs_version == 3) {
+    return(rmarkdown::navbar_links_html(x))
+  }
+
+  bs4_navbar_links_html(x)
+
 }
 
 # Default navbar ----------------------------------------------------------
@@ -176,3 +193,97 @@ pkg_navbar_vignettes <- function(
 
   tibble::tibble(name = name, title = title, file_out)
 }
+
+bs4_navbar_links_html <- function(links) {
+  as.character(bs4_navbar_links_tags(links))
+}
+
+#' @importFrom htmltools tags tagList
+bs4_navbar_links_tags <- function(links, depth = 0L) {
+
+  # sub-menu
+  is_submenu <- depth > 0L
+
+  if (!is.null(links)) {
+
+    tags <- lapply(links, function(x) {
+
+      if (!is.null(x$menu)) {
+
+
+        if (is_submenu) {
+          menu_class <- "dropdown-item"
+          link_text <- bs4_navbar_link_text(x)
+        } else {
+          menu_class <- "nav-item dropdown"
+          link_text <- bs4_navbar_link_text(x)
+        }
+
+        submenuLinks <- bs4_navbar_links_tags(x$menu, depth = depth + 1L)
+
+        tags$li(
+          class = menu_class,
+          tags$a(
+            href = "#", class = "nav-link dropdown-toggle",
+            `data-toggle` = "dropdown", role = "button",
+            `aria-expanded` = "false", `aria-haspopup` = "true",
+            link_text
+          ),
+          tags$div(
+            class = "dropdown-menu",
+            `aria-labelledby` ="navbarDropdown",
+            submenuLinks
+          )
+        )
+
+      } else if (!is.null(x$text) && grepl("^\\s*-{3,}\\s*$", x$text)) {
+
+        # divider
+        tags$div(class = "dropdown-divider")
+
+      } else if (!is.null(x$text) && is.null(x$href)) {
+        # header
+        tags$h6(class = "dropdown-header", `data-toc-skip` = NA, x$text)
+
+      } else {
+        # standard menu item
+        textTags <- bs4_navbar_link_text(x)
+
+        if (is_submenu) {
+          tags$a(
+            class = "dropdown-item",
+            href = x$href,
+            textTags
+          )
+        } else {
+          tags$li(
+            class = "nav-item",
+            tags$a(
+              class = "nav-link",
+              href = x$href,
+              textTags
+            )
+          )
+        }
+      }
+    })
+    tagList(tags)
+  } else {
+    tagList()
+  }
+}
+
+bs4_navbar_link_text <- function(x, ...) {
+
+  if (!is.null(x$icon)) {
+    # find the iconset
+    split <- strsplit(x$icon, "-")
+    if (length(split[[1]]) > 1)
+      iconset <- split[[1]][[1]]
+    else
+      iconset <- ""
+    tagList(tags$span(class = paste(iconset, x$icon)), " ", x$text, ...)
+  }
+  else
+    tagList(x$text, ...)
+}

R/render.r

@@ -1,6 +1,6 @@
 #' Render page with template
 #'
-#' Each page is composed of four templates: "head", "header", "content", and
+#' Each page is composed of four templates: "head", "content", and
 #' "footer". Each of these templates is rendered using the `data`, and
 #' then assembled into an overall page using the "layout" template.
 #'
@@ -42,9 +42,12 @@ render_page <- function(pkg = ".", name, data, path = "", depth = NULL, quiet =
 
   data$footer <- pkgdown_footer(data, pkg)
 
+  # Dependencies for head
+  data$headdeps <- data_deps(pkg = pkg, depth = depth)
+
   # render template components
   pieces <- c(
-    "head", "navbar", "header", "content", "docsearch", "footer",
+    "head", "navbar", "content", "docsearch", "footer",
     "in-header", "after-head", "before-body", "after-body"
   )
 
@@ -370,3 +373,53 @@ footer_pkgdown <- function(data) {
     data$pkgdown$version, "."
   )
 }
+
+data_deps <- function(pkg, depth) {
+
+  # theme variables from configuration
+  bs_version <- get_bs_version(pkg)
+  bootswatch_theme <- pkg$meta[["template"]]$bootswatch %||% NULL
+  bs_theme <- do.call(
+    bslib::bs_theme,
+    c(
+      list(
+        version = bs_version,
+        bootswatch = bootswatch_theme
+        ),
+      pkg$meta[["template"]]$bslib
+    )
+  )
+  deps <- bslib::bs_theme_dependencies(bs_theme)
+  # Add other dependencies - TODO: more of those?
+  # Even font awesome had a too old version in R Markdown (no ORCID)
+
+  # Dependencies files end up at the website root in a deps folder
+  deps <- lapply(
+    deps,
+    htmltools::copyDependencyToDir,
+    file.path(pkg$dst_path, "deps")
+  )
+
+  # Function needed for indicating where that deps folder is compared to here
+  transform_path <- function(x) {
+
+    x <- gsub(pkg$dst_path, "", x)
+
+    if (depth == 0) {
+      return(sub("/", "", x))
+    }
+
+    paste0(
+      paste0(rep("..", depth), collapse = "/"), # as many levels up as depth
+      x
+    )
+
+  }
+
+  # Tags ready to be added in heads
+  htmltools::renderDependencies(
+    deps,
+    srcType = "file",
+    hrefFilter = transform_path
+  )
+}

inst/assets/pkgdown.js → inst/assets/BS3/pkgdown.js

@@ -80,7 +80,7 @@
     $(document).ready(function() {
       var copyButton = "<button type='button' class='btn btn-primary btn-copy-ex' type = 'submit' title='Copy to clipboard' aria-label='Copy to clipboard' data-toggle='tooltip' data-placement='left auto' data-trigger='hover' data-clipboard-copy><i class='fa fa-copy'></i></button>";
 
-      $(".examples, div.sourceCode").wrap("<div class='hasCopyButton'></div>");
+      $(".examples, div.sourceCode").addClass("hasCopyButton");
 
       // Insert copy buttons:
       $(copyButton).prependTo(".hasCopyButton");