-
Notifications
You must be signed in to change notification settings - Fork 302
Expand file tree
/
Copy pathcontent.handlebars
More file actions
153 lines (147 loc) · 8.23 KB
/
content.handlebars
File metadata and controls
153 lines (147 loc) · 8.23 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<section class="hero">
<div class="hero-body">
<div class="container">
<h1 class="title is-size-1 is-spaced">Demo<a href="#help">
<svg fill="currentColor" 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-sixth-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-sixth-widescreen">
<label title="Color scheme to render. Auto uses user preference.">
<p>Color Scheme</p>
<select class="options-label-value" id="diff-url-options-color-scheme" name="colorScheme">
<option value="light" selected>Light</option>
<option value="dark">Dark</option>
<option value="auto">Auto</option>
</select>
</label>
</div>
<div class="column is-one-sixth-widescreen">
<label title="Show the file list summary before the diff">
<p>Line Folding</p>
<input class="options-label-value" id="diff-url-options-line-folding" type="checkbox" name="drawFileList"/>
</label>
</div>
<div class="column is-one-sixth-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-sixth-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-sixth-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-sixth-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>