GMC.js

Github Many-faced Cards

Fast
Lightweight
Straightforward implementation
Entirely customizable
IE9+
Open source

Highly customizable GitHub widgets, for users and repositories, very easily embeddable in any webpage.

 
 
   

       
 

Couldn't fetch information for this repo.

Quick start

There are several ways to integrate a card on a webpage. Check out the card generator for an easy walkthrough.

<iframe src="https://cdn.rawgit.com/tsucres/GithubManyfacedCards/0.3.0/dist/themes/<theme_name>/embedded/embedded.gmc.min.html?rn=<full_repo_name>" frameborder="0"></iframe>

All you need to do is include this piece of markup in your webpage and replace

  • <theme_name> by the name of the theme (example: gh_pure);
  • <full_repo_name> by the name of the repo (example: tsucres/GithubManyfacedCards)

All the available themes are listed below.

jsFiddle >>

This method must be preferred if you plan to have several cards on a single webpage, or if you need to load the cards programmatically, or even if you need a custom version of the gmc.js script.


<!-- before the first card -->
<script src="https://cdn.rawgit.com/tsucres/GithubManyfacedCards/0.3.0/dist/gmc.min.js"></script>

<!-- ... -->

<!-- where you want the card-->
<script async src="https://cdn.rawgit.com/tsucres/GithubManyfacedCards/0.3.0/dist/gmc-loader.min.js" data-gmc-repo="<full_repo_name>" data-gmc-theme="<theme_name>"></script>

The advantages of this method over the previous one are:

  • The "gmc.js" script is loaded only once (in the first implementation method, it is embedded in every iframe)
  • If you use the same theme for several cards, the styles and the js code needed by the theme are loaded only once
  • No iframe: the markup is dynamically added as a sibling of the <script></script>
  • Since the card is directly inside the document, you can override the style of the theme.
  • You can easily add a responsive behavior to the card
  • You can use a custom version of "gmc.js"

jsFiddle >>

This method consists in doing manually what the "gmc-loader.js" script does automaticcally: loading the style, the javascript and the template of the card skin and then calling GMC.loadAllCards().

For this implementation, you'll need all the files ralated to the theme you want. You can find them on github or download the ones you need below (click on "Download skin files").

<!-- 1) Place the css file in the head-->
<link rel="stylesheet" type="text/css" href="path/<theme_name>.min.css">

<!-- ... -->

<!-- 2) Place your card(s) -->
<div data-gmc-repo="<full_repo_name>">
	<!-- Paste the markup of the skin from the file <theme_name>.html -->
</div>

<!-- ... -->

<!-- 3) Place the js file at the bottom of the body -->
<script type="text/javascript" src="path/<theme_name>.min.js"></script>

<!-- 4) Load gmc.min.js -->
<script type="text/javascript" src="path/gmc.min.js"></script>

<!-- 5) Somehow call the function GMC.loadAllCards when the document has loaded -->
<script type="text/javascript">
	window.onload = GMC.loadAllCards
</script>

Default skins

Update the repo showed in the examples bellow.
gh_basic

Template source code | Skin files on github | Download skin files

Simplest theme: no error state, no loading state. The design is inspired by the official GitHub's design on the user page.

Updated

gh_pure

Template source code | Skin files on github | Download skin files

Same as the previous theme, but with loading and error state.
 
 
 
 

Couldn't fetch information for this repo.

Updated

gh_full

Template source code | Skin files on github | Download skin files

Same as gh-pure, but with number of forks, licence type and activity graph.

Couldn't fetch information for this repo.

Updated

gh_recommendation

Template source code | Skin files on github | Download skin files

This one is inspired from Github's recommandations page. It features the description of the repository, its tags and a "star" button.
 
 
   

       
 

Couldn't fetch information for this repo.

Quick start

There are several ways to integrate a card on a webpage. Check out the card generator for an easy walkthrough.

<iframe src="https://cdn.rawgit.com/tsucres/GithubManyfacedCards/0.3.0/dist/themes/<theme_name>/embedded/embedded.gmc.min.html?un=<user_name>" frameborder="0"></iframe>

All you need to do is include this piece of markup in your webpage and replace

  • <theme_name> by the name of the theme (example: codeshape);
  • <user_name> by the name of the user (example: tsucres)

All the available themes are listed below.

This method must be preferred if you plan to have several cards on a single webpage, or if you need to load the cards programmatically, or even if you need a custom version of the gmc.js script.


<!-- before the first card -->
<script src="https://cdn.rawgit.com/tsucres/GithubManyfacedCards/0.3.0/dist/gmc.min.js"></script>

<!-- ... -->

<!-- where you want the card-->
<script async src="https://cdn.rawgit.com/tsucres/GithubManyfacedCards/0.3.0/dist/gmc-loader.min.js" data-gmc-user="<user_name>" data-gmc-theme="<theme_name>"></script>

The advantages of this method over the previous one are:

  • The "gmc.js" script is loaded only once (in the first implementation method, it is embedded in every iframe)
  • If you use the same theme for several cards, the styles and the js code needed by the theme are loaded only once
  • No iframe: the markup is dynamically added as a sibling of the <script></script>
  • Since the card is directly inside the document, you can override the style of the theme.
  • You can easily add a responsive behavior to the card
  • You can use a custom version of "gmc.js"

jsFiddle >>

This method consists in doing manually what the "gmc-loader.js" script does automaticcally: loading the style, the javascript and the template of the card skin and then calling GMC.loadAllCards().

For this implementation, you'll need all the files ralated to the theme you want. You can find them on github or download the ones you need below (click on "Download skin files").

<!-- 1) Place the css file in the head-->
<link rel="stylesheet" type="text/css" href="path/<theme_name>.min.css">

<!-- ... -->

<!-- 2) Place your card(s) -->
<div data-gmc-repo="<full_repo_name>">
	<!-- Paste the markup of the skin from the file <theme_name>.html -->
</div>

<!-- ... -->

<!-- 3) Place the js file at the bottom of the body -->
<script type="text/javascript" src="path/<theme_name>.min.js"></script>

<!-- 4) Load gmc.min.js -->
<script type="text/javascript" src="path/gmc.min.js"></script>

<!-- 5) Somehow call the function GMC.loadAllCards when the document has loaded -->
<script type="text/javascript">
	window.onload = GMC.loadAllCards
</script>

Default skins

Update the user showed in the examples bellow.
codeshape

Template source code | Skin files on github | Download skin files

Original design by Codeshape. If available, include email address, location, blog, hireable status and bio.
Message
Follow

Following
Followers
Repos
gh_usercard

Template source code | Skin files on github | Download skin files

Inspired by Github's design.

Couldn't fetch information for this repo.

 
 
 
 
 
 
 
 

Other kinds of cards coming soon... probably... maybe.