Embed GitHub Gists without blocking the page.

gist_embed.coffee

# Asynchronously load GitHub Embeds
# Why?
# Because no web developer worth his weight in bacon salt wants to have blocking <script /> style embeds in his content.
# I want to be able to link to GitHub gists I write, and I want those links to show up in content aggregators as well.
# And then, if possibly, progressively enhance by embedding the gist.
#
# Usage, simply link to a gist. An entire gist, or an anchor tag to a particular file.
#
# Requires: jQuery and Modernizr
#
# This Gist was helpful
# https://gist.github.com/889189

# All GitHub embeds have one call to document.write that is for including this.
# We'll ignore it and automatically include it once
githubCssSource = 'https://gist.github.com/stylesheets/gist/embed.css'

# Force yepnope to load GitHub embeds ending with .css as JS
yepnope.addFilter (resourceObj) =>
  resourceObj.forceJS = true if resourceObj.url.match /\/\/gist.github.com\/\d*\.js\?.*\.css$/
  resourceObj

# Overide document.write to handle the GitHub embed code calling it.
# Purists can crap your pants now.
# Also, I'm writing this in a language that compiles to JavaScript, so double crap your pants.
githubEmbedHTML = []
document.write = (str) ->
  githubEmbedHTML.push str unless str == '<link rel="stylesheet" href="' + githubCssSource + '"/>'

mutateGithubURL = (url) ->
  url = url.replace(/#file_/,'.js?file=')
  url = url + '.js' unless url.match(/\.js\?file=/)
  url # Explicit return
  
# Do this with jQuery when the document is ready    
$(document).ready ->

  elements = $ 'a[href*="://gist.github.com/"]'
  sources = (mutateGithubURL element.href for element in elements)
  
  sources.push githubCssSource if sources.length
  
  # Load the sources, which will call our now re-written document.write
  Modernizr.load {} =
    load: sources,
    callback: (source, result, index) =>

      # The GitHub Stylesheet is the last index
      return false if index == (sources.length - 1)

      # Overridden document.write pushed the embed HTML into the array. We're pulling it right out.
      $(elements[index]).replaceWith githubEmbedHTML.pop()

gist_embed.js

(function() {
  var githubCssSource, githubEmbedHTML, mutateGithubURL;
  var _this = this;

  githubCssSource = 'https://gist.github.com/stylesheets/gist/embed.css';

  yepnope.addFilter(function(resourceObj) {
    if (resourceObj.url.match(/\/\/gist.github.com\/\d*\.js\?.*\.css$/)) {
      resourceObj.forceJS = true;
    }
    return resourceObj;
  });

  githubEmbedHTML = [];

  document.write = function(str) {
    if (str !== '<link rel="stylesheet" href="' + githubCssSource + '"/>') {
      return githubEmbedHTML.push(str);
    }
  };

  mutateGithubURL = function(url) {
    url = url.replace(/#file_/, '.js?file=');
    if (!url.match(/\.js\?file=/)) url = url + '.js';
    return url;
  };

  $(document).ready(function() {
    var element, elements, sources;
    var _this = this;
    elements = $('a[href*="://gist.github.com/"]');
    sources = (function() {
      var _i, _len, _results;
      _results = [];
      for (_i = 0, _len = elements.length; _i < _len; _i++) {
        element = elements[_i];
        _results.push(mutateGithubURL(element.href));
      }
      return _results;
    })();
    if (sources.length) sources.push(githubCssSource);
    return Modernizr.load({
      load: sources,
      callback: function(source, result, index) {
        if (index === (sources.length - 1)) return false;
        return $(elements[index]).replaceWith(githubEmbedHTML.pop());
      }
    });
  });

}).call(this);