From e2ebeb3f7696c87d4de88aa3d219f2cf9531c7a0 Mon Sep 17 00:00:00 2001 From: Anton Halim Date: Wed, 16 Oct 2019 01:46:42 -0700 Subject: [PATCH 1/7] docs: Fix broken urls in documentation (#18718) --- docs/docs/preparing-your-environment.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/docs/preparing-your-environment.md b/docs/docs/preparing-your-environment.md index df6543241b11a..86a91593848db 100644 --- a/docs/docs/preparing-your-environment.md +++ b/docs/docs/preparing-your-environment.md @@ -5,9 +5,9 @@ overview: true To get started with Gatsby, you'll need to make sure you have the following software tools installed: -1. [Node.js](/tutorial/part-zero/#install-nodejs) -2. [npm CLI](/tutorial/part-zero/#familiarize-with-npm) -3. [Gatsby CLI](/tutorial/part-zero/#install-the-gatsby-cli) +1. [Node.js](/tutorial/part-zero/#-install-nodejs-and-npm) +2. [npm CLI](/tutorial/part-zero/#check-your-nodejs-installation) +3. [Gatsby CLI](/tutorial/part-zero/#using-the-gatsby-cli) For step-by-step installation instructions and detailed explanations of the required software, head on over to the [Gatsby tutorial](/tutorial/part-zero/). From 6fdd12732c6189440fd6f21a3710745cafdb2904 Mon Sep 17 00:00:00 2001 From: Kyle Gill Date: Wed, 16 Oct 2019 02:47:50 -0600 Subject: [PATCH 2/7] added note to tutorial about telemetry, and added doc to sidebar (#18698) --- docs/tutorial/part-zero/index.md | 4 +++- www/src/data/sidebars/doc-links.yaml | 2 ++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/tutorial/part-zero/index.md b/docs/tutorial/part-zero/index.md index 5a1cd7ba8c1ca..496cd29659155 100644 --- a/docs/tutorial/part-zero/index.md +++ b/docs/tutorial/part-zero/index.md @@ -68,6 +68,8 @@ The Gatsby CLI tool lets you quickly create new Gatsby-powered sites and run com The Gatsby CLI is available via npm and should be installed globally by running `npm install -g gatsby-cli`. +_**Note**: when you install Gatsby and run it for the first time, you'll see a short message notifying you about anonymous usage data that is being collected for Gatsby commands, you can read more about how that data is pulled out and used in the [telemetry doc](/docs/telemetry)._ + To see the commands available, run `gatsby --help`. ![Check gatsby commands in terminal](05-gatsby-help.png) @@ -84,7 +86,7 @@ Now you are ready to use the Gatsby CLI tool to create your first Gatsby site. U 4. Run `gatsby develop`. diff --git a/www/src/data/sidebars/doc-links.yaml b/www/src/data/sidebars/doc-links.yaml index 3b466d7df0cb4..9251f9571416a 100644 --- a/www/src/data/sidebars/doc-links.yaml +++ b/www/src/data/sidebars/doc-links.yaml @@ -670,5 +670,7 @@ link: /docs/cheat-sheet/ - title: Glossary link: /docs/glossary/ + - title: Gatsby Telemetry + link: /docs/telemetry/ - title: Gatsby REPL link: /docs/gatsby-repl/ From a1cecc3589af63011db100d4b5a62a7adb425937 Mon Sep 17 00:00:00 2001 From: Terry Mafura Date: Wed, 16 Oct 2019 14:08:26 +0200 Subject: [PATCH 3/7] =?UTF-8?q?chore(docs):=20add=20lines=20to=20express?= =?UTF-8?q?=20need=20for=20plugin=20to=20prevent=20F=E2=80=A6=20(#18595)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/docs/css-in-js.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/docs/css-in-js.md b/docs/docs/css-in-js.md index 940fdae0d77ed..90c5547f2d1fa 100644 --- a/docs/docs/css-in-js.md +++ b/docs/docs/css-in-js.md @@ -18,6 +18,8 @@ _Note that this functionality is not a part of React or Gatsby, and requires usi > Adding a stable CSS class to your JSX markup along with your CSS-in-JS can make it easier to users to include [User Stylesheets](https://www.viget.com/articles/inline-styles-user-style-sheets-and-accessibility/) for accessibility. See [Styled Components](/docs/styled-components#enabling-user-stylesheets-with-a-stable-class-name) example. +Keep in mind that styles aren't applied until the JavaScript loads hence a plugin to extract the styles is necessary to prevent flash of unstyled content (FOUC). To cater for this, every CSS-in-JS library has a Gatsby plugin which you need to extract styles and insert them into the HTML during builds and this prevents FOUC. + This section contains guides for styling your site with some of the most popular CSS-in-JS libraries, including how to set up global styles using each library. From ce84b2ed6a267d683091d3270ad2d90aea83bde0 Mon Sep 17 00:00:00 2001 From: Daisuke Yokomoto Date: Wed, 16 Oct 2019 21:12:20 +0900 Subject: [PATCH 4/7] fix(gatsby-theme-blog): remove extension on bio-content import (#18555) Co-authored-by: GatsbyJS Bot --- themes/gatsby-theme-blog/src/components/bio.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/gatsby-theme-blog/src/components/bio.js b/themes/gatsby-theme-blog/src/components/bio.js index a66fa9dfa2645..d81d1a1de45f9 100644 --- a/themes/gatsby-theme-blog/src/components/bio.js +++ b/themes/gatsby-theme-blog/src/components/bio.js @@ -9,7 +9,7 @@ import React from "react" import { useStaticQuery, graphql } from "gatsby" import Image from "gatsby-image" import { Styled, css, Flex } from "theme-ui" -import BioContent from "./bio-content.js" +import BioContent from "./bio-content" const Bio = () => { const data = useStaticQuery(bioQuery) From 008c55d79f6783ad3f462285fd0af9188ffd8329 Mon Sep 17 00:00:00 2001 From: Musthaq Ahamad <53584487+haxzie@users.noreply.github.com> Date: Wed, 16 Oct 2019 17:42:29 +0530 Subject: [PATCH 5/7] chore(showcase): Add haxzie.com (#18717) * Showcase: Add haxzie.com to sites.yml Showcasing my personal blog which is built with Gatsby :sparkles: * Fix typo in url --- docs/sites.yml | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/docs/sites.yml b/docs/sites.yml index a449c4b6eff6f..3d0439e99e490 100644 --- a/docs/sites.yml +++ b/docs/sites.yml @@ -7946,3 +7946,16 @@ built_by: Rou Hun Fan built_by_url: "https://flowen.me" featured: false +- title: Haxzie, Portfolio and Blog + url: "https://haxzie.com/" + main_url: "https://haxzie.com/" + source_url: "https://github.com/haxzie/haxzie.com" + description: > + Haxzie.com is the portfolio and personal blog of Musthaq Ahamad, UX Engineer and Visual Designer + categories: + - Blog + - Portfolio + - Documentation + built_by: Musthaq Ahamad + built_by_url: "https://haxzie.com" + featured: false From 1230372b9ecd2c38ab30e551a5e1d9fb4077df56 Mon Sep 17 00:00:00 2001 From: garrowp Date: Wed, 16 Oct 2019 06:21:13 -0600 Subject: [PATCH 6/7] chore(docs): Update docs to adhere to style guide (#18656) * Changed we/our to you/your * Change you/your to we/our * Change we/our to you/your * Change sentences with we to be more direct * Format documents * Update docs/docs/production-app.md Changing it to "you" doesn't make sense here. Co-Authored-By: Lennart * Update docs/docs/production-app.md Using "Gatsby" makes more sense than using "you" here Co-Authored-By: Lennart * Update docs/docs/production-app.md Using "Gatsby" makes more sense than using "you" here Co-Authored-By: Lennart * Update docs/docs/production-app.md Using "Gatsby" makes more sense than using "you" here Co-Authored-By: Lennart --- docs/docs/page-node-dependencies.md | 6 +++--- docs/docs/production-app.md | 16 ++++++++-------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/docs/page-node-dependencies.md b/docs/docs/page-node-dependencies.md index de81d64e7cbe1..18e041caacdcd 100644 --- a/docs/docs/page-node-dependencies.md +++ b/docs/docs/page-node-dependencies.md @@ -11,15 +11,15 @@ title: Page -> Node Dependency Tracking > > You can help by making a PR to [update this documentation](https://github.com/gatsbyjs/gatsby/issues/14228). -In almost every GraphQL Resolver, you'll see the [createPageDependency](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/redux/actions.js#L788), or [getNodeAndSavePathDependency](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/redux/index.js#L198) functions. These are responsible for recording which nodes are depended on by which pages. In `develop` mode, if a node's content changes, we re-run pages whose queries depend on that node. This is one of the things that makes `develop` so awesome. +In almost every GraphQL Resolver, you'll see the [createPageDependency](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/redux/actions.js#L788), or [getNodeAndSavePathDependency](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/redux/index.js#L198) functions. These are responsible for recording which nodes are depended on by which pages. In `develop` mode, when a node's content is changed the pages whose queries depend on that node will be re-run. This is one of the things that makes `develop` so awesome. ## How dependencies are recorded Recording of Page -> Node dependencies are handled by the [createPageDependency](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/redux/actions.js#L788) action. It takes the page (in the form of its `path`), and either a `nodeId`, or `connection`. -If a `nodeId` is passed, we're telling Gatsby that the page depends specifically on this node. So, if the node is changed, then the page's query needs to be re-executed. +Passing `nodeId` tells Gatsby that the page depends specifically on this node. So, if the node is changed, then the page's query needs to be re-executed. -`connection` is a Type string. E.g. `MarkdownRemark`, or `File`. If `createPageDependency` is called with a page path and a `connection`, we are telling Gatsby that this page depends on all nodes of this type. Therefore if any node of this type changes (e.g. a change to a markdown node), then this page must be rebuilt. This variant is only called from [run-sift.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/schema/run-sift.js#L264) when we're running a query such as `allFile`, or `allMarkdownRemark`. See [Schema Connections](/docs/schema-connections/) for more info. +`connection` is a Type string. E.g. `MarkdownRemark`, or `File`. Calling `createPageDependency` with a page path and a `connection` tells Gatsby that this page depends on all nodes of this type. Therefore if any node of this type changes (e.g. a change to a markdown node), then this page must be rebuilt. This variant is only called from [run-sift.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/schema/run-sift.js#L264) when a query such as `allFile`, or `allMarkdownRemark` is run. See [Schema Connections](/docs/schema-connections/) for more info. ## How dependencies are stored diff --git a/docs/docs/production-app.md b/docs/docs/production-app.md index 10d590351eadf..36c0c04fb0871 100644 --- a/docs/docs/production-app.md +++ b/docs/docs/production-app.md @@ -56,7 +56,7 @@ Once Webpack has finished compilation, it will have produced a few key types of ##### app-[contenthash].js -This is bundle produced from [production-app.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/production-app.js) which we'll mostly be discussing in this section. It is configured in [webpack entry](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js#L130) +This bundle is produced from [production-app.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/production-app.js) which will mostly be discussed in this section. It is configured in [webpack entry](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js#L130) ##### webpack-runtime-[contenthash].js @@ -72,7 +72,7 @@ This is the entry point to webpack that outputs `app-[contenthash].js` bundle. I ### First load -To show how `production-app` works, let's imagine that we've just refreshed the browser on our site's `/blog/2` page. The HTML loads immediately, painting our page quickly. It includes a CDATA section which injects page information into the `window` object so it's available in our JavaScript code (inserted during [Page HTML Generation](/docs/html-generation/#6-inject-page-info-to-cdata)). +To show how `production-app` works, let's imagine that you've just refreshed the browser on your site's `/blog/2` page. The HTML loads immediately, painting your page quickly. It includes a CDATA section which injects page information into the `window` object so it's available in your JavaScript code (inserted during [Page HTML Generation](/docs/html-generation/#6-inject-page-info-to-cdata)). ```html /* @@ -89,11 +89,11 @@ To show how `production-app` works, let's imagine that we've just refreshed the */ ``` -Then, the app, webpack-runtime, component, and data json bundles are loaded via `` and `