137 lines
No EOL
7.5 KiB
Handlebars
137 lines
No EOL
7.5 KiB
Handlebars
<section class="hero">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<h1 class="title is-size-1 is-spaced">Demo<a href="#help">
|
|
<svg height="32" class="octicon octicon-unverified" viewBox="0 0 16 16" version="1.1" width="64"
|
|
aria-hidden="true">
|
|
<path
|
|
d="M15.67 7.06l-1.08-1.34c-.17-.22-.28-.48-.31-.77l-.19-1.7a1.51 1.51 0 0 0-1.33-1.33l-1.7-.19c-.3-.03-.56-.16-.78-.33L8.94.32c-.55-.44-1.33-.44-1.88 0L5.72 1.4c-.22.17-.48.28-.77.31l-1.7.19c-.7.08-1.25.63-1.33 1.33l-.19 1.7c-.03.3-.16.56-.33.78L.32 7.05c-.44.55-.44 1.33 0 1.88l1.08 1.34c.17.22.28.48.31.77l.19 1.7c.08.7.63 1.25 1.33 1.33l1.7.19c.3.03.56.16.78.33l1.34 1.08c.55.44 1.33.44 1.88 0l1.34-1.08c.22-.17.48-.28.77-.31l1.7-.19c.7-.08 1.25-.63 1.33-1.33l.19-1.7c.03-.3.16-.56.33-.78l1.08-1.34c.44-.55.44-1.33 0-1.88zM9 11.5c0 .28-.22.5-.5.5h-1c-.27 0-.5-.22-.5-.5v-1c0-.28.23-.5.5-.5h1c.28 0 .5.22.5.5v1zm1.56-4.89c-.06.17-.17.33-.3.47-.13.16-.14.19-.33.38-.16.17-.31.3-.52.45-.11.09-.2.19-.28.27-.08.08-.14.17-.19.27-.05.1-.08.19-.11.3-.03.11-.03.13-.03.25H7.13c0-.22 0-.31.03-.48.03-.19.08-.36.14-.52.06-.14.14-.28.25-.42.11-.13.23-.25.41-.38.27-.19.36-.3.48-.52.12-.22.2-.38.2-.59 0-.27-.06-.45-.2-.58-.13-.13-.31-.19-.58-.19-.09 0-.19.02-.3.05-.11.03-.17.09-.25.16-.08.07-.14.11-.2.2a.41.41 0 0 0-.09.28h-2c0-.38.13-.56.27-.83.16-.27.36-.5.61-.67.25-.17.55-.3.88-.38.33-.08.7-.13 1.09-.13.44 0 .83.05 1.17.13.34.09.63.22.88.39.23.17.41.38.55.63.13.25.19.55.19.88 0 .22 0 .42-.08.59l-.02-.01z">
|
|
</path>
|
|
</svg>
|
|
</a>
|
|
</h1>
|
|
<p>Introduce the GitHub, Bitbucket or GitLab commit, pull request, merge request url
|
|
or any other git or unified compatible diff.</p>
|
|
<p>Review the code in a pretty HTML representation of the diff with code syntax highlight, line similarity
|
|
matching and many other improvements.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h2 class="title is-size-3 is-spaced">Options</h2>
|
|
|
|
<div class="columns">
|
|
<div class="column">
|
|
<input id="url" class="diff-url-input is-size-5" type="text" name="url" placeholder="URL" />
|
|
</div>
|
|
<div class="column is-narrow">
|
|
<a id="url-btn" class="diff-url-btn button is-green is-small" href="#">Load</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="columns is-desktop is-multiline">
|
|
<div class="column is-one-fifth-widescreen">
|
|
<label title="Output format of the HTML, either line by line or side by side">
|
|
<p>Output Format</p>
|
|
<select class="options-label-value" id="diff-url-options-output-format" name="outputFormat">
|
|
<option value="line-by-line" selected>Line by Line</option>
|
|
<option value="side-by-side">Side by Side</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div class="column is-one-fifth-widescreen">
|
|
<label title="Show the file list summary before the diff">
|
|
<p>File Summary</p>
|
|
<input class="options-label-value" id="diff-url-options-show-files" type="checkbox" name="drawFileList"
|
|
checked />
|
|
</label>
|
|
</div>
|
|
<div class="column is-one-fifth-widescreen">
|
|
<label title="Level of matching for the comparison algorithm">
|
|
<p>Matching Type</p>
|
|
<select class="options-label-value" id="diff-url-options-matching" name="matching">
|
|
<option value="lines">Lines</option>
|
|
<option value="words" selected>Words</option>
|
|
<option value="none">None</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div class="column is-one-fifth-widescreen">
|
|
<label title="Similarity threshold for the matching algorithm">
|
|
<p>Words Threshold</p>
|
|
<input class="options-label-value" id="diff-url-options-match-words-threshold" type="number"
|
|
name="matchWordsThreshold" value="0.25" step="0.05" min="0" max="1" />
|
|
</label>
|
|
</div>
|
|
<div class="column is-one-fifth-widescreen">
|
|
<label title="Maximum number of comparison performed by the matching algorithm in a block of changes">
|
|
<p>Max Comparisons</p>
|
|
<input class="options-label-value" id="diff-url-options-matching-max-comparisons" type="number"
|
|
name="matchingMaxComparisons" value="2500" step="100" min="0" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<div id="url-diff-container" style="margin: 0 auto;"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container block">
|
|
<h3 id="help" class="title is-size-3 is-spaced">Help</h3>
|
|
<ul>
|
|
<li class="block">
|
|
<p class="has-text-weight-bold">Why should I use this instead of GitHub, Bitbucket or GitLab?</p>
|
|
<p>There are multiple advantages to using diff2html, but they can be divided in two categories: portability and
|
|
features.
|
|
</p>
|
|
<p>
|
|
Regarding portability, diff2html makes it easy for people to share static html representations of diffs with
|
|
anyone.
|
|
</p>
|
|
<p>
|
|
Regarding features you can have code syntax highlight, line similarity matching (similar lines are together),
|
|
line by Line and side by side diffs and easy code selection.
|
|
</p>
|
|
<p>All of this is completely independent of the provider you use to version the code.</p>
|
|
</li>
|
|
<li class="block">
|
|
<p class="has-text-weight-bold">What urls are supported in this demo?</p>
|
|
<p>Any GitHub, Bitbucket or GitLab commit, pull/merge request urls.</p>
|
|
<p>Any Git or Unified Raw Diff or Patch urls.</p>
|
|
</li>
|
|
<li class="block">
|
|
<p class="has-text-weight-bold">Can I share this demo with a friend, colleague or co-worker?</p>
|
|
<p>Just copy the url from the page, which should contain all the customizations and reference for the diff you
|
|
introduced.</p>
|
|
<p>ex: <a
|
|
href="demo.html?matching=none&matchWordsThreshold=0.25&maxLineLengthHighlight=10000&diffStyle=word&renderNothingWhenEmpty=0&matchingMaxComparisons=2500&maxLineSizeInBlockForComparison=200&outputFormat=line-by-line&drawFileList=1&synchronisedScroll=1&highlight=1&fileListToggle=1&fileListStartVisible=0&diff=https://github.com/rtfpessoa/diff2html/pull/106">https://diff2html.xyz/demo.html?matching=none&matchWordsThreshold=0.25&maxLineLengthHighlight=10000&diffStyle=word&renderNothingWhenEmpty=0&matchingMaxComparisons=2500&maxLineSizeInBlockForComparison=200&outputFormat=line-by-line&drawFileList=1&synchronisedScroll=1&highlight=1&fileListToggle=1&fileListStartVisible=0&diff=https://github.com/rtfpessoa/diff2html/pull/106</a>
|
|
</p>
|
|
</li>
|
|
<li class="block">
|
|
<p class="has-text-weight-bold">How can I paste the diff output directly in a page?</p>
|
|
<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, <a href="https://www.npmjs.com/package/diff2html-cli">diff2html-cli</a> can directly publish diffs to
|
|
<a href="https://diffy.org/">diffy.org</a></p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h3 class="title is-size-3 is-spaced">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>
|
|
</section> |