feat(gatsby-plugin-subfont): Make async, add configurable opti… (#21768)

Add gatsby-plugin-subfont configurable option feature
Update subfont version

Co-authored-by: Ward Peeters <ward@coding-tech.com>

packages/gatsby-plugin-subfont/README.md

@@ -17,6 +17,38 @@ If you want the ability to run font subsetting locally you'l need Python and ins
 ```javascript
 // In your gatsby-config.js
 module.exports = {
-  plugins: [`gatsby-plugin-subfont`],
+  plugins: [
+    {
+      resolve: `gatsby-plugin-subfont`,
+      options: {
+        silent: true,
+        fallback: false,
+        inlineFonts: true,
+      },
+    },
+  ],
 }
 ```
+
+## Options
+
+See [subfont](https://github.com/Munter/subfont/blob/4b5a59afd17008ca35b6c32b52e3e922159e22fc/lib/subfont.js#L10) for a full list of options.
+
+| Name            | Default                 | Description                                                                                                       |
+| --------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `root`          | `public`                | Path to your web root                                                                                             |
+| `canonicalRoot` |                         | URI root where the site will be deployed. Must be either an absolute, a protocol-relative, or a root-relative url |
+| `output`        |                         | Directory where results should be written to                                                                      |  |  |
+| `fallbacks`     | `true`                  | Include fallbacks so the original font will be loaded when dynamic content gets injected at runtime.              |
+| `dynamic`       | `false`                 | Also trace the usage of fonts in a headless browser with JavaScript enabled                                       |
+| `inPlace`       | `true`                  | Modify HTML-files in-place. Only use on build artifacts                                                           |
+| `inlineFonts`   | `false`                 | Inline fonts as data-URIs inside the @font-face declaration                                                       |
+| `inlineCss`     | `true`                  | Inline CSS that declares the @font-face for the subset fonts                                                      |
+| `fontDisplay`   | `swap`                  | Injects a font-display value into the @font-face CSS. Valid values: auto, block, swap, fallback, optional         |
+| `formats`       | `['woff2', 'woff']`     | Font formats to use when subsetting. [choices: "woff2", "woff", "truetype"]                                       |
+| `subsetPerPage` | `false`                 | Create a unique subset for each page.                                                                             |
+| `recursive`     | `false`                 | Crawl all HTML-pages linked with relative and root relative links. This stays inside your domain                  |
+| `silent`        | `true`                  | Do not write anything to stdout                                                                                   |
+| `debug`         | `false`                 | Verbose insights into font glyph detection                                                                        |
+| `dryRun`        | `false`                 | Don't write anything to disk                                                                                      |
+| `inputFiles`    | `['public/index.html']` | htmlFile(s) or url(s)                                                                                             |

packages/gatsby-plugin-subfont/package.json

@@ -24,9 +24,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.7.6",
-    "shell-escape": "^0.2.0",
-    "subfont": "^3.7.1"
+    "subfont": "^4.2.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.7.5",

packages/gatsby-plugin-subfont/src/gatsby-node.js

@@ -1,22 +1,23 @@
 const path = require(`path`)
-const { execSync } = require(`child_process`)
-const shellescape = require(`shell-escape`)
+const subfont = require(`subfont`)
 
-exports.onPostBuild = ({ store }) => {
+exports.onPostBuild = async ({ store, reporter }, options) => {
   const root = path.join(store.getState().program.directory, `public`)
-  // TODO make this configurable
-  const urlPaths = [`/`]
-  const baseArgs = [
-    `node_modules/.bin/subfont`,
-    `-i`,
-    `--no-recursive`,
-    `--inline-css`,
-    `--root`,
-    `file://${root}`,
-  ]
-  const args = baseArgs.concat(
-    urlPaths.map(currentPath => path.join(root, currentPath, `index.html`))
+  const subfontConsole = {
+    log: reporter.info,
+    warn: reporter.warn,
+    error: reporter.error,
+  }
+
+  await subfont(
+    {
+      root,
+      inPlace: true,
+      inlineCss: true,
+      silent: true,
+      inputFiles: [path.join(root, `index.html`)],
+      ...options,
+    },
+    subfontConsole
   )
-  const command = shellescape(args)
-  execSync(command)
 }