sascha
/
difftastic
mirror of https://github.com/Wilfred/difftastic/
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Cards and dark theme

pull/614/head
Wilfred Hughes 2023-12-23 11:38:24 +07:00
parent 434f6f5d86
commit f3e9209db5
1 changed files with 446 additions and 430 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

876
homepage/index.html
Unescape Escape View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" data-bs-theme="dark">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
@ -25,18 +25,7 @@
<style> <style>
body { body {
--bs-body-font-size: 18px; --bs-body-font-size: 18px;
} --bs-border-radius: 0.5rem;
html,
body,
.fw-bold,
h1,
h2,
h3,
h4,
h5,
h6 {
color: #f8f8f2 !important;
} }
h1 { h1 {
@ -82,7 +71,9 @@
} }
img { img {
box-shadow: 10px 10px #1d1b22; /* box-shadow: 10px 10px #1d1b22; */
border: var(--bs-card-border-width) solid var(--bs-card-border-color);
border-radius: var(--bs-border-radius);
} }
object { object {
@ -101,6 +92,10 @@
line-height: 45px; line-height: 45px;
} }
<!-- .card h2 { -->
<!-- text-align: center; -->
<!-- } -->
@media only screen and (min-width: 900px) { @media only screen and (min-width: 900px) {
.screenshot { .screenshot {
max-width: 800px; max-width: 800px;
@ -148,495 +143,516 @@
</div> </div>
<div class="container col-xxl-8 px-4"> <div class="container col-xxl-8 px-4">
<div class="container px-4 pb-5"> <p class="px-5">
<h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
Focus On tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
<span class="green">What Changed</span> veniam, quis nostrud exercitation.
</h2> </p>
<!-- screenshot from difftastic commit e472acb8050e84c671470421f4fd5c74a9d3b2bd --> <div class="card p-4 mx-5 my-4">
<img src="add_wrap.png" class="img-fluid mb-4" alt="screenshot" /> <div class="card-body">
<p> <h2 class="card-heading">
Difftastic parses your code with tree-sitter. Unlike a line-oriented Focus On
text diff, difftastic understands that the inner expression hasn't <span class="green">What Changed</span>
changed here. </h2>
</p>
<!-- screenshot from difftastic commit e472acb8050e84c671470421f4fd5c74a9d3b2bd -->
<img src="add_wrap.png" class="img-fluid mb-4" alt="screenshot" />
<p>
Difftastic parses your code with tree-sitter. Unlike a line-oriented
text diff, difftastic understands that the inner expression hasn't
changed here.
</p>
</div>
</div> </div>
<div class="container px-4 pb-5"> <div class="card p-4 mx-5 my-4">
<h2><span class="green">Ignore</span> Formatting Changes</h2> <div class="card-body">
<h2><span class="green">Ignore</span> Formatting Changes</h2>
<img src="reformat.png" class="img-fluid mb-4" alt="screenshot" /> <img src="reformat.png" class="img-fluid mb-4" alt="screenshot" />
<p> <p>
Has your code formatter decided to split something over multiple Has your code formatter decided to split something over multiple
lines? Difftastic can show what has actually changed. lines? Difftastic can show what has actually changed.
</p> </p>
</div>
</div> </div>
<div class="container px-4 pb-5"> <div class="card p-4 mx-5 my-4">
<h2><span class="green">Understand</span> Wrapping Changes</h2> <div class="card-body">
<h2><span class="green">Understand</span> Wrapping Changes</h2>
<img src="wrap_struct.png" class="img-fluid mb-4" alt="screenshot" />
<p> <img src="wrap_struct.png" class="img-fluid mb-4" alt="screenshot" />
Have you added a wrapper? Difftastic can match the delimiters exactly. <p>
</p> Have you added a wrapper? Difftastic can match the delimiters
exactly.
<img src="change_wrap.png" class="img-fluid mb-4" alt="screenshot" /> </p>
<p>
Even if you change the inner content, difftastic can still show you <img src="change_wrap.png" class="img-fluid mb-4" alt="screenshot" />
the additional wrapper. <p>
</p> Even if you change the inner content, difftastic can still show you
the additional wrapper.
</p>
</div>
</div> </div>
<div class="container px-4 pb-5"> <div class="card p-4 mx-5 my-4">
<h2> <div class="card-body">
<span class="green">Real</span> <h2>
Line Numbers <span class="green">Real</span>
</h2> Line Numbers
</h2>
<img src="line_numbers.png" class="img-fluid mb-4" alt="screenshot" />
<p> <img src="line_numbers.png" class="img-fluid mb-4" alt="screenshot" />
Do you know how to read <p>
<code>@@ -5,6 +5,7 @@</code> syntax? Difftastic shows the actual line Do you know how to read
numbers from your files, both before and after. <code>@@ -5,6 +5,7 @@</code> syntax? Difftastic shows the actual
</p> line numbers from your files, both before and after.
</p>
</div>
</div> </div>
<!-- https://devicon.dev/ provides SVG logos. --> <!-- https://devicon.dev/ provides SVG logos. -->
<div class="container px-4 pb-5"> <div class="card p-4 mx-5 my-4">
<h2>Programming Languages</h2> <div class="card-body">
<h2>Programming Languages</h2>
<div
class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 pb-4" <div
> class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 pb-4"
<div class="col d-flex align-items-start"> >
<div class="foo"> <div class="col d-flex align-items-start">
<div class="foo">
<object
class="me-3"
width="45px"
height="45px"
data="cplusplus.svg"
type="image/svg+xml"
></object>
</div>
<div>
<h3 class="fw-bold mb-0 fs-4">
C++
</h3>
</div>
</div>
<div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="cplusplus.svg" data="csharp.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
C#
</h3>
</div>
</div> </div>
<div> <div class="col d-flex align-items-start">
<h3 class="fw-bold mb-0 fs-4"> <object
C++ class="me-3"
</h3> width="45px"
</div> height="45px"
</div> data="clojure.svg"
type="image/svg+xml"
></object>
<div class="col d-flex align-items-start"> <div>
<object <h3 class="fw-bold mb-0 fs-4">
class="me-3" Clojure
width="45px" </h3>
height="45px" </div>
data="csharp.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
C#
</h3>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="clojure.svg" data="lisp.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
Clojure
</h3>
</div>
</div>
<div class="col d-flex align-items-start"> <div>
<object <h3 class="fw-bold mb-0 fs-4">
class="me-3" Lisp
width="45px" </h3>
height="45px" </div>
data="lisp.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
Common Lisp
</h3>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="dart.svg" data="dart.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div> <div>
<h3 class="fw-bold mb-0 fs-4"> <h3 class="fw-bold mb-0 fs-4">
Dart Dart
</h3> </h3>
</div>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="erlang.svg" data="erlang.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div> <div>
<h3 class="fw-bold mb-0 fs-4"> <h3 class="fw-bold mb-0 fs-4">
Erlang Erlang
</h3> </h3>
</div>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="go.svg" data="go.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div> <div>
<h3 class="fw-bold mb-0 fs-4"> <h3 class="fw-bold mb-0 fs-4">
Go Go
</h3> </h3>
</div>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="haskell.svg" data="haskell.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div> <div>
<h3 class="fw-bold mb-0 fs-4"> <h3 class="fw-bold mb-0 fs-4">
Haskell Haskell
</h3> </h3>
</div>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="java.svg" data="java.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div> <div>
<h3 class="fw-bold mb-0 fs-4"> <h3 class="fw-bold mb-0 fs-4">
Java Java
</h3> </h3>
</div>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="javascript.svg" data="javascript.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div> <div>
<h3 class="fw-bold mb-0 fs-4"> <h3 class="fw-bold mb-0 fs-4">
JavaScript JavaScript
</h3> </h3>
</div>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="kotlin.svg" data="kotlin.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div> <div>
<h3 class="fw-bold mb-0 fs-4"> <h3 class="fw-bold mb-0 fs-4">
Kotlin Kotlin
</h3> </h3>
</div>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="lua.svg" data="lua.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div> <div>
<h3 class="fw-bold mb-0 fs-4"> <h3 class="fw-bold mb-0 fs-4">
Lua Lua
</h3> </h3>
</div>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="ocaml.svg" data="ocaml.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div> <div>
<h3 class="fw-bold mb-0 fs-4"> <h3 class="fw-bold mb-0 fs-4">
OCaml OCaml
</h3> </h3>
</div>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="php.svg" data="php.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div> <div>
<h3 class="fw-bold mb-0 fs-4"> <h3 class="fw-bold mb-0 fs-4">
PHP PHP
</h3> </h3>
</div>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="python.svg" data="python.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div> <div>
<h3 class="fw-bold mb-0 fs-4"> <h3 class="fw-bold mb-0 fs-4">
Python Python
</h3> </h3>
</div>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="r.svg" data="r.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div> <div>
<h3 class="fw-bold mb-0 fs-4"> <h3 class="fw-bold mb-0 fs-4">
R R
</h3> </h3>
</div>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="ruby.svg" data="ruby.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div> <div>
<h3 class="fw-bold mb-0 fs-4"> <h3 class="fw-bold mb-0 fs-4">
Ruby Ruby
</h3> </h3>
</div>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="rust.svg" data="rust.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div> <div>
<h3 class="fw-bold mb-0 fs-4"> <h3 class="fw-bold mb-0 fs-4">
Rust Rust
</h3> </h3>
</div>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="scala.svg" data="scala.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div> <div>
<h3 class="fw-bold mb-0 fs-4"> <h3 class="fw-bold mb-0 fs-4">
Scala Scala
</h3> </h3>
</div>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="typescript.svg" data="typescript.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div> <div>
<h3 class="fw-bold mb-0 fs-4"> <h3 class="fw-bold mb-0 fs-4">
TypeScript TypeScript
</h3> </h3>
</div>
</div> </div>
<!-- end languages -->
</div> </div>
<!-- end languages --> <p>
And more! See the full
<a href="https://difftastic.wilfred.me.uk/languages_supported.html"
>list of supported languages</a
>
in the manual.
</p>
</div> </div>
</div>
<p> <div class="card p-4 mx-5 my-4">
And more! See the full <div class="card-body">
<a href="https://difftastic.wilfred.me.uk/languages_supported.html" <h2>File Formats</h2>
>list of supported languages</a
<div
class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 pb-4"
> >
in the manual. <div class="col d-flex align-items-start">
</p> <!-- https://www.svgrepo.com/svg/371192/curly-brackets -->
</div> <object
class="me-3"
width="45px"
height="45px"
data="braces.svg"
type="image/svg+xml"
></object>
<div class="container px-4 pb-5"> <div>
<h2>File Formats</h2> <h3 class="fw-bold mb-0 fs-4">
HCL
<div </h3>
class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 pb-4" </div>
>
<div class="col d-flex align-items-start">
<!-- https://www.svgrepo.com/svg/371192/curly-brackets -->
<object
class="me-3"
width="45px"
height="45px"
data="braces.svg"
type="image/svg+xml"
></object>
<div>
<h3 class="fw-bold mb-0 fs-4">
HCL
</h3>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="html5.svg" data="html5.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div> <div>
<h3 class="fw-bold mb-0 fs-4"> <h3 class="fw-bold mb-0 fs-4">
HTML HTML
</h3> </h3>
</div>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="json.svg" data="json.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div> <div>
<h3 class="fw-bold mb-0 fs-4"> <h3 class="fw-bold mb-0 fs-4">
JSON JSON
</h3> </h3>
</div>
</div> </div>
</div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<object <object
class="me-3" class="me-3"
width="45px" width="45px"
height="45px" height="45px"
data="yaml.svg" data="yaml.svg"
type="image/svg+xml" type="image/svg+xml"
></object> ></object>
<div> <div>
<h3 class="fw-bold mb-0 fs-4"> <h3 class="fw-bold mb-0 fs-4">
YAML YAML
</h3> </h3>
</div>
</div> </div>
<!-- end formats -->
</div> </div>
<!-- end formats -->
</div>
<p> <p>
And even more! See the full And even more! See the full
<a <a
href="https://difftastic.wilfred.me.uk/languages_supported.html#structured-text-formats" href="https://difftastic.wilfred.me.uk/languages_supported.html#structured-text-formats"
>list of supported file formats</a >list of supported file formats</a
> >
in the manual. in the manual.
</p> </p>
</div>
</div> </div>
<div class="container px-4 pb-5"> <div class="card p-4 mx-5 my-4">
<h2>Works With <span class="green">Git</span></h2> <div class="card-body">
<img src="git_difftool.png" class="img-fluid mb-4" alt="screenshot" /> <h2>Works With <span class="green">Git</span></h2>
<p> <img src="git_difftool.png" class="img-fluid mb-4" alt="screenshot" />
See the <p>
<a href="https://difftastic.wilfred.me.uk/git.html" See the
>git configuration instructions</a <a href="https://difftastic.wilfred.me.uk/git.html"
> >git configuration instructions</a
in the manual. >
</p> in the manual.
</p>
</div>
</div> </div>
<div class="container px-4 pb-5"> <div class="card p-4 mx-5 my-4">
<h2>Fully <span class="green">Open Source</span></h2> <h2>Fully <span class="green">Open Source</span></h2>
<p> <p>
Difftastic is Difftastic is
@ -647,7 +663,7 @@
</div> </div>
<div class="container px-4"> <div class="container px-4">
<p> <p class="px-5">
<em <em
>Made with Emacs and coffee by >Made with Emacs and coffee by
<a href="https://github.com/wilfred/">Wilfred Hughes</a>.</em <a href="https://github.com/wilfred/">Wilfred Hughes</a>.</em