[DO NOT MERGE] show all sponsors on site

- change ordering: sponsors, then backers
- blacklist bad actors
- rename `default.html` to `default.liquid`, because it's a Liquid template.
- fiddles with the CSS a bit

.eslintrc.yml

@@ -27,6 +27,7 @@ overrides:
       - test/integration/options/watch.spec.js
       - test/integration/helpers.js
       - lib/growl.js
+      - docs/_data/**/*.js
     parserOptions:
       ecmaVersion: 2018
     env:

docs/_data/blacklist.json

@@ -0,0 +1,21 @@
+[
+  "cheap-writing-service",
+  "emailmarketingservices-io",
+  "device-tricks1",
+  "my-true-media",
+  "yiannakis-ttafounas-ttafounas",
+  "writerseperhour",
+  "casinotop-com",
+  "casino-topp",
+  "casinoutanreg",
+  "supercazino-ro",
+  "igor-noskov",
+  "blue-link-seo",
+  "casino-online",
+  "domywriting",
+  "writemypaper4me",
+  "trust-my-paper",
+  "seowebsitetraffic-net",
+  "pfannen-test",
+  "mochajs"
+]

docs/_data/supporters.js

@@ -0,0 +1,115 @@
+#!/usr/bin/env node
+'use strict';
+
+const debug = require('debug')('mocha:docs:data:supporters');
+const needle = require('needle');
+const blacklist = new Set(require('./blacklist.json'));
+
+const API_ENDPOINT = 'https://api.opencollective.com/graphql/v2';
+
+const query = `query account($limit: Int, $offset: Int, $slug: String) {
+  account(slug: $slug) {
+    orders(limit: $limit, offset: $offset) {
+      limit
+      offset
+      totalCount
+      nodes {
+        fromAccount {
+          name
+          slug
+          website
+          avatar: imageUrl(height:64)
+          type
+        }
+        totalDonations {
+          value
+        }
+        createdAt
+      }
+    }
+  }
+}`;
+
+const graphqlPageSize = 1000;
+
+const nodeToSupporter = node => ({
+  name: node.fromAccount.name,
+  slug: node.fromAccount.slug,
+  website: node.fromAccount.website,
+  avatar: node.fromAccount.avatar,
+  firstDonation: node.createdAt,
+  totalDonations: node.totalDonations.value * 100,
+  type: node.fromAccount.type
+});
+
+/**
+ * Retrieves donation data from OC
+ *
+ * Handles pagination
+ * @param {string} slug - Collective slug to get donation data from
+ * @returns {Promise<Object[]>} Array of raw donation data
+ */
+const getAllOrders = async (slug = 'mochajs') => {
+  let allOrders = [];
+  const variables = {limit: graphqlPageSize, offset: 0, slug};
+
+  // Handling pagination if necessary (2 pages for ~1400 results in May 2019)
+  while (true) {
+    const result = await needle(
+      'post',
+      API_ENDPOINT,
+      {query, variables},
+      {json: true}
+    );
+    const orders = result.body.data.account.orders.nodes;
+    allOrders = [...allOrders, ...orders];
+    variables.offset += graphqlPageSize;
+    if (orders.length < graphqlPageSize) {
+      debug('retrieved %d orders', allOrders.length);
+      return allOrders;
+    } else {
+      debug(
+        'loading page %d of orders...',
+        Math.floor(variables.offset / graphqlPageSize)
+      );
+    }
+  }
+};
+
+module.exports = async () => {
+  const orders = await getAllOrders();
+  // Deduplicating supporters with multiple orders
+  const uniqueSupporters = new Map();
+
+  const supporters = orders
+    .map(nodeToSupporter)
+    .filter(supporter => !blacklist.has(supporter.slug))
+    .reduce((supporters, supporter) => {
+      if (uniqueSupporters.has(supporter.slug)) {
+        // aggregate donation totals
+        uniqueSupporters.get(supporter.slug).totalDonations +=
+          supporter.totalDonations;
+        return supporters;
+      }
+      uniqueSupporters.set(supporter.slug, supporter);
+      return [...supporters, supporter];
+    }, [])
+    .sort((a, b) => b.totalDonations - a.totalDonations)
+    .reduce(
+      (supporters, supporter) => {
+        supporters[
+          supporter.type === 'INDIVIDUAL' ? 'backers' : 'sponsors'
+        ].push(supporter);
+        return supporters;
+      },
+      {sponsors: [], backers: []}
+    );
+
+  debug(
+    'found %d valid backers and %d valid sponsors (%d total)',
+    supporters.backers.length,
+    supporters.sponsors.length,
+    supporters.backers.length + supporters.sponsors.length
+  );
+  return supporters;
+};

docs/_includes/backers.md

@@ -1,7 +1,11 @@
 ## Backers
 
-Find Mocha helpful?  Become a [backer](https://opencollective.com/mochajs#support) and support Mocha with a monthly donation.
+Find Mocha helpful? Become a [backer](https://opencollective.com/mochajs#support) and support Mocha with a monthly donation.
 
-<!-- markdownlint-disable MD034 -->
-{% for i in (0..29) %}[![](https://opencollective.com/mochajs/backer/{{ i }}/avatar.jpg)](https://opencollective.com/mochajs/backer/{{ i }}/website){: target="_blank" rel="noopener"}{% endfor %}
-{: .image-list id="_backers" }
+{% comment %}
+Do not remove whitespace below!
+{% endcomment %}
+
+<ul class="image-list" id="backers">
+{% for supporter in supporters.backers %}<li><a href="{{ supporter.website }}" target="_blank" rel="noopener" title="{{ supporter.name }}"><img src="{{ supporter.avatar }}" alt="{{ supporter.name }}" /></a></li>{% endfor %}
+</ul>

docs/_includes/default.liquid

@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>{{ title }}</title>
+    <link
+      rel="preload"
+      href="https://opencollective.com/static/images/user.svg"
+      as="image"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="css/normalize.css" />
+    <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="css/prism.css" />
+    <link rel="icon" href="favicon.ico" />
+
+    <!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <![endif]-->
+  </head>
+
+  <body>
+    <header id="_header">
+      <h1>
+        <a href="/">
+          <img id="mocha-logo" src="/images/mocha-logo.svg" alt="Mocha logo" />
+        </a>
+      </h1>
+      <p id="tag"><em>simple</em>, <em>flexible</em>, <em>fun</em></p>
+    </header>
+
+    <main id="content">{{ content }}</main>
+
+    <aside class="sponsorship">
+      <a
+        href="https://matomo.org/"
+        rel="external noopener"
+        title="Mocha is sponsored by Matomo"
+      >
+        <img src="images/matomo-logo.png?trim" alt="Matomo logo" />
+      </a>
+      <a
+        title="Mocha is an OpenJS Foundation Project"
+        href="https://openjsf.org"
+        rel="external noopener"
+      >
+        <img
+          src="/images/openjsf-logo.svg"
+          width="300"
+          height="94"
+          alt="OpenJS Foundation Logo"
+        />
+      </a>
+      <a
+        href="https://wallabyjs.com"
+        rel="external noopener"
+        title="Mocha is sponsored by Wallaby"
+      >
+        <figure id="wallaby-logo">
+          <img src="images/wallaby-logo.png?trim" alt="Wallaby logo" />
+          <figcaption>Wallaby</figcaption>
+        </figure>
+      </a>
+    </aside>
+
+    <footer>
+      <div id="copyright-notice">
+        <a rel="home" href="https://mochajs.org/">mochajs.org</a> is licensed
+        under a
+        <a
+          rel="license external noopener"
+          href="https://creativecommons.org/licenses/by/4.0/"
+          >Creative Commons Attribution 4.0 International License</a
+        >.
+
+        <p>
+          Copyright
+          <a href="https://openjsf.org" rel="external noopener"
+            >OpenJS Foundation</a
+          >
+          and Mocha contributors. All rights reserved. The
+          <a href="https://openjsf.org" rel="external noopener"
+            >OpenJS Foundation</a
+          >
+          has registered trademarks and uses trademarks. For a list of
+          trademarks of the
+          <a href="https://openjsf.org" rel="external noopener"
+            >OpenJS Foundation</a
+          >, please see our
+          <a
+            href="https://trademark-policy.openjsf.org/"
+            rel="external noopener"
+            >Trademark Policy</a
+          >
+          and
+          <a href="https://trademark-list.openjsf.org/" rel="external noopener"
+            >Trademark List</a
+          >. Trademarks and logos not indicated on the
+          <a href="https://trademark-list.openjsf.org" rel="external noopener"
+            >list of OpenJS Foundation trademarks</a
+          >
+          are trademarks™ or registered® trademarks of their respective holders.
+          Use of them does not imply any affiliation with or endorsement by
+          them.
+        </p>
+      </div>
+
+      <div id="external-links">
+        <ul id="openjsf-links">
+          <li>
+            <a href="https://openjsf.org/" rel="external noopener"
+              >The OpenJS Foundation</a
+            >
+          </li>
+          <li>
+            <a href="https://terms-of-use.openjsf.org/" rel="external noopener"
+              >Terms of Use</a
+            >
+          </li>
+          <li>
+            <a
+              href="https://privacy-policy.openjsf.org/"
+              rel="external noopener"
+              >Privacy Policy</a
+            >
+          </li>
+          <li>
+            <a href="https://bylaws.openjsf.org/" rel="external noopener"
+              >OpenJS Foundation Bylaws</a
+            >
+          </li>
+          <li>
+            <a
+              href="https://trademark-policy.openjsf.org/"
+              rel="external noopener"
+              >Trademark Policy</a
+            >
+          </li>
+          <li>
+            <a
+              href="https://trademark-list.openjsf.org/"
+              rel="external noopener"
+              >Trademark List</a
+            >
+          </li>
+          <li>
+            <a
+              href="https://www.linuxfoundation.org/cookies/"
+              rel="external noopener"
+              >Cookie Policy</a
+            >
+          </li>
+        </ul>
+        <div class="netlify-badge">
+          <a href="https://www.netlify.com">
+            <img
+              src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg"
+            />
+          </a>
+        </div>
+      </div>
+      <dl id="last-modified" class="dl-inline">
+        <dt>Last updated</dt>
+        <dd>
+          <time
+            itemprop="lastModified"
+            datetime="{{ 'now' | date: '%Y-%m-%dT%H:%M:%SZ' }}"
+          >
+            {{ 'now' | date: '%a %b %d %H:%M:%S %Y' }}
+          </time>
+        </dd>
+      </dl>
+    </footer>
+
+    <script src="js/avatars.js"></script>
+  </body>
+</html>

docs/_includes/sponsors.md

@@ -2,9 +2,10 @@
 
 Use Mocha at Work? Ask your manager or marketing team if they'd help [support](https://opencollective.com/mochajs#support) our project. Your company's logo will also be displayed on [npmjs.com](http://npmjs.com/package/mocha) and our [GitHub repository](https://github.com/mochajs/mocha#sponsors).
 
-<!-- markdownlint-disable MD034 -->
+{% comment %}
+Do not remove whitespace below!
+{% endcomment %}
 
-{% for i in (0..15) %}[![](https://opencollective.com/mochajs/sponsor/{{ i }}/avatar.png)](https://opencollective.com/mochajs/sponsor/{{ i }}/website){: target="\_blank"} {% endfor %}
-{: .image-list .faded-images}
-
-<script src="js/avatars.js"></script>
+<ul class="image-list" id="sponsors">
+{% for supporter in supporters.sponsors %}<li><a href="{{ supporter.website }}" target="_blank" rel="noopener" title="{{ supporter.name }}"><img src="{{ supporter.avatar }}" alt="{{ supporter.name }}" /></a></li>{% endfor %}
+</ul>

docs/css/style.css

@@ -74,21 +74,30 @@ nav.badges a + a {
   margin-left: 3px;
 }
 
-.image-list {
+ul.image-list {
   overflow: hidden;
   text-align: center;
+  list-style: none;
+  column-count: 1;
 }
 
-.image-list a {
+ul.image-list li {
+  border-bottom: none;
   display: inline-block;
-  margin: 6px;
+  margin: 2px;
+  padding: 0;
 }
 
-.image-list a img {
+ul.image-list li a img {
   display: block;
   height: 64px;
 }
 
+ul#backers.image-list li a img {
+  width: 64px;
+  clip-path: inset(0, 0, 64px, 64px);
+}
+
 .faded-images {
   background-color: #ddd;
   border: 1px solid;