Skip to content

Instantly share code, notes, and snippets.

@rauchg
Created March 16, 2012 21:05
Show Gist options
  • Save rauchg/2052694 to your computer and use it in GitHub Desktop.
Save rauchg/2052694 to your computer and use it in GitHub Desktop.
~/.js/github.com.js

github.com.js

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

Very useful for navigating Node.JS projects

$(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);
});
}
});
@aseemk
Copy link

aseemk commented Mar 29, 2013

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);
      }
    });
  }
});

@aseemk
Copy link

aseemk commented Feb 7, 2015

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);
      }
    });
  }
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment