~/.js/github.com.js

README.md

github.com.js

dotjs userscript for visualizing package.json files (if present) underneath the tree view.

Very useful for navigating Node.JS projects

github.com.js

$(function () {
  var match = $('#slider .tree-browser a').filter(function () {
    return 'package.json' == $(this).text();
  });
  if (match.length) {
    $.get(match.attr('href'), function (res) {
      var file = $(res).find('#files');

      // make it look good
      file.css({
          marginTop: -15
        , marginBottom: 15
      });

      // append package.json title
      file.find('.info span.icon').append($('<b>package.json</b>').css({
          padding: '8px 4px'
        , display: 'inline-block'
      }));

      $('.tree-browser-wrapper').after(file);
    });
  }
});

This script broke for me recently, and after some debugging, it looks like the break is due to GitHub's PJAX implementation requiring an X-PJAX: true header for layout-less HTML to be returned.

Added this header to the Ajax request, and this works again:

$(function () {
  var match = $('#slider .tree-browser a').filter(function () {
    return 'package.json' == $(this).text();
  });
  if (match.length) {
    $.ajax({
      url: match.attr('href'),
      headers: {
        'X-PJAX': 'true'
      },
      success: function (res) {
        var file = $(res).find('#files');

        // make it look good
        file.css({
          marginTop: -15
        , marginBottom: 15
        });

        // append package.json title
        file.find('.info span.icon').append($('<b>package.json</b>').css({
          padding: '8px 4px'
        , display: 'inline-block'
        }));

        $('.tree-browser-wrapper').after(file);
      }
    });
  }
});

Another update for changed GitHub HTML. =)

Also made the package.json title a clickable link.

$(function () {
  var match = $('table.files td.content a').filter(function () {
    return 'package.json' == $(this).text();
  });
  if (match.length) {
    $.ajax({
      url: match.attr('href'),
      headers: {
        'X-PJAX': 'true'
      },
      success: function (res) {
        var file = $(res).find('.file-box');

        // add package.json title
        file.find('.info').prepend(
            '<a href="' + match.attr('href') + '"><b>package.json</b></a>'
        );

        $('.file-wrap').after(file);
      }
    });
  }
});