diff --git a/package.json b/package.json index efaa8a5..84d4126 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/website/main.css b/website/main.css index ac20626..347df2c 100644 --- a/website/main.css +++ b/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; } diff --git a/website/main.ts b/website/main.ts index 31753d9..81f7302 100644 --- a/website/main.ts +++ b/website/main.ts @@ -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'); + } + }); + }); +}); diff --git a/website/templates/pages/demo/content.handlebars b/website/templates/pages/demo/content.handlebars index d2640b0..737e2a1 100644 --- a/website/templates/pages/demo/content.handlebars +++ b/website/templates/pages/demo/content.handlebars @@ -1,95 +1,137 @@ -

Diff Prettifier - - -

-

GitHub, Bitbucket and GitLab commit and pull request compatible

-

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. -

-

Options:

-
-
- +
+
+
+

Demo + + +

+

Introduce the GitHub, Bitbucket or GitLab commit, pull request, merge request url + or any other git or unified compatible diff.

+

Review the code in a pretty HTML representation of the diff with code syntax highlight, line similarity + matching and many other improvements. +

+
-
- +
+ +
+
+

Options

+ +
+
+ +
+
+ Load +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
-
- +
+ +
+
+
-
- +
+ +
+
+

Help

+
-
- -
-
-
-
- - Load -
-
-
-
-
-

Help:

- -
-

Thank you

-

I want to thank kevinsimper for this great idea, - providing better diff support for existing online services. -

\ No newline at end of file +
+ \ No newline at end of file diff --git a/website/templates/pages/demo/demo.css b/website/templates/pages/demo/demo.css new file mode 100644 index 0000000..f8e6cbb --- /dev/null +++ b/website/templates/pages/demo/demo.css @@ -0,0 +1,7 @@ +.diff-url-input { + width: 100%; +} + +.diff-url-btn.is-small { + font-size: 0.85rem; +} diff --git a/website/templates/pages/demo/demo.ts b/website/templates/pages/demo/demo.ts index 7c271fd..d4920cf 100644 --- a/website/templates/pages/demo/demo.ts +++ b/website/templates/pages/demo/demo.ts @@ -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 { 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: { diff --git a/website/templates/pages/index/content.handlebars b/website/templates/pages/index/content.handlebars index 04f44c6..c69c053 100644 --- a/website/templates/pages/index/content.handlebars +++ b/website/templates/pages/index/content.handlebars @@ -1,295 +1,258 @@ -
- - diff2html - -

Diff parser and pretty html generator

-

Better diffs, unmatched reviews.

-

Demo

+
+
+
+ + diff2html + -
+

Diff parser and pretty html generator

+

Better diffs, unmatched reviews

- - - - - - - - -
-
- -
-
-
-

Each diff provides a comprehensive visualization of the code changes, - helping developers identify problems and better understand the changes.

+ Demo +
+
+
+ Diff2Html pretty html side-by-side example render +
+
-
-
- -
+

Each diff provides a comprehensive visualization of the code changes, + helping developers identify problems and better understand the changes.

+
+
+ - -
Line by Line and Side by Side changes
-

Each diff features a line by line and side by side preview of your - changes.

-
+

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.

-
+

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

- Copy -
-
-
-
-
-

Install with npm

-

You can also install diff2html using npm:

-
-

> $ npm install - diff2html

- Copy -
-
-
-
-
- - Find usage examples in the Docs - -
+

Line similarity matching

+

Similar lines are paired, allowing for easier change tracking.

-
-
-

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. -

-
-
-
+
-
-
-
-
-

Projects using diff2html

-
-
-
-
-
-
-
diff2html-cli
-

diff2html from your terminal to the browser.

- - View GitHub - -
-
-
-
-
-
-
Codacy
-

Check code style, security, duplication, complexity and coverage on every - change.

- - Website - -
-
-
-
-
-
-
Ungit
-

The easiest way to use git. On any platform. Anywhere.

- - View GitHub - -
-
-
-
-
-
-
Diffy
-

Share your diffs and explain your ideas without committing.

- - Website - -
-
-
-
-
-
-
diff-pane
-

Atom - Diff two panes.

- - View GitHub - -
-
-
-
-
-
-
node-giff
-

Display git diff on browser.

- - View GitHub - -
-
-
-
-
-
-
edgar-monitor
-

A module that processes new Edgar filings and sends out - notifications.

- - View GitHub - -
-
-
-
-
-
-
node-git
-

Execute Git Command by Node.js.

- - View GitHub - -
-
-
-
-
-
-
Jenkins
-

Show diffs between builds

- - Website - -
-
-
-
-
-
-
Light Review
-

Code Reviews with maximum control for the leading developers

- - Website - -
-
-
-
-
-
-
Simple Git
-

A simple package to be able to drive GIT

- - View GitHub - -
-
-
-
+
+

Install with npm

+
+ > $ npm install diff2html + Copy
-
- -
-
-

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 +

+ + Find usage examples in the Docs +

+
+ +
+ +
+
+
+

With command line integration

+

We work hard to make sure you can have your diffs in a simple and flexible + way. Go here for the full + documentation. +

+
+
+
+

+ > $ + npm install -g diff2html-cli +

+

diff2html cli installed!

+

+ > $ + diff2html +

+

Check previous commit changes on your browser

+

+ > $ + is that it? +

+

Yup, it's that simple.

+
+
-
\ No newline at end of file +
+ +
+

Projects using diff2html

+
+
+
+

diff2html-cli

+
+
+

diff2html from your terminal to the browser.

+
+ +
+
+
+

Codacy

+
+
+

Check code style, security, duplication, complexity and coverage on every change.

+
+ +
+
+
+

Ungit

+
+
+

The easiest way to use git. On any platform. Anywhere.

+
+ +
+
+
+

Diffy

+
+
+

Share your diffs and explain your ideas without committing.

+
+ +
+
+
+

diff-pane

+
+
+

Atom - Diff two panes.

+
+ +
+
+
+

node-giff

+
+
+

Display git diff on browser.

+
+ +
+
+
+

edgar-monitor

+
+
+

A module that processes new Edgar filings and sends out notifications.

+
+ +
+
+
+

node-git

+
+
+

Execute Git Command by Node.js.

+
+ +
+
+
+

Jenkins

+
+
+

Show diffs between builds

+
+ +
+
+
+

Light Review

+
+
+

Code Reviews with maximum control for the leading developers

+
+ +
+
+
+

Simple Git

+
+
+

A simple package to be able to drive GIT

+
+ +
+
+
+ +
+ +
+

Open Source

+

diff2html is open source. + If you'd like to be part of the diff2html community or help improve it, + find more information on GitHub and + Gitter. Need any help? +

+ + Read more in the Docs + +
+ + \ No newline at end of file diff --git a/website/templates/pages/index/index.css b/website/templates/pages/index/index.css index 330d2d6..ec17ee3 100644 --- a/website/templates/pages/index/index.css +++ b/website/templates/pages/index/index.css @@ -1,115 +1,58 @@ -.screenshot { +.image img.hero-img { + background-image: url(images/snapshot-3.png); display: block; - overflow: hidden; + height: auto; + width: 70%; + max-width: 1100px; + margin: 0 auto; + margin-top: 1.5rem; } -.screenshot > img { +.hero-booticon { + font-family: Helvetica Neue, Helvetica, Arial, sans-serif; + margin: 0 auto 30px; width: 100%; -} - -.screenshots-fan { - margin-top: 50px; -} - -.screenshots-fan .screenshot { - position: relative; - width: auto; - display: inline-block; + font-size: 8vw; + display: block; + font-weight: 500; text-align: center; + cursor: default; } -.screenshots-fan .screenshot:last-child, -.screenshots-fan .screenshot:first-child { - z-index: 2; +.code-example { + position: relative; + font-family: monospace; + background: #272b38; + color: #48d8a0; + border-radius: 8px; + padding: 1.5rem; } -.screenshots-fan .screenshot { - z-index: 3; +.button.clipboard { + position: absolute; + 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; } -@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; - } +.button.clipboard:hover { + color: #000; + background-color: #dcdfe4; } -@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; - } +#users .columns .column { + display: flex; + flex-direction: column; } -@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%; } diff --git a/website/templates/pages/index/index.ts b/website/templates/pages/index/index.ts index f33705b..8680c01 100644 --- a/website/templates/pages/index/index.ts +++ b/website/templates/pages/index/index.ts @@ -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]); diff --git a/website/templates/template.handlebars b/website/templates/template.handlebars index 883b1cc..bd8fb1d 100644 --- a/website/templates/template.handlebars +++ b/website/templates/template.handlebars @@ -39,79 +39,50 @@ - -
- + +
+ -
-

- Website originally designed and built by - @mdo, - @fat, and - @dhg, - adapted with ❤ by + {{#block "content"}}{{/block}} + +

-
  • - FAQ -
    • - -
  • - diff2html -
    • - - -
    - -
    - - - \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 8b18a79..944e78b 100644 --- a/yarn.lock +++ b/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"