Merge pull request #280 from rtfpessoa/fix-website

clean: Tweak users section to avoid margin issues
This commit is contained in:
Rodrigo Fernandes 2020-01-12 02:25:50 +00:00 committed by GitHub
commit de3d404dfe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 339 additions and 280 deletions

View file

@ -62,4 +62,5 @@ jobs:
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
run: |
cd website
aws s3 sync . s3://diff2html.xyz --region eu-west-1
aws s3 sync --region eu-west-1 --delete . s3://diff2html.xyz --metadata-directive REPLACE --cache-control max-age=31557600
aws cloudfront create-invalidation --region eu-west-1 --distribution-id ${{ secrets.AWS_CF_DISTRIBUTION_ID }} --paths '/index.html /demo.html'

View file

@ -30,21 +30,6 @@ const config: webpack.Configuration[] = pages.map(page => {
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.handlebars$/,
loader: 'handlebars-loader',
options: {
precompileOptions: {
knownHelpersOnly: false,
},
helperDirs: [path.join(__dirname, 'website/templates/helpers')],
partialDirs: [path.join(__dirname, 'website/templates')],
},
},
{
test: /\.(css)$/,
use: [MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader'],
},
{
test: /\.(html)$/,
use: {
@ -55,30 +40,26 @@ const config: webpack.Configuration[] = pages.map(page => {
},
},
{
test: /\.woff(2)?(\?v=\d\.\d\.\d)?$/,
use: [
{
loader: 'url-loader',
test: /\.handlebars$/,
loader: 'handlebars-loader',
options: {
limit: 1000,
mimetype: 'application/font-woff',
inlineRequires: '/images/',
precompileOptions: {
knownHelpersOnly: false,
},
helperDirs: [path.join(__dirname, 'website/templates/helpers')],
partialDirs: [path.join(__dirname, 'website/templates')],
},
],
},
{
test: /\.(ttf|eot|svg)(\?v=\d\.\d\.\d)?$/,
loader: 'file-loader',
},
{
test: /\.(jpeg|jpg|png|gif)$/,
test: /\.(gif|png|jpe?g|webp)$/i,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'images/',
useRelativePath: true,
name: '[name].[ext]?[hash]',
outputPath: 'images',
esModule: false,
},
},
{
@ -105,6 +86,26 @@ const config: webpack.Configuration[] = pages.map(page => {
},
],
},
{
test: /\.(css)$/,
use: [MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader'],
},
{
test: /\.woff(2)?(\?v=\d\.\d\.\d)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 1000,
mimetype: 'application/font-woff',
},
},
],
},
{
test: /\.(ttf|eot|svg)(\?v=\d\.\d\.\d)?$/,
loader: 'file-loader',
},
],
},
plugins: [

View file

@ -12,7 +12,7 @@
</div>
<div class="container has-text-centered">
<figure class="image">
<img class="hero-img" src="images/snapshot-3.png"
<img class="hero-img" src="./images/snapshot-3.png"
alt="Diff2Html pretty html side-by-side example render">
</figure>
</div>
@ -72,7 +72,7 @@
<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">
<a href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank" rel="noopener" rel="noreferrer">
Find usage examples in the Docs
</a>
</p>
@ -85,7 +85,8 @@
<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
way. Go here for the <a href="https://github.com/rtfpessoa/diff2html-cli" target="_blank"
rel="noopener" rel="noreferrer"></a>full
documentation</a>.
</p>
</div>
@ -116,252 +117,310 @@
<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">
<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>
<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">View GitHub</a>
<a href="https://github.com/rtfpessoa/diff2html-cli" target="_blank" rel="noopener"
rel="noreferrer">View GitHub</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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>
<section class="media-content">
<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>
<a href="https://www.codacy.com" target="_blank" rel="noopener" rel="noreferrer">Website</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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>
<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">View GitHub</a>
<a href="https://github.com/FredrikNoren/ungit" target="_blank" rel="noopener"
rel="noreferrer">View GitHub</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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>
<section class="media-content">
<p>Share your diffs and explain your ideas without committing.</p>
</section>
<footer>
<a href="https://diffy.org/" target="_blank">Website</a>
<a href="https://diffy.org/" target="_blank" rel="noopener" rel="noreferrer">Website</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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>
<section class="media-content">
<p>Show diffs between builds</p>
</section>
<footer>
<a href="https://wiki.jenkins-ci.org/display/JENKINS/Last+Changes+Plugin"
target="_blank">Website</a>
<a href="https://wiki.jenkins-ci.org/display/JENKINS/Last+Changes+Plugin" target="_blank"
rel="noopener" rel="noreferrer">Website</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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>
<section class="media-content">
<p>Jest HTML Reporter and Results Processor.</p>
</section>
<footer>
<a href="https://dkelosky.github.io/jest-stare/" target="_blank">Website</a>
<a href="https://dkelosky.github.io/jest-stare/" target="_blank" rel="noopener"
rel="noreferrer">Website</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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">kubeapps</p>
</header>
<section>
<section class="media-content">
<p>A web-based UI for deploying and managing applications in Kubernetes clusters.</p>
</section>
<footer>
<a href="https://kubeapps.com/" target="_blank">Website</a>
<a href="https://kubeapps.com/" target="_blank" rel="noopener" rel="noreferrer">Website</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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">Hitchhiker</p>
</header>
<section>
<section class="media-content">
<p>A a Restful Api test tool.</p>
</section>
<footer>
<a href="http://www.hitchhiker-api.com/" target="_blank">Website</a>
<a href="http://www.hitchhiker-api.com/" target="_blank" rel="noopener"
rel="noreferrer">Website</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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">growi</p>
</header>
<section>
<section class="media-content">
<p>Team collaboration software using markdown.</p>
</section>
<footer>
<a href="https://growi.org/" target="_blank">Website</a>
<a href="https://growi.org/" target="_blank" rel="noopener" rel="noreferrer">Website</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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>
<section class="media-content">
<p>Markdown Wiki - Empower the team with sharing your knowledge.</p>
</section>
<footer>
<a href="http://site.crowi.wiki/" target="_blank">Website</a>
<a href="http://site.crowi.wiki/" target="_blank" rel="noopener" rel="noreferrer">Website</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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>
<section class="media-content">
<p>A modern, lightweight and powerful wiki app built on Node.js.</p>
</section>
<footer>
<a href="https://wiki.js.org/" target="_blank">Website</a>
<a href="https://wiki.js.org/" target="_blank" rel="noopener" rel="noreferrer">Website</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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>
<section class="media-content">
<p>Code Annotation Tool.</p>
</section>
<footer>
<a href="https://github.com/src-d/code-annotation" target="_blank">View GitHub</a>
<a href="https://github.com/src-d/code-annotation" target="_blank" rel="noopener"
rel="noreferrer">View GitHub</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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>
<section class="media-content">
<p>full suite of enterprise capabilities for maintaining continuous visibility into application,
infrastructure, and security automation.</p>
</section>
<footer>
<a href="https://automate.chef.io/" target="_blank">Website</a>
<a href="https://automate.chef.io/" target="_blank" rel="noopener" rel="noreferrer">Website</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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>
<section class="media-content">
<p>An integrated modeling solution for BPMN, DMN and CMMN based on bpmn.io.</p>
</section>
<footer>
<a href="https://camunda.com/products/modeler" target="_blank">Website</a>
<a href="https://camunda.com/products/modeler" target="_blank" rel="noopener"
rel="noreferrer">Website</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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>
<section class="media-content">
<p>Returns the diff of two GraphQL schemas. Detects dangerous and breaking changes.</p>
</section>
<footer>
<a href="https://github.com/fabsrc/graphql-schema-diff" target="_blank">View GitHub</a>
<a href="https://github.com/fabsrc/graphql-schema-diff" target="_blank" rel="noopener"
rel="noreferrer">View GitHub</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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>
<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">View GitHub</a>
<a href="https://github.com/meinaart/cypress-plugin-snapshots" target="_blank" rel="noopener"
rel="noreferrer">View GitHub</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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>
<section class="media-content">
<p>Offline-first support for previewing and comparing branches in a local git repository.</p>
</section>
<footer>
<a href="https://github.com/thescientist13/git-explorer" target="_blank">View GitHub</a>
<a href="https://github.com/thescientist13/git-explorer" target="_blank" rel="noopener"
rel="noreferrer">View GitHub</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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">diff-pane</p>
</header>
<section>
<section class="media-content">
<p>Atom - Diff two panes.</p>
</section>
<footer>
<a href="https://github.com/t-ari/diff-pane" target="_blank">View GitHub</a>
<a href="https://github.com/t-ari/diff-pane" target="_blank" rel="noopener"
rel="noreferrer">View GitHub</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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">node-giff</p>
</header>
<section>
<section class="media-content">
<p>Display git diff on browser.</p>
</section>
<footer>
<a href="https://github.com/do7be/node-giff" target="_blank">View GitHub</a>
<a href="https://github.com/do7be/node-giff" target="_blank" rel="noopener"
rel="noreferrer">View GitHub</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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>
<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">View GitHub</a>
<a href="https://github.com/buzzfeed-openlab/edgar-monitor" target="_blank" rel="noopener"
rel="noreferrer">View GitHub</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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">node-git</p>
</header>
<section>
<section class="media-content">
<p>Execute Git Command by Node.js.</p>
</section>
<footer>
<a href="https://github.com/liangshuai/node-git" target="_blank">View GitHub</a>
<a href="https://github.com/liangshuai/node-git" target="_blank" rel="noopener"
rel="noreferrer">View GitHub</a>
</footer>
</div>
<div class="column is-one-quarter-widescreen box">
</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>
<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">View GitHub</a>
<a href="https://github.com/mauricioszabo/simple-git" target="_blank" rel="noopener"
rel="noreferrer">View GitHub</a>
</footer>
</div>
</div>
</div>
</div>
<hr>
@ -369,10 +428,12 @@
<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?
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">
<a href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank" rel="noopener" rel="noreferrer">
Read more in the Docs
</a>
</div>

View file

@ -1,5 +1,4 @@
.image img.hero-img {
background-image: url(images/snapshot-3.png);
display: block;
height: auto;
width: 70%;
@ -43,16 +42,10 @@
cursor: pointer;
}
.button.clipboard:hover {
color: #000;
background-color: #dcdfe4;
.is-fullwidth {
flex-grow: 1;
}
#users .columns .column {
display: flex;
.is-vertical {
flex-direction: column;
}
#users .columns .column section {
height: 100%;
}

View file

@ -6,8 +6,11 @@
<!--[if IE]>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/>
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="public, must-revalidate, proxy-revalidate, max-age=0" />
<meta name="theme-color" content="#FFFFFF"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Diff parser and pretty html generator">
<meta name="keywords" content="diff2html,git,diff,unified,pretty,html,css,javaccript">
<meta name="author" content="Rodrigo Fernandes (rtfpessoa)">
@ -57,10 +60,10 @@
<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>
<a class="navbar-item" href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank"
rel="noopener" rel="noreferrer">Docs</a>
<a class="navbar-item" href="https://github.com/rtfpessoa/diff2html/issues/new" target="_blank"
rel="noopener" rel="noreferrer">Support</a>
</div>
</div>
</div>
@ -72,11 +75,11 @@
<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>.
<a href="https://twitter.com/rtfpessoa" target="_blank" rel="noopener" rel="noreferrer">@rtfpessoa</a>.
</p>
<p>
<a class="footer-list-link" href="https://github.com/rtfpessoa/diff2html#how-to-use"
target="_blank">FAQ</a>
<a class="footer-list-link" href="https://github.com/rtfpessoa/diff2html#how-to-use" target="_blank"
rel="noopener" rel="noreferrer">FAQ</a>
-
<a class="footer-list-link" href="https://diff2html.xyz">diff2html</a>
</p>
@ -89,7 +92,7 @@
"@type": "SoftwareSourceCode",
"name": "diff2html",
"author": "Rodrigo Fernandes",
"image": "https://diff2html.xyz/img/snapshot-3.png",
"image": "https://diff2html.xyz/images/snapshot-3.png",
"description": "Diff parser and pretty html generator.",
"codeRepository": "https://github.com/rtfpessoa/diff2html",
"programmingLanguage": "JavaScript",