/github-profile-card

Simple and easy to use widget with your GitHub profile — No dependencies

Primary LanguageTypeScriptMIT LicenseMIT

GitHub Profile Card

Widget shows your GitHub profile directly on your website.
Show your current projects — always up to date.

Screenshot

Live demo and configuration

Contents

Main features

  • Top languages statistics
  • Last updated repositories
  • Configurable in HTML
  • Copy-Paste installation
  • No jQuery and any other libraries required

Changelog

Quick install

Include script and style just before </body> tag:

<script type="text/javascript" src="https://piotrl.github.com/github-profile-card/dist/gh-profile-card.min.js"></script>

Include HTML code anywhere you would like to place widget:

<div id="github-card"
     data-username="YOUR_GITHUB_USERNAME">
</div>

Great! Widget will autoload. We're done here.

Download

With npm

npm install github-profile-card --save

Advanced configuration

Configure widget in HTML:

<div id="github-card"
     data-username="YOUR_GITHUB_USERNAME"
     data-max-repos="3"
     data-sort-by="stars"
     data-header-text="Most starred repositories">
</div>

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();

Configuration options

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.

FAQ

  • 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.

    <div id="github-card-1" data-username="user1"></div>
<div id="github-card-2" data-username="user2"></div>

<script>
    new GitHubCard({ template: '#github-card-1' }).init();
    new GitHubCard({ template: '#github-card-2' }).init();
</script>

Feedback

I love feedback, send me one!

Remember no other libraries required. It's like gluten free 😉

gluten-free