From bb9eaa844dbcc847a1e186f9b08b6a64ad2d0d44 Mon Sep 17 00:00:00 2001 From: JJ Allaire Date: Sun, 10 Jul 2022 12:55:17 -0400 Subject: [PATCH] various improvements: - support for brands - improved README and example --- README.md | 31 +++++++++++++++++++------ _extensions/fontawesome/fontawesome.lua | 7 +++++- example.qmd | 12 +++++++--- 3 files changed, 39 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 41a65f6..f4ec88e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Font Awesome Extension for Quarto -This extension allows you to use [Font Awesome](https://fontawesome.com/) icons in your quarto documents. +This extension provides support including free icons provided by [Font Awesome](https://fontawesome.com). Icons can be used in both HTML (via [Font Awesome 6 Free](https://fontawesome.com/search?m=free)) and PDF (via the [fontawesome5 LaTeX package](https://ctan.org/pkg/fontawesome5?lang=en)). ## Installing @@ -13,19 +13,36 @@ If you're using version control, you will want to check in this directory. ## Using -The extension provides the `fa` shortcode. For example: +To embed an icon, use the `{{{< fa >}}}` shortcode. For example: ``` {{< fa thumbs-up >}} {{< fa folder >}} +{{< fa chess-pawn }} +{{{< fa brands bluetooth }}} ``` -Here is the source code for a minimal example: [example.qmd](example.qmd) +This extension includes support for only free Font Awesome icons (there are roughly 2,000 free icons, while the complete set of Pro icons consists of more than 16,000). You can browse all of the available free icons here: -This is the output of `example.qmd` for [HTML](https://quarto-ext.github.io/fontawesome/) and [PDF](https://quarto-ext.github.io/fontawesome/example.pdf). + + +### Brands + +Note that there is a `brands` prefix used within the `bluetooth` example above. If you choose an icon from the `brands` collection, you will need to add a `brands` collection specifier. For example, if you search the free icons for "github" and then click on the `github` icon, you'll see this as the suggested HTML to embed the icon: + +```html + +``` +The `fa-brands` indicates that the icon is in the `brands` collection. To use this with Quarto just add the `brands` collection prefix as follows: -# Known Issues +```default +{{{< fa brands github }}} +``` + +## Example + +Here is the source code for a minimal example: [example.qmd](example.qmd) + +This is the output of `example.qmd` for [HTML](https://quarto-ext.github.io/fontawesome/) and [PDF](https://quarto-ext.github.io/fontawesome/example.pdf). -* The PDF format uses fontawesome5, while the HTML format uses fontawesome6. -* No additional styling or formatting options diff --git a/_extensions/fontawesome/fontawesome.lua b/_extensions/fontawesome/fontawesome.lua index b536715..1528d45 100644 --- a/_extensions/fontawesome/fontawesome.lua +++ b/_extensions/fontawesome/fontawesome.lua @@ -13,12 +13,17 @@ end return { ["fa"] = function(args, kwargs) + local group = "solid" local icon = pandoc.utils.stringify(args[1]) + if #args > 1 then + group = icon + icon = pandoc.utils.stringify(args[2]) + end -- detect html (excluding epub which won't handle fa) if quarto.doc.isFormat("html:js") then ensureHtmlDeps() - return pandoc.RawInline('html', "") + return pandoc.RawInline('html', "") -- detect pdf / beamer / latex / etc elseif quarto.doc.isFormat("pdf") then ensureLatexDeps() diff --git a/example.qmd b/example.qmd index f61d71a..d45e67a 100644 --- a/example.qmd +++ b/example.qmd @@ -5,11 +5,17 @@ format: pdf: default --- -This extension allows you to use font-awesome icons in your Quarto HTML and PDF documents. It provides a shortcode `fa`: +This extension allows you to use font-awesome icons in your Quarto HTML and PDF documents. It provides an `{{{< fa >}}}` shortcode: -```markdown +``` markdown {{{< fa icon-name >}}} ``` -For example, use `{{{< fa thumbs-up >}}}` to get {{< fa thumbs-up >}}, or `{{{< fa folder >}}}` to get {{< fa folder >}}. +For example: +| Shortcode | Icon | +|---------------------------------|-----------------------------| +| `{{{< fa thumbs-up >}}}` | {{< fa thumbs-up >}} | +| `{{{< fa folder >}}}` | {{< fa folder >}} | +| `{{{< fa chess-pawn >}}}` | {{< fa chess-pawn >}} | +| `{{{< fa brands bluetooth >}}}` | {{< fa brands bluetooth >}} |