Cacher is the code snippet organizer for pro developers

<style>
/* ---- github button ---- */

.gh-button {
  display: inline-block;
  background: none;
  border: none;
  font-family: Helvetica, Arial, sans-serif;
  color: #333;
}

.gh-button__title,
.gh-button__stat {
  float: left;
  font-size: 15px;
  font-weight: bold;
  line-height: 20px;
  padding: 5px 10px;
  border: 1px solid #d5d5d5;
}

.gh-button__icon {
  height: 20px;
  fill: #333;
  display: inline-block;
  vertical-align: bottom;
}

.gh-button__title {
  background-color: #eee;
  background-image: linear-gradient(#fcfcfc, #eee);
  border-radius: 4px 0 0 4px;
}

.gh-button__icon--github-logo {
  margin-right: 0.2em;
}

.gh-button__stat {
  border-left: 0;
  border-radius: 0 4px 4px 0;
  background: white;
}

.gh-button:hover { color: #333; }

.gh-button:hover .gh-button__title {
  background-color: #ddd;
  background-image: linear-gradient(#eee, #ddd);
}

.gh-button:hover .gh-button__stat {
  color: #4078c0;
}

.gh-button:hover .gh-button__icon--star {
  fill: #4078c0;
}
  
</style>

<p>
  <a class="gh-button" href="https://github.com/desandro/imagesloaded">
    <span class="gh-button__title">
      <svg class="gh-button__icon gh-button__icon--github-logo" viewbox="0 0 1024 1024">
        <path d="M512 0C229.252 0 0 229.25199999999995 0 512c0 226.251 146.688 418.126 350.155 485.813 25.593 4.686 34.937-11.125 34.937-24.626 0-12.188-0.469-52.562-0.718-95.314-128.708 23.46-161.707-31.541-172.469-60.373-5.525-14.809-30.407-60.249-52.398-72.263-17.988-9.828-43.26-33.237-0.917-33.735 40.434-0.476 69.348 37.308 78.471 52.75 45.938 77.749 119.876 55.627 148.999 42.5 4.654-32.999 17.902-55.627 32.501-68.373-113.657-12.939-233.22-56.875-233.22-253.063 0-55.94 19.968-101.561 52.658-137.404-5.22-12.999-22.844-65.095 5.063-135.563 0 0 42.937-13.749 140.811 52.501 40.811-11.406 84.594-17.031 128.124-17.22 43.499 0.188 87.314 5.874 128.188 17.28 97.689-66.311 140.686-52.501 140.686-52.501 28 70.532 10.375 122.564 5.124 135.499 32.811 35.844 52.626 81.468 52.626 137.404 0 196.686-119.751 240-233.813 252.686 18.439 15.876 34.748 47.001 34.748 94.748 0 68.437-0.686 123.627-0.686 140.501 0 13.625 9.312 29.561 35.25 24.562C877.436 929.998 1024 738.126 1024 512 1024 229.25199999999995 794.748 0 512 0z"/>
      </svg>
      <span class="gh-button__title__text">imagesLoaded on GitHub</span>
    </span>
    <span class="gh-button__stat">
      <svg class="gh-button__icon gh-button__icon--star" viewbox="0 0 896 1024">
        <path d="M896 384l-313.5-40.781L448 64 313.469 343.219 0 384l230.469 208.875L171 895.938l277-148.812 277.062 148.812L665.5 592.875 896 384z"/>
      </svg>
      <span class="gh-button__stat__text">4,500</span>
    </span>
  </a>
</p>

<script>
// -------------------------- github button -------------------------- //

var user = 'desandro';
var repo = 'imagesloaded';

// get data
var callbackName = 'ghButtonCallback' + Math.floor( Math.random() * 10000 );
var button = document.querySelector('.gh-button');

window[ callbackName ] = function( response ) {
  var starText = addCommas( response.data.stargazers_count );
  button.querySelector('.gh-button__stat__text').textContent = starText;
};

function addCommas( num ) {
  return num.toString().replace( /(\d)(?=(\d{3})+$)/g, '$1,' );
}

var script = document.createElement('script');
script.src = 'https://api.github.com/repos/' + user + '/' + repo + '?callback=' + callbackName;
document.head.appendChild( script );
</script>