Skip to content

Commit

Permalink
feat(gatsby-plugin-subfont): Make async, add configurable opti… (#21768)
Browse files Browse the repository at this point in the history
Add gatsby-plugin-subfont configurable option feature
Update subfont version

Co-authored-by: Ward Peeters <ward@coding-tech.com>
  • Loading branch information
palindrom615 and wardpeet authored Mar 2, 2020
1 parent a49df73 commit 06034f2
Show file tree
Hide file tree
Showing 3 changed files with 52 additions and 21 deletions.
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)
}

0 comments on commit 06034f2

Please sign in to comment.