1d5c2b67f2
Fixes duplicate closing tag (which made the link not usable at all) and linked readme section to jump directly to docs
488 lines
23 KiB
Handlebars
488 lines
23 KiB
Handlebars
<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="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>
|
|
|
|
<section class="section">
|
|
|
|
<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>
|
|
<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="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>
|
|
<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="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>
|
|
<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>
|
|
|
|
<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>
|
|
<p>
|
|
<a href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank" rel="noopener" rel="noreferrer">
|
|
Find usage examples in the Docs
|
|
</a>
|
|
</p>
|
|
</div>
|
|
|
|
<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#readme" target="_blank"
|
|
rel="noopener" rel="noreferrer">full
|
|
documentation</a>.
|
|
</p>
|
|
</div>
|
|
<div class="column">
|
|
<div class="code-example">
|
|
<p>
|
|
<span class="is-unselectable">> $ </span>
|
|
<span class="has-text-grey-light">npm install -g diff2html-cli</span>
|
|
</p>
|
|
<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>
|
|
|
|
<hr>
|
|
|
|
<div id="users" class="container">
|
|
<h4 class="title is-size-4 is-spaced"><strong>Sponsor</strong></h4>
|
|
<div class="columns is-desktop is-multiline">
|
|
<div class="column is-half-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<div class="flex">
|
|
<div class="flex">
|
|
<img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" style="height: 30px;">
|
|
<div>
|
|
<div style="margin-left: 5px;" class="is-size-5 has-text-weight-bold flex">Hugging Face</div>
|
|
</div>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>The AI community building the future. Build, train and deploy state of the art models powered by the reference open source in natural language processing.</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://huggingface.co/" target="_blank" rel="noopener"
|
|
rel="noreferrer">Website</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h4 class="title is-size-4 is-spaced"><strong>Other projects using diff2html</strong></h4>
|
|
<div class="columns is-desktop is-multiline">
|
|
<div class="column is-one-quarter-widescreen is-flex" style="min-height: 166px;">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">Exercism</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>Get really good at programming.</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://exercism.org/" target="_blank" rel="noopener"
|
|
rel="noreferrer">Website</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">diff2html-cli</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>diff2html from your terminal to the browser.</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://github.com/rtfpessoa/diff2html-cli" target="_blank" rel="noopener"
|
|
rel="noreferrer">View GitHub</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">Codacy</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>Automate code reviews on your commits and pull requests.</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://www.codacy.com" target="_blank" rel="noopener" rel="noreferrer">Website</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">Ungit</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>The easiest way to use git. On any platform. Anywhere.</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://github.com/FredrikNoren/ungit" target="_blank" rel="noopener"
|
|
rel="noreferrer">View GitHub</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">Diffy</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>Share your diffs and explain your ideas without committing.</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://diffy.org/" target="_blank" rel="noopener" rel="noreferrer">Website</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">Jenkins</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>Show diffs between builds</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://plugins.jenkins.io/last-changes/" target="_blank"
|
|
rel="noopener" rel="noreferrer">Website</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">code-annotation</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>Code Annotation Tool.</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://github.com/src-d/code-annotation" target="_blank" rel="noopener"
|
|
rel="noreferrer">View GitHub</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">Chef Automate</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>DevOps Dashboard for Complete Operational Visibility.</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://automate.chef.io/" target="_blank" rel="noopener" rel="noreferrer">Website</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">GraphQL Schema Diff</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>Detects dangerous and breaking changes in GraphQL schemas.</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://github.com/fabsrc/graphql-schema-diff" target="_blank" rel="noopener"
|
|
rel="noreferrer">View GitHub</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">cypress-plugin-snapshots</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>Plugin for snapshot tests in Cypress.io.</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://github.com/meinaart/cypress-plugin-snapshots" target="_blank" rel="noopener"
|
|
rel="noreferrer">View GitHub</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">git-explorer</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>Offline-first support for previewing local git repositories.</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://github.com/thescientist13/git-explorer" target="_blank" rel="noopener"
|
|
rel="noreferrer">View GitHub</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">edgar-monitor</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<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" rel="noopener"
|
|
rel="noreferrer">View GitHub</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">Simple Git</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>A simple package to be able to drive GIT.</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://github.com/mauricioszabo/simple-git" target="_blank" rel="noopener"
|
|
rel="noreferrer">View GitHub</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">jsreport</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>javascript based business reporting platform</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://jsreport.net" target="_blank" rel="noopener"
|
|
rel="noreferrer">Website</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">dendron</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>Knowledge Management. Redefined.</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://www.dendron.so" target="_blank" rel="noopener"
|
|
rel="noreferrer">Website</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">jest-stare</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>Jest HTML Reporter and Results Processor</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://dkelosky.github.io/jest-stare/" target="_blank" rel="noopener"
|
|
rel="noreferrer">Website</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">Wiki.js</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>The most powerful and extensible open source Wiki software</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://js.wiki/" target="_blank" rel="noopener"
|
|
rel="noreferrer">Website</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">Salto</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>Understand Your Business Apps' Configuration</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://www.salto.io/" target="_blank" rel="noopener"
|
|
rel="noreferrer">Website</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">intuit Design Systems CLI</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>A CLI toolbox for creating design systems</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://intuit.github.io/design-systems-cli/#/" target="_blank" rel="noopener"
|
|
rel="noreferrer">Website</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">Camunda Modeler</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>Automate processes and decisions in a modern, standards-based way</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://camunda.com/download/modeler/" target="_blank" rel="noopener"
|
|
rel="noreferrer">Website</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">igit</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>Tool for managing pull requests</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://igit.dev/" target="_blank" rel="noopener"
|
|
rel="noreferrer">Website</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-quarter-widescreen is-flex">
|
|
<div class="box is-flex is-fullwidth is-vertical">
|
|
<header>
|
|
<p class="is-size-5 has-text-weight-bold">Crowi</p>
|
|
</header>
|
|
<section class="media-content">
|
|
<p>Empower the team with sharing your knowledge</p>
|
|
</section>
|
|
<footer>
|
|
<a href="https://site.crowi.wiki/" target="_blank" rel="noopener"
|
|
rel="noreferrer">Website</a>
|
|
</footer>
|
|
</div>
|
|
</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" rel="noopener"
|
|
rel="noreferrer">GitHub</a> and
|
|
<a href="https://gitter.im/rtfpessoa/diff2html" target="_blank" rel="noopener" rel="noreferrer">Gitter</a>.
|
|
Need any help?
|
|
</p>
|
|
<a href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank" rel="noopener" rel="noreferrer">
|
|
Read more in the Docs
|
|
</a>
|
|
</div>
|
|
|
|
</section>
|