Lately, I’ve created a lot of blog posts where I’ve felt the need to link a GitHub pull request or issue. Creating a vanilla Markdown link is easy, but not very aesthetically appealing. I wanted a ribbon sort of thing that would distinguish between issues and PRs. Unable to find something good online, I went ahead and created my own jQuery plugin.

How does it look?

Without further ado, this is what it looks like:

This is an un-merged open PR.

This is a merged PR.

This is an open issue.

This is a closed issue.

How does it work?

Generating such a button only requires creating a div with the appropriate URL, and it is super simple. Here’s how the HTML for one button looks:

<div class="github-button" url="https://github.com/Terasology/Books/issues/5"></div>

The plugin uses the GitHub API to fetch details of the PR or issue, like the date, status, and repository.
The color and icon on the right side change depending on the state. Hyperlinks to the issue/PR and associated repository are created automatically.
The included icons belong to the GitHub Octicon pack. The icon stylesheet is loaded directly by the plugin from CDN, so it does not need to be included separately.

This plugin is very minimal and can be easily customized to look different. The jQuery code resides in one file, while the CSS code lives in another.

Responsive

Since the plugin is tailor-made to fit my needs, I rely on a single media query to adjust the font and element widths for mobile devices. Here is a screenshot of how it looks on my phone:

githubButtonResponsive

Usage

Here is the FIDDLE.

The fiddle consists of the CSS and JavaScript (jQuery) code. It only has jQuery added as an external library. Simply download the CSS code into github-buttons.css and the jQuery code into github-buttons.js, then include them as shown:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="/css/github-buttons.css" type="text/css" />
<script type="text/javascript" src="/js/github-buttons.js"></script>

For Jekyll:

This depends on the kind of setup you have. If you have a setup like mine, you might have to create a github-buttons.scss file instead of github-buttons.css, using the same CSS code. Place the SCSS file inside the _sass directory. The main.css file then needs to be updated with

@import 
	"github-buttons"

That’s all for now. Feel free to use and share this plugin. Cheers, and may your PR links look fancier than your TODO list.