Show your GitHub languages used and contributions heatmap in a serverless generated image.
Uses OneGraph persisted query to pull GitHub GraphQL API user information.
Displays langauge split in a pie chart via the /pie.png endpoint by
passing a GitHub username.
Example:
https://github-user-information.vercel.app/pie.png?username=spences10
Result:
There's also an interactive mode to explore the data, add the interactive parameter the the URL:
https://github-user-information.vercel.app/pie.png?username=spences10&interactive=true
Here's the GitHub API query, it's been stripped down from 100 to the last 20 repositories for performance.
Displays user GitHub contributions for the given year via the
/heat.png endpoint.
Example:
https://ghui.vercel.app/heat.png?username=spences10&year=2021
Result:
There's also an interactive mode to explore the data, add the interactive parameter the the URL:
https://github-user-information.vercel.app/heat.png?username=spences10&interactive=true
The GitHub queries look like this:
query GITHUB_USER_REPOSITORIES($username: String!) {
gitHub {
user(login: $username) {
repositories(
last: 20
isFork: false
orderBy: { field: UPDATED_AT, direction: ASC }
privacy: PUBLIC
) {
nodes {
name
description
url
updatedAt
languages(first: 5) {
nodes {
color
name
}
}
}
}
}
}
}query GITHUB_USER_CONTRIBUTIONS(
$username: String!
$year: GitHubDateTime!
) {
gitHub {
user(login: $username) {
contributionsCollection(from: $year) {
contributionCalendar {
totalContributions
weeks {
contributionDays {
color
contributionCount
date
weekday
}
}
}
}
}
}
}Great resource with suggestions here: https://www.monterail.com/blog/javascript-libraries-data-visualization
This helped when I installed Puppeteer ans Vercel didn't recognise the dependency: alixaxel/chrome-aws-lambda#172