Adding social media accounts to my web page

When I transitioned my personal page to Quarto, I was missing an easy way to add my social media accounts using fontawesome icons. I was using the Hugo Apéro theme for blogdown before, and there it was just a matter of adding the usernames in the yaml header. As far as I understood, this is not possible with Quarto (yet).

So at that time, I kind of hacked my way to what I wanted using some simple lua scripts.

function twitter(handle)
  local output = '<a href="https://twitter.com/' .. pandoc.utils.stringify(handle) .. '"><i class="bi bi-twitter" ></i></a>'
  return pandoc.RawBlock('html', output)
end

function github(handle)
  local output = '<a href="https://github.com/' .. pandoc.utils.stringify(handle) .. '"><i class="bi bi-github" ></i></a>'
  return pandoc.RawBlock('html', output)
end

function scholar(handle)
  local output = '<a href="https://scholar.google.de/citations?user=' .. pandoc.utils.stringify(handle) .. '&hl=en"><i class="ai ai-google-scholar" ></i></a>'
  return pandoc.RawBlock('html', output)
end

function orcid(handle)
  local output = '<a href="https://orcid.org/' .. pandoc.utils.stringify(handle) .. '"><i class="ai ai-orcid" ></i></a>'
  return pandoc.RawBlock('html', output)
end

The lua script defines shortcodes that can be used like this

{{< twitter schochastics >}}
{{< github schochastics >}}
{{< scholar MFlgHdcAAAAJ >}}
{{< orcid 0000-0003-2952-4812 >}}

and here is what it looks like on my page.

You can find the full code of my page on github.

The academicons extension

Quarto extensions are a great way to easily add shortcodes to your quarto projects without the need of adding lua scripts to the yaml header. To add fontawesome icon support you install the extension in your project

quarto install extension quarto-ext/fontawesome

and then you can use any kind of free icon via the shortcode {{< fa >}}.

A similar library to fontawesome (but much smaller) are academicons, which provide support for, well, academic icons. Since the library is very similar to fontawesome, it was quite straightforward to build a quarto extension that gives a shortcode to use the icons. To install it in your project just do

quarto install extension schochastics/academicons

and to embed an icon, you can use the {{{< ai >}}} shortcode. All available icons can be found here:

https://jpswalsh.github.io/academicons/

Here is the source code for a minimal example: example.qmd
This is the output of example.qmd for HTML.