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>
<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>
<li> <li>
@ -174,10 +174,8 @@
<b>Can I send a custom url for a friend, colleague or co-worker?</b> <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 <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> 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>
<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>
<li> <li>
<b>Why can't I paste a diff?</b> <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="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> </body>

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

@ -453,6 +453,8 @@ $(document).ready(function() {
// Improves browser compatibility // Improves browser compatibility
require('whatwg-fetch'); require('whatwg-fetch');
var searchParam = 'diff';
var $container = $('.container'); var $container = $('.container');
var $url = $('#url'); var $url = $('#url');
var $outputFormat = $('#diff-url-options-output-format'); var $outputFormat = $('#diff-url-options-output-format');
@ -461,24 +463,10 @@ $(document).ready(function() {
var $wordThreshold = $('#diff-url-options-match-words-threshold'); var $wordThreshold = $('#diff-url-options-match-words-threshold');
var $matchingMaxComparisons = $('#diff-url-options-matching-max-comparisons'); var $matchingMaxComparisons = $('#diff-url-options-matching-max-comparisons');
var hash = window.location.hash if (window.location.search) {
.replace(/^(#!?\/?)/, ''); var url = getUrlFromSearch(window.location.search);
$url.val(url);
var search = window.location.search; smartDraw(url);
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) {
}
} }
bind(); bind();
@ -492,6 +480,18 @@ $(document).ready(function() {
smartDraw(); smartDraw();
}); });
function getUrlFromSearch(search) {
try {
return search
.split('?')[1]
.split(searchParam + '=')[1]
.split('&')[0];
} catch (_ignore) {
}
return null;
}
function bind() { function bind() {
$('#url-btn').click(function(e) { $('#url-btn').click(function(e) {
e.preventDefault(); e.preventDefault();
@ -617,12 +617,11 @@ $(document).ready(function() {
} }
function updateUrl(url) { function updateUrl(url) {
if (window.history.pushState) { var currentUrl = getUrlFromSearch(window.location.search);
window.history.pushState('', '/', 'url.html?diff=' + url);
} else { if (currentUrl === url) return;
window.location.hash = '';
window.location.search = '?diff=' + url; 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>
<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>
<li> <li>
@ -94,17 +94,17 @@
</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>
<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"> <div class="screenshots screenshots-fan clearfix">
<img class="screenshot hidden-xs" src="img/snapshot-2.png"> <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"> <img src="img/snapshot-3.png">
</a> </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"> <img src="img/snapshot-1.png">
</a> </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 template = hogan.compile(readFile(root + '/template.mustache'));
var options = { var options = {
'url': { 'all': {
'demoUrl': 'demo.html?diff=https://github.com/rtfpessoa/diff2html/pull/106'
},
'demo': {
'extraClass': 'template-index-min' 'extraClass': 'template-index-min'
} }
}; };
websitePages.map(function(page) { websitePages.map(function(page) {
var pagePartial = readFile(pagesRoot + '/' + page + '/' + page + '.partial.html'); var pagePartialTemplate = hogan.compile(readFile(pagesRoot + '/' + page + '/' + page + '.partial.mustache'));
var pageAssets = readFile(pagesRoot + '/' + page + '/' + page + '-assets.partial.html'); var pageAssetsTemplate = hogan.compile(readFile(pagesRoot + '/' + page + '/' + page + '-assets.partial.mustache'));
var pageScripts = readFile(pagesRoot + '/' + page + '/' + page + '-scripts.partial.html'); 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 // Allow each page to have custom options
var pageOptions = options[page] || {}; var pageOptions = options[page] || {};
for (var key in pageOptions) { for (key in pageOptions) {
if (pageOptions.hasOwnProperty(key)) { if (pageOptions.hasOwnProperty(key)) {
templateOptions[key] = pageOptions[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); var pageHtml = template.render(templateOptions);
writeFile('docs/' + page + '.html', pageHtml); writeFile('docs/' + page + '.html', pageHtml);
}); });

14
scripts/release-website.sh
View file

@ -8,12 +8,12 @@
set -e set -e
INPUT_DIR=website 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 INPUT_CSS_FILE=${INPUT_DIR}/main.css
OUTPUT_DIR=docs OUTPUT_DIR=docs
OUTPUT_URL_JS=${OUTPUT_DIR}/url.js OUTPUT_DEMO_JS=${OUTPUT_DIR}/demo.js
OUTPUT_URL_MIN_JS=${OUTPUT_DIR}/url.min.js OUTPUT_DEMO_MIN_JS=${OUTPUT_DIR}/demo.min.js
OUTPUT_CSS_FILE=${OUTPUT_DIR}/main.css OUTPUT_CSS_FILE=${OUTPUT_DIR}/main.css
OUTPUT_MIN_CSS_FILE=${OUTPUT_DIR}/main.min.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} postcss --use autoprefixer ${INPUT_CSS_FILE} -d ${OUTPUT_DIR}
cleancss --advanced --compatibility=ie8 -o ${OUTPUT_MIN_CSS_FILE} ${OUTPUT_CSS_FILE} cleancss --advanced --compatibility=ie8 -o ${OUTPUT_MIN_CSS_FILE} ${OUTPUT_CSS_FILE}
echo "Generating website js aggregation file in ${OUTPUT_URL_JS}" echo "Generating website js aggregation file in ${OUTPUT_DEMO_JS}"
browserify -e ${INPUT_URL_JS} -o ${OUTPUT_URL_JS} browserify -e ${INPUT_DEMO_JS} -o ${OUTPUT_DEMO_JS}
echo "Minifying ${OUTPUT_URL_JS} to ${OUTPUT_URL_MIN_JS}" echo "Minifying ${OUTPUT_DEMO_JS} to ${OUTPUT_DEMO_MIN_JS}"
uglifyjs ${OUTPUT_URL_JS} -c -o ${OUTPUT_URL_MIN_JS} uglifyjs ${OUTPUT_DEMO_JS} -c -o ${OUTPUT_DEMO_MIN_JS}
echo "Generating HTMLs from templates ..." echo "Generating HTMLs from templates ..."
node ./scripts/release-website.js 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="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 // Improves browser compatibility
require('whatwg-fetch'); require('whatwg-fetch');
var searchParam = 'diff';
var $container = $('.container'); var $container = $('.container');
var $url = $('#url'); var $url = $('#url');
var $outputFormat = $('#diff-url-options-output-format'); var $outputFormat = $('#diff-url-options-output-format');
@ -25,24 +27,10 @@ $(document).ready(function() {
var $wordThreshold = $('#diff-url-options-match-words-threshold'); var $wordThreshold = $('#diff-url-options-match-words-threshold');
var $matchingMaxComparisons = $('#diff-url-options-matching-max-comparisons'); var $matchingMaxComparisons = $('#diff-url-options-matching-max-comparisons');
var hash = window.location.hash if (window.location.search) {
.replace(/^(#!?\/?)/, ''); var url = getUrlFromSearch(window.location.search);
$url.val(url);
var search = window.location.search; smartDraw(url);
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) {
}
} }
bind(); bind();
@ -56,6 +44,18 @@ $(document).ready(function() {
smartDraw(); smartDraw();
}); });
function getUrlFromSearch(search) {
try {
return search
.split('?')[1]
.split(searchParam + '=')[1]
.split('&')[0];
} catch (_ignore) {
}
return null;
}
function bind() { function bind() {
$('#url-btn').click(function(e) { $('#url-btn').click(function(e) {
e.preventDefault(); e.preventDefault();
@ -181,11 +181,10 @@ $(document).ready(function() {
} }
function updateUrl(url) { function updateUrl(url) {
if (window.history.pushState) { var currentUrl = getUrlFromSearch(window.location.search);
window.history.pushState('', '/', 'url.html?diff=' + url);
} else { if (currentUrl === url) return;
window.location.hash = '';
window.location.search = '?diff=' + url; 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> <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 <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> 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>
<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>
<li> <li>
<b>Why can't I paste a diff?</b> <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> </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>
<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"> <div class="screenshots screenshots-fan clearfix">
<img class="screenshot hidden-xs" src="img/snapshot-2.png"> <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"> <img src="img/snapshot-3.png">
</a> </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"> <img src="img/snapshot-1.png">
</a> </a>

2
website/templates/template.mustache
View file

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