Merge pull request #271 from rtfpessoa/replace-bootstrap-with-bulma
clean: Replace boostrap with bulma
This commit is contained in:
Rodrigo Fernandes
GitHub
commit
abd6196b11
11 changed files with 475 additions and 1018 deletions
|
|
@ -103,7 +103,7 @@
|
|||
"@typescript-eslint/eslint-plugin": "2.14.0",
|
||||
"@typescript-eslint/parser": "2.14.0",
|
||||
"autoprefixer": "9.7.3",
|
||||
"bootstrap": "3.4.1",
|
||||
"bulma": "^0.8.0",
|
||||
"clipboard": "2.0.4",
|
||||
"codacy-coverage": "3.4.0",
|
||||
"copy-webpack-plugin": "5.1.1",
|
||||
|
|
|
|||
486
website/main.css
486
website/main.css
|
|
@ -1,426 +1,3 @@
|
|||
/*!
|
||||
* Copyright Colossal 2015
|
||||
* Adapted by @rtfpessoa
|
||||
*/
|
||||
|
||||
.template-index {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.template-index-min {
|
||||
min-width: 700px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
padding: 0 8%;
|
||||
}
|
||||
|
||||
.m-b-md {
|
||||
margin-bottom: 23px !important;
|
||||
}
|
||||
|
||||
.p-t {
|
||||
padding-top: 15px !important;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
p.m-b {
|
||||
height: 75px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
background: #26a65b;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
color: #fff;
|
||||
background: #5dbe5d;
|
||||
}
|
||||
|
||||
.btn-clipboard {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
padding: 5px 8px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background-color: #767676;
|
||||
border-radius: 0 4px 0 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-clipboard:hover {
|
||||
color: #000;
|
||||
background-color: #dcdfe4;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative;
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
border-top: 1px solid #dcdfe4;
|
||||
}
|
||||
|
||||
.footer p {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #26a65b;
|
||||
}
|
||||
|
||||
.container a {
|
||||
color: #26a65b;
|
||||
}
|
||||
|
||||
.container a.btn {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer-list-item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.footer-list-item:not(:last-child):after {
|
||||
content: '\b7';
|
||||
}
|
||||
|
||||
.footer > ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.footer {
|
||||
padding: 60px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.row-centered {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.row-bordered {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.row-bordered:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 80%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -40%;
|
||||
height: 1px;
|
||||
background: -webkit-radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0) 75%);
|
||||
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0) 75%);
|
||||
}
|
||||
|
||||
.hero {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding: 80px 0;
|
||||
border-bottom: 1px solid #dcdfe4;
|
||||
}
|
||||
|
||||
.hero-booticon {
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
margin: 0 auto 30px;
|
||||
width: 100%;
|
||||
font-size: 8vw;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.hero-homepage.hero {
|
||||
padding-top: 0;
|
||||
padding-bottom: 40px;
|
||||
overflow: hidden;
|
||||
border-bottom: 0;
|
||||
border-bottom: 1px solid #dcdfe4;
|
||||
}
|
||||
|
||||
.hero-homepage > .btn {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.swag-line:before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 5px;
|
||||
z-index: 2;
|
||||
background-color: #26a65b;
|
||||
background: -webkit-linear-gradient(45deg, #28a142, #26a65b);
|
||||
background: linear-gradient(45deg, #28a142, #26a65b);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #fff;
|
||||
border: 0 #fff;
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
height: auto;
|
||||
padding: 19px 25px;
|
||||
font-size: 16px;
|
||||
display: inline-block;
|
||||
float: none;
|
||||
text-align: center;
|
||||
margin: 5px 0 0;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
margin-right: -15px;
|
||||
}
|
||||
|
||||
.navbar-nav > li > a {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-brand,
|
||||
.navbar-default .navbar-brand:focus,
|
||||
.navbar-default .navbar-brand:hover,
|
||||
.navbar-default .navbar-nav > li > a,
|
||||
.navbar-default .navbar-nav > li > a:focus,
|
||||
.navbar-default .navbar-nav > li > a:hover {
|
||||
background: transparent;
|
||||
color: #293a46;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-toggle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 7px;
|
||||
border-color: #fff;
|
||||
color: #293a46;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-toggle:hover,
|
||||
.navbar-default .navbar-toggle:focus {
|
||||
background: #f9f9f9;
|
||||
border-color: #f9f9f9;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.navbar-full .navbar-brand {
|
||||
margin-left: -25px;
|
||||
}
|
||||
|
||||
.navbar-tall {
|
||||
height: 125px;
|
||||
}
|
||||
|
||||
.navbar-tall .navbar-header,
|
||||
.navbar-tall .navbar-nav {
|
||||
line-height: 125px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navbar-nav > li > a {
|
||||
display: inline-block;
|
||||
margin-left: 13px;
|
||||
}
|
||||
|
||||
.navbar-nav > li:first-child > a {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 16px;
|
||||
font-family: Roboto, sans-serif;
|
||||
font-weight: 300;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 26px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 26px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5 {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
body {
|
||||
font-size: 16px;
|
||||
font-family: Roboto, sans-serif;
|
||||
font-weight: 300;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 38px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 26px;
|
||||
font-weight: 300;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 26px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: #293a46;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.nav li a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.nav li a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: #697176;
|
||||
}
|
||||
|
||||
.template-index h3 {
|
||||
font-size: 21px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.template-index h4 {
|
||||
color: #697176;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.template-index h4 a,
|
||||
.template-index p a {
|
||||
color: #26a65b;
|
||||
}
|
||||
|
||||
.template-index h5 {
|
||||
font-size: 17px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.homepage-terminal-example,
|
||||
.homepage-code-example {
|
||||
position: relative;
|
||||
font-family: monospace;
|
||||
background: #272b38;
|
||||
color: #48d8a0;
|
||||
border-radius: 8px;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.homepage-terminal-example .text-muted,
|
||||
.homepage-code-example .text-muted {
|
||||
color: #6a7490;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.homepage-terminal-example {
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
.homepage-code-example {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.homepage-code-example > p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-green {
|
||||
color: #26a65b;
|
||||
}
|
||||
|
|
@ -433,62 +10,13 @@ a:focus {
|
|||
color: #cb2c37;
|
||||
}
|
||||
|
||||
.svg-icon-large {
|
||||
width: 50px;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
.button.is-green {
|
||||
color: #fff;
|
||||
background: #26a65b;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.svg-icon-large > svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.row-padded-small {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
*.unselectable {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.url-diff-container {
|
||||
width: 980px;
|
||||
}
|
||||
|
||||
.diff-url-wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.diff-url-input {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
flex-grow: 1;
|
||||
height: 31px;
|
||||
}
|
||||
|
||||
.diff-url-btn {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.options-label-value {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.diff-url-options-container label select,
|
||||
.diff-url-options-container label input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 15 columns */
|
||||
|
||||
.col-md- *.col-md-15 {
|
||||
width: 20%;
|
||||
.button.is-green:hover {
|
||||
color: #fff;
|
||||
background: #5dbe5d;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1,13 @@
|
|||
import 'bootstrap/dist/css/bootstrap.css';
|
||||
import 'bulma/css/bulma.css';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
|
||||
$navbarBurgers.forEach((el: HTMLElement) => {
|
||||
el.addEventListener('click', () => {
|
||||
el.classList.toggle('is-active');
|
||||
if (el.dataset.target !== undefined) {
|
||||
document.getElementById(el.dataset.target)?.classList.toggle('is-active');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,33 +1,57 @@
|
|||
<h1>Diff Prettifier <a href="#help">
|
||||
<svg height="32" class="octicon octicon-unverified" viewBox="0 0 16 16" version="1.1" width="64" aria-hidden="true">
|
||||
<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>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>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>
|
||||
<h2>Options:</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-2 col-xs-12 col-15">
|
||||
<label title="Output format of the HTML, either line by line or side by side">Output Format
|
||||
</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=" col-md-2 col-xs-12 col-15">
|
||||
<label title="Show the file list summary before the diff">File Summary
|
||||
<input class="options-label-value" id="diff-url-options-show-files" type="checkbox" name="drawFileList" checked />
|
||||
<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=" col-md-2 col-xs-12 col-15">
|
||||
<label title="Level of matching for the comparison algorithm">Matching Type
|
||||
<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>
|
||||
|
|
@ -35,61 +59,79 @@
|
|||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div class=" col-md-2 col-xs-12 col-15">
|
||||
<label title="Similarity threshold for the matching algorithm">Words Threshold
|
||||
<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=" col-md-2 col-xs-12 col-15">
|
||||
<label title="Maximum number of comparison performed by the matching algorithm in a block of changes">Max
|
||||
Comparisons
|
||||
<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>
|
||||
<br>
|
||||
<div class="diff-url-wrapper">
|
||||
<input id="url" class="diff-url-input" type="text" name="url" placeholder="URL" />
|
||||
<a id="url-btn" class="diff-url-btn btn btn-sm" href="#">Load</a>
|
||||
</div>
|
||||
<br>
|
||||
<div id="url-diff-container" style="margin: 0 auto;">
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div id="url-diff-container" style="margin: 0 auto;"></div>
|
||||
</div>
|
||||
<br>
|
||||
<h3 id="help">Help:</h3>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container block">
|
||||
<h3 id="help" class="title is-size-3 is-spaced">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 diffs</p>
|
||||
<p>Supports any git and unified compatible diffs</p>
|
||||
<p>Easy code selection</p>
|
||||
<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 devided 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 completly independent of the provider you use to version the code.</p>
|
||||
</li>
|
||||
<li>
|
||||
<b>What urls are supported?</b>
|
||||
<p>Any GitHub, Bitbucket or GitLab Commit, Pull Request or Merge Request urls.</p>
|
||||
<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>
|
||||
<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="demo.html">https://diff2html.xyz/demo.html</a>
|
||||
<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&smartSelection=1&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&smartSelection=1&diff=https://github.com/rtfpessoa/diff2html/pull/106</a>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<b>Why can't I paste a diff?</b>
|
||||
<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, diff2html cli can directly publish diffs to <a href="https://diffy.org/">diffy.org</a></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>
|
||||
<br>
|
||||
<h3>Thank you</h3>
|
||||
</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>
|
||||
7
website/templates/pages/demo/demo.css
Normal file
7
website/templates/pages/demo/demo.css
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.diff-url-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.diff-url-btn.is-small {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@ import '../../../main.ts';
|
|||
import '../../../main.css';
|
||||
import 'highlight.js/styles/github.css';
|
||||
import '../../../../src/ui/css/diff2html.css';
|
||||
import './demo.css';
|
||||
|
||||
/*
|
||||
* Example URLs:
|
||||
|
|
@ -151,13 +152,6 @@ async function getDiff(request: Request): Promise<string> {
|
|||
|
||||
function draw(diffString: string, config: Diff2HtmlUIConfig, elements: Elements): void {
|
||||
const diff2htmlUi = new Diff2HtmlUI(diffString, elements.structure.diffTarget, config);
|
||||
|
||||
if (config.outputFormat === 'side-by-side') {
|
||||
elements.structure.container.style.width = '100%';
|
||||
} else {
|
||||
elements.structure.container.style.width = '';
|
||||
}
|
||||
|
||||
diff2htmlUi.draw();
|
||||
}
|
||||
|
||||
|
|
@ -197,7 +191,6 @@ function updateBrowserUrl(config: Diff2HtmlUIConfig, newDiffUrl: string): void {
|
|||
|
||||
type Elements = {
|
||||
structure: {
|
||||
container: HTMLElement;
|
||||
diffTarget: HTMLElement;
|
||||
};
|
||||
url: {
|
||||
|
|
@ -233,7 +226,6 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||
|
||||
const elements: Elements = {
|
||||
structure: {
|
||||
container: document.getElementsByClassName('container')[0] as HTMLElement,
|
||||
diffTarget: document.getElementById('url-diff-container') as HTMLElement,
|
||||
},
|
||||
url: {
|
||||
|
|
|
|||
|
|
@ -1,295 +1,258 @@
|
|||
<div class="hero hero-homepage">
|
||||
<section class="hero">
|
||||
<div class="hero-body">
|
||||
<div class="container has-text-centered">
|
||||
<span class="hero-booticon">
|
||||
<span class="hero-green">diff</span><span class="hero-black">2</span><span class="hero-red">html</span>
|
||||
</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="demo.html">Demo</a></h2>
|
||||
|
||||
<div class="screenshots screenshots-fan clearfix">
|
||||
|
||||
<img class="screenshot hidden-xs" src="images/snapshot-2.png">
|
||||
|
||||
<a class="screenshot" href="demo.html">
|
||||
<img src="images/snapshot-3.png">
|
||||
</a>
|
||||
|
||||
<a class="screenshot hidden-xs" href="demo.html">
|
||||
<img src="images/snapshot-1.png">
|
||||
</a>
|
||||
<h1 class="title">Diff parser and pretty html generator</h1>
|
||||
<h2 class="subtitle">Better diffs, unmatched reviews</h2>
|
||||
|
||||
<a class="button is-green is-medium" href="demo.html">Demo</a>
|
||||
</div>
|
||||
<div class="container has-text-centered">
|
||||
<figure class="image">
|
||||
<img class="hero-img" src="images/snapshot-3.png"
|
||||
alt="Diff2Html pretty html side-by-side example render">
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div>
|
||||
<div class="row row-padded-small row-bordered">
|
||||
<div class="col-sm-8 col-sm-offset-2 text-center">
|
||||
<h2 class="m-b-md">Each diff provides a comprehensive visualization of the code changes,
|
||||
helping developers identify problems and better understand the changes.</h2>
|
||||
</div>
|
||||
</div>
|
||||
<section class="section">
|
||||
|
||||
<div class="row row-padded-small homepage-grid row-bordered p-t text-center">
|
||||
<div class="col-sm-4">
|
||||
<span class="svg-icon-large">
|
||||
<svg aria-hidden="true" class="octicon octicon-diff" height="16" version="1.1" viewBox="0 0 14 16"
|
||||
width="14">
|
||||
<div class="container has-text-centered">
|
||||
<h4 class="title is-size-4 is-spaced">Each diff provides a comprehensive visualization of the code changes,
|
||||
helping developers identify problems and better understand the changes.</h4>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<svg aria-hidden="true" class="octicon octicon-diff" height="50" width="50" version="1.1"
|
||||
viewBox="0 0 14 16">
|
||||
<path
|
||||
d="M6 7h2v1H6v2h-1V8H3v-1h2V5h1v2zM3 13h5v-1H3v1z m4.5-11l3.5 3.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V3c0-0.55 0.45-1 1-1h6.5z m2.5 4L7 3H1v12h9V6zM8.5 0S3 0 3 0v1h5l4 4v8h1V4.5L8.5 0z">
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
<h5><strong>Line by Line and Side by Side changes</strong></h5>
|
||||
<p class="text-muted">Each diff features a line by line and side by side preview of your
|
||||
<p class="is-size-6"><strong>Line by Line and Side by Side changes</strong></p>
|
||||
<p>Each diff features a line by line and side by side preview of your
|
||||
changes.</p>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-4">
|
||||
<span class="svg-icon-large">
|
||||
<svg aria-hidden="true" class="octicon octicon-tasklist" height="16" version="1.1" viewBox="0 0 16 16"
|
||||
width="16">
|
||||
<div class="column">
|
||||
<svg aria-hidden="true" class="octicon octicon-tasklist" height="50" width="50" version="1.1"
|
||||
viewBox="0 0 16 16">
|
||||
<path
|
||||
d="M15.41 9H7.59c-0.59 0-0.59-0.41-0.59-1s0-1 0.59-1h7.81c0.59 0 0.59 0.41 0.59 1s0 1-0.59 1zM9.59 4c-0.59 0-0.59-0.41-0.59-1s0-1 0.59-1h5.81c0.59 0 0.59 0.41 0.59 1s0 1-0.59 1H9.59zM0 3.91l1.41-1.3 1.59 1.59L7.09 0l1.41 1.41-5.5 5.5L0 3.91z m7.59 8.09h7.81c0.59 0 0.59 0.41 0.59 1s0 1-0.59 1H7.59c-0.59 0-0.59-0.41-0.59-1s0-1 0.59-1z">
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
<h5><strong>Code syntax highlight</strong></h5>
|
||||
<p class="text-muted">All the code changes are syntax highlighted using <a
|
||||
<p class="is-size-6"><strong>Code syntax highlight</strong></p>
|
||||
<p>All the code changes are syntax highlighted using <a
|
||||
href="https://highlightjs.org/">highlight.js</a>,
|
||||
providing more readability.</p>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-4">
|
||||
<span class="svg-icon-large">
|
||||
<svg aria-hidden="true" class="octicon octicon-clippy" height="16" version="1.1" viewBox="0 0 14 16"
|
||||
width="14">
|
||||
<div class="column">
|
||||
<svg aria-hidden="true" class="octicon octicon-clippy" height="50" width="50" version="1.1"
|
||||
viewBox="0 0 14 16">
|
||||
<path
|
||||
d="M2 12h4v1H2v-1z m5-6H2v1h5v-1z m2 3V7L6 10l3 3V11h5V9H9z m-4.5-1H2v1h2.5v-1zM2 11h2.5v-1H2v1z m9 1h1v2c-0.02 0.28-0.11 0.52-0.3 0.7s-0.42 0.28-0.7 0.3H1c-0.55 0-1-0.45-1-1V3c0-0.55 0.45-1 1-1h3C4 0.89 4.89 0 6 0s2 0.89 2 2h3c0.55 0 1 0.45 1 1v5h-1V5H1v9h10V12zM2 4h8c0-0.55-0.45-1-1-1h-1c-0.55 0-1-0.45-1-1s-0.45-1-1-1-1 0.45-1 1-0.45 1-1 1h-1c-0.55 0-1 0.45-1 1z">
|
||||
</path>
|
||||
</svg>
|
||||
</span>
|
||||
<h5><strong>Line similarity matching</strong></h5>
|
||||
<p class="text-muted">Similar lines are paired, allowing for easier change tracking.</p>
|
||||
<p class="is-size-6"><strong>Line similarity matching</strong></p>
|
||||
<p>Similar lines are paired, allowing for easier change tracking.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="install" class="row-padded-small row-centered row-bordered">
|
||||
<div class="col-md-12">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h3><strong>Install with Bower</strong></h3>
|
||||
<p>You can install and manage diff2html's CSS and JS using Bower:</p>
|
||||
<div class="homepage-code-example">
|
||||
<p><span class="unselectable">> $ </span><span class="text-muted">bower install
|
||||
diff2html</span></p>
|
||||
<span class="btn-clipboard" data-clipboard-text="bower install diff2html"
|
||||
title="Copy">Copy</span>
|
||||
<hr>
|
||||
|
||||
<div id="install" class="container">
|
||||
<h4 class="title is-size-4 is-spaced"><strong>Install with npm</strong></h4>
|
||||
<div class="code-example">
|
||||
<span class="is-unselectable">> $ </span><span class="has-text-grey-light">npm install diff2html</span>
|
||||
<span class="button clipboard" data-clipboard-text="npm install diff2html" title="Copy">Copy</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h3><strong>Install with npm</strong></h3>
|
||||
<p>You can also install diff2html using npm:</p>
|
||||
<div class="homepage-code-example">
|
||||
<p><span class="unselectable">> $ </span><span class="text-muted">npm install
|
||||
diff2html</span></p>
|
||||
<span class="btn-clipboard" data-clipboard-text="npm install diff2html" title="Copy">Copy</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-padded-small">
|
||||
<div class="col-md-12">
|
||||
<p>
|
||||
<a href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank">
|
||||
Find usage examples in the Docs
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="cli" class="row row-padded-small row-centered row-bordered">
|
||||
<div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-0">
|
||||
<h3><strong>With command line integration</strong></h3>
|
||||
<h4 class="m-b-md">We work hard to make sure you can have your diffs in a simple and flexible
|
||||
way. Go <a href="https://github.com/rtfpessoa/diff2html-cli" target="_blank">here full
|
||||
documentation</a>.</h4>
|
||||
<hr>
|
||||
|
||||
<div id="cli" class="container">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<h4 class="title is-size-4 is-spaced"><strong>With command line integration</strong></h4>
|
||||
<p>We work hard to make sure you can have your diffs in a simple and flexible
|
||||
way. Go here for the <a href="https://github.com/rtfpessoa/diff2html-cli" target="_blank"></a>full
|
||||
documentation</a>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="col-xs-10 col-xs-offset-1 col-md-6 col-md-offset-0">
|
||||
<div class="homepage-terminal-example">
|
||||
<p class="m-b-md">
|
||||
<span class="unselectable">> $ </span><span class="text-muted">npm install -g
|
||||
diff2html-cli</span><br>
|
||||
<span class="unselectable">diff2html cli installed!</span>
|
||||
</p>
|
||||
<p class="m-b-md">
|
||||
<span class="unselectable">> $ </span><span class="text-muted">diff2html</span><br>
|
||||
<span class="unselectable">Previous commit changes on your browser</span>
|
||||
</p>
|
||||
<div class="column">
|
||||
<div class="code-example">
|
||||
<p>
|
||||
<span class="unselectable">> $ <span class="text-muted">is that it?</span><br>
|
||||
Yup, it's that simple.</span>
|
||||
<span class="is-unselectable">> $ </span>
|
||||
<span class="has-text-grey-light">npm install -g diff2html-cli</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="users" class="row row-padded-small row-centered row-bordered">
|
||||
<div class="col-md-12">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<h3><strong>Projects using diff2html</strong></h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row row-eq-height">
|
||||
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
||||
<div class="panel panel-default panel-profile m-b-0">
|
||||
<div class="panel-body text-center">
|
||||
<h5 class="panel-title">diff2html-cli</h5>
|
||||
<p class="m-b">diff2html from your terminal to the browser.</p>
|
||||
<a href="https://github.com/rtfpessoa/diff2html-cli" target="_blank"
|
||||
class="btn btn-primary-outline btn-sm m-b">
|
||||
<span class="icon icon-add-user"></span> View GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
||||
<div class="panel panel-default panel-profile m-b-0">
|
||||
<div class="panel-body text-center">
|
||||
<h5 class="panel-title">Codacy</h5>
|
||||
<p class="m-b">Check code style, security, duplication, complexity and coverage on every
|
||||
change.</p>
|
||||
<a href="https://www.codacy.com" target="_blank" class="btn btn-primary-outline btn-sm m-b">
|
||||
<span class="icon icon-add-user"></span> Website
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
||||
<div class="panel panel-default panel-profile m-b-0">
|
||||
<div class="panel-body text-center">
|
||||
<h5 class="panel-title">Ungit</h5>
|
||||
<p class="m-b">The easiest way to use git. On any platform. Anywhere.</p>
|
||||
<a href="https://github.com/FredrikNoren/ungit" target="_blank"
|
||||
class="btn btn-primary-outline btn-sm m-b">
|
||||
<span class="icon icon-add-user"></span> View GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
||||
<div class="panel panel-default panel-profile m-b-0">
|
||||
<div class="panel-body text-center">
|
||||
<h5 class="panel-title">Diffy</h5>
|
||||
<p class="m-b">Share your diffs and explain your ideas without committing.</p>
|
||||
<a href="https://diffy.org/" target="_blank" class="btn btn-primary-outline btn-sm m-b">
|
||||
<span class="icon icon-add-user"></span> Website
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
||||
<div class="panel panel-default panel-profile m-b-0">
|
||||
<div class="panel-body text-center">
|
||||
<h5 class="panel-title">diff-pane</h5>
|
||||
<p class="m-b">Atom - Diff two panes.</p>
|
||||
<a href="https://github.com/t-ari/diff-pane" target="_blank"
|
||||
class="btn btn-primary-outline btn-sm m-b">
|
||||
<span class="icon icon-add-user"></span> View GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
||||
<div class="panel panel-default panel-profile m-b-0">
|
||||
<div class="panel-body text-center">
|
||||
<h5 class="panel-title">node-giff</h5>
|
||||
<p class="m-b">Display git diff on browser.</p>
|
||||
<a href="https://github.com/do7be/node-giff" target="_blank"
|
||||
class="btn btn-primary-outline btn-sm m-b">
|
||||
<span class="icon icon-add-user"></span> View GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
||||
<div class="panel panel-default panel-profile m-b-0">
|
||||
<div class="panel-body text-center">
|
||||
<h5 class="panel-title">edgar-monitor</h5>
|
||||
<p class="m-b">A module that processes new Edgar filings and sends out
|
||||
notifications.</p>
|
||||
<a href="https://github.com/buzzfeed-openlab/edgar-monitor" target="_blank"
|
||||
class="btn btn-primary-outline btn-sm m-b">
|
||||
<span class="icon icon-add-user"></span> View GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
||||
<div class="panel panel-default panel-profile m-b-0">
|
||||
<div class="panel-body text-center">
|
||||
<h5 class="panel-title">node-git</h5>
|
||||
<p class="m-b">Execute Git Command by Node.js.</p>
|
||||
<a href="https://github.com/liangshuai/node-git" target="_blank"
|
||||
class="btn btn-primary-outline btn-sm m-b">
|
||||
<span class="icon icon-add-user"></span> View GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
||||
<div class="panel panel-default panel-profile m-b-0">
|
||||
<div class="panel-body text-center">
|
||||
<h5 class="panel-title">Jenkins</h5>
|
||||
<p class="m-b">Show diffs between builds</p>
|
||||
<a href="https://wiki.jenkins-ci.org/display/JENKINS/Last+Changes+Plugin" target="_blank"
|
||||
class="btn btn-primary-outline btn-sm m-b">
|
||||
<span class="icon icon-add-user"></span> Website
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
||||
<div class="panel panel-default panel-profile m-b-0">
|
||||
<div class="panel-body text-center">
|
||||
<h5 class="panel-title">Light Review</h5>
|
||||
<p class="m-b">Code Reviews with maximum control for the leading developers</p>
|
||||
<a href="http://light-review.com/" target="_blank"
|
||||
class="btn btn-primary-outline btn-sm m-b">
|
||||
<span class="icon icon-add-user"></span> Website
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-6 col-md-3 m-b-lg">
|
||||
<div class="panel panel-default panel-profile m-b-0">
|
||||
<div class="panel-body text-center">
|
||||
<h5 class="panel-title">Simple Git</h5>
|
||||
<p class="m-b">A simple package to be able to drive GIT</p>
|
||||
<a href="https://github.com/mauricioszabo/simple-git" target="_blank"
|
||||
class="btn btn-primary-outline btn-sm m-b">
|
||||
<span class="icon icon-add-user"></span> View GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="is-unselectable">diff2html cli installed!</p>
|
||||
<p>
|
||||
<span class="is-unselectable">> $ </span>
|
||||
<span class="has-text-grey-light">diff2html</span>
|
||||
</p>
|
||||
<p class="is-unselectable">Check previous commit changes on your browser</p>
|
||||
<p>
|
||||
<span class="is-unselectable">> $ </span>
|
||||
<span class="has-text-grey-light">is that it?</span>
|
||||
</p>
|
||||
<p class="is-unselectable">Yup, it's that simple.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row row-padded-small text-center">
|
||||
<div class="col-sm-8 col-sm-offset-2 text-center">
|
||||
<h3><strong>Open Source</strong></h3>
|
||||
<h4 class="m-b-md">diff2html is open source.
|
||||
If you'd like to be part of the diff2html community or help us improve,
|
||||
find us on <a href="https://github.com/rtfpessoa/diff2html" target="_blank">GitHub</a> and
|
||||
<hr>
|
||||
|
||||
<div id="users" class="container">
|
||||
<h4 class="title is-size-4 is-spaced"><strong>Projects using diff2html</strong></h4>
|
||||
<div class="columns is-desktop is-multiline">
|
||||
<div class="column is-one-quarter-widescreen box">
|
||||
<header>
|
||||
<p class="is-size-5 has-text-weight-bold">diff2html-cli</p>
|
||||
</header>
|
||||
<section>
|
||||
<p>diff2html from your terminal to the browser.</p>
|
||||
</section>
|
||||
<footer>
|
||||
<a href="https://github.com/rtfpessoa/diff2html-cli" target="_blank">View GitHub</a>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="column is-one-quarter-widescreen box">
|
||||
<header>
|
||||
<p class="is-size-5 has-text-weight-bold">Codacy</p>
|
||||
</header>
|
||||
<section>
|
||||
<p>Check code style, security, duplication, complexity and coverage on every change.</p>
|
||||
</section>
|
||||
<footer>
|
||||
<a href="https://www.codacy.com" target="_blank">Website</a>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="column is-one-quarter-widescreen box">
|
||||
<header>
|
||||
<p class="is-size-5 has-text-weight-bold">Ungit</p>
|
||||
</header>
|
||||
<section>
|
||||
<p>The easiest way to use git. On any platform. Anywhere.</p>
|
||||
</section>
|
||||
<footer>
|
||||
<a href="https://github.com/FredrikNoren/ungit" target="_blank">View GitHub</a>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="column is-one-quarter-widescreen box">
|
||||
<header>
|
||||
<p class="is-size-5 has-text-weight-bold">Diffy</p>
|
||||
</header>
|
||||
<section>
|
||||
<p>Share your diffs and explain your ideas without committing.</p>
|
||||
</section>
|
||||
<footer>
|
||||
<a href="https://diffy.org/" target="_blank">Website</a>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="column is-one-quarter-widescreen box">
|
||||
<header>
|
||||
<p class="is-size-5 has-text-weight-bold">diff-pane</p>
|
||||
</header>
|
||||
<section>
|
||||
<p>Atom - Diff two panes.</p>
|
||||
</section>
|
||||
<footer>
|
||||
<a href="https://github.com/t-ari/diff-pane" target="_blank">View GitHub</a>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="column is-one-quarter-widescreen box">
|
||||
<header>
|
||||
<p class="is-size-5 has-text-weight-bold">node-giff</p>
|
||||
</header>
|
||||
<section>
|
||||
<p>Display git diff on browser.</p>
|
||||
</section>
|
||||
<footer>
|
||||
<a href="https://github.com/do7be/node-giff" target="_blank">View GitHub</a>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="column is-one-quarter-widescreen box">
|
||||
<header>
|
||||
<p class="is-size-5 has-text-weight-bold">edgar-monitor</p>
|
||||
</header>
|
||||
<section>
|
||||
<p>A module that processes new Edgar filings and sends out notifications.</p>
|
||||
</section>
|
||||
<footer>
|
||||
<a href="https://github.com/buzzfeed-openlab/edgar-monitor" target="_blank">View GitHub</a>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="column is-one-quarter-widescreen box">
|
||||
<header>
|
||||
<p class="is-size-5 has-text-weight-bold">node-git</p>
|
||||
</header>
|
||||
<section>
|
||||
<p>Execute Git Command by Node.js.</p>
|
||||
</section>
|
||||
<footer>
|
||||
<a href="https://github.com/liangshuai/node-git" target="_blank">View GitHub</a>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="column is-one-quarter-widescreen box">
|
||||
<header>
|
||||
<p class="is-size-5 has-text-weight-bold">Jenkins</p>
|
||||
</header>
|
||||
<section>
|
||||
<p>Show diffs between builds</p>
|
||||
</section>
|
||||
<footer>
|
||||
<a href="https://wiki.jenkins-ci.org/display/JENKINS/Last+Changes+Plugin"
|
||||
target="_blank">Website</a>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="column is-one-quarter-widescreen box">
|
||||
<header>
|
||||
<p class="is-size-5 has-text-weight-bold">Light Review</p>
|
||||
</header>
|
||||
<section>
|
||||
<p>Code Reviews with maximum control for the leading developers</p>
|
||||
</section>
|
||||
<footer>
|
||||
<a href="http://light-review.com/" target="_blank">Website</a>
|
||||
</footer>
|
||||
</div>
|
||||
<div class="column is-one-quarter-widescreen box">
|
||||
<header>
|
||||
<p class="is-size-5 has-text-weight-bold">Simple Git</p>
|
||||
</header>
|
||||
<section>
|
||||
<p>A simple package to be able to drive GIT</p>
|
||||
</section>
|
||||
<footer>
|
||||
<a href="https://github.com/mauricioszabo/simple-git" target="_blank">View GitHub</a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="container">
|
||||
<h4 class="title is-size-4 is-spaced"><strong>Open Source</strong></h4>
|
||||
<p>diff2html is open source.
|
||||
If you'd like to be part of the diff2html community or help improve it,
|
||||
find more information on <a href="https://github.com/rtfpessoa/diff2html" target="_blank">GitHub</a> and
|
||||
<a href="https://gitter.im/rtfpessoa/diff2html" target="_blank">Gitter</a>. Need any help?
|
||||
</h4>
|
||||
<a class="btn btn-md" href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank">
|
||||
</p>
|
||||
<a href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank">
|
||||
Read more in the Docs
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -1,115 +1,58 @@
|
|||
.screenshot {
|
||||
.image img.hero-img {
|
||||
background-image: url(images/snapshot-3.png);
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.screenshot > img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.screenshots-fan {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.screenshots-fan .screenshot {
|
||||
position: relative;
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.screenshots-fan .screenshot:last-child,
|
||||
.screenshots-fan .screenshot:first-child {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.screenshots-fan .screenshot {
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.screenshots-fan {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-top: 60px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.screenshots-fan .screenshot {
|
||||
height: auto;
|
||||
top: 10px;
|
||||
width: 350px;
|
||||
width: 70%;
|
||||
max-width: 1100px;
|
||||
margin: 0 auto;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.screenshots-fan .screenshot:first-child,
|
||||
.screenshots-fan .screenshot:last-child {
|
||||
width: 250px;
|
||||
.hero-booticon {
|
||||
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
|
||||
margin: 0 auto 30px;
|
||||
width: 100%;
|
||||
font-size: 8vw;
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.code-example {
|
||||
position: relative;
|
||||
font-family: monospace;
|
||||
background: #272b38;
|
||||
color: #48d8a0;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.button.clipboard {
|
||||
position: absolute;
|
||||
top: 65px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
padding: 5px 8px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background-color: #767676;
|
||||
border-color: #767676;
|
||||
border-radius: 0 4px 0 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.screenshots-fan .screenshot:first-child {
|
||||
left: 10px;
|
||||
.button.clipboard:hover {
|
||||
color: #000;
|
||||
background-color: #dcdfe4;
|
||||
}
|
||||
|
||||
.screenshots-fan .screenshot:last-child {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
#users .columns .column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.screenshots-fan {
|
||||
margin-top: 60px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.screenshots-fan .screenshot {
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.screenshots-fan .screenshot:first-child,
|
||||
.screenshots-fan .screenshot:last-child {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.screenshots-fan {
|
||||
margin-top: 80px;
|
||||
height: 380px;
|
||||
}
|
||||
|
||||
.screenshots-fan .screenshot {
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
.screenshots-fan .screenshot:first-child,
|
||||
.screenshots-fan .screenshot:last-child {
|
||||
width: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
.img-snapshot1 {
|
||||
background-image: url('./images/snapshot-1.png');
|
||||
background-repeat: no-repeat;
|
||||
/* height: 50px;
|
||||
width: 50px; */
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.img-snapshot2 {
|
||||
background-image: url('./images/snapshot-2.png');
|
||||
background-repeat: no-repeat;
|
||||
/* height: 50px;
|
||||
width: 50px; */
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.img-snapshot3 {
|
||||
background-image: url('./images/snapshot-3.png');
|
||||
background-repeat: no-repeat;
|
||||
/* height: 50px;
|
||||
width: 50px; */
|
||||
display: inline-block;
|
||||
#users .columns .column section {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,4 +5,4 @@ import '../../../main.css';
|
|||
import './index.css';
|
||||
|
||||
// eslint-disable-next-line no-new
|
||||
new Clipboard(document.getElementsByClassName('btn-clipboard')[0]);
|
||||
new Clipboard(document.getElementsByClassName('clipboard')[0]);
|
||||
|
|
|
|||
|
|
@ -39,79 +39,50 @@
|
|||
</script>
|
||||
</head>
|
||||
|
||||
<body class="template-index">
|
||||
<div class="swag-line">
|
||||
|
||||
<body>
|
||||
<nav class="navbar is-transparent is-spaced">
|
||||
<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 class="navbar-brand">
|
||||
<a class="navbar-item" href="index.html">
|
||||
diff2html
|
||||
</a>
|
||||
<span class="navbar-burger burger" data-target="navbarMenu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="navbarMenu" class="navbar-menu">
|
||||
<div class="navbar-end">
|
||||
<a class="navbar-item" href="index.html#install">Getting Started</a>
|
||||
<a class="navbar-item" href="index.html#cli">CLI</a>
|
||||
<a class="navbar-item" href="demo.html">Demo</a>
|
||||
<a class="navbar-item" href="https://github.com/rtfpessoa/diff2html#how-to-use"
|
||||
target="_blank">Docs</a>
|
||||
<a class="navbar-item" href="https://github.com/rtfpessoa/diff2html/issues/new"
|
||||
target="_blank">Support</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>
|
||||
|
||||
{{#block "content"}}{{/block}}
|
||||
</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
|
||||
<footer class="footer">
|
||||
<div class="content has-text-centered">
|
||||
<p>
|
||||
Designed and built 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">
|
||||
<p>
|
||||
<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>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- General JavaScript -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "http://schema.org/",
|
||||
|
|
@ -126,7 +97,6 @@
|
|||
"mainEntityOfPage": "https://diff2html.xyz/"
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
10
yarn.lock
10
yarn.lock
|
|
@ -1320,11 +1320,6 @@ boolbase@^1.0.0, boolbase@~1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
|
||||
integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
|
||||
|
||||
bootstrap@3.4.1:
|
||||
version "3.4.1"
|
||||
resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-3.4.1.tgz#c3a347d419e289ad11f4033e3c4132b87c081d72"
|
||||
integrity sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA==
|
||||
|
||||
brace-expansion@^1.1.7:
|
||||
version "1.1.11"
|
||||
resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
|
||||
|
|
@ -1520,6 +1515,11 @@ builtin-status-codes@^3.0.0:
|
|||
resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
|
||||
integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
|
||||
|
||||
bulma@^0.8.0:
|
||||
version "0.8.0"
|
||||
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.8.0.tgz#ac1606431703a4761b18a4a2d5cc1fa864a2aece"
|
||||
integrity sha512-nhf3rGyiZh/VM7FrSJ/5KeLlfaFkXz0nYcXriynfPH4vVpnxnqyEwaNGdNCVzHyyCA3cHgkQAMpdF/SFbFGZfA==
|
||||
|
||||
bytes@3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
|
||||
|
|
|
|||
Loading…
Reference in a new issue