{"id":13791371,"url":"https://github.com/shafayetShafee/collapse-social-embeds","last_synced_at":"2025-05-12T10:31:41.574Z","repository":{"id":145216813,"uuid":"594759624","full_name":"shafayetShafee/collapse-social-embeds","owner":"shafayetShafee","description":"Make collapsible callouts with contents like Github gist, tweets, youtube video etc for HTML output format.","archived":false,"fork":false,"pushed_at":"2024-01-09T09:41:38.000Z","size":289,"stargazers_count":10,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-18T05:38:55.372Z","etag":null,"topics":["quarto","quarto-extension","quarto-filter","quarto-pub","quartopub"],"latest_commit_sha":null,"homepage":"https://shafayetshafee.github.io/collapse-social-embeds/example.html","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shafayetShafee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-29T15:05:04.000Z","updated_at":"2024-06-09T05:16:52.000Z","dependencies_parsed_at":"2024-01-05T23:50:38.373Z","dependency_job_id":"9d24bf8f-268d-442f-832c-db71b351c1f7","html_url":"https://github.com/shafayetShafee/collapse-social-embeds","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shafayetShafee%2Fcollapse-social-embeds","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shafayetShafee%2Fcollapse-social-embeds/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shafayetShafee%2Fcollapse-social-embeds/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shafayetShafee%2Fcollapse-social-embeds/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shafayetShafee","download_url":"https://codeload.github.com/shafayetShafee/collapse-social-embeds/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253719969,"owners_count":21952934,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["quarto","quarto-extension","quarto-filter","quarto-pub","quartopub"],"created_at":"2024-08-03T22:00:59.396Z","updated_at":"2025-05-12T10:31:41.243Z","avatar_url":"https://github.com/shafayetShafee.png","language":"CSS","funding_links":[],"categories":["Extensions"],"sub_categories":[],"readme":"# `collapse-social-embeds` Extension For Quarto\n\nMake collapsible callouts with [`social-embeds`](https://github.com/sellorm/quarto-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).\n\n[`Live Demo`](https://shafayetshafee.github.io/collapse-social-embeds/example.html)\n\n:warning: **This extension requires the quarto version to be at least [`1.3`](https://quarto.org/docs/download/prerelease.html)**\n\n## Installing\n\n```bash\nquarto add ShafayetShafee/collapse-social-embeds\n```\n\nThis will install the extension under the `_extensions` subdirectory.\nIf you're using version control, you will want to check in this directory.\n\n## Using\n\nAt first specify the `collapse-social-embeds` filter in document yaml,\n\n```\n---\nformat: html\nfilters:\n  - collapse-social-embeds\n---\n```\n\nTo 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=\u003cuser_name\u003e`.\n\n### Github gist\n\nTo 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.\n\n```\n::: {.gist user=\u003cusername\u003e gist_id=\u003cgist_id\u003e }\n:::\n\n```\n\nSo to embed the gist `https://gist.github.com/tarleb/852f6ae98764bea56aeeac979f3c17be` within a collapsible callouts,\n\n```\n::: {.gist user=tarleb gist_id=852f6ae98764bea56aeeac979f3c17be }\n:::\n\n```\n\n\n### Tweets\n\nCreate a collapsible callouts with embedded tweets from Twitter using the class `.twitter` and `user` and `status_id` attributes as following,\n\n```\n::: {.twitter user=\u003cuser-name\u003e status_id=\u003cstatus-id\u003e }\n:::\n\n```\n\nSo to embed the tweet, `https://twitter.com/pandoc_tips/status/1576105972103516160?s=20\u0026t=v_a8PrZRW8uIZLUBba6JAQ` within a collapsible callouts,\n\n```\n::: {.twitter user=pandoc_tips status_id=1576105972103516160 }\n:::\n\n```\n\n### Mastodon\n\nCreate a collapsible callouts with embedded posts from Mastodon using the class `.mastodon` and `url` attributes as following,\n\n```\n::: {.mastodon url=\"\u003cmastodon-post-url\u003e\" }\n:::\n```\n(where the url value is wrapped with quotes)\n\nSo to embed the post `https://fosstodon.org/@pandoc/109712438144865859` within a collapsible callouts,\n\n```\n::: {.mastodon url=\"https://fosstodon.org/@pandoc/109712438144865859\" }\n:::\n\n```\n\n\n### Youtube Video\n\nCreate a collapsible callouts with embedded youtube video using the class `.youtube` and `video_id` attribute as following,\n\n```\n::: {.youtube video_id=\u003cvideo id\u003e}\n:::\n\n```\nSo to embed the youtube video `https://www.youtube.com/watch?v=mrvhk2XUfWo` within a collapsible callouts,\n\n```\n::: {.youtube video_id=mrvhk2XUfWo }\n:::\n\n```\n\n\n### Vimeo\n\nCreate a collapsible callouts with embedded video from Vimeo using the class `.vimeo` and `video_id` attribute as following,\n\n```\n::: {.vimeo video_id=\u003cvideo id\u003e}\n:::\n\n```\nSo to embed the vimeo video `https://vimeo.com/783455878` within a collapsible callouts,\n\n```\n::: {.vimeo video_id=783455878 }\n:::\n\n```\n\n### Loom\n\nCreate a collapsible callouts with embedded video from Loom using the class `.loom` and `video_id` attribute as following,\n\n```\n::: {.loom video_id=\u003cvideo id\u003e}\n:::\n\n```\nSo to embed the loom video `https://www.loom.com/share/8619b03224f74282b6d56cbedbcd3fc6` within a collapsible callouts,\n\n```\n::: {.loom video_id=8619b03224f74282b6d56cbedbcd3fc6 }\n:::\n\n```\n\nTo know how to get the callout attributes like `user`, `*_id`, refer to the [docs](https://github.com/sellorm/quarto-social-embeds#usage) of `social-embeds`, where everything is discussed in detail.\n\n### General attributes\n\nAll of the above callout types has the following [four general attributes](https://quarto.org/docs/authoring/callouts.html#customizing-appearance),\n\n- `title`: The title to appear in callout header.\n- `collapse`: `true` or `false`\n- `appearance`: `default`, `minimal` or `simple`\n- `icon`: `true` or `false`\n\nAnd we can specify them as, for example,\n\n```\n::: {.gist user=tarleb gist_id=852f6ae98764bea56aeeac979f3c17be collapse=false appearance=simple icon=false title=\"Lua Demo\"}\n:::\n```\n\n## Example\n\nHere is the source code for examples of all of the above: [example.qmd](example.qmd) and [here](https://shafayetshafee.github.io/collapse-social-embeds/example.html) is the rendered document.\n\n\n## Acknowledgement\n\nThis filter simply extends the awesome quarto shortcode extension [`social-embeds`](https://github.com/sellorm/quarto-social-embeds) with Quarto callout custom nodes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FshafayetShafee%2Fcollapse-social-embeds","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FshafayetShafee%2Fcollapse-social-embeds","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FshafayetShafee%2Fcollapse-social-embeds/lists"}