https://github.com/DenverCoder1/github-readme-youtube-cards
Workflow for displaying recent YouTube videos as SVG cards in your readme
https://github.com/DenverCoder1/github-readme-youtube-cards
dynamic github hacktoberfest profile-readme readme svg workflows youtube
Last synced: 13 days ago
JSON representation
Workflow for displaying recent YouTube videos as SVG cards in your readme
- Host: GitHub
- URL: https://github.com/DenverCoder1/github-readme-youtube-cards
- Owner: DenverCoder1
- License: mit
- Created: 2022-09-08T04:35:35.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-28T10:57:35.000Z (6 months ago)
- Last Synced: 2024-10-29T17:23:58.093Z (6 months ago)
- Topics: dynamic, github, hacktoberfest, profile-readme, readme, svg, workflows, youtube
- Language: Python
- Homepage: https://ytcards.demolab.com
- Size: 432 KB
- Stars: 195
- Watchers: 4
- Forks: 46
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-github-profile - GitHub Readme YouTube Cards
README
GitHub Readme YouTube Cards
Workflow for displaying recent YouTube videos as SVG cards in your readme
## Basic Usage
1. Add the following snippet to your markdown file where you want the cards to appear.
```html
```
2. 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.
```yml
name: GitHub Readme YouTube Cards
on:
schedule:
# Runs every hour, on the hour
- cron: "0 * * * *"
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
# Allow the job to commit to the repository
permissions:
contents: write
# Run the GitHub Readme YouTube Cards action
steps:
- uses: DenverCoder1/github-readme-youtube-cards@main
with:
channel_id: UCipSxT7a3rn81vGLw9lqRkg
```
3. 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).
4. 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).
5. You're done! Star the repo and share it with friends! ⭐
See below for [advanced configuration](#advanced-configuration).
## Live Example
## Advanced Configuration
See [action.yml](https://github.com/DenverCoder1/github-readme-youtube-cards/blob/main/action.yml) for full details.
Check out the [Wiki](https://github.com/DenverCoder1/github-readme-youtube-cards/wiki) for frequently asked questions.
### Inputs
| Option | Description | Default |
| ----------------------------- | ------------------------------------------------- | ------------------------------------------------------- |
| `channel_id` | The channel ID to use for the feed 📺 | "" |
| `playlist_id` | The playlist ID to use for the feed 📺 | "" |
| `lang` | The locale for views and timestamps 💬 | "en" |
| `comment_tag_name` | The text in the comment tag for replacing content | "YOUTUBE-CARDS" |
| `youtube_api_key` | The API key to use for features marked with 🔑 | "" |
| `max_videos` | The maximum number of videos to display | 6 |
| `base_url` | The base URL to use for the cards | "https://ytcards.demolab.com/" |
| `card_width` | The width of the SVG cards in pixels | 250 |
| `border_radius` | The border radius of the SVG cards | 5 |
| `background_color` | The background color of the SVG cards | "#0d1117" |
| `title_color` | The color of the title text | "#ffffff" |
| `stats_color` | The color of the stats text | "#dedede" |
| `theme_context_light` | JSON object with light mode colors 🎨 | "{}" |
| `theme_context_dark` | JSON object with dark mode colors 🎨 | "{}" |
| `max_title_lines` | The maximum number of lines to use for the title | 1 |
| `show_duration` 🔑 | Whether to show the duration of the videos | "false" |
| `author_name` | The name of the commit author | "GitHub Actions" |
| `author_email` | The email address of the commit author | "41898282+github-actions[bot]@users.noreply.github.com" |
| `commit_message` | The commit message to use for the commit | "docs(readme): Update YouTube cards" |
| `readme_path` | The path to the Markdown or HTML file to update | "README.md" |
| `output_only` | Whether to skip writing to the readme file | "false" |
| `output_type` | The output syntax to use ("markdown" or "html") | "markdown" |
📺 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).
🔑 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.
🎨 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.
💬 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.
[key]: https://user-images.githubusercontent.com/20955511/189419733-84384135-c5c4-4a20-a439-f832d5ad5f5d.png
### Outputs
| Output | Description |
| ----------------- | ------------------------------------------------------------------ |
| `markdown` | The generated Markdown or HTML used for updating the README file |
| `committed` | Whether the action has created a commit (`true` or `false`) |
| `commit_long_sha` | The full SHA of the commit that has just been created |
| `commit_sha` | The short 7-character SHA of the commit that has just been created |
| `pushed` | Whether the action has pushed to the remote (`true` or `false`) |
See [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.
### Example Workflow
This is an advanced example showing the available options. All options are optional except `channel_id`.
```yaml
name: GitHub Readme YouTube Cards
on:
schedule:
# Runs every hour, on the hour
- cron: "0 * * * *"
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
# Allow the job to commit to the repository
permissions:
contents: write
# Run the GitHub Readme YouTube Cards action
steps:
- uses: DenverCoder1/github-readme-youtube-cards@main
with:
channel_id: UCipSxT7a3rn81vGLw9lqRkg
lang: en
comment_tag_name: YOUTUBE-CARDS
youtube_api_key: ${{ secrets.YOUTUBE_API_KEY }} # Configured in Actions Secrets (see Wiki)
max_videos: 6
base_url: https://ytcards.demolab.com/
card_width: 250
border_radius: 5
background_color: "#0d1117"
title_color: "#ffffff"
stats_color: "#dedede"
theme_context_light: '{ "background_color": "#ffffff", "title_color": "#24292f", "stats_color": "#57606a" }'
theme_context_dark: '{ "background_color": "#0d1117", "title_color": "#ffffff", "stats_color": "#dedede" }'
max_title_lines: 2
show_duration: true # Requires YouTube API Key (see Wiki)
author_name: GitHub Actions
author_email: 41898282+github-actions[bot]@users.noreply.github.com
commit_message: "docs(readme): Update YouTube cards"
readme_path: README.md
output_only: false
output_type: markdown
```
### Example Playlist Workflow
This is an example workflow for using a playlist instead of a channel.
```yaml
name: GitHub Readme YouTube Cards
on:
schedule:
# Runs every hour, on the hour
- cron: "0 * * * *"
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
# Allow the job to commit to the repository
permissions:
contents: write
# Run the GitHub Readme YouTube Cards action
steps:
- uses: DenverCoder1/github-readme-youtube-cards@main
with:
playlist_id: PL9YUC9AZJGFFAErr_ZdK2FV7sklMm2K0J
```
## Contributing
Contributions are welcome! Feel free to open an issue or submit a pull request if you have a way to improve this project.
Make sure your request is meaningful and you have tested the app locally before submitting a pull request.
Please check out our [contributing guidelines](/CONTRIBUTING.md) for more information on how to contribute to this project.
## 🙋♂️ Support
💙 If you like this project, give it a ⭐ and share it with friends!
[☕ Buy me a coffee](https://ko-fi.com/jlawrence)