luciano/diff2html
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve search params on demo and allo configuration of all templates

Browse source
This commit is contained in:
Rodrigo Fernandes 2016-10-16 17:40:36 +01:00
parent 0f7a45a142
commit 2000c467a1
No known key found for this signature in database
GPG key ID: 08E3C5F38969078E
13 changed files with 94 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
docs/url.html → docs/demo.html
View file

@ -79,7 +79,7 @@
</li>
<li>
<a href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">Demo</a>
<a href="demo.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">Demo</a>
</li>
<li>
@ -174,10 +174,8 @@
<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>ex: <a href="demo.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">https://diff2html.xyz/demo.html?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>
@ -250,7 +248,7 @@
<script type="text/javascript" src="assets/diff2html-ui.min.js"></script>
<!-- -->
<script type="text/javascript" src="url.min.js"></script>
<script type="text/javascript" src="demo.min.js"></script>
</body>

47
docs/url.js → docs/demo.js
View file

@ -453,6 +453,8 @@ $(document).ready(function() {
// Improves browser compatibility
require('whatwg-fetch');
var searchParam = 'diff';
var $container = $('.container');
var $url = $('#url');
var $outputFormat = $('#diff-url-options-output-format');
@ -461,24 +463,10 @@ $(document).ready(function() {
var $wordThreshold = $('#diff-url-options-match-words-threshold');
var $matchingMaxComparisons = $('#diff-url-options-matching-max-comparisons');
var hash = window.location.hash
.replace(/^(#!?\/?)/, '');
var search = window.location.search;
if (hash) {
$url.val(hash);
smartDraw(hash);
} else if (search) {
try {
var url = search
.split('?')[1]
.split('diff=')[1]
.split('&')[0];
$url.val(url);
smartDraw(url);
} catch (_ignore) {
}
if (window.location.search) {
var url = getUrlFromSearch(window.location.search);
$url.val(url);
smartDraw(url);
}
bind();
@ -492,6 +480,18 @@ $(document).ready(function() {
smartDraw();
});
function getUrlFromSearch(search) {
try {
return search
.split('?')[1]
.split(searchParam + '=')[1]
.split('&')[0];
} catch (_ignore) {
}
return null;
}
function bind() {
$('#url-btn').click(function(e) {
e.preventDefault();
@ -617,12 +617,11 @@ $(document).ready(function() {
}
function updateUrl(url) {
if (window.history.pushState) {
window.history.pushState('', '/', 'url.html?diff=' + url);
} else {
window.location.hash = '';
window.location.search = '?diff=' + url;
}
var currentUrl = getUrlFromSearch(window.location.search);
if (currentUrl === url) return;
window.location = 'demo.html?' + searchParam + '=' + url;
}
});

2
docs/url.min.js → docs/demo.min.js vendored
View file

File diff suppressed because one or more lines are too long

8
docs/index.html
View file

@ -72,7 +72,7 @@
</li>
<li>
<a href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">Demo</a>
<a href="demo.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">Demo</a>
</li>
<li>
@ -94,17 +94,17 @@
</span>
<h1 class="hero-header">Diff parser and pretty html generator</h1>
<h4 class="text-muted">Better diffs, unmatched reviews.</h4>
<h2><a class="btn btn-lg" href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">Demo</a></h2>
<h2><a class="btn btn-lg" href="demo.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">Demo</a></h2>
<div class="screenshots screenshots-fan clearfix">
<img class="screenshot hidden-xs" src="img/snapshot-2.png">
<a class="screenshot" href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">
<a class="screenshot" href="demo.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">
<img src="img/snapshot-3.png">
</a>
<a class="screenshot hidden-xs" href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">
<a class="screenshot hidden-xs" href="demo.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">
<img src="img/snapshot-1.png">
</a>

33
scripts/release-website.js
View file

@ -10,26 +10,47 @@ var websitePages = fs.readdirSync(root + '/pages');
var template = hogan.compile(readFile(root + '/template.mustache'));
var options = {
'url': {
'all': {
'demoUrl': 'demo.html?diff=https://github.com/rtfpessoa/diff2html/pull/106'
},
'demo': {
'extraClass': 'template-index-min'
}
};
websitePages.map(function(page) {
var pagePartial = readFile(pagesRoot + '/' + page + '/' + page + '.partial.html');
var pageAssets = readFile(pagesRoot + '/' + page + '/' + page + '-assets.partial.html');
var pageScripts = readFile(pagesRoot + '/' + page + '/' + page + '-scripts.partial.html');
var pagePartialTemplate = hogan.compile(readFile(pagesRoot + '/' + page + '/' + page + '.partial.mustache'));
var pageAssetsTemplate = hogan.compile(readFile(pagesRoot + '/' + page + '/' + page + '-assets.partial.mustache'));
var pageScriptsTemplate = hogan.compile(readFile(pagesRoot + '/' + page + '/' + page + '-scripts.partial.mustache'));
var templateOptions = {assets: pageAssets, scripts: pageScripts, content: pagePartial};
var templateOptions = {};
var key;
// Allow the pages to share common options
var genericOptions = options['all'] || {};
for (key in genericOptions) {
if (genericOptions.hasOwnProperty(key)) {
templateOptions[key] = genericOptions[key];
}
}
// Allow each page to have custom options
var pageOptions = options[page] || {};
for (var key in pageOptions) {
for (key in pageOptions) {
if (pageOptions.hasOwnProperty(key)) {
templateOptions[key] = pageOptions[key];
}
}
var pagePartial = pagePartialTemplate.render(templateOptions);
var pageAssets = pageAssetsTemplate.render(templateOptions);
var pageScripts = pageScriptsTemplate.render(templateOptions);
templateOptions.assets = pageAssets;
templateOptions.scripts = pageScripts;
templateOptions.content = pagePartial;
var pageHtml = template.render(templateOptions);
writeFile('docs/' + page + '.html', pageHtml);
});

14
scripts/release-website.sh
View file

@ -8,12 +8,12 @@
set -e
INPUT_DIR=website
INPUT_URL_JS=${INPUT_DIR}/templates/pages/url/url.js
INPUT_DEMO_JS=${INPUT_DIR}/templates/pages/demo/demo.js
INPUT_CSS_FILE=${INPUT_DIR}/main.css
OUTPUT_DIR=docs
OUTPUT_URL_JS=${OUTPUT_DIR}/url.js
OUTPUT_URL_MIN_JS=${OUTPUT_DIR}/url.min.js
OUTPUT_DEMO_JS=${OUTPUT_DIR}/demo.js
OUTPUT_DEMO_MIN_JS=${OUTPUT_DIR}/demo.min.js
OUTPUT_CSS_FILE=${OUTPUT_DIR}/main.css
OUTPUT_MIN_CSS_FILE=${OUTPUT_DIR}/main.min.css
@ -27,11 +27,11 @@ echo "Minifying ${OUTPUT_CSS_FILE} to ${OUTPUT_MIN_CSS_FILE}"
postcss --use autoprefixer ${INPUT_CSS_FILE} -d ${OUTPUT_DIR}
cleancss --advanced --compatibility=ie8 -o ${OUTPUT_MIN_CSS_FILE} ${OUTPUT_CSS_FILE}
echo "Generating website js aggregation file in ${OUTPUT_URL_JS}"
browserify -e ${INPUT_URL_JS} -o ${OUTPUT_URL_JS}
echo "Generating website js aggregation file in ${OUTPUT_DEMO_JS}"
browserify -e ${INPUT_DEMO_JS} -o ${OUTPUT_DEMO_JS}
echo "Minifying ${OUTPUT_URL_JS} to ${OUTPUT_URL_MIN_JS}"
uglifyjs ${OUTPUT_URL_JS} -c -o ${OUTPUT_URL_MIN_JS}
echo "Minifying ${OUTPUT_DEMO_JS} to ${OUTPUT_DEMO_MIN_JS}"
uglifyjs ${OUTPUT_DEMO_JS} -c -o ${OUTPUT_DEMO_MIN_JS}
echo "Generating HTMLs from templates ..."
node ./scripts/release-website.js

0
website/templates/pages/url/url-assets.partial.html → website/templates/pages/demo/demo-assets.partial.mustache
View file

2
website/templates/pages/url/url-scripts.partial.html → website/templates/pages/demo/demo-scripts.partial.mustache
View file

@ -6,4 +6,4 @@
<script type="text/javascript" src="assets/diff2html-ui.min.js"></script>
<!-- -->
<script type="text/javascript" src="url.min.js"></script>
<script type="text/javascript" src="demo.min.js"></script>

47
website/templates/pages/url/url.js → website/templates/pages/demo/demo.js
View file

@ -17,6 +17,8 @@ $(document).ready(function() {
// Improves browser compatibility
require('whatwg-fetch');
var searchParam = 'diff';
var $container = $('.container');
var $url = $('#url');
var $outputFormat = $('#diff-url-options-output-format');
@ -25,24 +27,10 @@ $(document).ready(function() {
var $wordThreshold = $('#diff-url-options-match-words-threshold');
var $matchingMaxComparisons = $('#diff-url-options-matching-max-comparisons');
var hash = window.location.hash
.replace(/^(#!?\/?)/, '');
var search = window.location.search;
if (hash) {
$url.val(hash);
smartDraw(hash);
} else if (search) {
try {
var url = search
.split('?')[1]
.split('diff=')[1]
.split('&')[0];
$url.val(url);
smartDraw(url);
} catch (_ignore) {
}
if (window.location.search) {
var url = getUrlFromSearch(window.location.search);
$url.val(url);
smartDraw(url);
}
bind();
@ -56,6 +44,18 @@ $(document).ready(function() {
smartDraw();
});
function getUrlFromSearch(search) {
try {
return search
.split('?')[1]
.split(searchParam + '=')[1]
.split('&')[0];
} catch (_ignore) {
}
return null;
}
function bind() {
$('#url-btn').click(function(e) {
e.preventDefault();
@ -181,11 +181,10 @@ $(document).ready(function() {
}
function updateUrl(url) {
if (window.history.pushState) {
window.history.pushState('', '/', 'url.html?diff=' + url);
} else {
window.location.hash = '';
window.location.search = '?diff=' + url;
}
var currentUrl = getUrlFromSearch(window.location.search);
if (currentUrl === url) return;
window.location = 'demo.html?' + searchParam + '=' + url;
}
});

4
website/templates/pages/url/url.partial.html → website/templates/pages/demo/demo.partial.mustache
View file

@ -78,10 +78,8 @@
<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>ex: <a href="{{ demoUrl }}">https://diff2html.xyz/{{ demoUrl }}</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>

0
website/templates/pages/index/index-scripts.partial.html → website/templates/pages/index/index-scripts.partial.mustache
View file

6
website/templates/pages/index/index.partial.html → website/templates/pages/index/index.partial.mustache
View file

@ -5,17 +5,17 @@
</span>
<h1 class="hero-header">Diff parser and pretty html generator</h1>
<h4 class="text-muted">Better diffs, unmatched reviews.</h4>
<h2><a class="btn btn-lg" href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">Demo</a></h2>
<h2><a class="btn btn-lg" href="{{ demoUrl }}">Demo</a></h2>
<div class="screenshots screenshots-fan clearfix">
<img class="screenshot hidden-xs" src="img/snapshot-2.png">
<a class="screenshot" href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">
<a class="screenshot" href="{{ demoUrl }}">
<img src="img/snapshot-3.png">
</a>
<a class="screenshot hidden-xs" href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">
<a class="screenshot hidden-xs" href="{{ demoUrl }}">
<img src="img/snapshot-1.png">
</a>

2
website/templates/template.mustache
View file

@ -76,7 +76,7 @@
</li>
<li>
<a href="url.html?diff=https://github.com/rtfpessoa/diff2html/pull/106">Demo</a>
<a href="{{ demoUrl }}">Demo</a>
</li>
<li>