a

.circleci/config.yml

@@ -160,6 +160,12 @@ jobs:
       - e2e-test:
           test_path: integration-tests/gatsby-pipeline
 
+  integration_tests_structured_logging:
+    executor: node
+    steps:
+      - e2e-test:
+          test_path: integration-tests/structured-logging
+
   e2e_tests_path-prefix:
     <<: *e2e-executor
     environment:
@@ -327,6 +333,8 @@ workflows:
           <<: *e2e-test-workflow
       - integration_tests_gatsby_pipeline:
           <<: *e2e-test-workflow
+      - integration_tests_structured_logging:
+          <<: *e2e-test-workflow
       - e2e_tests_path-prefix:
           <<: *e2e-test-workflow
       - e2e_tests_gatsby-image:

README.md

@@ -89,7 +89,7 @@ Gatsby is a modern web framework for blazing fast websites.
 - [Migration Guides](#-migration-guides)
 - [How to Contribute](#-how-to-contribute)
 - [License](#memo-license)
-- [Thanks to Our Contributors and Sponsors](#-thanks-to-our-contributors-and-sponsors)
+- [Thanks to Our Contributors and Sponsors](#-thanks)
 
 ## 🚀 Get Up and Running in 5 Minutes
 

docs/blog/2017-09-26-embracing-graphql/index.md

@@ -78,7 +78,7 @@ There were a few bumps into the road but thanks to the starter example, I pieced
 things together quickly. Quickly as in “I have no idea how this GraphQL stuff
 works, but I have it working, so cool”. Easy to update — check.
 
-## Digging Deeper
+## Digging deeper
 
 I'm not the type of person to settle on “It's working so don't touch anything”.
 So I started digging into how Gatsby 1.x works—particular the

docs/blog/2018-04-06-introducing-gatsby-rfc-process/index.md

@@ -16,11 +16,11 @@ Inspired by [React](https://github.com/reactjs/rfcs), [Yarn](https://github.com/
 
 RFCs are accepted when they are approved for implementation in Gatsby. A more thorough description of the process is available in the repository's [README](https://github.com/gatsbyjs/rfcs/blob/master/README.md). The exact details may be refined in the future.
 
-## Who Can Submit RFCs?
+## Who can submit RFCs?
 
 Anyone! No knowledge of Gatsby's internals is required, nor are you expected to implement the proposal yourself.
 
-## What Types of Changes Should Be Submitted As RFCs?
+## What types of changes should be submitted as RFCs?
 
 Generally, any idea that would benefit from additional review or design before being implemented is a good candidate for an RFC. As a rule of thumb, this means any proposal that adds, changes, or removes a Gatsby API.
 

docs/blog/2019-04-29-component-shadowing/index.md

@@ -26,7 +26,7 @@ Component Shadowing let's you replace the theme's original file,
 `gatsby-theme-blog/src/components/bio.js`, with your own to implement any changes you
 need.
 
-## Shadowing Example
+## Shadowing example
 
 If you've installed `gatsby-theme-blog` you'll notice that it renders a
 [`Bio` component](https://github.com/gatsbyjs/gatsby/blob/666a9bc3c8d91be8a3118b1128340a06e895735e/themes/gatsby-theme-blog/src/components/bio.js)
@@ -51,7 +51,7 @@ gatsby-theme-blog
         └── typography.js
 ```
 
-### Customizing the `Bio` Component
+### Customizing the `Bio` component
 
 Component Shadowing uses a naming convention to determine which component will be rendered.
 In order to override the `Bio` component in `gatsby-theme-blog`, create a file named
@@ -87,7 +87,7 @@ even layer in new functionality.
 **Note**: In the future we'll publish a technical post that will dive into the internals
 of Component Shadowing.
 
-## Changing Styling
+## Changing styling
 
 Component Shadowing isn't restricted to React components; you can override any
 JavaScript, Markdown, MDX, or CSS file. For example, `gatsby-theme-blog` has a
@@ -123,7 +123,7 @@ user-site
 Now, blue and red will have your custom values and will be reflected in the theme wherever
 `theme.colors.blue` and `theme.colors.red` are used.
 
-#### How Much Shadowing is too Much Shadowing?
+#### How much shadowing is too much shadowing?
 
 If you've found yourself shadowing a large amount of components in a particular theme it
 might make sense to use a fork instead.
@@ -140,7 +140,7 @@ Component Shadowing is a powerful feature for making one-off changes to a theme
 need for complex configuration or maintaining a fork of the code. It's a stable feature in
 Gatsby Themes and is currently being used in production.
 
-## Further Reading
+## Further reading
 
 - [Component Shadowing Documentation](/docs/themes/api-reference/#component-shadowing)
 - [Latent Component Shadowing](https://johno.com/latent-component-shadowing)

docs/blog/2019-08-30-speed-up-your-time-to-interactive-by-delaying-third-party-scripts/index.md

@@ -0,0 +1,71 @@
+---
+title: Speed up your time to interactive by delaying third party scripts
+date: 2019-10-12
+author: Kilian Valkhof
+excerpt: "Delay loading scripts to lower your time to interactive by over 60%"
+tags:
+  - performance
+  - seo
+---
+
+Gatsby does many things to get a website visible as fast as possible. But getting a website visible isn't the only interesting metric. There are others that, if you're not careful, can easily take much longer than needed. Even if your site still feels fast.
+
+The metric this article focuses on is "[Time to interactive](https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive)", which is the time it takes for all your initial scripts to run. This one is particularly interesting for a couple of reasons:
+
+- It's not super noticeable when you use a website on desktop
+- Scripts loaded asynchronously are counted towards this number (even though they're async, they're still loaded in sequence after a page load)
+- It's a very important part of [Google's performance ranking](https://github.com/GoogleChrome/lighthouse/blob/master/docs/scoring.md). Because of the user impact, it's 5 times more important than the "[first meaningful paint](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint)", e.g. when something shows up on the screen. **5 times!**
+
+These together might mean that you have a website that _feels_ fast under some circumstances, but Google will give you a penalty because it's slow.
+
+To get an overview of how your site scores, you can use Lighthouse, either in your Chrome developer tools by going to the "Audits" tab, or by going to [web.dev](https://web.dev/measure). Lighthouse will test your site on a number of different metrics, such as accessibility, SEO (Search Engine Optimization), and best practices, but the one we're interested in is "performance".
+
+## The performance metric
+
+While the other metrics are also important, the scope of this article is on performance. By default, a Gatsby site will easily get a score in the 90s (out of 100), but this can quickly become lower as you add more scripts to the page, especially third party scripts.
+
+Harry from [marketingexamples.com](https://marketingexamples.com/) linked me to a recent post of his on [SEO performance](https://marketingexamples.com/seo/performance) that mentioned the "Time to interactive" scoring and I decided to take another look at my website for [Polypane](https://polypane.rocks). I had checked it in the past and it had a good (90+) score, but I was pretty shocked when it came back and suddenly had a score of 63!
+
+When looking at the performance data, the site's first meaningful paint took slightly over a second, but the time to interactive was _eleven seconds_. Yikes!
+
+The reason for this was that I recently switched to [Segment](https://segment.com) (using [gatsby-plugin-segment-js](//packages/gatsby-plugin-segment-js/)) and was loading other scripts through that, like support chat and analytics. These scripts all counted towards my "time to interactive".
+
+The SEO performance post included a tip from Dave of [ToDesktop](https://www.todesktop.com/) who has similar problems. His tip: Prevent loading the scripts until after a user has scrolled, along with some timeout to prevent [scroll jank](http://jankfree.org/).
+
+By adding a timeout, your "Time to interactive" won't take these scripts into account. The user won't need your support widget in the first second of a page anyway, so this works well for everyone.. With any upside, there is always a downside: your [bounce rate](https://support.google.com/analytics/answer/1009409?hl=en) will become less accurate as the people that open your site, don't scroll and leave will never show up in your analytics.
+
+Wanting to improve the performance rating of my own site, I forked the [gatsby-plugin-segment-js](https://github.com/Kilian/gatsby-plugin-segment-js) repository and set to work.
+
+## Updating gatsby-plugin-segment-js
+
+The way this solution works is as follows:
+
+- Wait for the user to scroll
+- Do a setTimeout for 1 second
+- Wrap the call in a [requestIdleCallback](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback), if available
+- Then load the script
+
+Adding the scroll timeout as mentioned in the Marketing examples blog post was quickly done. In Gatsby however, all subsequent pages are loaded without a page refresh. This meant that potentially, people could click through your site, never scroll, and the plugin would never get loaded. To make the technique work for Gatsby, the script also needed to load onRouteChange.
+
+This led to an interesting set of requirements:
+
+- The scripts should load only once
+- They should load either after a scroll action, or after a page update
+- To prevent jank there is a time delay before the load actually happens
+
+Due to this time delay, it could happen that you load a new page, the countdown starts, and during this countdown, you also scroll. At that point in time, the scripts haven't loaded yet so the scroll event listener would _also_ trigger a new load.
+
+To work around this, I added two locks to the Gatsby plugin:
+
+- `segmentSnippetLoaded`, `false` by default and set to `true` after it's loaded.
+- `segmentSnippetLoading`, `true` only between when the load function has been called and when it has finished.
+
+Then, either on `scroll` or `onRouteChange`, we only call the load function if `segmentSnippetLoaded` is not true, and in the load function, we only continue if `segmentSnippetLoading` is not true. This prevents the function from being called at all after the first time the script has been loaded. If the function is called twice but we're still in the countdown time, nothing happens.
+
+After implementing this on my own website, my performance score shot back up from 63 to 94 and I had an over 60% decrease in the time to interactive. Pretty good for a few lines of code.
+
+There is currently a [PR](https://github.com/benjaminhoffman/gatsby-plugin-segment-js/pull/19) open to add a `delayLoad` option to gatsby-plugin-segment-js to enable this feature. Alternatively, you can build it from [my fork](https://github.com/Kilian/gatsby-plugin-segment-js).
+
+## In closing
+
+If you work on a laptop or desktop with a good internet connection, the Time to Interactive is not so noticable as "time before you see something on your screen", but it can have a big impact on your performance rating and interactivity, and because of that, your SEO. You should be extra careful when adding third party scripts to your page, and the best way to do that is to run Google Lighthouse. If you notice your Gatsby site has a bad performance score, make sure to check the Time to Interactive value. If it's very high, try loading scripts only after a user has interacted with your website.

docs/blog/author.yaml

@@ -353,3 +353,7 @@
 - id: Maddie Wolf
   bio: Podcast listener. Puzzle doer. Dog stalker. Will explode if I don’t pet every dog I see.
   avatar: avatars/maddie-wolf.jpeg
+- id: Kilian Valkhof
+  bio: Creates tools that make designers & developers better at what they do. Polypane.rocks and Superposition.design | @kilianvalkhof | https://kilianvalkhof.com/
+  avatar: avatars/kilian-valkhof.jpg
+  twitter: "@kilianvalkhof"

docs/contributing/community.md

@@ -19,7 +19,7 @@ size, disability, ethnicity, gender identity and expression, level of
 experience, nationality, personal appearance, race, religion, or sexual identity
 and orientation.
 
-[Read full code of conduct](/contributing/code-of-conduct/)
+[Read the full code of conduct](/contributing/code-of-conduct/)
 
 ## Ways to Contribute
 

docs/contributing/contributor-swag.md

@@ -10,7 +10,7 @@ To show our appreciation, _**everyone who contributes to Gatsby is eligible to r
 
 ### How to claim your free swag
 
-If you contribute to the Gatsby org on GitHub, you can claim your swag by [logging into the Gatsby Store](https://store.gatsbyjs.org/) and requesting a discount code. With five or more contributions, you can claim your _**Level 2**_ swag.
+If you contribute to the Gatsby organization on GitHub, you can claim your swag by [logging into the Gatsby Store](https://store.gatsbyjs.org/) and requesting a discount code. With five or more contributions, you can claim your _**Level 2**_ swag.
 
 If you’ve contributed in other ways, such as giving talks about Gatsby, teaching others to use it, writing Gatsby articles/tutorials, participating in a Gatsby research project, or any other way, please email <mailto:marketing@gatsbyjs.com> or [tweet at Gatsby on Twitter](https://twitter.com/gatsbyjs) to claim your swag.
 

docs/contributing/gatsby-style-guide.md

@@ -267,11 +267,11 @@ alert(s)
 
 #### Code formatting: Line highlighting
 
-You may also choose to include line highlighting in your code snippets, using the following keywords inline in the snippet:
+You may also choose to include line highlighting in your code snippets, using the following keywords as comments inline in the snippet:
 
 ##### `highlight-line`: highlights the current line
 
-````
+````no-highlight
 ```javascript:title=gatsby-config.js
 module.exports = {
 	siteMetadata: {
@@ -293,7 +293,7 @@ module.exports = {
 
 ##### `highlight-next-line`: highlights the next line
 
-````
+````no-highlight
 ```javascript:title=gatsby-config.js
 module.exports = {
 	siteMetadata: {
@@ -317,7 +317,7 @@ module.exports = {
 
 ##### `highlight-start` & `highlight-end`: highlights a range
 
-````
+````no-highlight
 ```javascript:title=gatsby-config.js
 module.exports = {
 	// highlight-start

docs/contributing/how-to-pitch-gatsby.md

@@ -21,4 +21,4 @@ Build blazing-fast websites without the hosting hassles of managing complex, cos
 
 - **Secure:** Gatsby websites are inherently more secure because there are no servers involved. All your content is compiled ahead of time so hackers can’t get to your database or into your CMS. And your site is more resilient to DDoS attacks because the biggest point of failure — a server — is no longer part of the equation.
 
-Want more? Check out this blog post from Linda Watkins, our inimitable marketing director, on why she loves Gatsby (including a one-page overview for you to share): https://www.gatsbyjs.org/blog/2018-06-08-gatsby-marketers-managers-agencies-teams/
+Want more? Check out this [blog post from Linda Watkins](/blog/2018-06-08-gatsby-marketers-managers-agencies-teams/), Gatsby's inimitable marketing director, on why she loves Gatsby (including a one-page overview for you to share).

docs/contributing/managing-pull-requests.md

@@ -96,7 +96,7 @@ In situations like this, testing the change locally can be very valuable.
 
 > 💡 In case this is the first time you're doing this, you might have to [set up your development environment](/contributing/setting-up-your-local-dev-environment).
 
-Testing out unpublished packages locally can be tricky. We have just the tool to make that easy for you.
+Testing out unpublished packages locally can be tricky. We have just the tool to make that easy.
 
 Say hello to your new best friend, `gatsby-dev-cli`.
 

docs/contributing/setting-up-your-local-dev-environment.md

@@ -19,6 +19,7 @@ Yarn is a package manager for your code, similar to [NPM](https://www.npmjs.com/
 
 ## Gatsby repo install instructions
 
+- Ensure you have the latest version of Node installed (>= 10.16.0). `node --version`
 - [Install](https://yarnpkg.com/en/docs/install) the Yarn package manager.
 - Ensure you have the latest version of Yarn installed (>= 1.0.2). `yarn --version`
 - Fork the [official repository](https://github.com/gatsbyjs/gatsby).

docs/creators/creators.yml

@@ -379,7 +379,7 @@
 - name: Adaltas
   type: company
   description: >-
-    Adaltas is a team of consultants with a focus on Open Source, Big Data and 
+    Adaltas is a team of consultants with a focus on Open Source, Big Data and
     distributed systems based in France, Canada and Morocco. Our core expertises include
     Data Engineering, Data Science, DevOps, Cloud Computing and Web technologies.
   location: France
@@ -413,6 +413,14 @@
   image: images/desarol.png
   for_hire: true
   hiring: true
+- name: AJonP
+  type: company
+  image: images/ajonp.png
+  description: >-
+    A Community of developers, creating resources for all to use!
+  location: United States
+  website: https://ajonp.com
+  github: https://github.com/AJONPLLC
 - name: Arvind Kumar
   type: individual
   description: >-

docs/docs/add-404-page.md

@@ -1,5 +1,5 @@
 ---
-title: "Adding a 404 Page"
+title: Adding a 404 Page
 ---
 
 To create a 404 page create a page whose path matches the regex

docs/docs/add-a-manifest-file.md

@@ -1,5 +1,5 @@
 ---
-title: Add a Manifest File
+title: Adding a Manifest File
 ---
 
 If you've run an [audit with Lighthouse](/docs/audit-with-lighthouse/), you may have noticed a lackluster score in the "Progressive Web App" category. Let's address how you can improve that score.

docs/docs/add-a-service-worker.md

@@ -1,5 +1,5 @@
 ---
-title: Add a Service Worker
+title: Adding a Service Worker
 ---
 
 ## What is a service worker

docs/docs/add-custom-webpack-config.md

@@ -1,12 +1,12 @@
 ---
-title: "Adding a Custom webpack Config"
+title: "Adding a Custom Webpack Config"
 ---
 
 _Before creating custom webpack configuration, check to see if there's a Gatsby
 plugin already built that handles your use case in the
 [plugins section](/docs/plugins/). If there's not yet one and your use case is a
-general one, we highly encourage you to contribute back your plugin to the
-Gatsby Plugin Library so it's available to others (including your future self 😀)._
+general one, it is highly encouraged you to contribute back your plugin to the
+Gatsby Plugin Library so it's available to others (including your future self)._
 
 To add custom webpack configurations, create (if there's not one already) a
 `gatsby-node.js` file in your root directory. Inside this file, export a
@@ -16,15 +16,15 @@ When Gatsby creates its webpack config, this function will be called allowing
 you to modify the default webpack config using
 [webpack-merge](https://github.com/survivejs/webpack-merge).
 
-Gatsby does multiple webpack builds with somewhat different configuration. We
-call each build type a "stage". The following stages exist:
+Gatsby does multiple webpack builds with somewhat different configuration. Gatsby
+calls each build type a "stage". The following stages exist:
 
 1.  develop: when running the `gatsby develop` command. Has configuration for hot
     reloading and CSS injection into page
 2.  develop-html: same as develop but without react-hmre in the babel config for
     rendering the HTML component.
 3.  build-javascript: production JavaScript and CSS build. Creates route JS bundles as well
-    as commons chunks for JS and CSS.
+    as common chunks for JS and CSS.
 4.  build-html: production build static HTML pages
 
 Check
@@ -54,8 +54,8 @@ exports.onCreateWebpackConfig = ({
         {
           test: /\.less$/,
           use: [
-            // We don't need to add the matching ExtractText plugin
-            // because gatsby already includes it and makes sure its only
+            // You don't need to add the matching ExtractText plugin
+            // because gatsby already includes it and makes sure it's only
             // run at the appropriate stages, e.g. not in development
             loaders.miniCssExtract(),
             loaders.css({ importLoaders: 1 }),
@@ -92,7 +92,7 @@ exports.onCreateWebpackConfig = ({ stage, actions }) => {
 
 You can always find more information on _resolve_ and other options in the official [Webpack docs](https://webpack.js.org/concepts/).
 
-### Modifying the babel loader
+### Modifying the Babel loader
 
 You need this if you want to do things like transpile parts of `node_modules`.
 

docs/docs/add-offline-support-with-a-service-worker.md

@@ -1,5 +1,5 @@
 ---
-title: Add Offline Support with a Service Worker
+title: Adding Offline Support with a Service Worker
 ---
 
 If you've run an [audit with Lighthouse](/docs/audit-with-lighthouse/), you may have noticed a lackluster score in the "Progressive Web App" category. Let's address how you can improve that score.

docs/docs/add-page-metadata.md

@@ -1,5 +1,5 @@
 ---
-title: Adding page metadata
+title: Adding Page Metadata
 ---
 
 If you've run an [audit with Lighthouse](/docs/audit-with-lighthouse/), you may have noticed a lackluster score in the "SEO" category. Let's address how you can improve that score.