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).
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
orfalse
appearance
:default
,minimal
orsimple
icon
:true
orfalse
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.