From 837f61d83405bec770dbdf65bc993a1334cee40e Mon Sep 17 00:00:00 2001 From: niu tech Date: Sun, 2 Dec 2018 20:20:20 +0100 Subject: [PATCH 01/17] Fixed broken YQL query --- htmlpreview.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/htmlpreview.min.js b/htmlpreview.min.js index 63f4d20..b5d3e23 100644 --- a/htmlpreview.min.js +++ b/htmlpreview.min.js @@ -1 +1 @@ -var HTMLPreview={content:"",previewform:document.getElementById("previewform"),file:function(){return location.search.substring(1)},raw:function(){return HTMLPreview.file().replace(/\/\/github\.com/,"//raw.githubusercontent.com").replace(/\/blob\//,"/")},replaceAssets:function(){var a,b,c;a=document.querySelectorAll("iframe[src],frame[src]");for(b=0;b/i,'').replace(//i,''); //Get content using YQL + document.write(''); //Get content using YQL }, submitform: function() { From f4d9151d750069bc314c052363625124cd3cf994 Mon Sep 17 00:00:00 2001 From: niu tech Date: Sun, 2 Dec 2018 20:24:00 +0100 Subject: [PATCH 03/17] Fixed broken YQL query --- htmlpreview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/htmlpreview.js b/htmlpreview.js index d1b982c..440dfe3 100644 --- a/htmlpreview.js +++ b/htmlpreview.js @@ -117,7 +117,7 @@ var HTMLPreview = { }, send: function(file, callback) { - document.write(''); //Get content using YQL + document.write(''); //Get content using YQL }, submitform: function() { From 1d6b45d8a69264fd7be1f57a71894237720e46c6 Mon Sep 17 00:00:00 2001 From: niu tech Date: Sun, 2 Dec 2018 20:24:43 +0100 Subject: [PATCH 04/17] Fixed broken YQL query --- htmlpreview.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/htmlpreview.min.js b/htmlpreview.min.js index b5d3e23..c62f7b2 100644 --- a/htmlpreview.min.js +++ b/htmlpreview.min.js @@ -1 +1 @@ -var HTMLPreview={content:"",previewform:document.getElementById("previewform"),file:function(){return location.search.substring(1)},raw:function(){return HTMLPreview.file().replace(/\/\/github\.com/,"//raw.githubusercontent.com").replace(/\/blob\//,"/")},replaceAssets:function(){var a,b,c;a=document.querySelectorAll("iframe[src],frame[src]");for(b=0;b/i,'').replace(//i,'').replace(/<\/head>\s* just after and inject '); + var loadJS = function (data) { + if (data) { + var script = document.createElement('script'); + script.innerHTML = data; + document.body.appendChild(script); } - }, - - send: function(file, callback) { - document.write(''); //Get content using YQL - }, + }; + + var fetchProxy = function (url, options, i) { + var proxy = [ + 'https://cors.io/?', + 'https://jsonp.afeld.me/?url=', + 'https://cors-anywhere.herokuapp.com/' + ]; + return fetch(proxy[i] + url, options).then(function (res) { + if (!res.ok) + throw new Error('Cannot load ' + url + ': ' + res.status + ' ' + res.statusText); + return res.text(); + }).catch(function (error) { + if (i === proxy.length - 1) + throw error; + return fetchProxy(url, options, i + 1); + }) + }; - submitform: function() { - location.href = '/?' + document.getElementById('file').value; - return false; - }, + if (url && url.indexOf(location.hostname) < 0) + fetchProxy(url, null, 0).then(loadHTML).catch(function (error) { + console.error(error); + previewForm.style.display = 'block'; + previewForm.innerText = error; + }); + else + previewForm.style.display = 'block'; - init: function() { - HTMLPreview.previewform.onsubmit = HTMLPreview.submitform; - if(HTMLPreview.file()) { - HTMLPreview.previewform.innerHTML = '

Loading...

'; - HTMLPreview.send(HTMLPreview.raw(), 'loadHTML'); - } - } -} +})() diff --git a/htmlpreview.min.js b/htmlpreview.min.js deleted file mode 100644 index 6901891..0000000 --- a/htmlpreview.min.js +++ /dev/null @@ -1 +0,0 @@ -var HTMLPreview={content:"",previewform:document.getElementById("previewform"),file:function(){return location.search.substring(1)},raw:function(){return HTMLPreview.file().replace(/\/\/github\.com/,"//raw.githubusercontent.com").replace(/\/blob\//,"/")},replaceAssets:function(){var a,b,c;a=document.querySelectorAll("iframe[src],frame[src]");for(b=0;b/i,'').replace(//i,' - + diff --git a/readme.md b/readme.md index 3270148..33818c5 100644 --- a/readme.md +++ b/readme.md @@ -1,18 +1,21 @@ GitHub & BitBucket HTML Preview ------------------------------- -Many GitHub repositories don't use GitHub Pages to host their HTML files. **GitHub & BitBucket HTML Preview** allows you to render those files without cloning or downloading whole repositories. It is a client-side solution and does not involve any third party hosting servers (except for Yahoo! Query Language to fetch assets). +Many GitHub repositories don't use GitHub Pages to host their HTML files. **GitHub & BitBucket HTML Preview** allows you to render those files without cloning or downloading whole repositories. It is a client-side solution using a CORS proxy to fetch assets. -If you try to open raw versions of any HTML, CSS or JS files in a web browser directly from GitHub, all you will see are sources. GitHub forces them to use the "text/plain" content-type, so they cannot be interpreted. This script overrides it by using Yahoo! Query Language. +If you try to open raw version of any HTML, CSS or JS file in a web browser directly from GitHub, all you will see is a source code. GitHub forces them to use the "text/plain" content-type, so they cannot be interpreted. This script overrides it by using a CORS proxy. -In order to use it, just prepend this fragment to the URL of any HTML file: **[http://htmlpreview.github.io/?](http://htmlpreview.github.io/?)** e.g.: +## Usage - - http://htmlpreview.github.io/?https://github.com/twbs/bootstrap/gh-pages/2.3.2/index.html - - http://htmlpreview.github.io/?https://github.com/documentcloud/backbone/blob/master/examples/todos/index.html +In order to use it, just prepend this fragment to the URL of any HTML file: **[https://htmlpreview.github.io/?](https://htmlpreview.github.io/?)** e.g.: -What it does is load HTML using YQL, then process all links, frames, scripts and styles, and load each of them using YQL, so they can be evaluted in the browser. Here is the workflow: -``` -HTMLPreview.init() -> HTMLPreview.send(HTML) -> YQL fetch HTML -> HTMLPreview.loadHTML(data) -> HTMLPreview.replaceAssets() -> HTMLPreview.send(CSS) -> YQL fetch CSS -> HTMLPreview.loadCSS(data) -> HTMLPreview.send(JS) -> YQL fetch JS -> HTMLPreview.loadJS(data) -``` + - https://htmlpreview.github.io/?https://github.com/twbs/bootstrap/gh-pages/2.3.2/index.html + - https://htmlpreview.github.io/?https://github.com/documentcloud/backbone/blob/master/examples/todos/index.html -**GitHub & BitBucket HTML Preview** was tested under Google Chrome, Apple Safari and Mozilla Firefox, and it should work with majority of websites, not only GitHub & BitBucket. +What it does is: load HTML using CORS proxy, then process all links, frames, scripts and styles, and load each of them using CORS proxy, so they can be evaluted by the browser. + +**GitHub & BitBucket HTML Preview** was tested under the latest Google Chrome and Mozilla Firefox. + +## License + +© 2019 Jerzy Głowacki under Apache License 2.0. From fef525182c1d112d1751b3bf8813af0146b9b54d Mon Sep 17 00:00:00 2001 From: Sergey Kolomenkin Date: Sat, 7 Dec 2019 14:51:49 +0300 Subject: [PATCH 08/17] disable cors.io proxy because it is broken Issue: https://github.com/htmlpreview/htmlpreview.github.com/issues/78 --- htmlpreview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/htmlpreview.js b/htmlpreview.js index 1390c01..e637c97 100644 --- a/htmlpreview.js +++ b/htmlpreview.js @@ -88,7 +88,7 @@ var fetchProxy = function (url, options, i) { var proxy = [ - 'https://cors.io/?', + //'https://cors.io/?', 'https://jsonp.afeld.me/?url=', 'https://cors-anywhere.herokuapp.com/' ]; From 55974aea3b6791596f15dca3f82f44dab6b2610a Mon Sep 17 00:00:00 2001 From: 0xflotus <0xflotus@gmail.com> Date: Thu, 28 May 2020 01:51:35 +0200 Subject: [PATCH 09/17] (readme): fixed small error --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 33818c5..3721989 100644 --- a/readme.md +++ b/readme.md @@ -12,7 +12,7 @@ In order to use it, just prepend this fragment to the URL of any HTML file: **[h - https://htmlpreview.github.io/?https://github.com/twbs/bootstrap/gh-pages/2.3.2/index.html - https://htmlpreview.github.io/?https://github.com/documentcloud/backbone/blob/master/examples/todos/index.html -What it does is: load HTML using CORS proxy, then process all links, frames, scripts and styles, and load each of them using CORS proxy, so they can be evaluted by the browser. +What it does is: load HTML using CORS proxy, then process all links, frames, scripts and styles, and load each of them using CORS proxy, so they can be evaluated by the browser. **GitHub & BitBucket HTML Preview** was tested under the latest Google Chrome and Mozilla Firefox. From adaa08ac90758703e6294003b5a24a0e74286e17 Mon Sep 17 00:00:00 2001 From: niu tech Date: Wed, 7 Oct 2020 03:35:05 +0200 Subject: [PATCH 10/17] Fix CORS proxy --- htmlpreview.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/htmlpreview.js b/htmlpreview.js index e637c97..f01dc1c 100644 --- a/htmlpreview.js +++ b/htmlpreview.js @@ -88,13 +88,11 @@ var fetchProxy = function (url, options, i) { var proxy = [ - //'https://cors.io/?', - 'https://jsonp.afeld.me/?url=', + 'https://thingproxy.freeboard.io/fetch/', + 'https://yacdn.org/serve/', 'https://cors-anywhere.herokuapp.com/' ]; return fetch(proxy[i] + url, options).then(function (res) { - if (!res.ok) - throw new Error('Cannot load ' + url + ': ' + res.status + ' ' + res.statusText); return res.text(); }).catch(function (error) { if (i === proxy.length - 1) @@ -104,7 +102,10 @@ }; if (url && url.indexOf(location.hostname) < 0) - fetchProxy(url, null, 0).then(loadHTML).catch(function (error) { + fetch(url).then(function (res) { + if (!res.ok) throw new Error('Cannot load ' + url + ': ' + res.status + ' ' + res.statusText); + return res.text(); + }).then(loadHTML).catch(function (error) { console.error(error); previewForm.style.display = 'block'; previewForm.innerText = error; From a9b391d07a904a04d3ab1d5080638c33fb3cbfb1 Mon Sep 17 00:00:00 2001 From: niu tech Date: Wed, 7 Oct 2020 03:42:42 +0200 Subject: [PATCH 11/17] Fix CORS proxy --- htmlpreview.js | 1 - 1 file changed, 1 deletion(-) diff --git a/htmlpreview.js b/htmlpreview.js index f01dc1c..9349387 100644 --- a/htmlpreview.js +++ b/htmlpreview.js @@ -88,7 +88,6 @@ var fetchProxy = function (url, options, i) { var proxy = [ - 'https://thingproxy.freeboard.io/fetch/', 'https://yacdn.org/serve/', 'https://cors-anywhere.herokuapp.com/' ]; From ed8195e6fdbc28fc5d40c88f4e9dd42076374568 Mon Sep 17 00:00:00 2001 From: niu tech Date: Wed, 7 Oct 2020 03:55:12 +0200 Subject: [PATCH 12/17] Fix CORS proxy --- htmlpreview.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/htmlpreview.js b/htmlpreview.js index 9349387..8e1fd5a 100644 --- a/htmlpreview.js +++ b/htmlpreview.js @@ -88,8 +88,9 @@ var fetchProxy = function (url, options, i) { var proxy = [ + 'https://cors-anywhere.herokuapp.com/', 'https://yacdn.org/serve/', - 'https://cors-anywhere.herokuapp.com/' + 'https://api.codetabs.com/v1/proxy/?quest=' ]; return fetch(proxy[i] + url, options).then(function (res) { return res.text(); From f56fa2a29d8313456c018614cf30327593b2ab1c Mon Sep 17 00:00:00 2001 From: niu tech Date: Wed, 7 Oct 2020 04:11:24 +0200 Subject: [PATCH 13/17] Fix CORS proxy --- htmlpreview.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/htmlpreview.js b/htmlpreview.js index 8e1fd5a..14afe61 100644 --- a/htmlpreview.js +++ b/htmlpreview.js @@ -89,10 +89,11 @@ var fetchProxy = function (url, options, i) { var proxy = [ 'https://cors-anywhere.herokuapp.com/', - 'https://yacdn.org/serve/', + 'https://yacdn.org/proxy/', 'https://api.codetabs.com/v1/proxy/?quest=' ]; return fetch(proxy[i] + url, options).then(function (res) { + if (!res.ok) throw new Error('Cannot load ' + url + ': ' + res.status + ' ' + res.statusText); return res.text(); }).catch(function (error) { if (i === proxy.length - 1) From 2c23ebae9ab2315831bdde75b8fe2055d4360a72 Mon Sep 17 00:00:00 2001 From: niu tech Date: Tue, 13 Oct 2020 14:00:50 +0200 Subject: [PATCH 14/17] Dispatch DOMContentLoaded event Fixes #87 --- htmlpreview.js | 1 + 1 file changed, 1 insertion(+) diff --git a/htmlpreview.js b/htmlpreview.js index 14afe61..2f08b15 100644 --- a/htmlpreview.js +++ b/htmlpreview.js @@ -55,6 +55,7 @@ for (i = 0; i < res.length; ++i) { loadJS(res[i]); } + document.dispatchEvent(new Event('DOMContentLoaded', {bubbles: true, cancelable: true})); //Dispatch DOMContentLoaded event after loading all scripts }); }; From 1e4aa6dbb4a48362dea5c1537bbeed9a95d15c7d Mon Sep 17 00:00:00 2001 From: TrianguloY Date: Fri, 16 Oct 2020 12:32:00 +0200 Subject: [PATCH 15/17] Try fetching without proxy first When fetching a resource, try directly first. If it throws an error, then try with proxies. Fixes #95 Should also reduce drastically the petitions to the proxy servers (will only be made if the non-proxy fails) --- htmlpreview.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/htmlpreview.js b/htmlpreview.js index 2f08b15..d3996eb 100644 --- a/htmlpreview.js +++ b/htmlpreview.js @@ -89,6 +89,7 @@ var fetchProxy = function (url, options, i) { var proxy = [ + '', // try without proxy first 'https://cors-anywhere.herokuapp.com/', 'https://yacdn.org/proxy/', 'https://api.codetabs.com/v1/proxy/?quest=' @@ -104,10 +105,7 @@ }; if (url && url.indexOf(location.hostname) < 0) - fetch(url).then(function (res) { - if (!res.ok) throw new Error('Cannot load ' + url + ': ' + res.status + ' ' + res.statusText); - return res.text(); - }).then(loadHTML).catch(function (error) { + fetchProxy(url, null, 0).then(loadHTML).catch(function (error) { console.error(error); previewForm.style.display = 'block'; previewForm.innerText = error; From a60683d86024c899d0b8165861d15cd1c8f65198 Mon Sep 17 00:00:00 2001 From: Peter Chubb Date: Fri, 9 Jul 2021 14:23:16 +1000 Subject: [PATCH 16/17] Delete no-longer-running yacdn.org proxy. yacdn.org has been down for some time. Having it in the list of proxies means that attempting to view generated HTML can take a long time, before connection attempts time out. --- htmlpreview.js | 1 - 1 file changed, 1 deletion(-) diff --git a/htmlpreview.js b/htmlpreview.js index 2f08b15..57b9009 100644 --- a/htmlpreview.js +++ b/htmlpreview.js @@ -90,7 +90,6 @@ var fetchProxy = function (url, options, i) { var proxy = [ 'https://cors-anywhere.herokuapp.com/', - 'https://yacdn.org/proxy/', 'https://api.codetabs.com/v1/proxy/?quest=' ]; return fetch(proxy[i] + url, options).then(function (res) { From 6a635bd194dda9abf1c573f623d241ebe45af689 Mon Sep 17 00:00:00 2001 From: Peter Chubb Date: Fri, 9 Jul 2021 14:32:23 +1000 Subject: [PATCH 17/17] 'https://cors-anywhere.herokuapp.com/' is also broken See https://github.com/Rob--W/cors-anywhere/issues/301 Signed-off-by: Peter Chubb --- htmlpreview.js | 1 - 1 file changed, 1 deletion(-) diff --git a/htmlpreview.js b/htmlpreview.js index 57b9009..f5e1eb7 100644 --- a/htmlpreview.js +++ b/htmlpreview.js @@ -89,7 +89,6 @@ var fetchProxy = function (url, options, i) { var proxy = [ - 'https://cors-anywhere.herokuapp.com/', 'https://api.codetabs.com/v1/proxy/?quest=' ]; return fetch(proxy[i] + url, options).then(function (res) {