Merge remote-tracking branch 'upstream/master' into pr/18375

.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/2018-03-29-migration-from-wordpress-to-gatsby/index.md

@@ -91,6 +91,6 @@ My blog is now deployed on Netlify CDN, which means the user will be served fast
 
 ![after](./results.png)
 
-Quite a difference, right? Long story short - Gatsby is great. You should give it a try, especially if you are a frontend developer. And keep watching its development as I am sure we can look forward to even more awesomeness in the future. If Gatsby is not your cup of the, you should still consider switching to a static site generator as the advantages are too good to ignore. To learn more about Gatsby, check out [this curated list](/docs/awesome-gatsby/) of Gatsby-related resources.
+Quite a difference, right? Long story short - Gatsby is great. You should give it a try, especially if you are a frontend developer. And keep watching its development as I am sure we can look forward to even more awesomeness in the future. If Gatsby is not your cup of the, you should still consider switching to a static site generator as the advantages are too good to ignore. To learn more about Gatsby, check out [this curated list](/docs/awesome-gatsby-resources/) of Gatsby-related resources.
 
 _This article was originally published on [Vojtech Ruzicka's Blog](https://www.vojtechruzicka.com/)._

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 with a 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/2019-10-08-hacktoberfest-2019/index.md

@@ -45,7 +45,7 @@ Want to do help us translate the Gatsby docs? Consider contributing to an existi
 
 - Spanish repo: https://github.com/gatsbyjs/gatsby-es
 - Russian repo: https://github.com/gatsbyjs/gatsby-ru
-- New translation repo request: https://github.com/gatsbyjs/gatsby/issues/new?template=feature_request.md
+- New translation repo request: https://github.com/gatsbyjs/gatsby/issues/new?template=new_translation.md
 
 ### [OSS][oss]
 
@@ -59,6 +59,10 @@ Learn how to contribute to the Gatsby Ecosystem (starter library, site showcase,
 
 Gatsby [plugins](https://www.gatsbyjs.org/docs/creating-plugins/) and [themes](https://www.gatsbyjs.org/docs/themes/building-themes/) (a type of plugin) [published with the necessary files](https://www.gatsbyjs.org/contributing/submit-to-plugin-library/) can also count toward Hacktoberfest credit and earn Gatsby swag. This post will list all plugins created during Hacktoberfest: create your own and add it here in a Pull Request to get credit!
 
+#### Plugins Created During Hacktoberfest
+
+- [gatsby-source-etsy](https://www.npmjs.com/package/gatsby-source-etsy): Source plugin for creative goods shop listings
+
 ## Gatsby's Hacktoberfest Goals
 
 1. To provide a range of issues with a clearly defined scope, with minimal context needed outside of the issue description.

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
 
@@ -57,7 +57,7 @@ This event is held on a recurring basis, every Wednesday at 8:30 AM Pacific Stan
 
 Many members of the community use Stack Overflow to ask questions. Read through
 the [existing questions](http://stackoverflow.com/questions/tagged/gatsby)
-tagged with **gatsby** or
+tagged with `gatsby` or
 [ask your own](http://stackoverflow.com/questions/ask?tags=gatsby)!
 
 ### Discord
@@ -70,9 +70,16 @@ useful resources.
 
 Many members of the community also use Hashnode to ask questions and share their tips. Read through
 the [existing questions and posts](https://hashnode.com/n/gatsby)
-tagged with **gatsby** or
+tagged with `gatsby` or
 [ask your own question](https://hashnode.com/create/question) or [share your story](https://hashnode.com/create/story) and add the `gatsby` tag.
 
+### DEV Community
+
+DEV Community is another informative platform to ask questions and share tips as well. Read through
+the [existing questions and posts](https://dev.to/t/gatsby)
+tagged with `gatsby` or
+[ask for help](https://dev.to/new/help). You could also [write your post](https://dev.to/new/gatsby) with the `gatsby` tag.
+
 ## Learn More About Gatsby:
 
 - [Why Contribute to Gatsby?](/contributing/why-contribute-to-gatsby/)

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:[email protected]> or [tweet at Gatsby on Twitter](https://twitter.com/gatsbyjs) to claim your swag.
 

docs/contributing/docs-contributions.md

@@ -25,6 +25,8 @@ To address missing images, check the doc or tutorial source [in the Gatsby repo]
 
 If you find a broken link in the Gatsby docs, feel free to fix it and submit a PR!
 
+Keep in mind that some links in here are already correct because they work on gatsbyjs.org. While it would be nice to links in documentation to work on GitHub, have them working on gatsbyjs.org is a higher priority!
+
 ## Headings
 
 Docs with frontmatter metadata at the top including a `title` will automatically receive an `<h1>` heading in the rendered page, and it should be the only one. Additional headings in docs content should start with `<h2>`, denoted by `##` in Markdown.

docs/contributing/gatsby-style-guide.md

@@ -82,9 +82,11 @@ Also, there's a community of contributors to support you. Bounce ideas off of th
 
 ### Use "you" as the pronoun
 
-Your articles should use the second person ("you") to help to give it a conversational tone. This way, the text and instructions seem to speak directly to the person reading it. Try to avoid using the first person ("I", "we", "let's", and "us").
+In English, your articles should use the second person ("you") to provide a conversational tone. This way, the text and instructions seem to speak directly to the person reading it. Try to avoid using the first person ("I", "we", "let's", and "us"). For other languages, refer to each translation's guidelines (if applicable) for consistent phrasing.
 
-Using "you" is also more accurate than saying "we," because typically only one person is reading the tutorial or guide at a time and the person who wrote the tutorial is not actually going through it with them, so "we" would be inaccurate. You might notice that some technical documentation uses third person pronouns and nouns like "they" and "the user," which add more distance and feel colder than the conversational and warm "you" and "your."
+Using "you" in English is also more accurate than saying "we," because typically only one person is reading the tutorial or guide at a time and the person who wrote the tutorial is not actually going through it with them, so "we" would be inaccurate. You might notice that some technical documentation uses third person pronouns and nouns like "they" and "the user," which add more distance and feel colder than the conversational and warm "you" and "your."
+
+When updating a doc to adhere to this part of the Gatsby Style Guide, one exception in English is when "we" refers to Gatsby's core processes. The subject is the code in this case, rather than a teacher/reader connotation, and should be rewritten or restructured to not confuse the reader about what they are responsible for doing when something is happening automatically behind the scenes.
 
 ### Avoid "easy" and "simple"
 

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/where-to-participate.md

@@ -4,7 +4,7 @@ title: Where to Participate in the Community
 
 We want contributing to Gatsby to be fun, enjoyable, and educational for anyone and everyone. If you're interested in participating in the Gatsby.js community, contributions go far beyond pull requests and commits. We are thrilled to receive a variety of other contributions including the following:
 
-- Blogging, speaking about, or creating tutorials about one of Gatsby's many features. Mention [@gatsbyjs on Twitter](https://twitter.com/gatsbyjs) and/or email marcy [at] gatsbyjs [dot] com so we can give pointers and tips (if you want them 😄) and help you spread the word. Please add your blog posts and videos of talks to our [Awesome Gatsby](/docs/awesome-gatsby/) page.
+- Blogging, speaking about, or creating tutorials about one of Gatsby's many features. Mention [@gatsbyjs on Twitter](https://twitter.com/gatsbyjs) and/or email marcy [at] gatsbyjs [dot] com so we can give pointers and tips (if you want them 😄) and help you spread the word. Please add your blog posts and videos of talks to our [Awesome Gatsby](/docs/awesome-gatsby-resources/) page.
 - Presenting at meetups and conferences about your Gatsby projects. Your unique challenges and successes in building things with Gatsby can provide great speaking material. We'd love to review your talk abstract/CFP, so get in touch with us if you'd like some help!
 - [Submitting new feature ideas through an RFC](/blog/2018-04-06-introducing-gatsby-rfc-process/)
 - Submitting new documentation; titles in the side navigation on [docs](/docs) which are lighter in color on gatsbyjs.org are stubs and need contributions

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: >-