From f8ea8a73b71686051078d585f6dd1968f1c13f33 Mon Sep 17 00:00:00 2001
From: Rodrigo Fernandes <rtfrodrigo@gmail.com>
Date: Sat, 16 Oct 2021 00:11:10 +0100
Subject: [PATCH] docs: Update user list

---
 .../templates/pages/index/content.handlebars  | 199 +++++++++++-------
 website/templates/pages/index/index.css       |  10 +
 2 files changed, 133 insertions(+), 76 deletions(-)

diff --git a/website/templates/pages/index/content.handlebars b/website/templates/pages/index/content.handlebars
index d4bb8fb0..4d758656 100644
--- a/website/templates/pages/index/content.handlebars
+++ b/website/templates/pages/index/content.handlebars
@@ -115,8 +115,46 @@
     <hr>
 
     <div id="users" class="container">
-        <h4 class="title is-size-4 is-spaced"><strong>Projects using diff2html</strong></h4>
+        <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>
@@ -131,19 +169,21 @@
                     </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>Check code style, security, duplication, complexity and coverage on every change.</p>
+                        <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>
@@ -158,6 +198,7 @@
                     </footer>
                 </div>
             </div>
+
             <div class="column is-one-quarter-widescreen is-flex">
                 <div class="box is-flex is-fullwidth is-vertical">
                     <header>
@@ -171,6 +212,7 @@
                     </footer>
                 </div>
             </div>
+
             <div class="column is-one-quarter-widescreen is-flex">
                 <div class="box is-flex is-fullwidth is-vertical">
                     <header>
@@ -180,242 +222,247 @@
                         <p>Show diffs between builds</p>
                     </section>
                     <footer>
-                        <a href="https://wiki.jenkins-ci.org/display/JENKINS/Last+Changes+Plugin" target="_blank"
+                        <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">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">kubeapps</p>
+                        <p class="is-size-5 has-text-weight-bold">code-annotation</p>
                     </header>
                     <section class="media-content">
-                        <p>A web-based UI for deploying and managing applications in Kubernetes clusters.</p>
+                        <p>Code Annotation Tool.</p>
                     </section>
                     <footer>
-                        <a href="https://kubeapps.com/" target="_blank" rel="noopener" rel="noreferrer">Website</a>
+                        <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">Hitchhiker</p>
+                        <p class="is-size-5 has-text-weight-bold">Chef Automate</p>
                     </header>
                     <section class="media-content">
-                        <p>A a Restful Api test tool.</p>
+                        <p>DevOps Dashboard for Complete Operational Visibility.</p>
                     </section>
                     <footer>
-                        <a href="http://www.hitchhiker-api.com/" target="_blank" rel="noopener"
-                            rel="noreferrer">Website</a>
+                        <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">growi</p>
+                        <p class="is-size-5 has-text-weight-bold">GraphQL Schema Diff</p>
                     </header>
                     <section class="media-content">
-                        <p>Team collaboration software using markdown.</p>
+                        <p>Detects dangerous and breaking changes in GraphQL schemas.</p>
                     </section>
                     <footer>
-                        <a href="https://growi.org/" target="_blank" rel="noopener" rel="noreferrer">Website</a>
+                        <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">crowi</p>
+                        <p class="is-size-5 has-text-weight-bold">cypress-plugin-snapshots</p>
                     </header>
                     <section class="media-content">
-                        <p>Markdown Wiki - Empower the team with sharing your knowledge.</p>
+                        <p>Plugin for snapshot tests in Cypress.io.</p>
                     </section>
                     <footer>
-                        <a href="http://site.crowi.wiki/" target="_blank" rel="noopener" rel="noreferrer">Website</a>
+                        <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">Wiki.js</p>
+                        <p class="is-size-5 has-text-weight-bold">git-explorer</p>
                     </header>
                     <section class="media-content">
-                        <p>A modern, lightweight and powerful wiki app built on Node.js.</p>
+                        <p>Offline-first support for previewing local git repositories.</p>
                     </section>
                     <footer>
-                        <a href="https://wiki.js.org/" target="_blank" rel="noopener" rel="noreferrer">Website</a>
+                        <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">code-annotation</p>
+                        <p class="is-size-5 has-text-weight-bold">edgar-monitor</p>
                     </header>
                     <section class="media-content">
-                        <p>Code Annotation Tool.</p>
+                        <p>A module that processes new Edgar filings and sends out notifications.</p>
                     </section>
                     <footer>
-                        <a href="https://github.com/src-d/code-annotation" target="_blank" rel="noopener"
+                        <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">Chef Automate</p>
+                        <p class="is-size-5 has-text-weight-bold">Simple Git</p>
                     </header>
                     <section class="media-content">
-                        <p>full suite of enterprise capabilities for maintaining continuous visibility into application,
-                            infrastructure, and security automation.</p>
+                        <p>A simple package to be able to drive GIT.</p>
                     </section>
                     <footer>
-                        <a href="https://automate.chef.io/" target="_blank" rel="noopener" rel="noreferrer">Website</a>
+                        <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">Camunda Modeler</p>
+                        <p class="is-size-5 has-text-weight-bold">jsreport</p>
                     </header>
                     <section class="media-content">
-                        <p>An integrated modeling solution for BPMN, DMN and CMMN based on bpmn.io.</p>
+                        <p>javascript based business reporting platform</p>
                     </section>
                     <footer>
-                        <a href="https://camunda.com/products/modeler" target="_blank" rel="noopener"
+                        <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">graphql-schema-diff</p>
+                        <p class="is-size-5 has-text-weight-bold">dendron</p>
                     </header>
                     <section class="media-content">
-                        <p>Returns the diff of two GraphQL schemas. Detects dangerous and breaking changes.</p>
+                        <p>Knowledge Management. Redefined.</p>
                     </section>
                     <footer>
-                        <a href="https://github.com/fabsrc/graphql-schema-diff" target="_blank" rel="noopener"
-                            rel="noreferrer">View GitHub</a>
+                        <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">cypress-plugin-snapshots</p>
+                        <p class="is-size-5 has-text-weight-bold">jest-stare</p>
                     </header>
                     <section class="media-content">
-                        <p>Plugin for snapshot tests in Cypress.io .</p>
+                        <p>Jest HTML Reporter and Results Processor</p>
                     </section>
                     <footer>
-                        <a href="https://github.com/meinaart/cypress-plugin-snapshots" target="_blank" rel="noopener"
-                            rel="noreferrer">View GitHub</a>
+                        <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">git-explorer</p>
+                        <p class="is-size-5 has-text-weight-bold">Wiki.js</p>
                     </header>
                     <section class="media-content">
-                        <p>Offline-first support for previewing and comparing branches in a local git repository.</p>
+                        <p>The most powerful and extensible open source Wiki software</p>
                     </section>
                     <footer>
-                        <a href="https://github.com/thescientist13/git-explorer" target="_blank" rel="noopener"
-                            rel="noreferrer">View GitHub</a>
+                        <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">diff-pane</p>
+                        <p class="is-size-5 has-text-weight-bold">Salto</p>
                     </header>
                     <section class="media-content">
-                        <p>Atom - Diff two panes.</p>
+                        <p>Understand Your Business Apps' Configuration</p>
                     </section>
                     <footer>
-                        <a href="https://github.com/t-ari/diff-pane" target="_blank" rel="noopener"
-                            rel="noreferrer">View GitHub</a>
+                        <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">node-giff</p>
+                        <p class="is-size-5 has-text-weight-bold">intuit Design Systems CLI</p>
                     </header>
                     <section class="media-content">
-                        <p>Display git diff on browser.</p>
+                        <p>A CLI toolbox for creating design systems</p>
                     </section>
                     <footer>
-                        <a href="https://github.com/do7be/node-giff" target="_blank" rel="noopener"
-                            rel="noreferrer">View GitHub</a>
+                        <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">edgar-monitor</p>
+                        <p class="is-size-5 has-text-weight-bold">Camunda Modeler</p>
                     </header>
                     <section class="media-content">
-                        <p>A module that processes new Edgar filings and sends out notifications.</p>
+                        <p>Automate processes and decisions in a modern, standards-based way</p>
                     </section>
                     <footer>
-                        <a href="https://github.com/buzzfeed-openlab/edgar-monitor" target="_blank" rel="noopener"
-                            rel="noreferrer">View GitHub</a>
+                        <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">node-git</p>
+                        <p class="is-size-5 has-text-weight-bold">igit</p>
                     </header>
                     <section class="media-content">
-                        <p>Execute Git Command by Node.js.</p>
+                        <p>Tool for managing pull requests</p>
                     </section>
                     <footer>
-                        <a href="https://github.com/liangshuai/node-git" target="_blank" rel="noopener"
-                            rel="noreferrer">View GitHub</a>
+                        <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">Simple Git</p>
+                        <p class="is-size-5 has-text-weight-bold">Crowi</p>
                     </header>
                     <section class="media-content">
-                        <p>A simple package to be able to drive GIT.</p>
+                        <p>Empower the team with sharing your knowledge</p>
                     </section>
                     <footer>
-                        <a href="https://github.com/mauricioszabo/simple-git" target="_blank" rel="noopener"
-                            rel="noreferrer">View GitHub</a>
+                        <a href="https://site.crowi.wiki/" target="_blank" rel="noopener"
+                            rel="noreferrer">Website</a>
                     </footer>
                 </div>
             </div>
@@ -438,4 +485,4 @@
         </a>
     </div>
 
-</section>
\ No newline at end of file
+</section>
diff --git a/website/templates/pages/index/index.css b/website/templates/pages/index/index.css
index fdf0891b..30489032 100644
--- a/website/templates/pages/index/index.css
+++ b/website/templates/pages/index/index.css
@@ -42,6 +42,12 @@
   cursor: pointer;
 }
 
+.flex {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
 .is-fullwidth {
   flex-grow: 1;
 }
@@ -49,3 +55,7 @@
 .is-vertical {
   flex-direction: column;
 }
+
+.align-middle {
+  vertical-align: middle;
+}