/github-buttons

:octocat: Unofficial github:buttons made for developers.

Primary LanguageCoffeeScriptBSD 2-Clause "Simplified" LicenseBSD-2-Clause

github-buttons

Circle CI

To get started, checkout buttons.github.io!

Features

  • Unlimited Button Types
    Our github:button generator provides 6 basic button types including follow, watch, star, fork, issue and download, each at normal or large size, with or without a dynamic count. In addition, almost everything including the API for dynamic count is customizable via simple HTML markup.
  • Pixel Perfect
    Octicons based vector icons always look sharp on every display. The automatically sized iframe solves the big headache of iframe sizing. Plus, its high precision sizing algorithm works the best for HiDPI displays.
  • Fast
    Hosted on GitHub Pages, this service delivers high performance and availability, using asynchronous code that never blocks the page loading.
  • Stable
    High test coverage for the main library and automated tests on Circle CI assure the service quality.
  • Backward Compatible
    As you may still need this, outdated browsers like IE 6 are supported.
  • Accessibility
    ARIA label support enables accessibility for screen reader users.

Documentation

Usage

Add as many <a class="github-button"> as you like, then put the <script> after the last button.

Syntax

<a class="github-button"
   href="{{ link }}"
   data-icon="{{ octicon }}"
   data-count-href="{{ count_link }}"
   data-count-api="{{ count_api }}"
   data-count-aria-label="{{ count_aria_label }}"
   data-style="{{ style }}"
   data-text="{{ button_text }}"
   aria-label="{{ button_aria_label }}"
   >{{ text }}</a>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>

Attributes

Attribute Description
href GitHub link for the button.
data-icon Octicon for the button. It defaults to octicon-mark-github.
All available icons can be found at Octicons.
data-count-href GitHub link for the count. It defaults to href value.
Relative url will be relative to href value.
data-count-api GitHub API endpoint for the count.
data-count-aria-label Aria label for the count link.
# in this attribute will be replaced with a real count.
data-style default or mega.
data-text Text displayed on the button. This option will override link_text.
text Text displayed on the button and the fallback link.
aria-label Aira label for the button link.

API Endpoint

You can use any GitHub API endpoint that supports GET request.

You must append a #hash to the endpoint to extract a value for the count from the JSON response.
e.g. /users/octocat#followers will extract followers from the JSON.

You can also access specific subnode in the JSON.
e.g. /repos/octocat/hello-world#owner.login will extract owner.login.
e.g. /users/octocat/repos#[0].open_issues_count will extract open_issues_count from the first enrty in the array.

See GitHub Developer for API references.

Development

Dependencies

  • Node.js
  • PhantomJS 2.0.0 or later

Clone

git clone --recursive https://github.com/ntkme/github-buttons.git
cd github-buttons && npm install

Build

cake build

Test

cake test

See also

License

See LICENSE.md.