Widget for presenting your GitHub profile on your website. Pure JavaScript.
npm install github-profile-card> Widget shows your GitHub profile directly on your website.
> Show your current projects — always up to date.
- GitHub Profile Card
- Main features
- Live demo and configuration
- Changelog
- Quick install
- Download
- Advanced configuration
- Configuration options
- FAQ
- Feedback
- Top languages statistics
- Last updated repositories
- Configurable in HTML
- Copy-Paste installation
- No jQuery and any other libraries required
Include script and style just before
``
Include HTML code anywhere you would like to place widget:
`
data-username="YOUR_GITHUB_USERNAME">
Great! Widget will autoload. We're done here.
With _npm_
`
npm install github-profile-card --save
Configure widget in HTML:
`
data-username="YOUR_GITHUB_USERNAME"
data-max-repos="3"
data-sort-by="stars"
data-header-text="Most starred repositories">
For special usages, it is possible to configure widget(s) in JavaScript.
You have to use different template than #github-card.
`
var widget = new GitHubCard({
username: 'YOUR_GITHUB_USERNAME'
template: '#github-card-demo',
sortBy: 'stars',
reposHeaderText: 'Most starred',
maxRepos: 5,
hideTopLanguages: false,
});
widget.init();
`
| HTML option (data- prefix) | JavaScript option | Default | Details |username
| ---------------------------- | ------------------ | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| | username | None | GitHub profile username |—
| | template | #github-card | DOM selector of your widget in HTML |sort-by
| | sortBy | stars | Repositories sorting method (stars or updateTime) |max-repos
| | maxRepos | 5 | Amount of listed repositories. 0 disables section |header-text
| | headerText | Most starred repositories | Text label above repositories list |hide-top-languages
| | hideTopLanguages | false | Avoids heavy network traffic for calculating Top Languages section. Recommended for profiles with huge amount of repositories. |
- My language statistic is affected by libraries and dependencies
Consider ignoring them with .gitattributes: My repository is detected as the wrong language
- How language statistic is build?
It is sum of all characters written in language you use.
One big repository in C# will be ranked higher than many small JavaScript repositories.
It is based on 10 last updated repositories, to represent your current interests.
- How to show two or more profiles on page?
You have to create two widgets with different ID, then initialize each manually in JS.
e.g.
`
``
I love feedback, send me one!
- show me website on which you're using this widget: leave comment
- ping me on twitter: @constjs
- create new issue
Remember no other libraries required. It's like gluten free 😉