github-cards
github-cards copied to clipboard
The unofficial GitHub Cards. Card for your GitHub profile, card for your GitHub repositories.
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.