Add support for online diff prettifier
* Initial support for GitHub, Bitbucket and GitLab urls * Also support any Git or unified diffs urls * Special thanks to @kevinsimper for the idea
This commit is contained in:
Rodrigo Fernandes
parent
744025efe2
commit
ba13de46a0
9 changed files with 541 additions and 3 deletions
|
|
@ -104,6 +104,7 @@
|
||||||
<div id="side-by-side" style="margin: 0 auto;">
|
<div id="side-by-side" style="margin: 0 auto;">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer class="footer clearfix">
|
<footer class="footer clearfix">
|
||||||
|
|
|
||||||
|
|
@ -94,7 +94,8 @@
|
||||||
</span>
|
</span>
|
||||||
<h1 class="hero-header">Diff parser and pretty html generator</h1>
|
<h1 class="hero-header">Diff parser and pretty html generator</h1>
|
||||||
<h4 class="text-muted">Better diffs, unmatched reviews.</h4>
|
<h4 class="text-muted">Better diffs, unmatched reviews.</h4>
|
||||||
<a class="btn btn-lg" href="demo.html">Demo</a>
|
<!-- <a class="btn btn-lg" href="demo.html">Demo</a> -->
|
||||||
|
<h2><a class="btn btn-lg" href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">Try the Online Diff Prettifier</a></h2>
|
||||||
|
|
||||||
<div class="screenshots screenshots-fan clearfix">
|
<div class="screenshots screenshots-fan clearfix">
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -536,3 +536,21 @@ a:hover, a:focus {
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.diff-url-wrapper {
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-url-input {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 10px;
|
||||||
|
flex-grow: 1;
|
||||||
|
height: 31px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.diff-url-btn {
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
width: 48px;
|
||||||
|
}
|
||||||
|
|
|
||||||
331
docs/url.html
Normal file
331
docs/url.html
Normal file
|
|
@ -0,0 +1,331 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" class="js">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<!--[if IE]>
|
||||||
|
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/>
|
||||||
|
<![endif]-->
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
<meta name="description" content="Diff parser and pretty html generator">
|
||||||
|
<meta name="keywords" content="diff2html,git,diff,unified,pretty,html,css,javaccript">
|
||||||
|
<meta name="author" content="Rodrigo Fernandes (rtfpessoa)">
|
||||||
|
|
||||||
|
<title>diff2html</title>
|
||||||
|
|
||||||
|
<!-- search engine -->
|
||||||
|
<link rel="canonical" href="https://diff2html.xyz">
|
||||||
|
|
||||||
|
<!-- open graph -->
|
||||||
|
<meta property="og:title" content="diff2html">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
|
||||||
|
<meta property="og:description"
|
||||||
|
content="Diff parser and pretty html generator.">
|
||||||
|
|
||||||
|
<meta property="og:url" content="https://diff2html.xyz">
|
||||||
|
<meta property="og:site_name" content="diff2html">
|
||||||
|
|
||||||
|
<!-- Bootstrap -->
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
|
||||||
|
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
|
||||||
|
|
||||||
|
<!-- Custom styles for this template -->
|
||||||
|
<link href="main.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/github.min.css">
|
||||||
|
|
||||||
|
<!-- diff2html -->
|
||||||
|
<link rel="stylesheet" type="text/css" href="assets/diff2html.css">
|
||||||
|
<!-- -->
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||||
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||||
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||||
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||||
|
|
||||||
|
ga('create', 'UA-78351861-2', 'auto');
|
||||||
|
ga('send', 'pageview');
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body class="swag-line template-index">
|
||||||
|
<div class="container-overflow-wrap">
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<nav class="navbar navbar-default navbar-tall navbar-full" role="navigation">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#global-nav">
|
||||||
|
<span class="sr-only">Toggle navigation</span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand" href="index.html">diff2html</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="collapse navbar-collapse" id="global-nav">
|
||||||
|
<div class="navbar-right">
|
||||||
|
<ul class="nav navbar-nav">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="index.html#install">Getting Started</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="index.html#cli">CLI</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="demo.html">Demo</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank">Docs</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="https://github.com/rtfpessoa/diff2html/issues/new" target="_blank">Support</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<h1>Diff Prettifier <a href="#help">?</a></h1>
|
||||||
|
<p>GitHub, Bitbucket and GitLab commit and pull request compatible</p>
|
||||||
|
<p>Just paste the GitHub, Bitbucket or GitLab commit, pull request or merge request url
|
||||||
|
or any other git or unified compatible diff and we will render a pretty html representation of it
|
||||||
|
with code syntax highlight and line similarity matching for better code reviews.
|
||||||
|
</p>
|
||||||
|
<br>
|
||||||
|
<div class="diff-url-wrapper">
|
||||||
|
<a id="url-btn" class="diff-url-btn btn btn-sm" href="#">Load</a>
|
||||||
|
<input id="url" class="diff-url-input" type="text" name="url" placeholder="URL"/>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<h2>Line by Line</h2>
|
||||||
|
|
||||||
|
<div id="line-by-line" style="margin: 0 auto;">
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<h3 id="help">Help:</h3>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<b>Why should I use this instead of GitHub, Bitbucket or GitLab?</b>
|
||||||
|
<p>Code Syntax Highlight</p>
|
||||||
|
<p>Line similarity match (similar lines are together)</p>
|
||||||
|
<p>Line by Line and Side by Side (SOON) diffs</p>
|
||||||
|
<p>Supports any git and unified compatible diffs</p>
|
||||||
|
<p>Easy code selection</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<b>What urls are supported?</b>
|
||||||
|
<p>Any GitHub, Bitbucket or GitLab Commit, Pull Request or Merge Request urls.</p>
|
||||||
|
<p>Any Git or Unified Raw Diff or Patch urls.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<b>Can I send a custom url for a friend, colleague or co-worker?</b>
|
||||||
|
<p>Just add a url parameter called diff to current url using as value your Commit, Pull Request, Merge Request, Diff or Patch url.</p>
|
||||||
|
<p>ex: <a href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">https://diff2html.xyz/url?diff=https://github.com/rtfpessoa/diff2html/pull/106</a></p>
|
||||||
|
<p>You can also use an hashtag (# or #! or #!/) in the end of the url.
|
||||||
|
This will be overridden if you click any href id and for that reason not advised.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<b>Why can't I paste a diff?</b>
|
||||||
|
<p><a href="https://diffy.org/">diffy.org</a> is an amazing tool created by <a href="https://github.com/pbu88">pbu88</a>
|
||||||
|
to share your diffs and uses diff2html under the hood.</p>
|
||||||
|
<p>Also, diff2html cli can directly publish diffs to <a href="https://diffy.org/">diffy.org</a></p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<br>
|
||||||
|
<h3>Thank you</h3>
|
||||||
|
<p>I want to thank <a href="https://github.com/kevinsimper">kevinsimper</a> for this great idea,
|
||||||
|
providing better diff support for existing online services.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer class="footer clearfix">
|
||||||
|
<p class="col-xs-10 col-xs-offset-1">
|
||||||
|
Website originally designed and built by
|
||||||
|
<a href="https://twitter.com/mdo" target="_blank">@mdo</a>,
|
||||||
|
<a href="https://twitter.com/fat" target="_blank">@fat</a>, and
|
||||||
|
<a href="https://twitter.com/dhg" target="_blank">@dhg</a>,
|
||||||
|
adapted with <span class="hero-red">❤</span> by
|
||||||
|
<a href="https://twitter.com/rtfpessoa" target="_blank">@rtfpessoa</a>.
|
||||||
|
</p>
|
||||||
|
<ul class="footer-list col-xs-10 col-xs-offset-1">
|
||||||
|
|
||||||
|
<li class="footer-list-item">
|
||||||
|
<a class="footer-list-link" href="https://github.com/rtfpessoa/diff2html#how-to-use"
|
||||||
|
target="_blank">FAQ</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="footer-list-item">
|
||||||
|
<a class="footer-list-link" href="https://diff2html.xyz">diff2html</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- General JavaScript -->
|
||||||
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
|
||||||
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
|
||||||
|
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
|
||||||
|
crossorigin="anonymous"></script>
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "http://schema.org/",
|
||||||
|
"@type": "SoftwareSourceCode",
|
||||||
|
"name": "diff2html",
|
||||||
|
"author": "Rodrigo Fernandes",
|
||||||
|
"image": "https://diff2html.xyz/img/snapshot-3.png",
|
||||||
|
"description": "Diff parser and pretty html generator.",
|
||||||
|
"codeRepository": "https://github.com/rtfpessoa/diff2html",
|
||||||
|
"programmingLanguage": "JavaScript",
|
||||||
|
"runtimePlatform": "Node >= 0.12",
|
||||||
|
"mainEntityOfPage": "https://diff2html.xyz/"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/languages/scala.min.js"></script>
|
||||||
|
|
||||||
|
<!-- diff2html -->
|
||||||
|
<script type="text/javascript" src="assets/diff2html.js"></script>
|
||||||
|
<script type="text/javascript" src="assets/diff2html-ui.js"></script>
|
||||||
|
<!-- -->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
* Example URLs:
|
||||||
|
*
|
||||||
|
* github/rtfpessoa/diff2html/7d02e67f3b3386ac5d804f974d025cd7a1165839
|
||||||
|
* https://github.com/rtfpessoa/diff2html/commit/7d02e67f3b3386ac5d804f974d025cd7a1165839
|
||||||
|
* https://github.com/rtfpessoa/diff2html/pull/106
|
||||||
|
*
|
||||||
|
* gitlab/gitlab-org/gitlab-ce/4e963fed42ad518caa7353d361a38a1250c99c41
|
||||||
|
* https://gitlab.com/gitlab-org/gitlab-ce/commit/4e963fed42ad518caa7353d361a38a1250c99c41
|
||||||
|
* https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/6763
|
||||||
|
*
|
||||||
|
* bitbucket/atlassian/amps/52c38116f12475f75af4a147b7a7685478b83eca
|
||||||
|
* https://bitbucket.org/atlassian/amps/commits/52c38116f12475f75af4a147b7a7685478b83eca
|
||||||
|
* https://bitbucket.org/atlassian/amps/pull-requests/236
|
||||||
|
*/
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
var hash = window.location.hash
|
||||||
|
.replace(/^(#!?\/?)/, "");
|
||||||
|
|
||||||
|
var search = window.location.search;
|
||||||
|
|
||||||
|
if (hash) {
|
||||||
|
$("#url").val(hash);
|
||||||
|
draw(prepareUrl(hash));
|
||||||
|
} else if (search) {
|
||||||
|
try {
|
||||||
|
var url = search
|
||||||
|
.split("?")[1]
|
||||||
|
.split("diff=")[1]
|
||||||
|
.split("&")[0];
|
||||||
|
$("#url").val(url);
|
||||||
|
draw(prepareUrl(url));
|
||||||
|
} catch (_ignore) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
bind(prepareUrl);
|
||||||
|
|
||||||
|
function bind() {
|
||||||
|
$("#url-btn").click(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var url = $("#url").val();
|
||||||
|
var preparedUrl = prepareUrl(url);
|
||||||
|
draw(preparedUrl);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepareUrl(url) {
|
||||||
|
var githubPath = /^github\/(.*?)\/(.*?)\/(.*?)$/;
|
||||||
|
var githubCommitUrl = /^https?:\/\/(?:www\.)?github\.com\/(.*?)\/(.*?)\/commit\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
|
||||||
|
var githubPrUrl = /^https?:\/\/(?:www\.)?github\.com\/(.*?)\/(.*?)\/pull\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
|
||||||
|
|
||||||
|
var gitlabPath = /^gitlab\/(.*?)\/(.*?)\/(.*?)$/;
|
||||||
|
var gitlabCommitUrl = /^https?:\/\/(?:www\.)?gitlab\.com\/(.*?)\/(.*?)\/commit\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
|
||||||
|
var gitlabPrUrl = /^https?:\/\/(?:www\.)?gitlab\.com\/(.*?)\/(.*?)\/merge_requests\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
|
||||||
|
|
||||||
|
var bitbucketPath = /^bitbucket\/(.*?)\/(.*?)\/(.*?)$/;
|
||||||
|
var bitbucketCommitUrl = /^https?:\/\/(?:www\.)?bitbucket\.org\/(.*?)\/(.*?)\/commits\/(.*?)(?:\/raw)?(?:\/.*)?$/;
|
||||||
|
var bitbucketPrUrl = /^https?:\/\/(?:www\.)?bitbucket\.org\/(.*?)\/(.*?)\/pull-requests\/(.*?)(?:\/.*)?$/;
|
||||||
|
|
||||||
|
function genericUrlGen(provider, userName, projectName, type, value) {
|
||||||
|
return "https://" + provider + ".com/" + userName + "/" + projectName + "/" + type + "/" + value + ".diff";
|
||||||
|
}
|
||||||
|
|
||||||
|
function bitbucketUrlGen(userName, projectName, type, value) {
|
||||||
|
var baseUrl = "https://bitbucket.org/api/2.0/repositories/";
|
||||||
|
|
||||||
|
if (type == "pullrequests") {
|
||||||
|
return baseUrl + userName + "/" + projectName + "/pullrequests/" + value + "/diff";
|
||||||
|
}
|
||||||
|
|
||||||
|
return baseUrl + userName + "/" + projectName + "/diff/" + value;
|
||||||
|
}
|
||||||
|
|
||||||
|
var values;
|
||||||
|
var finalUrl;
|
||||||
|
if ((values = githubPath.exec(url))) {
|
||||||
|
finalUrl = genericUrlGen("github", values[1], values[2], "commit", values[3]);
|
||||||
|
} else if ((values = githubCommitUrl.exec(url))) {
|
||||||
|
finalUrl = genericUrlGen("github", values[1], values[2], "commit", values[3]);
|
||||||
|
} else if ((values = githubPrUrl.exec(url))) {
|
||||||
|
finalUrl = genericUrlGen("github", values[1], values[2], "pull", values[3]);
|
||||||
|
|
||||||
|
} else if ((values = gitlabPath.exec(url))) {
|
||||||
|
finalUrl = genericUrlGen("gitlab", values[1], values[2], "commit", values[3]);
|
||||||
|
} else if ((values = gitlabCommitUrl.exec(url))) {
|
||||||
|
finalUrl = genericUrlGen("gitlab", values[1], values[2], "commit", values[3]);
|
||||||
|
} else if ((values = gitlabPrUrl.exec(url))) {
|
||||||
|
finalUrl = genericUrlGen("gitlab", values[1], values[2], "merge_requests", values[3]);
|
||||||
|
|
||||||
|
} else if ((values = bitbucketPath.exec(url))) {
|
||||||
|
finalUrl = bitbucketUrlGen(values[1], values[2], "commit", values[3]);
|
||||||
|
} else if ((values = bitbucketCommitUrl.exec(url))) {
|
||||||
|
finalUrl = bitbucketUrlGen(values[1], values[2], "commit", values[3]);
|
||||||
|
} else if ((values = bitbucketPrUrl.exec(url))) {
|
||||||
|
finalUrl = bitbucketUrlGen(values[1], values[2], "pullrequests", values[3]);
|
||||||
|
} else {
|
||||||
|
console.info("Could not parse url, using the provided url.");
|
||||||
|
finalUrl = url;
|
||||||
|
}
|
||||||
|
|
||||||
|
return finalUrl;
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw(url) {
|
||||||
|
var fullUrl = 'https://crossorigin.me/' + url;
|
||||||
|
fetch(fullUrl)
|
||||||
|
.then((res) => res.text())
|
||||||
|
.then((data) => {
|
||||||
|
var diff2htmlUi = new Diff2HtmlUI({diff: data});
|
||||||
|
diff2htmlUi.draw('#line-by-line', {
|
||||||
|
showFiles: true,
|
||||||
|
matching: 'lines'
|
||||||
|
});
|
||||||
|
diff2htmlUi.fileListCloseable('#line-by-line', false);
|
||||||
|
diff2htmlUi.highlightCode('#line-by-line');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -5,7 +5,8 @@
|
||||||
</span>
|
</span>
|
||||||
<h1 class="hero-header">Diff parser and pretty html generator</h1>
|
<h1 class="hero-header">Diff parser and pretty html generator</h1>
|
||||||
<h4 class="text-muted">Better diffs, unmatched reviews.</h4>
|
<h4 class="text-muted">Better diffs, unmatched reviews.</h4>
|
||||||
<a class="btn btn-lg" href="demo.html">Demo</a>
|
<!-- <a class="btn btn-lg" href="demo.html">Demo</a> -->
|
||||||
|
<h2><a class="btn btn-lg" href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">Try the Online Diff Prettifier</a></h2>
|
||||||
|
|
||||||
<div class="screenshots screenshots-fan clearfix">
|
<div class="screenshots screenshots-fan clearfix">
|
||||||
|
|
||||||
|
|
|
||||||
5
website/templates/pages/url/url-assets.partial.html
Normal file
5
website/templates/pages/url/url-assets.partial.html
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/styles/github.min.css">
|
||||||
|
|
||||||
|
<!-- diff2html -->
|
||||||
|
<link rel="stylesheet" type="text/css" href="assets/diff2html.css">
|
||||||
|
<!-- -->
|
||||||
130
website/templates/pages/url/url-scripts.partial.html
Normal file
130
website/templates/pages/url/url-scripts.partial.html
Normal file
|
|
@ -0,0 +1,130 @@
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/highlight.min.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.6.0/languages/scala.min.js"></script>
|
||||||
|
|
||||||
|
<!-- diff2html -->
|
||||||
|
<script type="text/javascript" src="assets/diff2html.js"></script>
|
||||||
|
<script type="text/javascript" src="assets/diff2html-ui.js"></script>
|
||||||
|
<!-- -->
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/*
|
||||||
|
* Example URLs:
|
||||||
|
*
|
||||||
|
* github/rtfpessoa/diff2html/7d02e67f3b3386ac5d804f974d025cd7a1165839
|
||||||
|
* https://github.com/rtfpessoa/diff2html/commit/7d02e67f3b3386ac5d804f974d025cd7a1165839
|
||||||
|
* https://github.com/rtfpessoa/diff2html/pull/106
|
||||||
|
*
|
||||||
|
* gitlab/gitlab-org/gitlab-ce/4e963fed42ad518caa7353d361a38a1250c99c41
|
||||||
|
* https://gitlab.com/gitlab-org/gitlab-ce/commit/4e963fed42ad518caa7353d361a38a1250c99c41
|
||||||
|
* https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/6763
|
||||||
|
*
|
||||||
|
* bitbucket/atlassian/amps/52c38116f12475f75af4a147b7a7685478b83eca
|
||||||
|
* https://bitbucket.org/atlassian/amps/commits/52c38116f12475f75af4a147b7a7685478b83eca
|
||||||
|
* https://bitbucket.org/atlassian/amps/pull-requests/236
|
||||||
|
*/
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
var hash = window.location.hash
|
||||||
|
.replace(/^(#!?\/?)/, "");
|
||||||
|
|
||||||
|
var search = window.location.search;
|
||||||
|
|
||||||
|
if (hash) {
|
||||||
|
$("#url").val(hash);
|
||||||
|
draw(prepareUrl(hash));
|
||||||
|
} else if (search) {
|
||||||
|
try {
|
||||||
|
var url = search
|
||||||
|
.split("?")[1]
|
||||||
|
.split("diff=")[1]
|
||||||
|
.split("&")[0];
|
||||||
|
$("#url").val(url);
|
||||||
|
draw(prepareUrl(url));
|
||||||
|
} catch (_ignore) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
bind(prepareUrl);
|
||||||
|
|
||||||
|
function bind() {
|
||||||
|
$("#url-btn").click(function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var url = $("#url").val();
|
||||||
|
var preparedUrl = prepareUrl(url);
|
||||||
|
draw(preparedUrl);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function prepareUrl(url) {
|
||||||
|
var githubPath = /^github\/(.*?)\/(.*?)\/(.*?)$/;
|
||||||
|
var githubCommitUrl = /^https?:\/\/(?:www\.)?github\.com\/(.*?)\/(.*?)\/commit\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
|
||||||
|
var githubPrUrl = /^https?:\/\/(?:www\.)?github\.com\/(.*?)\/(.*?)\/pull\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
|
||||||
|
|
||||||
|
var gitlabPath = /^gitlab\/(.*?)\/(.*?)\/(.*?)$/;
|
||||||
|
var gitlabCommitUrl = /^https?:\/\/(?:www\.)?gitlab\.com\/(.*?)\/(.*?)\/commit\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
|
||||||
|
var gitlabPrUrl = /^https?:\/\/(?:www\.)?gitlab\.com\/(.*?)\/(.*?)\/merge_requests\/(.*?)(?:\.diff)?(?:\.patch)?(?:\/.*)?$/;
|
||||||
|
|
||||||
|
var bitbucketPath = /^bitbucket\/(.*?)\/(.*?)\/(.*?)$/;
|
||||||
|
var bitbucketCommitUrl = /^https?:\/\/(?:www\.)?bitbucket\.org\/(.*?)\/(.*?)\/commits\/(.*?)(?:\/raw)?(?:\/.*)?$/;
|
||||||
|
var bitbucketPrUrl = /^https?:\/\/(?:www\.)?bitbucket\.org\/(.*?)\/(.*?)\/pull-requests\/(.*?)(?:\/.*)?$/;
|
||||||
|
|
||||||
|
function genericUrlGen(provider, userName, projectName, type, value) {
|
||||||
|
return "https://" + provider + ".com/" + userName + "/" + projectName + "/" + type + "/" + value + ".diff";
|
||||||
|
}
|
||||||
|
|
||||||
|
function bitbucketUrlGen(userName, projectName, type, value) {
|
||||||
|
var baseUrl = "https://bitbucket.org/api/2.0/repositories/";
|
||||||
|
|
||||||
|
if (type == "pullrequests") {
|
||||||
|
return baseUrl + userName + "/" + projectName + "/pullrequests/" + value + "/diff";
|
||||||
|
}
|
||||||
|
|
||||||
|
return baseUrl + userName + "/" + projectName + "/diff/" + value;
|
||||||
|
}
|
||||||
|
|
||||||
|
var values;
|
||||||
|
var finalUrl;
|
||||||
|
if ((values = githubPath.exec(url))) {
|
||||||
|
finalUrl = genericUrlGen("github", values[1], values[2], "commit", values[3]);
|
||||||
|
} else if ((values = githubCommitUrl.exec(url))) {
|
||||||
|
finalUrl = genericUrlGen("github", values[1], values[2], "commit", values[3]);
|
||||||
|
} else if ((values = githubPrUrl.exec(url))) {
|
||||||
|
finalUrl = genericUrlGen("github", values[1], values[2], "pull", values[3]);
|
||||||
|
|
||||||
|
} else if ((values = gitlabPath.exec(url))) {
|
||||||
|
finalUrl = genericUrlGen("gitlab", values[1], values[2], "commit", values[3]);
|
||||||
|
} else if ((values = gitlabCommitUrl.exec(url))) {
|
||||||
|
finalUrl = genericUrlGen("gitlab", values[1], values[2], "commit", values[3]);
|
||||||
|
} else if ((values = gitlabPrUrl.exec(url))) {
|
||||||
|
finalUrl = genericUrlGen("gitlab", values[1], values[2], "merge_requests", values[3]);
|
||||||
|
|
||||||
|
} else if ((values = bitbucketPath.exec(url))) {
|
||||||
|
finalUrl = bitbucketUrlGen(values[1], values[2], "commit", values[3]);
|
||||||
|
} else if ((values = bitbucketCommitUrl.exec(url))) {
|
||||||
|
finalUrl = bitbucketUrlGen(values[1], values[2], "commit", values[3]);
|
||||||
|
} else if ((values = bitbucketPrUrl.exec(url))) {
|
||||||
|
finalUrl = bitbucketUrlGen(values[1], values[2], "pullrequests", values[3]);
|
||||||
|
} else {
|
||||||
|
console.info("Could not parse url, using the provided url.");
|
||||||
|
finalUrl = url;
|
||||||
|
}
|
||||||
|
|
||||||
|
return finalUrl;
|
||||||
|
}
|
||||||
|
|
||||||
|
function draw(url) {
|
||||||
|
var fullUrl = 'https://crossorigin.me/' + url;
|
||||||
|
fetch(fullUrl)
|
||||||
|
.then((res) => res.text())
|
||||||
|
.then((data) => {
|
||||||
|
var diff2htmlUi = new Diff2HtmlUI({diff: data});
|
||||||
|
diff2htmlUi.draw('#line-by-line', {
|
||||||
|
showFiles: true,
|
||||||
|
matching: 'lines'
|
||||||
|
});
|
||||||
|
diff2htmlUi.fileListCloseable('#line-by-line', false);
|
||||||
|
diff2htmlUi.highlightCode('#line-by-line');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
51
website/templates/pages/url/url.partial.html
Normal file
51
website/templates/pages/url/url.partial.html
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
<h1>Diff Prettifier <a href="#help">?</a></h1>
|
||||||
|
<p>GitHub, Bitbucket and GitLab commit and pull request compatible</p>
|
||||||
|
<p>Just paste the GitHub, Bitbucket or GitLab commit, pull request or merge request url
|
||||||
|
or any other git or unified compatible diff and we will render a pretty html representation of it
|
||||||
|
with code syntax highlight and line similarity matching for better code reviews.
|
||||||
|
</p>
|
||||||
|
<br>
|
||||||
|
<div class="diff-url-wrapper">
|
||||||
|
<a id="url-btn" class="diff-url-btn btn btn-sm" href="#">Load</a>
|
||||||
|
<input id="url" class="diff-url-input" type="text" name="url" placeholder="URL"/>
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<h2>Line by Line</h2>
|
||||||
|
|
||||||
|
<div id="line-by-line" style="margin: 0 auto;">
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<h3 id="help">Help:</h3>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<b>Why should I use this instead of GitHub, Bitbucket or GitLab?</b>
|
||||||
|
<p>Code Syntax Highlight</p>
|
||||||
|
<p>Line similarity match (similar lines are together)</p>
|
||||||
|
<p>Line by Line and Side by Side (SOON) diffs</p>
|
||||||
|
<p>Supports any git and unified compatible diffs</p>
|
||||||
|
<p>Easy code selection</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<b>What urls are supported?</b>
|
||||||
|
<p>Any GitHub, Bitbucket or GitLab Commit, Pull Request or Merge Request urls.</p>
|
||||||
|
<p>Any Git or Unified Raw Diff or Patch urls.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<b>Can I send a custom url for a friend, colleague or co-worker?</b>
|
||||||
|
<p>Just add a url parameter called diff to current url using as value your Commit, Pull Request, Merge Request, Diff or Patch url.</p>
|
||||||
|
<p>ex: <a href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">https://diff2html.xyz/url?diff=https://github.com/rtfpessoa/diff2html/pull/106</a></p>
|
||||||
|
<p>You can also use an hashtag (# or #! or #!/) in the end of the url.
|
||||||
|
This will be overridden if you click any href id and for that reason not advised.</p>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<b>Why can't I paste a diff?</b>
|
||||||
|
<p><a href="https://diffy.org/">diffy.org</a> is an amazing tool created by <a href="https://github.com/pbu88">pbu88</a>
|
||||||
|
to share your diffs and uses diff2html under the hood.</p>
|
||||||
|
<p>Also, diff2html cli can directly publish diffs to <a href="https://diffy.org/">diffy.org</a></p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<br>
|
||||||
|
<h3>Thank you</h3>
|
||||||
|
<p>I want to thank <a href="https://github.com/kevinsimper">kevinsimper</a> for this great idea,
|
||||||
|
providing better diff support for existing online services.
|
||||||
|
</p>
|
||||||
Loading…
Reference in a new issue