### Render GitHub Cards Dynamically with JavaScript
Source: https://context7.com/lepture/github-cards/llms.txt
Demonstrates how to use the `window.githubCard.render()` function to programmatically create and render GitHub cards. This function accepts a target DOM element and an optional custom card URL. It returns the created iframe element, allowing for further manipulation or event handling. Dependencies include the `widget.js` script.
```javascript
// After loading widget.js, use the render function
// Available as window.githubCard.render(element, [cardUrl])
// Create user card dynamically
var card = document.createElement('div');
card.className = 'github-card';
card.setAttribute('data-user', 'lepture');
card.setAttribute('data-width', '400');
card.setAttribute('data-theme', 'medium');
var container = document.getElementById('card-container');
container.appendChild(card);
// Render with default card URL
var iframe = window.githubCard.render(card);
// Or render with custom card URL
var customIframe = window.githubCard.render(card, 'https://custom-domain.com/cards/default.html');
// The function returns the created iframe element
iframe.onload = function() {
console.log('Card loaded with dimensions:', iframe.width, 'x', iframe.height);
};
// Example: Generate repository card on button click
document.getElementById('show-repo-btn').addEventListener('click', function() {
var repoCard = document.createElement('div');
repoCard.className = 'github-card';
repoCard.setAttribute('data-github', 'lepture/github-cards');
repoCard.setAttribute('data-target', 'blank');
document.body.appendChild(repoCard);
window.githubCard.render(repoCard);
});
```
--------------------------------
### Configure GitHub Cards with Data Attributes and Meta Tags (HTML)
Source: https://context7.com/lepture/github-cards/llms.txt
Illustrates how to configure GitHub Cards using HTML data attributes on the `.github-card` element and meta tags within the `` for global settings. Data attributes like `data-user`, `data-github`, `data-width`, and `data-theme` allow specific card customization, while meta tags (`gc:base`, `gc:url`, `gc:theme`, etc.) set project-wide defaults or overrides. The `widget.js` script must be included for these configurations to take effect.
```html
data-repo="github-cards"
data-github="lepture/github-cards"
data-width="400"
data-height="200"
data-theme="medium"
data-target="blank"
data-client-id="xxx"
data-client-secret="xxx">
```
--------------------------------
### Display GitHub User and Repository Information (HTML)
Source: https://github.com/lepture/github-cards/blob/master/theme/medium.html
This HTML snippet outlines the structure for rendering GitHub user profiles and repository details. It utilizes various HTML elements like `div`, `a`, `img`, `h1`, `ul`, `li`, and `p` to present information such as user's name, avatar, repository stats, follower count, and description. Placeholders like `{login}`, `{name}`, and `{public_repos}` are intended to be replaced with actual data fetched from the GitHub API.
```html
```
--------------------------------
### Configure GitHub Cards using Meta Tags
Source: https://github.com/lepture/github-cards/blob/master/README.md
This snippet illustrates how to configure GitHub Cards globally using meta tags within the HTML head. It allows setting a base URL, theme, client ID, and client secret for card generation.
```html
```
--------------------------------
### GitHub Card Theme Templates (HTML)
Source: https://context7.com/lepture/github-cards/llms.txt
Defines the HTML structure for user and repository cards using `
```
--------------------------------
### JavaScript GitHub API Data Fetching and Caching
Source: https://github.com/lepture/github-cards/blob/master/jsdelivr/cards/default.html
This JavaScript code snippet demonstrates fetching data from the GitHub API and implementing a basic caching mechanism using `localStorage`. It includes functions to retrieve data, store it with a timestamp, and parse nested object properties.
```javascript
function querystring(){
var e=window.location.href,
r;
var t=e.slice(e.indexOf("?")+1).split("&");
var a=[];
for(i=0;i
#
# {minified HTML template}
#
#
# Widget generation:
# 1. Reads package.json version
# 2. Updates base URL to CDN: //cdn.jsdelivr.net/gh/lepture/github-cards@{version}/
# 3. Minifies and outputs to jsdelivr/widget.js
# Dependencies required:
# - cleancss: npm install -g clean-css-cli
# - uglifyjs: npm install -g uglify-js
# Build commands:
# make generate # Generate card HTML files
# make site # Build complete site
# make jsdelivr # Copy cards to jsdelivr directory
# make build # Full build (generate + jsdelivr + site)
```
--------------------------------
### GitHub API Data Fetching and Rendering Logic (JavaScript)
Source: https://context7.com/lepture/github-cards/llms.txt
This JavaScript code describes the internal logic of the Card.js script, which runs within iframes. It fetches user or repository data from the GitHub API based on query parameters, caches responses in localStorage with a 10-second expiration, and formats numerical data. The expected API response structures for users and repositories are also outlined.
```javascript
// Card.js operates via query parameters in the iframe URL
// Example iframe URL: cards/default.html?user=lepture&repo=github-cards&identity=ghcard-lepture-1&client_id=xxx&client_secret=xxx
// User card fetches from: https://api.github.com/users/{user}
// Expected response structure:
{
"login": "lepture",
"name": "Hsiaoming Yang",
"avatar_url": "https://avatars.githubusercontent.com/u/290496",
"public_repos": 150,
"public_gists": 45,
"followers": 5200,
"hireable": true,
"email": "me@lepture.com",
"blog": "https://lepture.com",
"html_url": "https://github.com/lepture"
}
// Repo card fetches from: https://api.github.com/repos/{user}/{repo}
// Expected response structure:
{
"name": "github-cards",
"full_name": "lepture/github-cards",
"owner": {
"login": "lepture",
"avatar_url": "https://avatars.githubusercontent.com/u/290496"
},
"html_url": "https://github.com/lepture/github-cards",
"description": "Card for your GitHub profile, card for your GitHub repositories.",
"fork": false,
"homepage": "http://lab.lepture.com/github-cards/",
"forks_count": 234,
"watchers_count": 1500
}
// The card automatically caches responses in localStorage
// Cache expires after 10 seconds to reduce API calls
// Number formatting: 1000 -> "1k", 5234 -> "5.2k", 15000 -> "15k"
```
--------------------------------
### Embed GitHub Cards using HTML and Widget.js
Source: https://context7.com/lepture/github-cards/llms.txt
This HTML snippet demonstrates how to use the GitHub Cards widget script to embed user and repository cards. Configuration options like user, repository, dimensions, theme, and target can be set using data attributes. The widget script automatically transforms elements with the 'github-card' class into iframes.
```html
```
--------------------------------
### GitHub Repository Card HTML Structure
Source: https://github.com/lepture/github-cards/blob/master/jsdelivr/cards/default.html
This HTML structure defines the layout for a GitHub repository card, including repository name, owner, description, and star/fork counts. It uses placeholders like {full_name} and {language} for dynamic content.
```html
```
--------------------------------
### GitHub User Card HTML Structure
Source: https://github.com/lepture/github-cards/blob/master/jsdelivr/cards/default.html
This HTML structure defines the layout for a GitHub user card, including user information, stats, and a follow button. It uses placeholders like {login} and {avatar_url} for dynamic content.
```html
```
--------------------------------
### Embed GitHub Repository Card using JavaScript
Source: https://github.com/lepture/github-cards/blob/master/README.md
This snippet demonstrates embedding a GitHub repository card. It utilizes the `widget.js` script and a `div` element with the `github-card` class, specifying both `data-user` and `data-repo` attributes.
```html
```
--------------------------------
### JavaScript Query String Parser
Source: https://github.com/lepture/github-cards/blob/master/jsdelivr/cards/default.html
This JavaScript function parses the current URL's query string and returns an object containing the key-value pairs. It handles multiple parameters and makes them accessible by both index and key.
```javascript
function querystring(){
var e=window.location.href,
r;
var t=e.slice(e.indexOf("?")+1).split("&");
var a=[];
for(i=0;i
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.