Add fa_icon() helper function

NAMESPACE

@@ -14,6 +14,7 @@ export(bulma_responsive)
 export(bulma_responsive_alignment)
 export(bulma_responsive_size)
 export(bulma_typography)
+export(fa_icon)
 importFrom(glue,glue)
 importFrom(htmltools,tag)
 importFrom(htmltools,tagList)

R/bulma_document.R

@@ -6,8 +6,28 @@
 #' \itemize{
 #'   \item{`hero`: Classes applied to the hero containing the title}
 #'   \item{`hero_button`: Classes applied to the `header_links` buttons}
+#'   \item{`hero_links`: Links that will be displayed under title as buttons.
+#'         Formatted as a list, each element having entries for `name`, `url`,
+#'         and `icon`. Icons use [Font Awesome](https://fontawesome.com/icons);
+#'         see [fa_icon()] for help constructing the Font Awesome class. The
+#'         full Font Awesome class name is required.}
 #' }
 #'
+#' ```
+#' ---
+#' bulma:
+#'   hero: ["info"]
+#'   hero_button: ["is-secondary", "is-outlined"]
+#'   hero_links:
+#'     - name: Github
+#'       url: https://github.com/
+#'       icon: '`r bulma::fa_icon("github")`'
+#'     - name: Twitter
+#'       url: https://twitter.com
+#'       icon: "fab fa-twitter"
+#' ---
+#' ```
+#'
 #' @inheritDotParams rmarkdown::html_document_base
 #' @export
 bulma_document <- function(
@@ -44,7 +64,7 @@ bulma_document <- function(
       src = bulma_file("bulma"),
       stylesheet = "bulma.0.7.2.min.css"
     )
-  extra_dependencies <- append(extra_dependencies, list(deps))
+  extra_dependencies <- append(extra_dependencies, list(deps, rmarkdown::html_dependency_font_awesome()))
 
   # preprocessor ----
   pre_processor <- function(metadata, input_file, runtime, knit_meta, files_dir, output_dir) {

R/constants.R

@@ -29,3 +29,79 @@ bulma_constants <- function(
     "alignment" = c("centered", "justified", "left", "right")
   )
 }
+
+# From shiny:::font_awesome_brands
+font_awesome_brands <-
+  c("500px", "accessible-icon", "accusoft", "adn", "adversal",
+    "affiliatetheme", "algolia", "alipay", "amazon", "amazon-pay",
+    "amilia", "android", "angellist", "angrycreative", "angular",
+    "app-store", "app-store-ios", "apper", "apple", "apple-pay",
+    "asymmetrik", "audible", "autoprefixer", "avianex", "aviato",
+    "aws", "bandcamp", "behance", "behance-square", "bimobject",
+    "bitbucket", "bitcoin", "bity", "black-tie", "blackberry", "blogger",
+    "blogger-b", "bluetooth", "bluetooth-b", "btc", "buromobelexperte",
+    "buysellads", "cc-amazon-pay", "cc-amex", "cc-apple-pay", "cc-diners-club",
+    "cc-discover", "cc-jcb", "cc-mastercard", "cc-paypal", "cc-stripe",
+    "cc-visa", "centercode", "chrome", "cloudscale", "cloudsmith",
+    "cloudversify", "codepen", "codiepie", "connectdevelop", "contao",
+    "cpanel", "creative-commons", "creative-commons-by", "creative-commons-nc",
+    "creative-commons-nc-eu", "creative-commons-nc-jp", "creative-commons-nd",
+    "creative-commons-pd", "creative-commons-pd-alt", "creative-commons-remix",
+    "creative-commons-sa", "creative-commons-sampling", "creative-commons-sampling-plus",
+    "creative-commons-share", "css3", "css3-alt", "cuttlefish", "d-and-d",
+    "dashcube", "delicious", "deploydog", "deskpro", "deviantart",
+    "digg", "digital-ocean", "discord", "discourse", "dochub", "docker",
+    "draft2digital", "dribbble", "dribbble-square", "dropbox", "drupal",
+    "dyalog", "earlybirds", "ebay", "edge", "elementor", "ello",
+    "ember", "empire", "envira", "erlang", "ethereum", "etsy", "expeditedssl",
+    "facebook", "facebook-f", "facebook-messenger", "facebook-square",
+    "firefox", "first-order", "first-order-alt", "firstdraft", "flickr",
+    "flipboard", "fly", "font-awesome", "font-awesome-alt", "font-awesome-flag",
+    "font-awesome-logo-full", "fonticons", "fonticons-fi", "fort-awesome",
+    "fort-awesome-alt", "forumbee", "foursquare", "free-code-camp",
+    "freebsd", "fulcrum", "galactic-republic", "galactic-senate",
+    "get-pocket", "gg", "gg-circle", "git", "git-square", "github",
+    "github-alt", "github-square", "gitkraken", "gitlab", "gitter",
+    "glide", "glide-g", "gofore", "goodreads", "goodreads-g", "google",
+    "google-drive", "google-play", "google-plus", "google-plus-g",
+    "google-plus-square", "google-wallet", "gratipay", "grav", "gripfire",
+    "grunt", "gulp", "hacker-news", "hacker-news-square", "hackerrank",
+    "hips", "hire-a-helper", "hooli", "hornbill", "hotjar", "houzz",
+    "html5", "hubspot", "imdb", "instagram", "internet-explorer",
+    "ioxhost", "itunes", "itunes-note", "java", "jedi-order", "jenkins",
+    "joget", "joomla", "js", "js-square", "jsfiddle", "kaggle", "keybase",
+    "keycdn", "kickstarter", "kickstarter-k", "korvue", "laravel",
+    "lastfm", "lastfm-square", "leanpub", "less", "line", "linkedin",
+    "linkedin-in", "linode", "linux", "lyft", "magento", "mailchimp",
+    "mandalorian", "markdown", "mastodon", "maxcdn", "medapps", "medium",
+    "medium-m", "medrt", "meetup", "megaport", "microsoft", "mix",
+    "mixcloud", "mizuni", "modx", "monero", "napster", "neos", "nimblr",
+    "nintendo-switch", "node", "node-js", "npm", "ns8", "nutritionix",
+    "odnoklassniki", "odnoklassniki-square", "old-republic", "opencart",
+    "openid", "opera", "optin-monster", "osi", "page4", "pagelines",
+    "palfed", "patreon", "paypal", "periscope", "phabricator", "phoenix-framework",
+    "phoenix-squadron", "php", "pied-piper", "pied-piper-alt", "pied-piper-hat",
+    "pied-piper-pp", "pinterest", "pinterest-p", "pinterest-square",
+    "playstation", "product-hunt", "pushed", "python", "qq", "quinscape",
+    "quora", "r-project", "ravelry", "react", "readme", "rebel",
+    "red-river", "reddit", "reddit-alien", "reddit-square", "rendact",
+    "renren", "replyd", "researchgate", "resolving", "rev", "rocketchat",
+    "rockrms", "safari", "sass", "schlix", "scribd", "searchengin",
+    "sellcast", "sellsy", "servicestack", "shirtsinbulk", "shopware",
+    "simplybuilt", "sistrix", "sith", "skyatlas", "skype", "slack",
+    "slack-hash", "slideshare", "snapchat", "snapchat-ghost", "snapchat-square",
+    "soundcloud", "speakap", "spotify", "squarespace", "stack-exchange",
+    "stack-overflow", "staylinked", "steam", "steam-square", "steam-symbol",
+    "sticker-mule", "strava", "stripe", "stripe-s", "studiovinari",
+    "stumbleupon", "stumbleupon-circle", "superpowers", "supple",
+    "teamspeak", "telegram", "telegram-plane", "tencent-weibo", "the-red-yeti",
+    "themeco", "themeisle", "trade-federation", "trello", "tripadvisor",
+    "tumblr", "tumblr-square", "twitch", "twitter", "twitter-square",
+    "typo3", "uber", "uikit", "uniregistry", "untappd", "usb", "ussunnah",
+    "vaadin", "viacoin", "viadeo", "viadeo-square", "viber", "vimeo",
+    "vimeo-square", "vimeo-v", "vine", "vk", "vnv", "vuejs", "weebly",
+    "weibo", "weixin", "whatsapp", "whatsapp-square", "whmcs", "wikipedia-w",
+    "windows", "wix", "wolf-pack-battalion", "wordpress", "wordpress-simple",
+    "wpbeginner", "wpexplorer", "wpforms", "xbox", "xing", "xing-square",
+    "y-combinator", "yahoo", "yandex", "yandex-international", "yelp",
+    "yoast", "youtube", "youtube-square", "zhihu")

R/utils.R

@@ -67,3 +67,28 @@ str_trim <- function(x) {
   x <- gsub("^\\s*|\\s*$", "", x)
   gsub("\\s+", " ", x)
 }
+
+#' Font Awesome Icon
+#'
+#' Create the correct Font Awesome class.
+#' @param name Name of the Font Awesome icon
+#' @param solid Should the solid or the regular icon be used?
+#' @param as_html If `FALSE` (default), only the icon class is returned.
+#' @examples
+#' fa_icon("github")
+#' fa_icon("star")
+#' fa_icon("star", FALSE)
+#'
+#' @references <https://fontawesome.com/icons>
+#' @export
+fa_icon <- function(name, solid = TRUE, as_html = FALSE) {
+  iconClass <- if (name %in% font_awesome_brands) "fab" else {
+    if (solid) "fas" else "far"
+  }
+  iconClass <- paste(iconClass, paste0("fa-", name))
+  if (!as_html) return(iconClass)
+
+  icon <- tag_function("i")(class = iconClass)
+  htmltools::htmlDependencies(icon) <- rmarkdown::html_dependency_font_awesome()
+  icon
+}

inst/bulma/bulma.html

@@ -50,7 +50,9 @@ pre, code {
 $for(css)$
   <link rel="stylesheet" href="$css$" />
 $endfor$
+  <!--
   <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
+  -->
 $for(header-includes)$
   $header-includes$
 $endfor$
@@ -68,11 +70,20 @@ $endif$
 $if(date)$
 <h3 class="subtitle is-5 toc-ignore">$date$</h3>
 $endif$
-$if(header-links)$
-$for(header-links)$
-<a class="button $if(bulma.hero_button)$$for(bulma.hero_button)$$bulma.hero_button$$sep$ $endfor$$else$is-primary is-inverted is-outlined$endif$" href="$header-links.url$">$header-links.name$</a>
+$if(bulma.hero_links)$
+<div class="buttons">
+$for(bulma.hero_links)$
+<a class="button $if(bulma.hero_button)$$for(bulma.hero_button)$ is-$bulma.hero_button$$endfor$$else$is-primary is-inverted is-outlined$endif$" href="$bulma.hero_links.url$">
+$if(bulma.hero_links.icon)$
+<span class="icon is-small">
+  <i class="$bulma.hero_links.icon$"></i>
+</span>
+$endif$
+<span>$bulma.hero_links.name$</span>
+</a>
 $endfor$
-$endif$ <!-- header-links -->
+</div>
+$endif$ <!-- bulma.hero_links -->
 </div>
 </div>
 </section>