Documentation

Quick Start

Get your HTML embed code at the official website. Simply fill in the form with your GitHub username and grab the result code.

Including the Card in Your Portfolio

The easiest way to add the GitHub card to your website is by using the embed code generator. Visit the homepage, enter your GitHub username, and copy the generated HTML.

Installation

You can install Yet Another GitHub Card using your preferred package manager:

Using npm

npm install yet-another-github-card --save

Using Yarn

yarn add yet-another-github-card

Using Composer

composer require yet-another-github-card

Package Structure

The package folder structure looks like this:

                        yet-another-github-card/
├─ css/
├─ images/
|  ├─ docs/
|  ├─ favicon_io/
├─ themes/
└─ utils/
   └─ js/
                    

GitHub Card Data Options

Customize your GitHub card using the following data attributes:

Name	Description	Default Value
`data-style`	Set header background theme	`defaultTheme`
`data-user`	Your GitHub username	`""`
`data-user-stars`	Count all obtained stars (repos + gists)	`true`
`data-user-stats`	Show selected stats (commits, contributions, followers, following, prs)	`[{"name": "commits"}, {"name": "prs"}]`

Example Usage

<github-card 
    data-user="yourusername"
    data-style="defaultTheme"
    data-user-stars="true"
    data-user-stats='[{"name":"commits"},{"name":"prs"}]'
></github-card>

Themes

At the moment, three prebuilt themes are available. Feel free to design unique cards by selecting your own colors and backgrounds!

1. Default Theme

The classic theme with a clean, professional look.

Usage: data-style="defaultTheme"

2. Cloud Theme

A soft, cloud-inspired background theme.

Usage: data-style="cloud"

3. Polygon Theme

Modern geometric patterns for a contemporary look.

Usage: data-style="polygon"

Local Demo Card

The source includes resources for building and running your GitHub Card locally. If you want to see it in action, follow these steps:

Step 1: Configure Your Card

Open the file utils/index.html with your code editor and locate the custom element github-card.

Step 2: Edit Attributes

Edit data-user attribute with your own GitHub username
Fill in your preferred settings for data-user-stars and data-user-stats
Save the file

Step 3: Compile Demo

npm run compile-demo

The folder demo will be created with all required files.

Step 4: Run Local Server

npm run server-watch

Quick Build (All Steps Combined)

npm run build-demo

Contributing

New contributors are always welcome! If you have ideas for improvements or find bugs, please:

Check out the Contributing Guidelines
Open an issue on GitHub
Submit a pull request with your improvements

Support the Project: Consider sponsoring the project to help fund new features and improvements!

Contents