Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sellorm/quarto-social-embeds
A Quarto extension to embed social media content
https://github.com/sellorm/quarto-social-embeds
gists quarto quarto-extension social-media twitter vimeo youtube
Last synced: 3 months ago
JSON representation
A Quarto extension to embed social media content
- Host: GitHub
- URL: https://github.com/sellorm/quarto-social-embeds
- Owner: sellorm
- License: mit
- Created: 2022-08-15T14:58:37.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-09T21:38:29.000Z (8 months ago)
- Last Synced: 2024-06-23T04:58:10.185Z (5 months ago)
- Topics: gists, quarto, quarto-extension, social-media, twitter, vimeo, youtube
- Language: Lua
- Homepage: https://quarto-social-embeds.sellorm.com/
- Size: 851 KB
- Stars: 62
- Watchers: 3
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Quarto social embeds
A [Quarto](https://quarto.org) extension to embed content from across the web into a quarto-rendered html document using a shortcode.
Currently includes shortcodes for the following:
* GitHub gists
* Loom
* Twitter
* Vimeo
* Youtube
* Mastodon
## Installation
Install the extension with:
``` bash
quarto install extension sellorm/quarto-social-embeds
```
## Usage
### GitHub gists
Embed a gist using `{{< gist USERNAME GIST_ID >}}`. Both `USERNAME` and `GIST_ID` can be extracted from the gist URL. For instance, in this URL `https://gist.github.com/sellorm/20525aff669acafb975b7495b8f2066e` the username is `sellorm` and the ID is `20525aff669acafb975b7495b8f2066e`, giving us:
```
{{< gist sellorm 20525aff669acafb975b7495b8f2066e >}}
```
See `example.qmd` for a working example.
# Loom
To embed a Loom video in your HTML document use this shortcode:
``` {.markdown shortcodes="false"}
{{< loom >}}
```
Where `` is the loom video ID. For example:
``` {.markdown shortcodes="false"}
{{< loom 8619b03224f74282b6d56cbedbcd3fc6 >}}
```
Which renders like this:
{{< loom 8619b03224f74282b6d56cbedbcd3fc6 >}}
You can get the VIDEO ID from for the URL of the video.
For instance, in the URL `https://www.loom.com/share/8619b03224f74282b6d56cbedbcd3fc6` the video ID is `8619b03224f74282b6d56cbedbcd3fc6`.
### Twitter
To embed a Tweet into your Quarto html document you can use the shortcode like this:
```markdown
{{< tweet >}}
```
or
```markdown
{{< tweet user= id= >}}
```
This second option is provided for compatibility with [Hugo](https://gohugo.io/content-management/shortcodes/#tweet).
For example:
```markdown
{{< tweet sellorm 1555267341327503367 >}}
```
or
```markdown
{{< tweet user=sellorm id=1555267341327503367 >}}
```
You can obtain the username and status id of a tweet by clicking the "share tweet" button and choosing "copy URL".
This will give you a URL like this one: `https://twitter.com/sellorm/status/1555267341327503367?s=21&t=M0M4IA_KW-zMY1rb2XOWZQ`.
The "user" is the section between `twitter.com/` and `/status`.
The status "id" is everything between `status/` and `?` or the end of the URL, whichever comes first.
See `example.qmd` for a full example.
### Youtube
To embed a Youtube video into your Quarto html document you can use the shortcode like this:
```
{{< youtube VIDEO_ID >}}
```
Where `VIDEO_ID` is the youtube video ID. For example:
```
{{< youtube zk9zHqXm6m0 >}}
```
You can obtain the video ID by inspecting Youtube's URLs.
For instance, in this URL, `https://www.youtube.com/watch?v=zk9zHqXm6m0` the video ID is the part after `v=` in the URL.
See `example.qmd` for a working example.
### Vimeo
To embed a Vimo video in your HTML document use this shortcode, `{{< vimeo VIDEO_ID >}}
Where `VIDEO_ID` is the vimeo video ID. For example:
```
{{< vimeo 22439234 >}}
```
You can get the VIDEO ID from for the URL of the video. For instance, in the URL `https://vimeo.com/channels/top/22439234` the video ID is `22439234`.
See `example.qmd` for a working example.
### Mastodon
To embed a post from a mastodon instance in yout HTM document use this shortcode, `{{< mastodon status_url>}}`,
A status URL looks like this `https://mastodon.social/@sellorm/109376707453406631`
```
{{< mastodon https://mastodon.social/@sellorm/109376707453406631>}}
```
See `example.qmd` for a working example.