Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 10 commits into from
Mar 2, 2020
34 changes: 33 additions & 1 deletion packages/gatsby-plugin-subfont/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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) |
4 changes: 1 addition & 3 deletions packages/gatsby-plugin-subfont/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
35 changes: 18 additions & 17 deletions packages/gatsby-plugin-subfont/src/gatsby-node.js
Original file line number Diff line number Diff line change
@@ -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)
}