DEV Community

Cover image for Introducing GitHub Cards API: A simple way to create beautiful cards with random quotes and jokes
Akansh Sirohi
Akansh Sirohi

Posted on

Introducing GitHub Cards API: A simple way to create beautiful cards with random quotes and jokes

Do you like to add some humor and inspiration to your GitHub profile or website? Do you want to display some random quotes and jokes with different themes and colors? If you answered yes to any of these questions, then you might be interested in GitHub Cards API, a project that I have been working on. GitHub Cards API is a web service that allows you to generate cards with random quotes and jokes using a simple URL.

How does it work?

GitHub Cards API is based on the idea of GitHub Readme Stats, a popular project that lets you create dynamic and customizable stats cards for your GitHub profile. However, GitHub Cards API is different from stats and offers a variety of card types, such as:

  • Multiple Quotes Card: Cards that shows a random quote from a famous person or a movie, or some motivational quotes.

  • Joke Card: A card that shows a random joke from various categories, such as programming, puns, etc.

And lots more...

You can also customize the appearance of the cards, such as the card color, font color, background color, shadow, shadow color, etc.

You can add your own card or theme by contributing in this project which is also registered in the #hacktoberfest2023. This project supports various options for creating your card including card generation from HTML & CSS.

Example Card

Card

How to use

Visit endpoint url for all available cards and available options for each card

Endpoint URL: https://github-cards.onrender.com

Embed one of these in your README:

<!-- Markdown -->

![Card](https://github-cards.onrender.com/any_card_name)
Enter fullscreen mode Exit fullscreen mode

OR

<!-- HTML -->
<img src="https://github-cards.onrender.com/any_card_name" alt="Card" />
Enter fullscreen mode Exit fullscreen mode

List of card names currently available

Available Cards Example Preview
jokes-card ![Card](https://github-cards.onrender.com/jokes-card?theme=dark) https://github-cards.onrender.com/jokes-card?theme=dark
programming-quotes-card ![Card](https://github-cards.onrender.com/programming-quotes-card) https://github-cards.onrender.com/programming-quotes-card
motivational-quotes-card ![Card](https://github-cards.onrender.com/motivational-quotes-card) https://github-cards.onrender.com/motivational-quotes-card
word-of-the-day-card ![Card](https://github-cards.onrender.com/word-of-the-day-card) https://github-cards.onrender.com/word-of-the-day-card
challenge-of-the-week-card ![Card](https://github-cards.onrender.com/challenge-of-the-week-card) https://github-cards.onrender.com/challenge-of-the-week-card
team-work-quote-card ![Card](https://github-cards.onrender.com/team-work-quote-card) https://github-cards.onrender.com/team-work-quote-card)
bhagavad-geeta-card ![Card](https://github-cards.onrender.com/bhagavad-geeta-card) https://github-cards.onrender.com/bhagavad-geeta-card
random-card ![Card](https://github-cards.onrender.com/random-card) https://github-cards.onrender.com/random-card
programming-facts-card ![Card](https://github-cards.onrender.com/programming-facts-card?theme=dark) https://github-cards.onrender.com/programming-facts-card?theme=dark

How to contribute

Add new card

  1. Fork this repository.
  2. Add your card in src/cards directory, you can take the refrence from already added cards.
  3. Add any data file inside data directory that your card will use. (Languages Support: Hindi & English)
  4. Add route of your card in index.js file.
  5. Add your card api refrence inside in src/help.js file and also in README.md file.
  6. Create pull request.
  7. Note: Data file must have arounf 100 entries minimum.

Add new theme

  1. Fork this repository.
  2. If you want to add gradient background then add your gradient code in src/gradients.js file. > Take refrence from already added gradients.
  3. Add your theme name in the src/themes.js file. > Theme name should be unique and should be in the second last position of the array.
  4. Create your theme in src/themes.js file. > Take refrence from already added themes.
  5. Add your theme api refrence inside in src/help.js file and also in README.md file.

GitHub Repository

GitHub logo akanshSirohi / Github-Cards-API

Github readme cards api

Github-Cards-Api

How to use

Visit endpoint url for all available cards and available options for each card
Endpoint URL: https://github-cards.onrender.com

Embed one of these in your README:

<!-- Markdown -->
![Card](https://github-cards.onrender.com/any_card_name)
Enter fullscreen mode Exit fullscreen mode

OR

<!-- HTML -->
<img src="https://github-cards.onrender.com/any_card_name" alt="Card" />
Enter fullscreen mode Exit fullscreen mode

List of card names currently available

Available Cards Example Preview
jokes-card ![Card](https://github-cards.onrender.com/jokes-card?theme=dark) Card
programming-quotes-card ![Card](https://github-cards.onrender.com/programming-quotes-card) Card
motivational-quotes-card ![Card](https://github-cards.onrender.com/motivational-quotes-card) Card
word-of-the-day-card ![Card](https://github-cards.onrender.com/word-of-the-day-card) Card
challenge-of-the-week-card ![Card](https://github-cards.onrender.com/challenge-of-the-week-card) Card
team-work-quote-card ![Card](https://github-cards.onrender.com/team-work-quote-card) Card
bhagavad-geeta-card ![Card](https://github-cards.onrender.com/bhagavad-geeta-card) Card
random-card ![Card](https://github-cards.onrender.com/random-card) Card
programming-facts-card ![Card](https://github-cards.onrender.com/programming-facts-card?theme=dark) Card

Available Themes List

  1. light
  2. dark
  3. dark_2
  4. rgb
  5. lemonade
  6. pattern_1
  7. pattern_2
  8. pattern_3
  9. random - Any random theme will we applied
  10. custom - You can set your custom arguments

Custom Theme Arguments

args: {
    card_color: "Card color. Default: #ffffff  [Optional]",
    font_color: "Card text color. Default: #000000  [Optional]",
    bg_color: "Card Background color. Default: #fff  [Optional]",
    shadow: "Card shadow. Default: false  [Optional]",
    shadow_color: "Card shadow
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

Note: If any card or link doesn't work, please be patient and try to open the card again. This project is currently hosted on a free-tier account, so glitches might occur sometimes.

Top comments (0)