Line by Line
+
+
+
+
+
+
-
+
+ diff2html
+
+
+
+ Diff parser and pretty html generator
+Better diffs, unmatched reviews.
+ Live Demo + +
+
+
+
+
+ 
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ "Each diff provides a comprehensive visualization of the code changes, + helping me identify problems and better understand the change."
+Alberto Maneta, VP of Product at gitty
+
+
+
+
+
+
+
+ Line by Line and Side by Side changes
+Each diff features a line by line and side by side preview of your + changes.
+
+
+
+
+ Code syntax highlight
+All the code changes are syntax highlighted using highlight.js, + providing more readability.
+
+
+
+ Line similarity matching
+Similar lines are paired, allowing for easier change tracking.
+
+
+
+
+
+
+
+
+
+ Install with Bower
+You can install and manage diff2html's CSS and JS using Bower:
+
+
+ + > $ bower install diff2html +
+
+
+
+
+
+ Install with npm
+You can also install diff2html using npm:
+
+
+ + > $ npm install diff2html +
+
+
+
+
+
+ With command line integration
+We work hard to make sure you can have your diffs in a simple and flexible + way. Go here full + documentation.
+
+
+
+
+
+ > $ npm install -g diff2html-cli
+ diff2html cli installed!
+
+ > $ diff2html
+ Previous commit changes on your browser
+
+ > $ is that it?
+ Yup, it's that simple.
+
+
+
+
+
+ Open Source
+diff2html is open source. + If you'd like to be part of the diff2html community or help us improve, + find us on GitHub and + Gitter. Need any help? +
+ + Read more in the Docs + +Side by Side
+ + + -
-
-
+
\ No newline at end of file
diff --git a/main.css b/main.css
new file mode 100644
index 0000000..0fe1638
--- /dev/null
+++ b/main.css
@@ -0,0 +1,662 @@
+/*!
+ * Copyright Colossal 2015
+ * Adapted by @rtfpessoa
+ */
+
+.m-b-md {
+ margin-bottom: 23px !important
+}
+
+.p-t {
+ padding-top: 15px !important
+}
+
+.errors ul {
+ list-style: none;
+ margin: 0;
+ padding: 0
+}
+
+.btn {
+ display: inline-block;
+ font-size: 14px;
+ padding: 7px 24px;
+ border-radius: 4px;
+ color: #fff;
+ background: #26A65B;
+ font-weight: 400
+}
+
+.btn:hover {
+ color: #fff;
+ background: #5dbe5d;
+}
+
+.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, .footer-social-buttons li {
+ display: inline-block
+}
+
+.footer-list-item:not(:last-child):after {
+ content: "\b7"
+}
+
+.footer > ul {
+ padding: 0;
+}
+
+@media (min-width: 768px) {
+ .footer {
+ padding: 60px 0
+ }
+}
+
+label, legend {
+ font-size: 12px;
+ display: block;
+ margin-bottom: 3px;
+ font-weight: 400
+}
+
+.form-wrapper input:not(.input-as-link) {
+ width: 100%;
+ box-sizing: border-box;
+ margin-bottom: 15px
+}
+
+.form-wrapper .btn {
+ margin-top: 20px
+}
+
+@media (min-width: 768px) {
+}
+
+@media (min-width: 768px) {
+ .container {
+ width: 710px
+ }
+
+ .row-centered {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-align: center;
+ -webkit-align-items: center;
+ -ms-flex-align: center;
+ align-items: center
+ }
+}
+
+@media (min-width: 992px) {
+ .container {
+ width: 890px
+ }
+}
+
+@media (min-width: 1200px) {
+ .container {
+ width: 1050px
+ }
+}
+
+.row-padded {
+ padding-top: 80px;
+ padding-bottom: 90px
+}
+
+.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(center, ellipse, 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%)
+}
+
+.row .screenshot {
+ margin-bottom: 40px
+}
+
+.container-overflow-wrap {
+ overflow: hidden
+}
+
+.hero {
+ position: relative;
+ text-align: center;
+ padding: 80px 0;
+ border-bottom: 1px solid #dcdfe4
+}
+
+.hero > .hero-header:first-child {
+ margin-top: 0
+}
+
+.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
+}
+
+.jumbo-list-item h3 {
+ margin-top: 0
+}
+
+.jumbo-list-item.row .screenshot {
+ margin-bottom: 0
+}
+
+@media (min-width: 992px) {
+
+ .jumbo-list-item.row .screenshot {
+ margin-bottom: -10px
+ }
+
+}
+
+hr {
+ border-width: 0;
+ border-top: 1px solid #dcdfe4;
+ margin: 20px 0 30px
+}
+
+.swag-line:before {
+ content: '';
+ position: absolute;
+ 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)
+}
+
+@media (min-width: 768px) {
+
+}
+
+.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
+}
+
+.navbar-minimal .navbar-header {
+ text-align: center !important;
+ float: none !important
+}
+
+.navbar-default .navbar-form a.btn {
+ margin-left: 10px
+}
+
+.navbar-fixed-bottom .navbar-nav, .navbar-fixed-bottom .navbar-header {
+ display: none
+}
+
+.navbar-fixed-bottom .navbar-nav > .open > a, .navbar-fixed-bottom .navbar-nav > .open > a:focus, .navbar-fixed-bottom .navbar-nav > .open > a:hover {
+ color: inherit;
+ background-color: inherit
+}
+
+.navbar-fixed-bottom .dropdown-menu > li > a {
+ font-weight: 300;
+ padding: 8px 24px
+}
+
+.navbar-fixed-bottom small {
+ font-size: 70%
+}
+
+.navbar-fixed-bottom .navbar-brand {
+ padding: 16px 25px
+}
+
+@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: 50px
+ }
+
+ .navbar-nav > li:first-child > a {
+ margin-left: 0
+ }
+
+ .navbar-fixed-bottom .navbar-nav, .navbar-fixed-bottom .navbar-header {
+ display: block
+ }
+
+}
+
+.screenshot {
+ 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, .screenshots-fanWithDevices .screenshot:last-child {
+ z-index: 3
+}
+
+.screenshot-crop > img {
+ position: absolute;
+ top: 0
+}
+
+@media (min-width: 768px) {
+ .screenshots-fan {
+ position: relative;
+ overflow: hidden;
+ margin-top: 60px;
+ height: 200px
+ }
+
+ .screenshots-fan .screenshot {
+ height: auto;
+ top: 10px;
+ width: 350px
+ }
+
+ .screenshots-fan .screenshot:first-child, .screenshots-fan .screenshot:last-child {
+ width: 250px;
+ position: absolute;
+ top: 65px
+ }
+
+ .screenshots-fan .screenshot:first-child {
+ left: 10px
+ }
+
+ .screenshots-fan .screenshot:last-child {
+ left: auto;
+ right: 10px
+ }
+}
+
+@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
+ }
+}
+
+.table {
+ width: 100%
+}
+
+.table > tbody > tr > td:last-child {
+ text-align: right
+}
+
+.table > thead > tr > th {
+ font-size: 12px;
+ font-weight: 400;
+ text-align: left
+}
+
+.table > thead > tr > th, .table > tbody > tr > td {
+ padding: 20px;
+ text-align: left;
+ border-bottom: 1px solid #dcdfe4
+}
+
+.table > thead > tr > th:first-child, .table > tbody > tr > td:first-child {
+ padding-left: 0
+}
+
+.table > thead > tr > th:last-child, .table > tbody > tr > td:last-child {
+ padding-right: 0
+}
+
+.thumbnail-mini p {
+ line-height: 1.6
+}
+
+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
+}
+
+.popup-item p:last-child {
+ margin-bottom: 5px
+}
+
+.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-grid h3 {
+ font-size: 22px
+}
+
+.homepage-terminal-example, .homepage-code-example {
+ font-family: monospace;
+ background: #272b38;
+ color: #48d8a0;
+ border-radius: 8px;
+ padding: 30px
+}
+
+.homepage-terminal-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;
+ }
+}
+
+.homepage-xs-grid > div {
+ padding-left: 30px;
+ padding-right: 30px;
+ margin-bottom: 50px
+}
+
+.homepage-xs-grid h3 {
+ font-size: 22px
+}
+
+.hero-green {
+ color: #26A65B;
+}
+
+.hero-black {
+ color: #353535;
+}
+
+.hero-red {
+ color: #CB2C37;
+}
+
+.svg-icon-large {
+ width: 50px;
+ display: block;
+ margin: 0 auto;
+}
+
+.svg-icon-large > svg {
+ width: 100%;
+ height: auto;
+}
+
+.row-padded-small {
+ padding: 40px 0;
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..16fabd9
--- /dev/null
+++ b/package.json
@@ -0,0 +1,44 @@
+{
+ "name": "diff2html-web",
+ "version": "1.0.0",
+ "homepage": "http://rtfpessoa.github.io/diff2html/",
+ "description": "Fast Diff to colorized HTML",
+ "keywords": [
+ "git",
+ "diff",
+ "pretty",
+ "side",
+ "line",
+ "side-by-side",
+ "line-by-line",
+ "character",
+ "highlight",
+ "pretty",
+ "color",
+ "html",
+ "diff2html",
+ "difftohtml",
+ "colorized"
+ ],
+ "author": {
+ "name": "Rodrigo Fernandes",
+ "email": "rtfrodrigo@gmail.com"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://www.github.com/rtfpessoa/diff2html.git"
+ },
+ "bugs": {
+ "url": "https://www.github.com/rtfpessoa/diff2html/issues"
+ },
+ "engines": {
+ "node": ">=0.12"
+ },
+ "scripts": {
+ "release": "node src/main.js"
+ },
+ "devDependencies": {
+ "hogan.js": "^3.0.2"
+ },
+ "license": "MIT"
+}
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..961361b
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,27 @@
+var fs = require('fs');
+
+var hogan = require('hogan.js');
+
+var template = hogan.compile(readFile('src/templates/template.mustache'));
+
+var index = readFile('src/templates/index.partial.html');
+
+var demo = readFile('src/templates/demo.partial.html');
+var demoAssets = readFile('src/templates/demo-assets.partial.html');
+var demoScripts = readFile('src/templates/demo-scripts.partial.html');
+
+var indexHtml = template.render({assets: '', scripts: '', content: index});
+
+writeFile('index.html', indexHtml);
+
+var demoHtml = template.render({assets: demoAssets, scripts: demoScripts, content: demo});
+
+writeFile('demo.html', demoHtml);
+
+function readFile(filePath) {
+ return fs.readFileSync(filePath, 'utf8');
+}
+
+function writeFile(filePath, content) {
+ return fs.writeFileSync(filePath, content);
+}
diff --git a/src/templates/demo-assets.partial.html b/src/templates/demo-assets.partial.html
new file mode 100644
index 0000000..f41f7d6
--- /dev/null
+++ b/src/templates/demo-assets.partial.html
@@ -0,0 +1,5 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/src/templates/demo-scripts.partial.html b/src/templates/demo-scripts.partial.html
new file mode 100644
index 0000000..de51e97
--- /dev/null
+++ b/src/templates/demo-scripts.partial.html
@@ -0,0 +1,259 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/templates/demo.partial.html b/src/templates/demo.partial.html
new file mode 100644
index 0000000..43cc93e
--- /dev/null
+++ b/src/templates/demo.partial.html
@@ -0,0 +1,9 @@
+ Line by Line
+ +
+
+
+ Side by Side
+ +
+
\ No newline at end of file
diff --git a/src/templates/index.partial.html b/src/templates/index.partial.html
new file mode 100644
index 0000000..f4cbe82
--- /dev/null
+++ b/src/templates/index.partial.html
@@ -0,0 +1,144 @@
+
+
+ diff2html
+
+
+
+ Diff parser and pretty html generator
+Better diffs, unmatched reviews.
+ Live Demo + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/templates/template.mustache b/src/templates/template.mustache
new file mode 100644
index 0000000..99da7ee
--- /dev/null
+++ b/src/templates/template.mustache
@@ -0,0 +1,138 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ "Each diff provides a comprehensive visualization of the code changes, + helping me identify problems and better understand the change."
+Alberto Maneta, VP of Product at gitty
+
+
+
+
+
+
+
+ Line by Line and Side by Side changes
+Each diff features a line by line and side by side preview of your + changes.
+
+
+
+
+ Code syntax highlight
+All the code changes are syntax highlighted using highlight.js, + providing more readability.
+
+
+
+ Line similarity matching
+Similar lines are paired, allowing for easier change tracking.
+
+
+
+
+
+
+
+
+
+ Install with Bower
+You can install and manage diff2html's CSS and JS using Bower:
+
+
+ + > $ bower install diff2html +
+
+
+
+
+
+ Install with npm
+You can also install diff2html using npm:
+
+
+ + > $ npm install diff2html +
+
+
+
+
+
+ With command line integration
+We work hard to make sure you can have your diffs in a simple and flexible + way. Go here full + documentation.
+
+
+
+
+
+ > $ npm install -g diff2html-cli
+ diff2html cli installed!
+
+ > $ diff2html
+ Previous commit changes on your browser
+
+ > $ is that it?
+ Yup, it's that simple.
+
+
+
+
+
+ Open Source
+diff2html is open source. + If you'd like to be part of the diff2html community or help us improve, + find us on GitHub and + Gitter. Need any help? +
+ + Read more in the Docs + +
+
+
+
+
+
+
+
+{{#scripts}}
+{{{scripts}}}
+
+
+
+{{/scripts}}
+
+
\ No newline at end of file
+
+
+{{{content}}}
+
+
+
+
+
+