Support Refactor

.gitignore

@@ -2,4 +2,6 @@ node_modules
 npm-debug.log
 build
 generated
+components/support/support-backers.json
+components/support/support-sponsors.json
 .antwar

components/support/support-additional.json

@@ -0,0 +1,16 @@
+[
+  {
+    "name": "MoonMail",
+    "username": "moonmail",
+    "tier": "sponsor",
+    "avatar": "https://static.moonmail.io/moonmail-logo.svg",
+    "website": "https://moonmail.io/?utm_source=webpack.js.org"
+  },
+  {
+    "name": "MONEI",
+    "username": "monei",
+    "tier": "sponsor",
+    "avatar": "https://static.monei.net/monei-logo.svg",
+    "website": "https://monei.net/?utm_source=webpack.js.org"
+  }
+]

components/support/support-style.scss

@@ -4,32 +4,52 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  padding:10px 5px;
+  padding: 1em 0.5em;
 
   &__item {
-    margin:0 5px;
+    position: relative;
+    margin: 0 5px 5px 5px;
+  }
+
+  &__sponsors-avatar {
+    height: 64px;
+  }
+
+  &__backers-avatar {
+    width: 62px;
+    height: 62px;
+    border-radius: 50%;
+    border: 2px solid white;
+    overflow: hidden;
+  }
+
+  &__outline {
+    position: absolute;
+    top: 0;
+    margin: -2px;
+    width: calc(100% + 4px);
+    height: calc(100% - 2px);
+    border-radius: 50%;
+    border: 2px solid rgb(112, 202, 10);
   }
 
   &__bottom {
-    flex:0 0 100%;
-    margin-top:10px;
+    flex: 0 0 100%;
+    margin-top: 1em;
   }
 
   &__button {
-    display:inline-block;
-    padding:0.4em 1em;
-    border:2px solid getColor(denim);
-    color:getColor(denim);
-    border-radius:1.25em;
-    transition:all 250ms;
+    display: inline-block;
+    padding: 0.4em 1em;
+    text-transform: uppercase;
+    color: getColor(denim);
+    border: 1px solid getColor(denim);
+    border-radius: 1.25em;
+    transition: all 250ms;
 
     &:hover {
-      background:getColor(denim);
-      color:getColor(white);
+      background: getColor(denim);
+      color: getColor(white);
     }
   }
-  &__missing {
-    display: flex;
-    align-items: center;
-  }
-}
+}

components/support/support.jsx

@@ -1,56 +1,40 @@
 import React from 'react';
+import Additional from './support-additional.json';
 import './support-style';
 
-const MISSING_SPONSORS = [
-  {
-    index: 33,
-    name: 'MoonMail',
-    title: 'Email Marketing Software',
-    logo: 'https://static.moonmail.io/moonmail-logo.svg',
-    url: 'https://moonmail.io/?utm_source=webpack.js.org'
-  },
-  {
-    index: 34,
-    name: 'MONEI',
-    title: 'Best payment gateway rates',
-    logo: 'https://static.monei.net/monei-logo.svg',
-    url: 'https://monei.net/?utm_source=webpack.js.org'
-  }
-];
+export default class Support extends React.Component {
+  render() {
+    let { number, type } = this.props;
+    let supporters = require(`./support-${type}.json`);
 
-export default ({number, type}) => {
-  const supportItems = [...Array(number)].map((x, i) =>
-    <a key={ i }
-       className="support__item"
-       href={ `https://opencollective.com/webpack/${type}/${i}/website?requireActive=false` }
-       target="_blank">
-      <img
-        src={ `//opencollective.com/webpack/${type}/${i}/avatar?requireActive=false` }
-        alt={ `${type} avatar` } />
-    </a>
-  );
+    if (type === 'sponsors') {
+      supporters.push(...Additional);
+    }
 
-  // add missing sponsors
-  if (type === 'sponsor') {
-    MISSING_SPONSORS.forEach(sponsor => {
-      supportItems.splice(sponsor.index, 0, (
-        <a key={ sponsor.name }
-           className="support__item support__missing"
-           href={ sponsor.url }
-           target="_blank"
-           title={ sponsor.title }>
-          <img
-            src={ sponsor.logo }
-            height={ 45 }
-            alt={ sponsor.name } />
-        </a>
-      ));
-    });
-  }
+    return (
+      <div className="support">
+        {
+          supporters.slice(0, number).map((supporter, index) => (
+            <a key={ supporter.id || index }
+               className="support__item"
+               title={ supporter.username }
+               target="_blank"
+               href={ supporter.website || `https://opencollective.com/${supporter.username}` }>
+              <img
+                className={ `support__${type}-avatar` }
+                src={ supporter.avatar }
+                alt={ `${supporter.username}'s avatar` } />
+              { type === 'backers' ? <figure className="support__outline" /> : null }
+            </a>
+          ))
+        }
 
-  return (
-    <div className="support">
-      {supportItems}
-    </div>
-  );
-};
+        <div className="support__bottom">
+          <a className="support__button" href="https://opencollective.com/webpack#support">
+            Become a { type.replace(/s$/, '') }
+          </a>
+        </div>
+      </div>
+    );
+  }
+}

content/api/plugins/tapable.md

@@ -16,8 +16,7 @@ However, in addition to this, `Tapable` allows you to have access to the "emitte
 * `plugin(name:string, handler:function)` - This allows a custom plugin to register into a **Tapable instance**'s event.
 This acts as the same as `on()` of `EventEmitter`, for registering a handler/listener to do something when the signal/event happens.
 
-* `apply(…pluginInstances: (AnyPlugin|function)[])` - `AnyPlugin` should be subclass of [AbstractPlugin](https://github.com/webpack/webpack/blob/master/lib/AbstractPlugin.js), or a class (or object, rare case) has an `apply` method, or just a function with some registration code inside.
-This method is just to **apply** plugins' definition, so that the real event listeners can be registered into the **Tapable instance**'s registry.
+* `apply(…pluginInstances: (AnyPlugin|function)[])` - `AnyPlugin` should be a class (or, rarely, an object) that has an `apply` method, or just a function with some registration code inside. This method is just to **apply** plugins' definition, so that the real event listeners can be registered into the **Tapable instance**'s registry.
 
 * `applyPlugins*(name:string, …)` - The **Tapable instance** can apply all the plugins under a particular hash using these functions.
 These group of method act like `emit()` of `EventEmitter`, to control the event emission meticulously with various strategy for various use cases.
@@ -36,8 +35,10 @@ The different `applyPlugins*` methods cover the following use cases:
 
 * Quit running plugins on bail: that is, once one plugin returns non-`undefined`, jump out of the run flow and return *the return of that plugin*. This sounds like `once()` of `EventEmitter` but is totally different.
 
+
 ## Example
-One of webpack's **Tapable instances**, [Compiler](./compiler), is responsible for compiling the webpack configuration object and returning a [Compilation](./compilation) instance. When the Compilation instance runs, it creates the required bundles.
+
+One of webpack's **Tapable instances**, [Compiler](/api/plugins/compiler), is responsible for compiling the webpack configuration object and returning a [Compilation](/api/plugins/compilation) instance. When the Compilation instance runs, it creates the required bundles.
 
 See below is a simplified version of how this looks using `Tapable`.
 

content/configuration/devtool.md

@@ -10,7 +10,7 @@ contributors:
 
 This option controls if and how source maps are generated.
 
-Use the [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin.md) for a more fine grained configuration. See the [`source-map-loader`](/loaders/source-map-loader/) to deal with existing source maps.
+Use the [`SourceMapDevToolPlugin`](/plugins/source-map-dev-tool-plugin) for a more fine grained configuration. See the [`source-map-loader`](/loaders/source-map-loader) to deal with existing source maps.
 
 ## `devtool`
 

content/plugins/limit-chunk-count-plugin.md

@@ -47,7 +47,7 @@ module.exports = {
 
 This will generate multiple entry chunks: `p1.entry.chunk.js`, `p2.entry.chunk.js` and `p3.entry.chunk.js`. But additional chunks can be shared by them.
 
-If your entry chunks have some modules in common, there is a cool plugin for this. The [`CommonsChunkPlugin`](./commons-chunk-plugin) identifies common modules and put them into a commons chunk. You need to add two script tags to your page, one for the commons chunk and one for the entry chunk.
+If your entry chunks have some modules in common, there is a cool plugin for this. The [`CommonsChunkPlugin`](/plugins/commons-chunk-plugin) identifies common modules and put them into a commons chunk. You need to add two script tags to your page, one for the commons chunk and one for the entry chunk.
 
 ``` javascript
 var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
@@ -110,4 +110,4 @@ module.exports = {
     new CommonsChunkPlugin("commons", "commons.js")
   ]
 };
-```
+```

package.json

@@ -31,7 +31,7 @@
     "fetch": "scripts/fetch.sh",
     "init:generated": "mkdirp ./generated/loaders && mkdirp ./generated/plugins ",
     "lint": "run-s lint:*",
-    "lint:links": "hyperlink -r --exclude https://opencollective.com/webpack/*/*/website build/index.html | ./scripts/check-links.js --skip 10",
+    "lint:links": "hyperlink -r build/index.html | ./scripts/check-links.js --skip 10",
     "lint:js": "eslint . --ext .js --ext .jsx",
     "lint:markdown": "markdownlint --config ./.markdownlint.json *.md ./content/**/*.md",
     "lint:social": "alex ./**/*.md",

scripts/check-links.js

@@ -38,7 +38,8 @@ function checkLinks(args) {
 }
 
 function formatFailures(failures) {
-  return failures.map(function(failure) {
-    return failure.name + '\n' + failure.diag.actual + ' at ' + failure.diag.at;
+  return failures.map(failure => {
+    let { diag = {} } = failure;
+    return failure.name + '\n' + diag.actual + ' at ' + diag.at;
   }).join('\n\n');
 }

scripts/fetch.sh

@@ -7,19 +7,13 @@ cp -rf ./content/loaders/ ./generated/loaders
 mkdir -p ./generated/plugins
 cp -rf ./content/plugins/ ./generated/plugins
 
-# Fetches github.com/webpack/*-loader repositories.
-# Skipped because they are below contrib now.
-# ./scripts/fetch_package_names.js "webpack" "-loader" | ./scripts/fetch_package_files.js "README.md" "./generated/loaders"
-
-# Fetches github.com/webpack/*-webpack-plugin repositories.
-# Skipped because they are below contrib now.
-# ./scripts/fetch_package_names.js "webpack" "-webpack-plugin" | ./scripts/fetch_package_files.js "README.md" "./generated/plugins"
-
-# Fetches github.com/webpack-contrib/*-loader repositories
+# Fetch webpack-contrib (and various other) loader repositories
 ./scripts/fetch_package_names.js "webpack-contrib" "-loader" | ./scripts/fetch_package_files.js "README.md" "./generated/loaders"
+./scripts/fetch_package_names.js "babel" "babel-loader" | ./scripts/fetch_package_files.js "README.md" "./generated/loaders"
+./scripts/fetch_package_names.js "peerigon" "extract-loader" | ./scripts/fetch_package_files.js "README.md" "./generated/loaders"
 
-# Fetches github.com/webpack-contrib/*-webpack-plugin repositories
+# Fetch webpack-contrib (and various other) plugin repositories
 ./scripts/fetch_package_names.js "webpack-contrib" "-webpack-plugin" | ./scripts/fetch_package_files.js "README.md" "./generated/plugins"
 
-./scripts/fetch_package_names.js "babel" "babel-loader" | ./scripts/fetch_package_files.js "README.md" "./generated/loaders"
-./scripts/fetch_package_names.js "peerigon" "extract-loader" | ./scripts/fetch_package_files.js "README.md" "./generated/loaders"
+# Fetch sponsors and backers from opencollective
+./scripts/fetch_supporters.js

scripts/fetch_supporters.js

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const request = require('request');
+
+request('https://opencollective.com/webpack/sponsors.json', (err, response, body) => {
+  if (err) {
+    console.error('Failed to fetch sponsors: ', err);
+
+  } fs.writeFile('./components/support/support-sponsors.json', body, err => {
+    if (err) console.error('Failed to write sponsors file: ', err);
+  });
+});
+
+request('https://opencollective.com/webpack/backers.json', (err, response, body) => {
+  if (err) {
+    console.error('Failed to fetch backers: ', err);
+
+  } fs.writeFile('./components/support/support-backers.json', body, err => {
+    if (err) console.error('Failed to write backers file: ', err);
+  });
+});