github-cards
The unofficial GitHub Cards. Card for your GitHub profile, card for your GitHub repositories.
Top Related Projects
Tool for visualizing GitHub profiles
:zap: Dynamically generated stats for your github readmes
This repository will assist you in creating a more beautiful and appealing github profile, and you will have access to a comprehensive range of tools and tutorials for beautifying your github profile. 🪄 ⭐
😎 A curated list of awesome GitHub Profile which updates in real time
📊 An infographics generator with 30+ plugins and 300+ options to display stats about your GitHub account and render them as SVG, Markdown, PDF or JSON!
Quick Overview
GitHub Cards is a lightweight JavaScript library that allows developers to easily embed GitHub repository or user information cards into their web pages. It provides a simple way to showcase GitHub profiles and projects with a clean, customizable design.
Pros
- Easy to implement with minimal setup required
- Customizable appearance through CSS
- Supports both user and repository cards
- No server-side dependencies, works entirely on the client-side
Cons
- Limited to displaying basic GitHub information
- Relies on GitHub API, which may have rate limits for frequent requests
- Not actively maintained, last update was several years ago
- May not work well with the latest GitHub API changes
Code Examples
- Creating a user card:
<div class="github-card" data-user="octocat"></div>
<script src="https://cdn.jsdelivr.net/gh/lepture/github-cards@latest/jsdelivr/widget.js"></script>
- Creating a repository card:
<div class="github-card" data-user="lepture" data-repo="github-cards"></div>
<script src="https://cdn.jsdelivr.net/gh/lepture/github-cards@latest/jsdelivr/widget.js"></script>
- Customizing card theme:
<div class="github-card" data-user="octocat" data-theme="medium"></div>
<script src="https://cdn.jsdelivr.net/gh/lepture/github-cards@latest/jsdelivr/widget.js"></script>
Getting Started
To use GitHub Cards in your project, follow these steps:
- Add the following HTML where you want the card to appear:
<div class="github-card" data-user="username" data-repo="repository"></div>
- Include the JavaScript file at the end of your HTML body:
<script src="https://cdn.jsdelivr.net/gh/lepture/github-cards@latest/jsdelivr/widget.js"></script>
-
Customize the card by adding attributes like
data-theme
,data-width
, ordata-height
to the div element. -
Style the card further using CSS if desired.
Competitor Comparisons
Tool for visualizing GitHub profiles
Pros of profile-summary-for-github
- Provides a more comprehensive overview of a user's GitHub activity
- Offers interactive visualizations and charts for better data representation
- Includes language statistics and repository insights
Cons of profile-summary-for-github
- Requires server-side deployment, which may be more complex to set up
- Has higher resource requirements due to data processing and visualization
- Less suitable for embedding in other websites or applications
Code Comparison
profile-summary-for-github (Kotlin):
fun getUserProfile(username: String): UserProfile {
val user = getUserInfo(username)
val repos = getRepos(username)
val langRepoCount = getLanguageRepoCount(repos)
return UserProfile(user, langRepoCount, repos)
}
github-cards (JavaScript):
function render(card, options) {
var user = card.user;
var template = Mustache.render(options.template, {
username: user.login,
avatar: user.avatar_url,
name: user.name,
repos: user.public_repos,
followers: user.followers,
following: user.following
});
return template;
}
The code snippets highlight the different approaches: profile-summary-for-github focuses on comprehensive data gathering and processing, while github-cards emphasizes simple rendering of basic user information.
:zap: Dynamically generated stats for your github readmes
Pros of github-readme-stats
- More comprehensive statistics, including language usage and commit streaks
- Highly customizable with themes and layout options
- Supports dynamic content updates
Cons of github-readme-stats
- Requires more setup and configuration
- Can be slower to load due to dynamic content generation
- May have higher API usage, potentially leading to rate limiting
Code Comparison
github-cards:
<div class="github-card" data-github="lepture/github-cards" data-width="400" data-height="150" data-theme="default"></div>
<script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
github-readme-stats:
![GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)
Key Differences
- github-cards focuses on simplicity and ease of use, while github-readme-stats offers more detailed statistics and customization options
- github-cards uses a JavaScript widget, whereas github-readme-stats generates dynamic images
- github-readme-stats provides more flexibility in terms of data display and styling
Use Cases
- github-cards: Quick and simple GitHub profile embeds for websites or blogs
- github-readme-stats: Detailed GitHub statistics for README profiles or personal portfolios
Both projects serve similar purposes but cater to different levels of complexity and customization needs.
This repository will assist you in creating a more beautiful and appealing github profile, and you will have access to a comprehensive range of tools and tutorials for beautifying your github profile. 🪄 ⭐
Pros of beautify-github-profile
- Offers a comprehensive collection of tools and resources for enhancing GitHub profiles
- Provides detailed instructions and examples for implementing various profile features
- Regularly updated with new content and community contributions
Cons of beautify-github-profile
- May be overwhelming for beginners due to the large amount of information
- Requires manual implementation of features, which can be time-consuming
- Some features may not be compatible with all GitHub profile types
Code Comparison
beautify-github-profile:
<h3 align="left">Connect with me:</h3>
<p align="left">
<a href="your-twitter-URL" target="blank"><img align="center" src="https://raw.githubusercontent.com/rahuldkjain/github-profile-readme-generator/master/src/images/icons/Social/twitter.svg" alt="your-twitter" height="30" width="40" /></a>
</p>
github-cards:
<div class="github-card" data-github="lepture/github-cards" data-width="400" data-height="200" data-theme="default"></div>
<script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
beautify-github-profile focuses on providing a wide range of customization options for GitHub profiles, while github-cards offers a simpler, widget-based approach for displaying repository information. beautify-github-profile requires more manual effort but allows for greater flexibility, whereas github-cards provides an easy-to-implement solution with limited customization options.
😎 A curated list of awesome GitHub Profile which updates in real time
Pros of awesome-github-profile-readme
- Extensive collection of creative and inspiring GitHub profile READMEs
- Regularly updated with new examples and resources
- Includes categories and tools for creating custom profile READMEs
Cons of awesome-github-profile-readme
- Focuses solely on profile READMEs, not general GitHub card generation
- May be overwhelming for users looking for simple, quick solutions
- Requires manual implementation of ideas rather than providing ready-to-use components
Code Comparison
github-cards:
<div class="github-card" data-github="lepture/github-cards" data-width="400" data-height="200" data-theme="default"></div>
<script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
awesome-github-profile-readme:
## 🔧 Technologies & Tools
![](https://img.shields.io/badge/OS-Linux-informational?style=flat&logo=linux&logoColor=white&color=2bbc8a)
![](https://img.shields.io/badge/Editor-IntelliJ_IDEA-informational?style=flat&logo=intellij-idea&logoColor=white&color=2bbc8a)
![](https://img.shields.io/badge/Code-Python-informational?style=flat&logo=python&logoColor=white&color=2bbc8a)
The github-cards project provides a simple way to embed GitHub repository information, while awesome-github-profile-readme offers inspiration and examples for creating custom profile READMEs. The code snippets demonstrate the difference in implementation, with github-cards using HTML and JavaScript for embedding, and awesome-github-profile-readme showcasing Markdown-based profile customization.
📊 An infographics generator with 30+ plugins and 300+ options to display stats about your GitHub account and render them as SVG, Markdown, PDF or JSON!
Pros of metrics
- More comprehensive and customizable GitHub profile statistics
- Supports a wider range of data visualizations and metrics
- Actively maintained with frequent updates and new features
Cons of metrics
- More complex setup and configuration process
- Requires GitHub Actions or external hosting to generate images
- Higher resource usage due to more extensive data processing
Code comparison
metrics:
- uses: lowlighter/metrics@latest
with:
token: ${{ secrets.METRICS_TOKEN }}
config_timezone: America/New_York
plugin_languages: yes
plugin_languages_ignored: html, css
github-cards:
<div class="github-card" data-github="lepture/github-cards" data-width="400" data-height="200" data-theme="default"></div>
<script src="//cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
Summary
metrics offers a more feature-rich and flexible solution for displaying GitHub statistics, while github-cards provides a simpler, lightweight option for embedding basic repository information. metrics is better suited for users who want detailed analytics and customization options, whereas github-cards is ideal for quick and easy integration of repository cards into websites or documentation.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Unofficial GitHub Cards
Card for your GitHub profile, card for your GitHub repositories.
New theme available
Usage
The cards are hosted via GitHub Pages.
Visit card generator: http://lab.lepture.com/github-cards/
widget.js
You can include the widget.js
script, it will create the embed iframes
for you.
Example of user card:
<div class="github-card" data-user="lepture"></div>
<script src="https://cdn.jsdelivr.net/gh/lepture/github-cards@latest/jsdelivr/widget.js"></script>
Example of repo card:
<div class="github-card" data-user="lepture" data-repo="github-cards"></div>
<script src="https://cdn.jsdelivr.net/gh/lepture/github-cards@latest/jsdelivr/widget.js"></script>
Data parameters:
- user: GitHub username
- repo: GitHub repository name
- width: Embed width you want, default is 400
- height: Embed height you want, default is 200
- theme: GitHub card theme, default is
default
- target: If you want to open links in new tab, set it to
blank
- client_id: Your app client_id, optional
- client_secret: Your app client_secret, optional
You can also define in meta tags:
<meta name="gc:base" content="http://lab.lepture.com/github-cards/">
<meta name="gc:theme" content="medium">
<meta name="gc:client-id" content="client id string">
<meta name="gc:client-secret" content="client secret string">
Limitation
There are some limitations for github cards.
- GitHub API rate limitation
- No interaction. You can't actually follow someone
SSL support
GitHub Cards is available on jsdelivr now. Use widget hosted on jsdelivr:
<div class="github-card" data-user="lepture" data-repo="github-cards"></div>
<script src="https://cdn.jsdelivr.net/gh/lepture/github-cards@latest/jsdelivr/widget.js"></script>
Contribution
This project is under the BSD License.
Top Related Projects
Tool for visualizing GitHub profiles
:zap: Dynamically generated stats for your github readmes
This repository will assist you in creating a more beautiful and appealing github profile, and you will have access to a comprehensive range of tools and tutorials for beautifying your github profile. 🪄 ⭐
😎 A curated list of awesome GitHub Profile which updates in real time
📊 An infographics generator with 30+ plugins and 300+ options to display stats about your GitHub account and render them as SVG, Markdown, PDF or JSON!
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot