Shortcodes for extension icons do not work for nav/sidebar

[tosaddler]

Bug description

It seems there isn't an easy way to expand the Bootstrap icon sets used for sidebar and navbar links, especially in 'About' pages. I've tried a couple of different methods to get this to work, but it seems like there should be an easier way to extend the icon sets.

Steps to reproduce

quarto install extension schochastics/academicons

---
title: "Test About Page"
about:
  links:
    - icon: orcid
      text: ORCiD
      href: https://orcid.org/0000-0000-0000-0000
    - icon: {{< ai orcid >}}
      text: ORCiD Shortcode
      href: https://orcid.org/0000-0000-0000-0000
    - icon: orcid.svg
      text: ORCiD SVG
      href: https://orcid.org/0000-0000-0000-0000
---
Test text.

Expected behavior

Icons from shortcodes/extensions should extend the Bootstrap icon set.

Actual behavior

No methods seems to work except for the original Bootstrap icon set.

Your environment

• IDE: RStudio Desktop 2023.06.2 Build 561
• Windows 10 Latest
• Quarto 1.3.353 and 1.4.367

Quarto check output

[>] Checking versions of quarto binary dependencies... Pandoc version 3.1.1: OK Dart Sass version 1.55.0: OK [>] Checking versions of quarto dependencies......OK [>] Checking Quarto installation......OK Version: 1.3.353 Path: C:\Program Files\RStudio\resources\app\bin\quarto\bin CodePage: 1252

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....(None)

  Unable to locate an installed version of Python 3.
  Install Python 3 from https://www.python.org/downloads/

[>] Checking R installation...........(None)

  Unable to locate an installed version of R.
  Install R from https://cloud.r-project.org/

---

Quarto 1.4.367 [>] Checking versions of quarto binary dependencies... Pandoc version 3.1.8: OK Dart Sass version 1.55.0: OK Deno version 1.33.4: OK [>] Checking versions of quarto dependencies......OK [>] Checking Quarto installation......OK Version: 1.4.367 Path: C:\Users\treyo\scoop\apps\quarto-prerelease\current\bin CodePage: 1252

[>] Checking tools....................OK TinyTeX: (not installed) Chromium: (not installed)

[>] Checking LaTeX....................OK Tex: (not detected)

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK Version: 3.10.6 Path: C:/Users/treyo/scoop/apps/python310/3.10.6/python.exe Jupyter: (None)

  Jupyter is not available in this Python installation.
  Install with py -m pip install jupyter

[>] Checking R installation...........OK Version: 4.3.0 Path: C:/PROGRA~1/R/R-43~1.0 LibPaths:

• C:/Users/treyo/dev/personal-page/renv/library/R-4.3/x86_64-w64-mingw32
• C:/Users/treyo/AppData/Local/R/cache/R/renv/sandbox/R-4.3/x86_64-w64-mingw32/81469aae knitr: 1.41 rmarkdown: 2.19

[>] Checking Knitr engine render......OK

[mcanouil]

Icon are native icons not markdown/shortcode. You need to use text. There is no bug here.

[tosaddler]

Can you please show me an example of what you mean? Sorry I just have been trying to get this to work for a while now and getting frustrated. @mcanouil

[cscheid]

Try

      - href: https://your-link.org
        text: "{{< ai your-icon >}}"

[mcanouil]

---
title: "Test About Page"
about:
  links:
    - text: "{{< ai orcid >}}"
      href: https://orcid.org/0000-0000-0000-0000
---

Test text.

[tosaddler]

@mcanouil @cscheid Thank you both so much!!!!! I absolutely love Quarto and all the work that you have done for it.

[mcanouil]

FYI, searching in Discussions using "shortcode" "navbar" "custom icon" shows several related discussions.

[tosaddler]

@mcanouil Any chance of having this minimal example added to the 'About' page documentation? I'm sure that I won't be the last person to go looking for this, and it isn't particularly clear in the documentation.

And my apologies, I did search through the issues but again, frustration probably played a part in me not finding the answer.

[cscheid]

Any chance of having this minimal example added to the 'About' page documentation?

Thanks for the feedback. What page are you referring to? I don't think we want to do this in the "About" page because this isn't about the About page; it's about navbar specification more generally.

One thing we might be able to improve in the docs is to change https://quarto.org/docs/websites/website-navigation.html to include an example of a custom icon in the text field.

[mcanouil]

The thing is that text fields takes markdown so there is no way to be exhaustive about what you can do there. Standard usage is to use the native icons. Advanced usage is to use markdown which suggest you know what it is. So not sure adding this in about page and nowhere else or add this every where is a smart move especially considering the fact that it can be easily found in discussions.

The smart move is maybe to ensure it is documented that text takes markdown.

[tosaddler]

I do think that it would be helpful to mention it on https://quarto.org/docs/websites/website-about.html, because that is where I would have expected to find it.

And I don't know about "it can easily be found in discussions" is the right answer when a lot of the scientists I work with won't go looking on GitHub for answers, they will search the documentation and likely nowhere else unfortunately.

[mcanouil]

It's not just about the "about" page. Every single text field of any navigation components is supposed to read/parse markdown (if one is not, then it's an omission).

And I don't know about "it can easily be found in discussions" is the right answer

Never said it was the right answer. It's simply an answer. There are various use cases in Discussions which are helpful. I never meant, better documenting text being able to read/parse markdown should not be done.

[tosaddler]

It's not just about the "about" page. Every single text field of any navigation components is supposed to read/parse markdown (if one is not, then it's an omission).

I understand the point that you are trying to make, however from a practical point of view I still think it would be beneficial to mention this capability in the minimal example on the website-about.html page.

[mcanouil]

See:

• https://github.com/quarto-dev/quarto-cli/issues/6858

[cscheid]

The smart move is maybe to ensure it is documented that text takes markdown.

Yes. Another thing our documentation system needs is the ability to refer directly to a schema's values. We would then update the documentation on the .yml files, and quarto-web automatically would pick up the right changes not only in the reference, but in the guides themselves.