Make collapsible callouts with social-embeds for HTML output format. Therefore, this filter provides Six new callouts with embedded social contents (Github gist, twitter tweets, mastodon posts, loom video, vimeo video and, youtube video).

Live Demo

⚠️ This extension requires the quarto version to be at least 1.3

quarto add ShafayetShafee/collapse-social-embeds

This will install the extension under the _extensions subdirectory. If you're using version control, you will want to check in this directory.

At first specify the collapse-social-embeds filter in document yaml,

---
format: html
filters:
  - collapse-social-embeds
---

To make collapsible callouts with embedded content, you need to use pandoc Divs (:::) and specify one of the classes .gist, .loom, .mastodon, .twiiter, .vimeo, .youtube and specify the attributes with key-value pair like user=<user_name>.

To create a collapsible callouts with embedded github gist, use the class .gist, specify a user name to user attribute and a gist id to gist_id attribute.

::: {.gist user=<username> gist_id=<gist_id> }
:::

So to embed the gist https://gist.github.com/tarleb/852f6ae98764bea56aeeac979f3c17be within a collapsible callouts,

::: {.gist user=tarleb gist_id=852f6ae98764bea56aeeac979f3c17be }
:::

Create a collapsible callouts with embedded tweets from Twitter using the class .twitter and user and status_id attributes as following,

::: {.twitter user=<user-name> status_id=<status-id> }
:::

So to embed the tweet, https://twitter.com/pandoc_tips/status/1576105972103516160?s=20&t=v_a8PrZRW8uIZLUBba6JAQ within a collapsible callouts,

::: {.twitter user=pandoc_tips status_id=1576105972103516160 }
:::

Create a collapsible callouts with embedded posts from Mastodon using the class .mastodon and url attributes as following,

::: {.mastodon url="<mastodon-post-url>" }
:::

(where the url value is wrapped with quotes)

So to embed the post https://fosstodon.org/@pandoc/109712438144865859 within a collapsible callouts,

::: {.mastodon url="https://fosstodon.org/@pandoc/109712438144865859" }
:::

Create a collapsible callouts with embedded youtube video using the class .youtube and video_id attribute as following,

::: {.youtube video_id=<video id>}
:::

So to embed the youtube video https://www.youtube.com/watch?v=mrvhk2XUfWo within a collapsible callouts,

::: {.youtube video_id=mrvhk2XUfWo }
:::

Create a collapsible callouts with embedded video from Vimeo using the class .vimeo and video_id attribute as following,

::: {.vimeo video_id=<video id>}
:::

So to embed the vimeo video https://vimeo.com/783455878 within a collapsible callouts,

::: {.vimeo video_id=783455878 }
:::

Create a collapsible callouts with embedded video from Loom using the class .loom and video_id attribute as following,

::: {.loom video_id=<video id>}
:::

So to embed the loom video https://www.loom.com/share/8619b03224f74282b6d56cbedbcd3fc6 within a collapsible callouts,

::: {.loom video_id=8619b03224f74282b6d56cbedbcd3fc6 }
:::

To know how to get the callout attributes like user, *_id, refer to the docs of social-embeds, where everything is discussed in detail.

All of the above callout types has the following four general attributes,

• title: The title to appear in callout header.
• collapse: true or false
• appearance: default, minimal or simple
• icon: true or false

And we can specify them as, for example,

::: {.gist user=tarleb gist_id=852f6ae98764bea56aeeac979f3c17be collapse=false appearance=simple icon=false title="Lua Demo"}
:::

Here is the source code for examples of all of the above: example.qmd and here is the rendered document.

This filter simply extends the awesome quarto shortcode extension social-embeds with Quarto callout custom nodes.