Git Product home page Git Product logo

robert-warneke / github-cards Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 174 KB

Generate a variety of dynamic and aesthetically appealing GitHub stat cards, perfect for integrating into GitHub READMEs and beyond. ๐Ÿ“Š๐Ÿ“ˆ

Home Page: https://my-github-cards.vercel.app

JavaScript 100.00%
github-api github-profile github-profile-card github-profile-info github-profile-readme vercel vercel-serverless-functions javascript stat-card dynamic-readme

github-cards's Introduction

GitHub Cards

Generate a variety of dynamic and aesthetically appealing GitHub stat cards, perfect for integrating into GitHub READMEs and beyond. ๐Ÿ“Š๐Ÿ“ˆ


GitHub Repo Cards

Enhance your GitHub profile and repository READMEs with customizable 'GitHub Repo Cards'. Display information about your repositories in a neat, visual card format that can be tailored to your liking.

๐Ÿ–ฅ๏ธ Demo:

๐Ÿ” Example of the default 'GitHub Repo Card':

Default GitHub Repo Card

![Default GitHub Repo Card](https://my-github-cards.vercel.app/api/github-repo-card?user=robert-warneke&repo=github-cards)

๐Ÿ” Example of the 'showUsername' parameter key with the value 'true':

GitHub Repo Card with showUsername

![GitHub Repo Card with showUsername](https://my-github-cards.vercel.app/api/github-repo-card?user=robert-warneke&repo=github-cards&showUsername=true)

๐Ÿ” Example of the 'theme' parameter key with the value 'dark':

GitHub Repo Card with dark theme

![GitHub Repo Card with dark theme](https://my-github-cards.vercel.app/api/github-repo-card?user=robert-warneke&repo=github-cards&theme=dark)

โ“˜ Click here for a complete list of available themes.

๐Ÿ” Example of the 'theme' parameter key with the value 'straightBlack':

GitHub Repo Card with straightBlack theme

![GitHub Repo Card with straightBlack theme](https://my-github-cards.vercel.app/api/github-repo-card?user=robert-warneke&repo=github-cards&theme=straightBlack)

โ“˜ Click here for a complete list of available themes.

๐Ÿ” Example of the 'showLicense' parameter key with the value 'false':

GitHub Repo Card with showLicense

![GitHub Repo Card with showLicense](https://my-github-cards.vercel.app/api/github-repo-card?user=robert-warneke&repo=github-cards&showLicense=false)

๐Ÿ“‹ How to Use:

Follow these steps to use the 'GitHub Repo Card' in your README file or any other place:

  1. Embed the URL as an image:
![GitHub Repo Card](https://my-github-cards.vercel.app/api/github-repo-card?user=USERNAME&repo=REPOSITORY)
  1. Replace 'USERNAME' with your GitHub username and 'REPOSITORY' with the name of your repository.

๐Ÿ” Example:

![GitHub Repo Card](https://my-github-cards.vercel.app/api/github-repo-card?user=robert-warneke&repo=github-cards)

โš™๏ธ Customization:

You can customize the 'GitHub Repo Card' by providing query parameters in the URL.

Query parameters are added after the main URL using the '?' character, followed by a series of key=value pairs, separated by '&'.

๐Ÿ” Example:

https://my-github-cards.vercel.app/api/github-repo-card?user=robert-warneke&repo=github-cards

In this example:

  • https://my-github-cards.vercel.app/api/github-repo-card is the main URL.
  • 'user' is a parameter key and 'robert-warneke' is its value.
  • 'repo' is another parameter key and 'github-cards' is its value.
Available query parameters:
Query Parameters Description
user The username of the GitHub account. Default is 'robert-warneke'.
repo The repository name. Default is 'github-cards'.
showUsername Display the username in the card title. Default is 'false'.
showLicense Display the repository license on the card. Default is 'true'.
theme The color theme of the card. Default is 'light'.
bgColor Background color of the card.
borderColor Border color of the card.
textColor Color of all the card text.
titleTextColor Color of the card title text. Overrides 'textColor'.
descriptionTextColor Color of the card description text. Overrides 'textColor'.
dataTextColor Color of the card data (language, license, stars, watching, and forks) text. Overrides 'textColor'.
langTextColor Color of the card language text. Overrides 'textColor' and 'dataTextColor'.
licenseTextColor Color of the card license text. Overrides 'textColor' and 'dataTextColor'.
starTextColor Color of the card star text. Overrides 'textColor' and 'dataTextColor'.
watchTextColor Color of the card watching text. Overrides 'textColor' and 'dataTextColor'.
forkTextColor Color of the card fork text. Overrides 'textColor' and 'dataTextColor'.
langDotColor Color of the language dot.
iconColor Color of all the icons.
repoIconColor Color of the repo icon. Overrides 'iconColor'.
licenseIconColor Color of the license icon. Overrides 'iconColor'.
starIconColor Color of the star icon. Overrides 'iconColor'.
watchIconColor Color of the watching icon. Overrides 'iconColor'.
forkIconColor Color of the forks icon. Overrides 'iconColor'.

GitHub Contribution Chart Cards

๐Ÿ–ฅ๏ธ Demo:

๐Ÿ” Example of the default 'GitHub Contribution Chart Card':

Default GitHub Contribution Chart Card

![Default GitHub Contribution Chart Card](https://my-github-cards.vercel.app/api/github-contribution-chart?user=robert-warneke)

๐Ÿ” Example of the 'showFullYear' parameter key with the value 'true':

GitHub Contribution Chart Card with 'showFullYear'

![GitHub Contribution Chart Card with 'showFullYear'](https://my-github-cards.vercel.app/api/github-contribution-chart?user=robert-warneke&showFullYear=true)

๐Ÿ” Example of the year parameter key with a specified year:

GitHub Contribution Chart Card with 'year'

![GitHub Contribution Chart Card with 'year'](https://my-github-cards.vercel.app/api/github-contribution-chart?user=robert-warneke&year=2020)

๐Ÿ” Example of the 'showUsername' parameter key with the value 'false':

GitHub Contribution Chart Card with 'showUsername'

![GitHub Contribution Chart Card with 'showUsername'](https://my-github-cards.vercel.app/api/github-contribution-chart?user=robert-warneke&showUsername=false)

๐Ÿ” Example of the 'theme' parameter key with the value 'dark':

GitHub Contribution Chart Card with 'theme'

![GitHub Contribution Chart Card with 'theme'](https://my-github-cards.vercel.app/api/github-contribution-chart?user=robert-warneke&theme=dark)

๐Ÿ“‹ How to Use:

Follow these steps to use the 'GitHub Contribution Chart Card' in your README file or any other place:

  1. Embed the URL as an image:
![GitHub Contribution Chart Card](https://my-github-cards.vercel.app/api/github-contribution-chart?user=USERNAME)
  1. Replace 'USERNAME' with your GitHub username.

๐Ÿ” Example:

![GitHub Repo Card](https://my-github-cards.vercel.app/api/github-contribution-chart?user=robert-warneke)

โš™๏ธ Customization:

You can customize the 'GitHub Contribution Chart Card' by providing query parameters in the URL.

Query parameters are added after the main URL using the '?' character, followed by a series of key=value pairs, separated by '&'.

๐Ÿ” Example:

https://my-github-cards.vercel.app/api/github-contribution-chart?user=robert-warneke&year=2023

In this example:

  • https://my-github-cards.vercel.app/api/github-contribution-chart is the main URL.
  • 'user' is a parameter key and 'robert-warneke' is its value.
  • 'year' is another parameter key and '2023' is its value.
Available query parameters:
Query Parameters Description
user The username of the GitHub account. Default is 'robert-warneke'.
year Data for the specified year. Defaults to the current year.
showFullYear Displays the current year data beyond the current day... or doesn't! Default is 'false'
showUsername Displays the GitHub username in the top center of the card... or doesn't! Default is 'true'
showGitHubIcon Displays the GitHub Icon... or doesn't! Default is 'true'
theme The color theme of the card. Default is 'light'.
bgColor Background color of the card.
borderColor Border color of the card.
textColor Color of all the card text. Applies to GitHub icon.
yearLabelColor Color of the year and total contribution text labels. Overrides 'textColor'.
userLabelColor Color of the 'username' text. Overrides 'textColor'.
dayLabelColor Color of the day labels. Overrides 'textColor'.
monthLabelColor Color of the month labels. Overrides 'textColor'.
keyLabelColor Color of the 'color box key' labels. Overrides 'textColor'.
githubIconColor Color of the GitHub icon. Overrides 'textColor'.

GitHub Last Commit Badge

๐Ÿ–ฅ๏ธ Demo:

๐Ÿ” Example of the default 'GitHub Last Commit Badge':

Default GitHub Last Commit Badge

![Default GitHub Last Commit Badge](https://my-github-cards.vercel.app/api/github-last-commit-badge?user=robert-warneke)

๐Ÿค Support

Thank you for your interest in supporting the GitHub Cards project! Your support plays a vital role in maintaining and improving the project. There are various ways you can contribute:

  1. โญ Star the Repository: By starring the GitHub Cards repository on GitHub, you can show your appreciation and help the project reach a wider audience.
  2. ๐Ÿ—จ๏ธ Spread the Word: Help spread the word about GitHub Cards. Whether it's through social media, developer communities, or sharing with your peers, your advocacy can make a significant impact.
  3. ๐Ÿ’– Sponsor the Project: Consider financially supporting GitHub Cards through GitHub Sponsoring. Your contribution will directly support ongoing development. Click the Sponsor button at the top of the repo, or click here. Any amount is greatly appreciated.

๐Ÿ“ฌ Get in Touch

If you have questions or ideas concerning GitHub Cards, you're welcome to reach out. Here are a few ways you can connect:

  1. โš ๏ธ GitHub Issues: If you encounter a problem with the GitHub Cards, have a look at existing issues or open a new one. This is the best place to discuss technical issues or suggest new features.
  2. ๐Ÿ“ง Email: If you'd prefer to discuss something in private, you can send me an email. Please use this sparingly, as it's more efficient for us to have most discussions in the open on GitHub issues. [email protected]

โ“˜ Please note that GitHub Cards is a community project and is not affiliated with or endorsed by GitHub Inc.

github-cards's People

Contributors

dependabot[bot] avatar robert-warneke avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.