Use ESM in the configuration examples

Author: moonglum

src/css.md

@@ -10,13 +10,10 @@ faucet-pipeline-css offers bundling for files written in CSS.
 To enable this **beta module** you need to add the following lines to your
 faucet.config.js:
 
-```
-module.exports = {
-    // ...
-    plugins: [
-        require("faucet-pipeline-css")
-    ]
-}
+```js
+export const plugins = [
+    require("faucet-pipeline-css")
+];
 ```
 
 The configuration is an array of bundles you want to create. Each entry of the
@@ -25,15 +22,13 @@ compiled, and `target` is the file that should be created (the path is, of
 course, modified a little when you use fingerprinting):
 
 ```js
-module.exports = {
-    css: [{
-        source: "./example.css",
-        target: "./output/example.css"
-    }, {
-        source: "./example2.css",
-        target: "./output/subfolder/example2.css"
-    }]
-};
+export const css = [{
+    source: "./example.css",
+    target: "./output/example.css"
+}, {
+    source: "./example2.css",
+    target: "./output/subfolder/example2.css"
+}];
 ```
 
 To support fingerprinting of images and fonts, use `faucet-pipeline-static` to
@@ -61,27 +56,23 @@ If you don't want to prefix your CSS even though you have a Browserslist
 configuration, you can deactivate it per bundle:
 
 ```js
-module.exports = {
-    css: [{
-        source: "./example.scss",
-        target: "./output/example.css",
-        browserslist: false
-    }]
-};
+export const css = [{
+    source: "./example.scss",
+    target: "./output/example.css",
+    browserslist: false
+}];
 ```
 
 If you use groups in your Browserslist, faucet-pipeline uses the `default` group
 by default. If you want to choose a different one, you can, for example, set it to
 "legacy" like this:
 
 ```js
-module.exports = {
-    css: [{
-        source: "./example.scss",
-        target: "./output/example.css",
-        browserslist: "legacy"
-    }]
-};
+export const css = [{
+    source: "./example.scss",
+    target: "./output/example.css",
+    browserslist: "legacy"
+}];
 ```
 
 ## Compacting

src/faq.md

@@ -11,16 +11,14 @@ This typically happens when importing a module that has already been bundled or
 otherwise provides a distribution. The solution is to skip transpilation there:
 
 ```javascript
-module.exports = {
-    js: [{
-        source: "./index.js",
-        target: "./dist/bundle.js",
-        esnext: {
-            // ...
-            exclude: ["jquery"]
-        }
-    }]
-}
+export const js = [{
+    source: "./index.js",
+    target: "./dist/bundle.js",
+    esnext: {
+        // ...
+        exclude: ["jquery"]
+    }
+}];
 ```
 
 (This is necessary because faucet assumes we're consuming ES6 modules by

src/images.md

@@ -13,12 +13,10 @@ folder, and `target` is the target folder.
 The resulting configuration might look something like this:
 
 ```js
-module.exports = {
-    images: [{
-        source: "./images",
-        target: "./public/images"
-    }]
-};
+export const images = [{
+    source: "./images",
+    target: "./public/images"
+}];
 ```
 
 This will copy the images in the supported formats by default. The files will
@@ -36,27 +34,23 @@ i.e. those for which the function returns `true` – will be copied.
 In this example, we only optimize `.svg` files:
 
 ```js
-module.exports = {
-    images: [{
-        source: "./images",
-        target: "./public/images",
-        filter: file => file.endsWith(".svg")
-    }]
-}
+export const images = [{
+    source: "./images",
+    target: "./public/images",
+    filter: file => file.endsWith(".svg")
+}];
 ```
 
 ## Configuring the quality
 
 You can also provide a quality as a value between 1 and 100.
 
 ```js
-module.exports = {
-    images: [{
-        source: "./images",
-        target: "./public/images",
-        quality: 60
-    }]
-};
+export const images = [{
+    source: "./images",
+    target: "./public/images",
+    quality: 60
+}];
 ```
 
 This will configure the quality of all lossy formats (all formats except PNG and
@@ -67,13 +61,11 @@ SVG). The quality is set to a 50 (AVIF/WebP) or 80 (PNG/JPG) by default.
 You can output the image in one of the supported formats.
 
 ```js
-module.exports = {
-    images: [{
-        source: "./images",
-        target: "./public/images",
-        format: "webp"
-    }]
-};
+export const images = [{
+    source: "./images",
+    target: "./public/images",
+    format: "webp"
+}];
 ```
 
 Note that SVGs can be converted to all other formats. But converting a vector
@@ -84,13 +76,11 @@ image format to SVG will result in an error.
 You can add a suffix to the output name:
 
 ```js
-module.exports = {
-    images: [{
-        source: "./images",
-        target: "./public/images",
-        suffix: "-optimized"
-    }]
-};
+export const images = [{
+    source: "./images",
+    target: "./public/images",
+    suffix: "-optimized"
+}];
 ```
 
 This will output a file named `foo.png` as `foo-optimized.png`. This is
@@ -103,14 +93,12 @@ To scale the images, you can provide a scaling factor. To create a version half
 the size, with the suffix `-small` you can use the following configuration:
 
 ```js
-module.exports = {
-    images: [{
-        source: "./images",
-        target: "./public/images",
-        scale: 0.5,
-        suffix: "-small"
-    }]
-};
+export const images = [{
+    source: "./images",
+    target: "./public/images",
+    scale: 0.5,
+    suffix: "-small"
+}];
 ```
 
 You can also provide a target width and/or height. By default, the pipeline
@@ -120,32 +108,28 @@ create files with the suffix `-thumbnail` with a maximum width of 300 and a
 maximum height of 300, keeping the ratio.
 
 ```js
-module.exports = {
-    images: [{
-        source: "./images",
-        target: "./public/images",
-        width: 300,
-        height: 300,
-        suffix: "-thumbnail"
-    }]
-};
+export const images = [{
+    source: "./images",
+    target: "./public/images",
+    width: 300,
+    height: 300,
+    suffix: "-thumbnail"
+}];
 ```
 
 You can also resize without keeping the ratio -- the resulting image will have
 the exact dimension you specify. The image will be cropped vertically or
 horizontally so that no empty space remains.
 
 ```js
-module.exports = {
-    images: [{
-        source: "./images",
-        target: "./public/images",
-        width: 300,
-        height: 300,
-        crop: true,
-        suffix: "-square"
-    }]
-};
+export const images = [{
+    source: "./images",
+    target: "./public/images",
+    width: 300,
+    height: 300,
+    crop: true,
+    suffix: "-square"
+}];
 ```
 
 ## Autorotate
@@ -154,11 +138,9 @@ You can configure the pipeline to rotate images automatically according to their
 EXIF data:
 
 ```js
-module.exports = {
-    images: [{
-        source: "./images",
-        target: "./public/images",
-        autorotate: true
-    }]
-};
+export const images = [{
+    source: "./images",
+    target: "./public/images",
+    autorotate: true
+}];
 ```

src/index.md

@@ -14,23 +14,29 @@ details.
 Creating a CSS bundle from [Sass](http://sass-lang.com) modules:
 
 ```javascript
+export const sass = [{
     source: "./styles/index.scss",
     target: "./dist/bundle.css"
+}];
 ```
 
 Bundling and transpiling JavaScript:
 
 ```javascript
+export const js = [{
     source: "./src/index.js",
     target: "./dist/bundle.js",
     esnext: true // activates ES6 transpiler
+}];
 ```
 
 Fingerprinting arbitrary files, like fonts and images:
 
 ```javascript
+export const static = [{
     source: "./assets",
     target: "./dist/assets"
+}];
 ```
 
 
@@ -48,12 +54,10 @@ Configuration resides in `faucet.config.js` – in this case, we want to bundle
 our JavaScript::
 
 ```javascript
-module.exports = {
-    js: [{
-        source: "./src/index.js",
-        target: "./dist/bundle.js"
-    }]
-};
+export const js = [{
+    source: "./src/index.js",
+    target: "./dist/bundle.js"
+}];
 ```
 
 Let's create two source files within the `src` directory, `index.js` and