# github-profile-card

> Widget for presenting your GitHub profile on your website. Pure JavaScript.

Latest version **3.1.0** (published 2020-01-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install github-profile-card
pnpm add github-profile-card
yarn add github-profile-card
bun add github-profile-card
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2020-01-20 |
| First published | 2016-10-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 130.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 99 |
| Author | Piotr Lewandowski |
| Maintainers | piotrl |
| Keywords | github, widget, vanilla, javascript, browser |

## Links

- npm: https://www.npmjs.com/package/github-profile-card
- Repository: https://github.com/piotrl/github-profile-card
- Homepage: https://github-profile.com/
- Issues: https://github.com/piotrl/github-profile-card/issues
- npm.io page: https://npm.io/package/github-profile-card

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 3.1.0 (latest) — 2020-01-20
- 3.0.0 — 2019-03-18
- 2.0.1 — 2017-02-17
- 2.0.0 — 2016-12-18
- 1.2.0 — 2016-10-23

## README

# GitHub Profile Card

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

![Screenshot](./demo/screenshot.png)

## Live [demo and configuration](https://github-profile.com/demo?username=piotrl)

## Contents

- [GitHub Profile Card](#github-profile-card)
  - [Main features](#main-features)
  - [Live demo and configuration](#live-demo-and-configuration)
  - [Changelog](#changelog)
- [Quick install](#quick-install)
  - [Download](#download)
  - [Advanced configuration](#advanced-configuration)
  - [Configuration options](#configuration-options)
- [FAQ](#faq)
- [Feedback](#feedback)

### Main features

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

### [Changelog](https://github.com/piotrl/github-profile-card/releases)

## Quick install

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

```
<script type="text/javascript" src="https://github-profile.com/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_](https://www.npmjs.com/package/github-profile-card)

```
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](https://github.com/github/linguist#overrides)

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

- show me website on which you're using this widget: [leave comment](https://github.com/piotrl/github-profile-card/issues/15)
- ping me on twitter: [@constjs](https://twitter.com/constjs)
- create [new issue](https://github.com/piotrl/github-profile-card/issues/new)

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

![gluten-free](http://forthebadge.com/images/badges/gluten-free.svg)

---
_Source: https://npm.io/package/github-profile-card · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._