Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A jQuery plugin for showing off your GitHub and Coderwall stats.

branch: master

Fetching latest commit…

Octocat-spinner-32-eaf2f5

Cannot retrieve the latest commit at this time

Octocat-spinner-32 iphone-demo
Octocat-spinner-32 .gitignore
Octocat-spinner-32 README.md
Octocat-spinner-32 index.html
Octocat-spinner-32 jquery.metabrag.css
Octocat-spinner-32 jquery.metabrag.js
Octocat-spinner-32 jquery.min.js
Octocat-spinner-32 metabrag.demo.css
README.md

metabrag - show your geek cred off

This is a jQuery plugin for showing off your Github user info, Github repositories and all your Coderwall badges.

Metabrag has support for showing multiple user infos and sets aim at being highly customizable.

Downloading and Installing

Downloading metabrag

To download either clone the git repository or download autogenerated tarball.

Using git

cd ~/Sites/git_clones/
git clone git@github.com:mikaelbr/metabrag.git

Downloading autogenerated tarball

Use this link to download tarball https://github.com/mikaelbr/metabrag/tarball/master

Installing

Upload the .js and .css file to your root and add them to your HTML file - inside the head section:

<link rel="stylesheet" type="text/css" href="jquery.metabrag.css" />
<script type="text/javascript" src="jquery.metabrag.js"></script>

Using metabrag

There are multiple ways to use metabrag. The simplest is just to add a wrapper in your HTML and add a data-metabrag-username attribute to the wrapper. You can initiate the plugin by doing

$(".element-name").metabrag();

With the HTML structure

<body>
  <!-- metabrag plugin wrapper -->
  <div class="element-name" data-metabrag-username="mikaelbr">

  </div>
</body>

You can also drop using the data attribute and only support one user. Initiate the plugin using:

$(".element-name").metabrag({
  username: "mikaelbr"
});

Or overwriting the global settings

$.fn.metabrag.defaults.username = "mikaelbr";
$(".element-name").metabrag();

Multiple boxes

You can easily implement multiple boxes with different usernames. Just add more wrappers with different attribute values, and initiate metabrag as usual.

Javascript

$(".element-name").metabrag();

HTML

<body>
  <!-- metabrag plugin wrapper -->
  <div class="element-name" data-metabrag-username="mikaelbr">
  </div>
  <!-- second metabrag plugin wrapper, with the user with most badges at coderwall -->
  <div class="element-name" data-metabrag-username="dustin">
  </div>
</body>

Data attributes

metabrag can use two data attributes

  • data-metabrag-username
  • data-metabrag-coderwall-username

The latter is used to set a spesific username for Coderwall, if it is not the same as your Github user.

Events

There are 3 events set up with this plugin. They all use the namespace metabrag. You can change the event name to be whatever you'd like. This can be done the same way you'd change any other settings.

Predefined events are:

  • userinfoLoaded.metabrag: Triggered after DOM has loaded user info from github
  • repoinfoLoaded.metabrag: Triggered after DOM has loaded repo info from github
  • badgesLoaded.metabrag: Triggered after DOM has loaded badges from Coderwall

metabrag settings

Here are the settings that can be altered to customize your geek creds

{
    username: '', // Global username - if only one username is supported.
    coderwallUsername: '', // Global coderwall username
    showGithubUserInfo: true, // Shows/hides the github user info box
    showGithubRepoInfo: true, // Shows/hides the github repo info box
    showCoderwallBadges: true, // Shows/hides coderwall badges
    showExtendedInfo: false, // Shows/hides extended info in github user info box
    showForks: false, // Shows/hides forks in repo info box
    userInfoBoxClass: "ui-metabrag-github-userbox", // class for styling user info box
    repoInfoBoxClass: "ui-metabrag-github-repobox", // class for styling repo info box
    coderwallBadgesClass: "ui-metabrag-coderwall-badges", // class for styling coderwall badges
    errorMessage: "Couldn't load developer data.", // error message on 404
    loadingMessage: "Loading...", // String for loading text.
    eventLoadedGithubUserInfo: "userinfoLoaded.metabrag", // Event triggered when a user box is loaded
    eventLoadedGithubRepoInfo: "repoinfoLoaded.metabrag", // Event triggered when a repo box is loaded
    eventLoadedCoderwallBadges: "badgesLoaded.metabrag" // Event triggered when badges are loaded
}

What's important to remember is that the data attributes are of a higher priority than the username property. If you have set property username and the data attribute.

Further plans

Here are some of the plans made for this plugin

  • Expand default settings to contain language strings
  • Better error handeling
  • Expand to support more code banks (Codeplex etc.)
  • Make minified version
  • More elegant DOM manipulation.
  • More features?

Contribute

Please feel free to either fork me or post issues.

Something went wrong with that request. Please try again.