{"id":13554369,"url":"https://github.com/DenverCoder1/github-readme-youtube-cards","last_synced_at":"2025-04-03T06:31:35.695Z","repository":{"id":58914259,"uuid":"534051116","full_name":"DenverCoder1/github-readme-youtube-cards","owner":"DenverCoder1","description":"Workflow for displaying recent YouTube videos as SVG cards in your readme","archived":false,"fork":false,"pushed_at":"2024-10-28T10:57:35.000Z","size":442,"stargazers_count":195,"open_issues_count":5,"forks_count":46,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-29T17:23:58.093Z","etag":null,"topics":["dynamic","github","hacktoberfest","profile-readme","readme","svg","workflows","youtube"],"latest_commit_sha":null,"homepage":"https://ytcards.demolab.com","language":"Python","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/DenverCoder1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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},"funding":{"github":"DenverCoder1","patreon":null,"open_collective":null,"ko_fi":"jonahlawrence","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2022-09-08T04:35:35.000Z","updated_at":"2024-10-24T12:17:20.000Z","dependencies_parsed_at":"2023-12-25T21:33:23.235Z","dependency_job_id":"66be1c32-47dd-499e-a0ec-5f38fc24e9cc","html_url":"https://github.com/DenverCoder1/github-readme-youtube-cards","commit_stats":{"total_commits":133,"total_committers":13,"mean_commits":10.23076923076923,"dds":0.3458646616541353,"last_synced_commit":"ec7e08b5a3605f5a1800f18ebc8f6489096c2609"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DenverCoder1%2Fgithub-readme-youtube-cards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DenverCoder1%2Fgithub-readme-youtube-cards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DenverCoder1%2Fgithub-readme-youtube-cards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DenverCoder1%2Fgithub-readme-youtube-cards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DenverCoder1","download_url":"https://codeload.github.com/DenverCoder1/github-readme-youtube-cards/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246540520,"owners_count":20793930,"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":["dynamic","github","hacktoberfest","profile-readme","readme","svg","workflows","youtube"],"created_at":"2024-08-01T12:02:46.181Z","updated_at":"2025-04-03T06:31:35.662Z","avatar_url":"https://github.com/DenverCoder1.png","language":"Python","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/20955511/189236319-b20eb901-aec0-4d6b-9b4a-944bd2c322d7.png\" width=\"100px\"/\u003e\n  \u003ch3 align=\"center\"\u003eGitHub Readme YouTube Cards\u003c/h3\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Workflow for displaying recent YouTube videos as SVG cards in your readme\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://discord.gg/fPrdqh3Zfu\" alt=\"Discord\" title=\"Dev Pro Tips Discussion \u0026 Support Server\"\u003e\n    \u003cimg src=\"https://img.shields.io/discord/819650821314052106?color=7289DA\u0026logo=discord\u0026logoColor=white\u0026style=for-the-badge\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Basic Usage\n\n1. Add the following snippet to your markdown file where you want the cards to appear.\n\n```html\n\u003c!-- BEGIN YOUTUBE-CARDS --\u003e\n\u003c!-- END YOUTUBE-CARDS --\u003e\n```\n\n2. In your repo, create a `.github` folder and inside create a folder named `workflows` if it does not exist. Then create a file in your `.github/workflows/` folder and give it a name such as `youtube-cards.yml` with the following contents.\n\n\u003c!-- prettier-ignore-start --\u003e\n```yml\nname: GitHub Readme YouTube Cards\non:\n  schedule:\n    # Runs every hour, on the hour\n    - cron: \"0 * * * *\"\n  workflow_dispatch:\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    # Allow the job to commit to the repository\n    permissions:\n      contents: write\n    # Run the GitHub Readme YouTube Cards action\n    steps:\n      - uses: DenverCoder1/github-readme-youtube-cards@main\n        with:\n          channel_id: UCipSxT7a3rn81vGLw9lqRkg\n```\n\u003c!-- prettier-ignore-end --\u003e\n\n3. Make sure to change the `channel_id` to [your YouTube channel ID](https://github.com/DenverCoder1/github-readme-youtube-cards/wiki/How-to-Locate-Your-Channel-ID).\n\n4. The [cron expression](https://crontab.cronhub.io/) in the example above is set to run at the top of every hour. The first time, you may want to [trigger the workflow manually](https://github.com/DenverCoder1/github-readme-youtube-cards/wiki/Running-the-GitHub-Action-Manually).\n\n5. You're done! Star the repo and share it with friends! ⭐\n\nSee below for [advanced configuration](#advanced-configuration).\n\n## Live Example\n\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- BEGIN EXAMPLE-YOUTUBE-CARDS --\u003e\n\u003ca href=\"https://www.youtube.com/watch?v=1lXaKEy97qE\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://ytcards.demolab.com/?id=1lXaKEy97qE\u0026title=GitHub+Star+Swag+Unboxing+and+Giveaways\u0026lang=en\u0026timestamp=1696868769\u0026background_color=%230d1117\u0026title_color=%23ffffff\u0026stats_color=%23dedede\u0026max_title_lines=2\u0026width=250\u0026border_radius=5\u0026duration=172\"\u003e\n    \u003cimg src=\"https://ytcards.demolab.com/?id=1lXaKEy97qE\u0026title=GitHub+Star+Swag+Unboxing+and+Giveaways\u0026lang=en\u0026timestamp=1696868769\u0026background_color=%23ffffff\u0026title_color=%2324292f\u0026stats_color=%2357606a\u0026max_title_lines=2\u0026width=250\u0026border_radius=5\u0026duration=172\" alt=\"GitHub Star Swag Unboxing and Giveaways\" title=\"GitHub Star Swag Unboxing and Giveaways\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.youtube.com/watch?v=maoXtlb8t44\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://ytcards.demolab.com/?id=maoXtlb8t44\u0026title=How+To+Self-Host+GitHub+Readme+Streak+Stats+on+Vercel\u0026lang=en\u0026timestamp=1693523015\u0026background_color=%230d1117\u0026title_color=%23ffffff\u0026stats_color=%23dedede\u0026max_title_lines=2\u0026width=250\u0026border_radius=5\u0026duration=257\"\u003e\n    \u003cimg src=\"https://ytcards.demolab.com/?id=maoXtlb8t44\u0026title=How+To+Self-Host+GitHub+Readme+Streak+Stats+on+Vercel\u0026lang=en\u0026timestamp=1693523015\u0026background_color=%23ffffff\u0026title_color=%2324292f\u0026stats_color=%2357606a\u0026max_title_lines=2\u0026width=250\u0026border_radius=5\u0026duration=257\" alt=\"How To Self-Host GitHub Readme Streak Stats on Vercel\" title=\"How To Self-Host GitHub Readme Streak Stats on Vercel\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.youtube.com/watch?v=6u9BrDaSHJc\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://ytcards.demolab.com/?id=6u9BrDaSHJc\u0026title=Automatically+Deploy+to+Fly.io+with+GitHub+Actions\u0026lang=en\u0026timestamp=1661864404\u0026background_color=%230d1117\u0026title_color=%23ffffff\u0026stats_color=%23dedede\u0026max_title_lines=2\u0026width=250\u0026border_radius=5\u0026duration=312\"\u003e\n    \u003cimg src=\"https://ytcards.demolab.com/?id=6u9BrDaSHJc\u0026title=Automatically+Deploy+to+Fly.io+with+GitHub+Actions\u0026lang=en\u0026timestamp=1661864404\u0026background_color=%23ffffff\u0026title_color=%2324292f\u0026stats_color=%2357606a\u0026max_title_lines=2\u0026width=250\u0026border_radius=5\u0026duration=312\" alt=\"Automatically Deploy to Fly.io with GitHub Actions\" title=\"Automatically Deploy to Fly.io with GitHub Actions\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.youtube.com/watch?v=J7Fm7MdZn_E\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://ytcards.demolab.com/?id=J7Fm7MdZn_E\u0026title=Hosting+a+Python+Discord+Bot+for+Free+with+Fly.io\u0026lang=en\u0026timestamp=1661708747\u0026background_color=%230d1117\u0026title_color=%23ffffff\u0026stats_color=%23dedede\u0026max_title_lines=2\u0026width=250\u0026border_radius=5\u0026duration=403\"\u003e\n    \u003cimg src=\"https://ytcards.demolab.com/?id=J7Fm7MdZn_E\u0026title=Hosting+a+Python+Discord+Bot+for+Free+with+Fly.io\u0026lang=en\u0026timestamp=1661708747\u0026background_color=%23ffffff\u0026title_color=%2324292f\u0026stats_color=%2357606a\u0026max_title_lines=2\u0026width=250\u0026border_radius=5\u0026duration=403\" alt=\"Hosting a Python Discord Bot for Free with Fly.io\" title=\"Hosting a Python Discord Bot for Free with Fly.io\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.youtube.com/watch?v=0p_eQGKFY3I\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://ytcards.demolab.com/?id=0p_eQGKFY3I\u0026title=Making+a+Wordle+Clone+Discord+Bot+with+Python+%28Nextcord%29\u0026lang=en\u0026timestamp=1643900217\u0026background_color=%230d1117\u0026title_color=%23ffffff\u0026stats_color=%23dedede\u0026max_title_lines=2\u0026width=250\u0026border_radius=5\u0026duration=2115\"\u003e\n    \u003cimg src=\"https://ytcards.demolab.com/?id=0p_eQGKFY3I\u0026title=Making+a+Wordle+Clone+Discord+Bot+with+Python+%28Nextcord%29\u0026lang=en\u0026timestamp=1643900217\u0026background_color=%23ffffff\u0026title_color=%2324292f\u0026stats_color=%2357606a\u0026max_title_lines=2\u0026width=250\u0026border_radius=5\u0026duration=2115\" alt=\"Making a Wordle Clone Discord Bot with Python (Nextcord)\" title=\"Making a Wordle Clone Discord Bot with Python (Nextcord)\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.youtube.com/watch?v=Mt_Bsj6K9Lw\"\u003e\n  \u003cpicture\u003e\n    \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://ytcards.demolab.com/?id=Mt_Bsj6K9Lw\u0026title=Run+Open+Source+Code+in+Seconds+with+GitPod\u0026lang=en\u0026timestamp=1642108413\u0026background_color=%230d1117\u0026title_color=%23ffffff\u0026stats_color=%23dedede\u0026max_title_lines=2\u0026width=250\u0026border_radius=5\u0026duration=578\"\u003e\n    \u003cimg src=\"https://ytcards.demolab.com/?id=Mt_Bsj6K9Lw\u0026title=Run+Open+Source+Code+in+Seconds+with+GitPod\u0026lang=en\u0026timestamp=1642108413\u0026background_color=%23ffffff\u0026title_color=%2324292f\u0026stats_color=%2357606a\u0026max_title_lines=2\u0026width=250\u0026border_radius=5\u0026duration=578\" alt=\"Run Open Source Code in Seconds with GitPod\" title=\"Run Open Source Code in Seconds with GitPod\"\u003e\n  \u003c/picture\u003e\n\u003c/a\u003e\n\u003c!-- END EXAMPLE-YOUTUBE-CARDS --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n## Advanced Configuration\n\nSee [action.yml](https://github.com/DenverCoder1/github-readme-youtube-cards/blob/main/action.yml) for full details.\n\nCheck out the [Wiki](https://github.com/DenverCoder1/github-readme-youtube-cards/wiki) for frequently asked questions.\n\n### Inputs\n\n| Option                        | Description                                       | Default                                                 |\n| ----------------------------- | ------------------------------------------------- | ------------------------------------------------------- |\n| `channel_id`                  | The channel ID to use for the feed \u003csup\u003e📺\u003c/sup\u003e  | \"\"                                                      |\n| `playlist_id`                 | The playlist ID to use for the feed \u003csup\u003e📺\u003c/sup\u003e | \"\"                                                      |\n| `lang`                        | The locale for views and timestamps \u003csup\u003e💬\u003c/sup\u003e | \"en\"                                                    |\n| `comment_tag_name`            | The text in the comment tag for replacing content | \"YOUTUBE-CARDS\"                                         |\n| `youtube_api_key`             | The API key to use for features marked with 🔑    | \"\"                                                      |\n| `max_videos`                  | The maximum number of videos to display           | 6                                                       |\n| `base_url`                    | The base URL to use for the cards                 | \"https://ytcards.demolab.com/\"                          |\n| `card_width`                  | The width of the SVG cards in pixels              | 250                                                     |\n| `border_radius`               | The border radius of the SVG cards                | 5                                                       |\n| `background_color`            | The background color of the SVG cards             | \"#0d1117\"                                               |\n| `title_color`                 | The color of the title text                       | \"#ffffff\"                                               |\n| `stats_color`                 | The color of the stats text                       | \"#dedede\"                                               |\n| `theme_context_light`         | JSON object with light mode colors \u003csup\u003e🎨\u003c/sup\u003e  | \"{}\"                                                    |\n| `theme_context_dark`          | JSON object with dark mode colors \u003csup\u003e🎨\u003c/sup\u003e   | \"{}\"                                                    |\n| `max_title_lines`             | The maximum number of lines to use for the title  | 1                                                       |\n| `show_duration` \u003csup\u003e🔑\u003c/sup\u003e | Whether to show the duration of the videos        | \"false\"                                                 |\n| `author_name`                 | The name of the commit author                     | \"GitHub Actions\"                                        |\n| `author_email`                | The email address of the commit author            | \"41898282+github-actions[bot]@users.noreply.github.com\" |\n| `commit_message`              | The commit message to use for the commit          | \"docs(readme): Update YouTube cards\"                    |\n| `readme_path`                 | The path to the Markdown or HTML file to update   | \"README.md\"                                             |\n| `output_only`                 | Whether to skip writing to the readme file        | \"false\"                                                 |\n| `output_type`                 | The output syntax to use (\"markdown\" or \"html\")   | \"markdown\"                                              |\n\n\u003csup\u003e📺\u003c/sup\u003e A Channel ID or Playlist ID is required. See [How to Locate Your Channel ID](https://github.com/DenverCoder1/github-readme-youtube-cards/wiki/How-to-Locate-Your-Channel-ID) in the wiki for more information. To filter videos by type such as removing shorts or showing only popular videos, see [How to Filter Videos by Type](https://github.com/DenverCoder1/github-readme-youtube-cards/wiki/How-to-Filter-Videos-by-Type).\n\n\u003csup\u003e🔑\u003c/sup\u003e Some features require a YouTube API key. See [Setting Up the Action with a YouTube API Key](https://github.com/DenverCoder1/github-readme-youtube-cards/wiki/Setting-Up-the-Action-with-a-YouTube-API-Key) in the wiki for more information.\n\n\u003csup\u003e🎨\u003c/sup\u003e See [Setting Theme Contexts for Light and Dark Mode](https://github.com/DenverCoder1/github-readme-youtube-cards/wiki/Setting-Theme-Contexts-for-Light-and-Dark-Mode) in the wiki for more information.\n\n\u003csup\u003e💬\u003c/sup\u003e See [this directory](https://github.com/DenverCoder1/github-readme-youtube-cards/tree/main/api/locale) for a list of locales with the word \"views\" translated. The timestamps will still be translated using [Babel](https://github.com/python-babel/babel) even if a translation file is not present. See [issue #48](https://github.com/DenverCoder1/github-readme-youtube-cards/issues/48) for info on contributing translations.\n\n[key]: https://user-images.githubusercontent.com/20955511/189419733-84384135-c5c4-4a20-a439-f832d5ad5f5d.png\n\n### Outputs\n\n| Output            | Description                                                        |\n| ----------------- | ------------------------------------------------------------------ |\n| `markdown`        | The generated Markdown or HTML used for updating the README file   |\n| `committed`       | Whether the action has created a commit (`true` or `false`)        |\n| `commit_long_sha` | The full SHA of the commit that has just been created              |\n| `commit_sha`      | The short 7-character SHA of the commit that has just been created |\n| `pushed`          | Whether the action has pushed to the remote (`true` or `false`)    |\n\nSee [Using the Markdown as an Action Output](https://github.com/DenverCoder1/github-readme-youtube-cards/wiki/Using-the-Markdown-as-an-Action-Output) for more information.\n\n### Example Workflow\n\nThis is an advanced example showing the available options. All options are optional except `channel_id`.\n\n```yaml\nname: GitHub Readme YouTube Cards\non:\n  schedule:\n    # Runs every hour, on the hour\n    - cron: \"0 * * * *\"\n  workflow_dispatch:\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    # Allow the job to commit to the repository\n    permissions:\n      contents: write\n    # Run the GitHub Readme YouTube Cards action\n    steps:\n      - uses: DenverCoder1/github-readme-youtube-cards@main\n        with:\n          channel_id: UCipSxT7a3rn81vGLw9lqRkg\n          lang: en\n          comment_tag_name: YOUTUBE-CARDS\n          youtube_api_key: ${{ secrets.YOUTUBE_API_KEY }} # Configured in Actions Secrets (see Wiki)\n          max_videos: 6\n          base_url: https://ytcards.demolab.com/\n          card_width: 250\n          border_radius: 5\n          background_color: \"#0d1117\"\n          title_color: \"#ffffff\"\n          stats_color: \"#dedede\"\n          theme_context_light: '{ \"background_color\": \"#ffffff\", \"title_color\": \"#24292f\", \"stats_color\": \"#57606a\" }'\n          theme_context_dark: '{ \"background_color\": \"#0d1117\", \"title_color\": \"#ffffff\", \"stats_color\": \"#dedede\" }'\n          max_title_lines: 2\n          show_duration: true # Requires YouTube API Key (see Wiki)\n          author_name: GitHub Actions\n          author_email: 41898282+github-actions[bot]@users.noreply.github.com\n          commit_message: \"docs(readme): Update YouTube cards\"\n          readme_path: README.md\n          output_only: false\n          output_type: markdown\n```\n\n### Example Playlist Workflow\n\nThis is an example workflow for using a playlist instead of a channel.\n\n```yaml\nname: GitHub Readme YouTube Cards\non:\n  schedule:\n    # Runs every hour, on the hour\n    - cron: \"0 * * * *\"\n  workflow_dispatch:\n\njobs:\n  build:\n    runs-on: ubuntu-latest\n    # Allow the job to commit to the repository\n    permissions:\n      contents: write\n    # Run the GitHub Readme YouTube Cards action\n    steps:\n      - uses: DenverCoder1/github-readme-youtube-cards@main\n        with:\n          playlist_id: PL9YUC9AZJGFFAErr_ZdK2FV7sklMm2K0J\n```\n\n## Contributing\n\nContributions are welcome! Feel free to open an issue or submit a pull request if you have a way to improve this project.\n\nMake sure your request is meaningful and you have tested the app locally before submitting a pull request.\n\nPlease check out our [contributing guidelines](/CONTRIBUTING.md) for more information on how to contribute to this project.\n\n## 🙋‍♂️ Support\n\n💙 If you like this project, give it a ⭐ and share it with friends!\n\n\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://www.youtube.com/channel/UCipSxT7a3rn81vGLw9lqRkg?sub_confirmation=1\"\u003e\u003cimg alt=\"Youtube\" title=\"Youtube\" src=\"https://img.shields.io/badge/-Subscribe-red?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/sponsors/DenverCoder1\"\u003e\u003cimg alt=\"Sponsor with Github\" title=\"Sponsor with Github\" src=\"https://img.shields.io/badge/-Sponsor-ea4aaa?style=for-the-badge\u0026logo=github\u0026logoColor=white\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n[☕ Buy me a coffee](https://ko-fi.com/jlawrence)\n","funding_links":["https://github.com/sponsors/DenverCoder1","https://ko-fi.com/jonahlawrence","https://ko-fi.com/jlawrence"],"categories":["Python","🛠️ Widgets 👇"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDenverCoder1%2Fgithub-readme-youtube-cards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FDenverCoder1%2Fgithub-readme-youtube-cards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FDenverCoder1%2Fgithub-readme-youtube-cards/lists"}