Convert Figma logo to code with AI

lepture logogithub-cards

The unofficial GitHub Cards. Card for your GitHub profile, card for your GitHub repositories.

2,122
145
2,122
28

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

13,445

📊 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

  1. 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>
  1. 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>
  1. 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:

  1. Add the following HTML where you want the card to appear:
<div class="github-card" data-user="username" data-repo="repository"></div>
  1. 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>
  1. Customize the card by adding attributes like data-theme, data-width, or data-height to the div element.

  2. 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.

13,445

📊 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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Unofficial GitHub Cards

Card for your GitHub profile, card for your GitHub repositories.

Donate lepture

GitHub Cards Preview

New theme available

GitHub Cards Medium Theme

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.

  1. GitHub API rate limitation
  2. 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.

NPM DownloadsLast 30 Days