DOCSEARCHbyAlgolia
Submit Docs

github-cards

repository·master·Indexed 24 days ago

https://github.com/lepture/github-cards

An unofficial JavaScript widget for embedding visually appealing GitHub profile and repository cards into websites. Supports customization via data attributes or meta tags for width, height, themes, and API credentials.

Tokens
649
Snippets
2
Records
4
Agent score
30%

What's inside github-cards

  1. Embed GitHub Cards using widget.js

    master

    You can embed GitHub profile or repository cards into your website by including a div with the github-card class and the widget.js script. The script automatically detects the configuration from the div's data attributes and creates the necessary embed iframes.

    <!-- 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>

  2. Known limitations of GitHub Cards

    master

    Users should be aware of the following constraints:

    1. GitHub API rate limitation: The cards rely on the GitHub API, which is subject to rate limits.
    2. No interaction: The cards are for display only; you cannot perform actions like 'following' a user directly through the card.

  3. Configure GitHub Card attributes via meta tags

    master

    Alternatively, you can define global configuration for GitHub Cards using <meta> tags in your HTML <head>. This is useful for setting themes or credentials across all cards on a page.

    <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">

  4. Configure GitHub Card attributes via data attributes

    master

    When using the github-card div, you can customize the card's appearance and behavior using the following data-* attributes:

    AttributeDescription
    data-userGitHub username
    data-repoGitHub repository name
    data-widthEmbed width (default: 400)
    data-heightEmbed height (default: 200)
    data-themeCard theme (default: default)
    data-targetLink target; set to blank to open in a new tab
    data-client_idYour app client_id (optional)
    data-client_secretYour app client_secret (optional)