Add gatsby-plugin-subfont (gatsbyjs#7850)

* Initial commit for gatsby-plugin-subfont

* Add gatsby-node.js

* Fill out README

* Fill out package.json description

packages/gatsby-plugin-subfont/.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+    ["../../.babel-preset.js"]
+  ]
+}

packages/gatsby-plugin-subfont/.gitignore

@@ -0,0 +1,3 @@
+/*.js
+!index.js
+yarn.lock

packages/gatsby-plugin-subfont/.npmignore

@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+*.un~
+yarn.lock
+src
+flow-typed
+coverage
+decls
+examples

packages/gatsby-plugin-subfont/README.md

@@ -0,0 +1,23 @@
+# gatsby-plugin-subfont
+
+[Subfont](https://github.com/Munter/subfont#readme) is a command line tool that optimizes font delivery for HTML files.
+
+`gatsby-plugin-subfont` wraps the tool and automatically runs in your site's homepage.
+
+## Install
+
+`npm install --save gatsby-plugin-subfont`
+
+If you want the ability to run font subsetting locally you'l need Python and install fonttools with this command line:
+
+`pip install fonttools brotli zopfli`
+
+## How to use
+
+```javascript
+// In your gatsby-config.js
+module.exports = {
+  plugins: [
+    `gatsby-plugin-subfont`,
+  ],
+}

packages/gatsby-plugin-subfont/index.js

@@ -0,0 +1 @@
+// noop

packages/gatsby-plugin-subfont/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "gatsby-plugin-subfont",
+  "version": "1.0.0",
+  "description": "Runs the font delivery optimizing CLI tool subfont on the homepage of your site during the Gatsby build",
+  "main": "index.js",
+  "scripts": {
+    "build": "babel src --out-dir . --ignore **/__tests__",
+    "watch": "babel -w src --out-dir . --ignore **/__tests__",
+    "prepare": "cross-env NODE_ENV=production npm run build"
+  },
+  "keywords": [
+    "gatsby",
+    "gatsby-plugin"
+  ],
+  "author": "Kyle Mathews <[email protected]>",
+  "bugs": {
+    "url": "https://github.com/gatsbyjs/gatsby/issues"
+  },
+  "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-subfont#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gatsbyjs/gatsby.git"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@babel/runtime": "^7.0.0",
+    "subfont": "^3.6.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "cross-env": "^5.0.5"
+  }
+}

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

@@ -0,0 +1,16 @@
+const path = require(`path`)
+const { execSync } = require(`child_process`)
+
+exports.onPostBuild = ({ store }) => {
+  const root = path.join(store.getState().program.directory, `public`)
+  // TODO make this configurable
+  const urlPaths = [`/`]
+  const filePaths = urlPaths.reduce(
+    (accumulator, currentPath) =>
+      `${accumulator} ${path.join(root, currentPath, `index.html`)}`,
+    ``
+  )
+
+  const command = `node_modules/.bin/subfont -i --no-recursive --inline-css --root file://${root}${filePaths}`
+  execSync(command)
+}

www/gatsby-config.js

@@ -110,12 +110,6 @@ module.exports = {
       },
     },
 
-    {
-      resolve: `gatsby-plugin-fullstory`,
-      options: {
-        fs_org: `B2TRP`,
-      },
-    },
     `gatsby-plugin-sitemap`,
     {
       resolve: `gatsby-plugin-feed`,
@@ -189,5 +183,6 @@ module.exports = {
       },
     },
     `gatsby-transformer-screenshot`,
+    `gatsby-plugin-subfont`,
   ],
 }

www/package.json

@@ -12,7 +12,6 @@
     "gatsby-plugin-canonical-urls": "next",
     "gatsby-plugin-catch-links": "next",
     "gatsby-plugin-feed": "next",
-    "gatsby-plugin-fullstory": "^1.0.4-5",
     "gatsby-plugin-glamor": "next",
     "gatsby-plugin-google-tagmanager": "next",
     "gatsby-plugin-lodash": "next",
@@ -26,7 +25,7 @@
     "gatsby-plugin-sharp": "^2.0.0-rc.3",
     "gatsby-plugin-sitemap": "next",
     "gatsby-plugin-twitter": "next",
-    "gatsby-plugin-typography": "next",
+    "gatsby-plugin-typography": "^2.2.0-rc.3",
     "gatsby-remark-autolink-headers": "next",
     "gatsby-remark-copy-linked-files": "next",
     "gatsby-remark-images": "next",

www/src/html.js

@@ -16,24 +16,6 @@ export default class HTML extends React.Component {
             href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
             as="style"
           />
-          <link
-            rel="preload"
-            href="/static/ftn45-webfont.c2439033.woff2"
-            as="font"
-            crossOrigin="anonymous"
-          />
-          <link
-            rel="preload"
-            href="/static/spectral-latin-400.d9fdfd34.woff2"
-            as="font"
-            crossOrigin="anonymous"
-          />
-          <link
-            rel="preload"
-            href="/static/ftn65-webfont.0ddc10d2.woff2"
-            as="font"
-            crossOrigin="anonymous"
-          />
           {this.props.headComponents}
           <meta charSet="utf-8" />
           <meta httpEquiv="X-UA-Compatible" content="IE=edge" />