6 ms·

Githtml - View Html Files from Github Repos On The Fly

53 points by gcoins 14y ago

skrebbel 14y ago
Shouldn't it be called Githubhtml? I mean, it has virtually nothing to do with git.
gauravsc 14y ago
the rendered pages are not very accurate, they seem deformed.
- redment 14y ago
  Edit: I'm working on a fix for this. I see the bootstrap page is deformed.
samwillis 14y ago
This has a really big security flaw, if the creator wanted to be mischievous he could change his js file to do things to your logged in github account, for example set your privet repositories public. If you want to use it you should fork it and change to bookmarklet to use your fork of the js file.
- redment 14y ago
  Though I'd never do such a thing, your point is completely valid.
  - samwillis 14y ago
    And I would always lean to the side of trust in people, I wouldn't expect you or most people here to abuse it. Its a little bit of a pet hate, the suggested linking to JavaScript files in another persons repository. The worst was the HTML5 Shim, for a long time they suggested linking directly to their svn repo, fortunately they don't now. It was about the same time people started thinking about using the google cdn for javascript libraries and so people just did it thinking they were helping their page load times when in fact they were compromising the security of their users and themselves.
    - samwillis 14y ago
      Just thinking about this, what's needed is some kind of trusted public cdn that you can send files to but cannot change so that library writers can point towards a cdn hosted version of the library without running one themselves and removing security vulnerability.
      - simonbrown 14y ago
        Or a hash attribute to file and script tags. Of course, either case would mean redment wouldn't be able to update it.
    - simonbrown 14y ago
      Using Google CDN places no more trust in Google than using Google Analytics or AdSense. Unless your site handled sensitive data or is mission critical, I believe it's reasonable to trust Google not to do anything malicious. It's worth noting that the same issue exists with Chrome extensions. I wonder how strong a Google password the authors of popular Chrome extensions have.
rcfox 14y ago
This seems like a lot of code... Here's what I use: javascript:void(document.body.innerHTML = document.getElementsByTagName("pre")[0].innerHTML.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/ /g," ")); (Note: I've only tested this on Chrome.)
- redment 14y ago
  Most of the code is for mapping css and js files to the relative raw pages. Try your code on this page: https://raw.github.com/mrdoob/three.js/46c0a8434d3f269741a887f484cc555c3d3f29c7/examples/canvas_interactive_cubes_tween.html https://raw.github.com/mrdoob/three.js/46c0a8434d3f269741a88... And compare it with githtml on the /blob/ version of the same page: https://github.com/mrdoob/three.js/blob/master/examples/canvas_interactive_cubes_tween.html https://github.com/mrdoob/three.js/blob/master/examples/canv...
  - rcfox 14y ago
    CSS works fine. (Try this one: https://raw.github.com/twitter/bootstrap/master/docs/index.html https://raw.github.com/twitter/bootstrap/master/docs/index.h...) I suspect that JS that didn't depend on the page-load to trigger it would work too. I had never considered looking at JS-enabled pages though. When I wrote my bookmarklet, I just needed to view static documentation. Edit: I found a page with only on-click JS events, and they didn't work. Oh well...
    - redment 14y ago
      Fixed now.
austenito 14y ago
Nifty!
kmfrk 14y ago
Pretty cool. Can't wait until someone converts this to an extension.
- redment 14y ago
  I'm working on that right now. Both for Chrome and FF.
  - kmfrk 14y ago
    Cool. How do you plan on releasing it? Through the repo?
grimtrigger 14y ago
This would be awesome as a webapp. I have to demo pages to non technical people, so the bookmarklet/snippet is a non-starter.
- _jb 14y ago
  I have been working on this and I decided to finish / publish it today. Here it is : http://news.ycombinator.com/item?id=4200790 http://news.ycombinator.com/item?id=4200790 https://github.com/jbourassa/mirrorin https://github.com/jbourassa/mirrorin
albertoavila 14y ago
This is great!, There has ben more than a few times that I've wished to be able to do this while browsing trough random github repos, kudos to the developer, this looks very handy!
sente 14y ago
A few months back I created a bookmarklet to render the html when looking at the raw html page -- https://gist.github.com/1831405 https://gist.github.com/1831405 I've ended up using this bookmarklet on a lot of non-github.com sites too. For instance, you can see how it renders http://c.sente.cc/hcVg/xkcd.txt http://c.sente.cc/hcVg/xkcd.txt here: http://i.imgur.com/DNVqd.png http://i.imgur.com/DNVqd.png here's the code in snippet form: javascript:function write_window(content) {top.consoleRef=window.open(%27%27,%27git-r-done%27,+%27,menubar=1%27+%27,toolbar=1%27+%27,status=1%27+%27,scrollbars=1%27+%27,resizable=1%27);top.consoleRef.document.writeln(content);top.consoleRef.document.close();}function dostuff() {$.ajax({url: document.location.href,dataType:%27html%27,success: function(content){setTimeout(function(){write_window(content)},500);}});}function add_jquery(attempt) {var jq=document.createElement(%27script%27);jq.type=%27text/javascript%27;jq.async=false;jq.src=%27https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js%27;var s=document.getElementsByTagName(%27script%27)[0];s.parentNode.insertBefore(jq,s);try{var foo=$(%27*%27);dostuff();}catch(err){if(attempt < 5){attempt = attempt + 1;setTimeout("add_jquery("+attempt+")",1000)}else{alert(%27could not load jquery..try again!%27);}}}add_jquery(0);

53 points by gcoins 14y ago

skrebbel 14y ago

Shouldn't it be called Githubhtml? I mean, it has virtually nothing to do with git.

gauravsc 14y ago

the rendered pages are not very accurate, they seem deformed.

redment 14y ago
Edit: I'm working on a fix for this. I see the bootstrap page is deformed.

samwillis 14y ago

This has a really big security flaw, if the creator wanted to be mischievous he could change his js file to do things to your logged in github account, for example set your privet repositories public. If you want to use it you should fork it and change to bookmarklet to use your fork of the js file.

redment 14y ago
Though I'd never do such a thing, your point is completely valid.
- samwillis 14y ago
  And I would always lean to the side of trust in people, I wouldn't expect you or most people here to abuse it. Its a little bit of a pet hate, the suggested linking to JavaScript files in another persons repository. The worst was the HTML5 Shim, for a long time they suggested linking directly to their svn repo, fortunately they don't now. It was about the same time people started thinking about using the google cdn for javascript libraries and so people just did it thinking they were helping their page load times when in fact they were compromising the security of their users and themselves.
  - samwillis 14y ago
    Just thinking about this, what's needed is some kind of trusted public cdn that you can send files to but cannot change so that library writers can point towards a cdn hosted version of the library without running one themselves and removing security vulnerability.
    - simonbrown 14y ago
      Or a hash attribute to file and script tags. Of course, either case would mean redment wouldn't be able to update it.
  - simonbrown 14y ago
    Using Google CDN places no more trust in Google than using Google Analytics or AdSense. Unless your site handled sensitive data or is mission critical, I believe it's reasonable to trust Google not to do anything malicious. It's worth noting that the same issue exists with Chrome extensions. I wonder how strong a Google password the authors of popular Chrome extensions have.

rcfox 14y ago

This seems like a lot of code... Here's what I use: javascript:void(document.body.innerHTML = document.getElementsByTagName("pre")[0].innerHTML.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/ /g," ")); (Note: I've only tested this on Chrome.)

redment 14y ago
Most of the code is for mapping css and js files to the relative raw pages. Try your code on this page: https://raw.github.com/mrdoob/three.js/46c0a8434d3f269741a887f484cc555c3d3f29c7/examples/canvas_interactive_cubes_tween.html https://raw.github.com/mrdoob/three.js/46c0a8434d3f269741a88... And compare it with githtml on the /blob/ version of the same page: https://github.com/mrdoob/three.js/blob/master/examples/canvas_interactive_cubes_tween.html https://github.com/mrdoob/three.js/blob/master/examples/canv...
- rcfox 14y ago
  CSS works fine. (Try this one: https://raw.github.com/twitter/bootstrap/master/docs/index.html https://raw.github.com/twitter/bootstrap/master/docs/index.h...) I suspect that JS that didn't depend on the page-load to trigger it would work too. I had never considered looking at JS-enabled pages though. When I wrote my bookmarklet, I just needed to view static documentation. Edit: I found a page with only on-click JS events, and they didn't work. Oh well...
  - redment 14y ago
    Fixed now.

austenito 14y ago

Nifty!

kmfrk 14y ago

Pretty cool. Can't wait until someone converts this to an extension.

redment 14y ago
I'm working on that right now. Both for Chrome and FF.
- kmfrk 14y ago
  Cool. How do you plan on releasing it? Through the repo?

grimtrigger 14y ago

This would be awesome as a webapp. I have to demo pages to non technical people, so the bookmarklet/snippet is a non-starter.

_jb 14y ago
I have been working on this and I decided to finish / publish it today. Here it is : http://news.ycombinator.com/item?id=4200790 http://news.ycombinator.com/item?id=4200790 https://github.com/jbourassa/mirrorin https://github.com/jbourassa/mirrorin

albertoavila 14y ago

This is great!, There has ben more than a few times that I've wished to be able to do this while browsing trough random github repos, kudos to the developer, this looks very handy!

sente 14y ago

A few months back I created a bookmarklet to render the html when looking at the raw html page -- https://gist.github.com/1831405 https://gist.github.com/1831405 I've ended up using this bookmarklet on a lot of non-github.com sites too. For instance, you can see how it renders http://c.sente.cc/hcVg/xkcd.txt http://c.sente.cc/hcVg/xkcd.txt here: http://i.imgur.com/DNVqd.png http://i.imgur.com/DNVqd.png here's the code in snippet form: javascript:function write_window(content) {top.consoleRef=window.open(%27%27,%27git-r-done%27,+%27,menubar=1%27+%27,toolbar=1%27+%27,status=1%27+%27,scrollbars=1%27+%27,resizable=1%27);top.consoleRef.document.writeln(content);top.consoleRef.document.close();}function dostuff() {$.ajax({url: document.location.href,dataType:%27html%27,success: function(content){setTimeout(function(){write_window(content)},500);}});}function add_jquery(attempt) {var jq=document.createElement(%27script%27);jq.type=%27text/javascript%27;jq.async=false;jq.src=%27https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js%27;var s=document.getElementsByTagName(%27script%27)[0];s.parentNode.insertBefore(jq,s);try{var foo=$(%27*%27);dostuff();}catch(err){if(attempt < 5){attempt = attempt + 1;setTimeout("add_jquery("+attempt+")",1000)}else{alert(%27could not load jquery..try again!%27);}}}add_jquery(0);