Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(docs): p-files Part1 - adjust headlines according to style guide + adjust some texts #18715

Merged
merged 9 commits into from
Oct 29, 2019
4 changes: 2 additions & 2 deletions docs/docs/page-creation.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ A page is created by calling the [createPage](/docs/actions/#createPage) action.
1. The `components` redux namespace is updated
1. `onCreatePage` API is executed

## Update Pages redux namespace
## Update pages redux namespace

The `pages` redux namespace is a map of page `path` to page object. The [pages reducer](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/redux/reducers/pages.js) takes care of updating this on a `CREATE_PAGE` action. It also creates a [Foreign Key Reference](/docs/schema-gql-type/#foreign-key-reference-___node) to the plugin that created the page by adding a `pluginCreator___NODE` field.

## Update Components redux namespace
## Update components redux namespace

The `components` redux namespace is a map of [componentPath](/docs/behind-the-scenes-terminology/#component) (file with React component) to the Component object. A Component object is simply the Page object but with an empty query string (that will be set during [Query Extraction](/docs/query-extraction/#store-queries-in-redux)).

Expand Down
4 changes: 2 additions & 2 deletions docs/docs/path-prefix.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,9 @@ export default function Index() {

## Add the path prefix to paths using `withPrefix`

For pathnames you construct manually, there’s a helper function, [`withPrefix`](/docs/gatsby-link/#add-the-path-prefix-to-paths-using-withprefix) that prepends your path prefix in production (but doesn’t during development where paths don’t need prefixed).
For pathnames you construct manually, there’s a helper function, [`withPrefix`](/docs/gatsby-link/#add-the-path-prefix-to-paths-using-withprefix) that prepends your path prefix in production (but doesn’t during development where paths don’t need to be prefixed).

## Additional Considerations
### Additional considerations

The [`assetPrefix`](/docs/asset-prefix/) feature can be thought of as semi-related to this feature. That feature allows your assets (non-HTML files, e.g. images, JavaScript, etc.) to be hosted on a separate domain, for example a CDN.

Expand Down
12 changes: 6 additions & 6 deletions docs/docs/performance-tracing.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Performance Tracing"
title: Performance Tracing
---

Gatsby allows a build to be traced, enabling you to find which plugins or parts of the build are taking the longest. The trace information can be viewed in any [OpenTracing](http://opentracing.io/) compatible tool such as [Jaeger](https://www.jaegertracing.io/). You can also use Zipkin compatible tools such as [Zipkin](https://zipkin.io/) or [Honeycomb](https://www.honeycomb.io/).
Expand All @@ -14,7 +14,7 @@ Gatsby allows a build to be traced, enabling you to find which plugins or parts

Gatsby code is instrumented with OpenTracing, which is a general tracing API that is implementation agnostic. Therefore, you'll need to include and configure an OpenTracing compatible library in your application, as well as a backend to collect the trace data.

The steps required to add tracing are below. Or, you can skip ahead if you want specific instructions for [jaeger](/docs/performance-tracing/#local-jaeger-with-docker) or [zipkin](/docs/performance-tracing/#local-zipkin-with-docker).
The steps required to add tracing are below. Or, you can skip ahead if you want specific instructions for [Jaeger](/docs/performance-tracing/#local-jaeger-with-docker) or [Zipkin](/docs/performance-tracing/#local-zipkin-with-docker).

### 1. Library dependency

Expand All @@ -26,7 +26,7 @@ Each OpenTracing library must be configured. For example, what is the URL of the

The configuration file is a JavaScript file that exports two functions: `create` and `stop`.

- **create**: Create and return an [OpenTracing compatible Tracer](https://github.com/opentracing/opentracing-javascript/blob/master/src/tracer.ts). It is called at the start of the build.
- **create**: Create and return an [OpenTracing compatible tracer](https://github.com/opentracing/opentracing-javascript/blob/master/src/tracer.ts). It is called at the start of the build.
- **stop**: Called at the end of the build. Any cleanup required by the tracer should be performed here, such as clearing out any span queues and sending them to the tracing backend.

### 3. Start Gatsby with tracing turned on
Expand All @@ -35,7 +35,7 @@ The above configuration file can be passed to Gatsby with the `--open-tracing-co

## Tracing backend examples

There are many OpenTracing compatible backends available. Below is an example of how to hook Zipkin into Gatsby.
There are many OpenTracing compatible backends available. Below are examples of how to hook [Jaeger](/docs/performance-tracing/#local-jaeger-with-docker) or [Zipkin](/docs/performance-tracing/#local-zipkin-with-docker) into Gatsby.

### local Jaeger with Docker

Expand Down Expand Up @@ -68,7 +68,7 @@ There are many OpenTracing compatible backends available. Below is an example of
jaegertracing/all-in-one:1.8
```

See [Jaeger Getting Started](https://www.jaegertracing.io/docs/1.8/getting-started/) for more information.
See [Jaeger getting started](https://www.jaegertracing.io/docs/1.8/getting-started/) for more information.

3. Start Gatsby `build` or `develop` with `--open-tracing-config-file` pointing at the Jaeger configuration file. An example file is provided in the Gatsby project under [node_modules/gatsby/dist/utils/tracer/jaeger-local.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/tracer/jaeger-local.js) that will send tracing spans to your local Docker instance over HTTP. E.g

Expand All @@ -88,7 +88,7 @@ There are many OpenTracing compatible backends available. Below is an example of
- [zipkin-javascript-opentracing](https://www.npmjs.com/package/zipkin-javascript-opentracing)
- [zipkin-transport-http](https://www.npmjs.com/package/zipkin-transport-http)

2. Run Zipkin's all-in-one Docker instance with `docker run -d -p 9411:9411 openzipkin/zipkin`. See [Zipkin Getting Started](https://zipkin.io/pages/quickstart.html) for more information.
2. Run Zipkin's all-in-one Docker instance with `docker run -d -p 9411:9411 openzipkin/zipkin`. See [Zipkin getting started](https://zipkin.io/pages/quickstart.html) for more information.

3. Start Gatsby `build` or `develop` with `--open-tracing-config-file` pointing at the Zipkin configuration file. An example file is provided in the Gatsby project under `node_modules/gatsby/dist/utils/tracer/zipkin-local.js` that will send tracing spans to your local Docker instance. E.g

Expand Down
14 changes: 7 additions & 7 deletions docs/docs/pixabay-source-plugin-tutorial.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Pixabay Image Source Plugin Tutorial"
title: Pixabay Image Source Plugin Tutorial
---

Creating your own source plugin.
Expand Down Expand Up @@ -28,15 +28,15 @@ _**NOTE:** if your data is local i.e. on your file system and part of your site'

Your plugin is going to source images from Pixabay. You'll be able to configure your plugin in your site's `gatsby-config.js` file and write GraphQL queries to access your plugin's data.

> **NOTE:** You'll need a Pixabay API key which you can get by [registering for a Pixabay account](https://pixabay.com/en/accounts/register/). Your API key is in the [“Search Images section of the Pixabay API docs](https://pixabay.com/api/docs/#api_search_images).
> **NOTE:** You'll need a Pixabay API key which you can get by [registering for a Pixabay account](https://pixabay.com/en/accounts/register/). Your API key is in the [“Search Images section of the Pixabay API docs](https://pixabay.com/api/docs/#api_search_images).

### An example API request

Pixabay's [API documentation](https://pixabay.com/api/docs/#api_search_images) describes how their API works. Here's an example that uses a few options to search for photos:

`https://pixabay.com/api/?q=yellow+flowers&editors_choice=true&pretty=true&key=<YOUR_API_KEY_HERE>`

Take the above URL and paste it in to a browser to see Pixabay's response to your query. It gives you a list of photos matching the query "yellow flowers" that have received an Editor's Choice award.
Take the above URL and paste it into a browser to see Pixabay's response to your query. It gives you a list of photos matching the query "yellow flowers" that have received an Editor's Choice award.

> **NOTE:** You should replace `<YOUR_API_KEY_HERE>` with your Pixabay API key.

Expand Down Expand Up @@ -84,7 +84,7 @@ cd gatsby-source-pixabay

### Create a `package.json` file

Now create a `package.json` file, this describes your plugin and any third-party code it might depend on. `npm` has a command to create this file for you. Run:
Now create a `package.json` file, this describes your plugin and any third-party code it might depend on. npm has a command to create this file for you. Run:

```shell
npm init --yes
Expand Down Expand Up @@ -168,7 +168,7 @@ console.log("Testing my plugin", configOptions)

### Add the plugin to your site

The skeleton of your plugin is in place which means you can add it to your project and check your progress so far.
The skeleton of your plugin is in place which means you can now add it to your project and check your progress so far.

Open `gatsby-config.js` from the root directory of your tutorial site, and add the `gatsby-source-pixabay` plugin:

Expand Down Expand Up @@ -362,9 +362,9 @@ Experiment with different options in your `gatsby-config.js` file to see how tha

## Publishing a plugin

Don't publish this particular plugin to npm or the Gatsby Plugin Library, because it's just a sample plugin for the tutorial. However, if you've built a local plugin for your project, and want to share it with others, `npm` allows you to publish your plugins. Check out the npm docs on [How to Publish & Update a Package](https://docs.npmjs.com/getting-started/publishing-npm-packages) for more info.
Don't publish this particular plugin to npm or the Gatsby Plugin Library, because it's just a sample plugin for the tutorial. However, if you've built a local plugin for your project, and want to share it with others, npm allows you to publish your plugins. Check out the npm docs on [How to Publish & Update a Package](https://docs.npmjs.com/getting-started/publishing-npm-packages) for more info.

> **NOTE:** Once you have published your plugin on `npm`, don't forget to edit your plugin's `package.json` file to include info about your plugin. If you'd like to publish a plugin to the [Gatsby Plugin Library](/plugins/) (please do!), please [follow these steps](/contributing/submit-to-plugin-library/).
> **NOTE:** Once you have published your plugin on npm, don't forget to edit your plugin's `package.json` file to include info about your plugin. If you'd like to publish a plugin to the [Gatsby Plugin Library](/plugins/) (please do!), please [follow these steps](/contributing/submit-to-plugin-library/).

## Summary

Expand Down
6 changes: 3 additions & 3 deletions docs/docs/porting-from-create-react-app-to-gatsby.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ After installation, the key things that need to change are:

The following sections explain the above steps as well as other changes that you might need to make depending on the complexity of your app. A default Create React App project is able to run with just the above steps.

### Project Structure
### Project structure

To show some of the differences of how your project structure could differ by moving to Gatsby, a default Create React App project looks something like this:

Expand Down Expand Up @@ -169,7 +169,7 @@ For more information about errors encountered during builds, see the doc on [deb

There are two possibilities of routes that you can set up: static and client-only. Gatsby automatically turns React components in the pages folder into static routes. This means that a statically rendered page directly corresponds to index.html files in the app's built assets, whereas a client-only route is rendered by the client and configured by the routing setup you define. Both types of pages can [fetch data at runtime](/docs/client-data-fetching/) just like any other React app.

> **Note**: An advantage to having pages in separate files like this is a defined way of [automatically code splitting](/docs/how-code-splitting-works/), whereas Create React App requires you to use the `import()` syntax to assign what elements should be loaded dynamically
> **Note**: An advantage to having pages in separate files like this is a defined way of [automatically code splitting](/docs/how-code-splitting-works/), whereas Create React App requires you to use the `import()` syntax to assign what elements should be loaded dynamically.

For dynamic routes, you should implement routing with [@reach/router](https://reach.tech/router), which is already included with Gatsby. Dynamic routes can be implemented the same way you would implement a router in Create React App (or any other React application). However, because these routes won't be represented as HTML files in the final build, if you want users to be able to visit the routes directly (like entering the URL in the search bar), you'll need to generate pages in the `gatsby-node.js` file which is demonstrated in the [Building Apps with Gatsby](/docs/building-apps-with-gatsby/) guide.

Expand All @@ -191,7 +191,7 @@ Gatsby provides a `<Link />` component and a `navigate` function to help you dir

### Handling state

Because Gatsby rehydrates into a regular React app, state can be handled inside of components in the same way it would in Create React App. If you use a another library for state management and want to wrap your app in some sort of global state the section on [context providers](#context-providers) will be helpful.
Because Gatsby rehydrates into a regular React app, state can be handled inside of components in the same way it would in Create React App. If you use another library for state management and want to wrap your app in some sort of global state the section on [context providers](#context-providers) will be helpful.

### Environment Variables

Expand Down
8 changes: 4 additions & 4 deletions docs/docs/production-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -99,23 +99,23 @@ It's worth noting that the browser API runner is completely different to `api-ru

One thing to note is that it gets the list of plugins from `./cache/api-runner-browser-plugins.js`, which is generated [early in bootstrap](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/bootstrap/index.js#L338).

### DOM Hydration
### DOM hydration

[hydrate()](https://reactjs.org/docs/react-dom.html#hydrate) is a [ReactDOM](https://reactjs.org/docs/react-dom.html) function which is the same as `render()`, except that instead of generating a new DOM tree and inserting it into the document, it expects that a React DOM already exists with exactly the same structure as the React Model. It therefore descends this tree and attaches the appropriate event listeners to it so that it becomes a live React DOM. Since your HTML was rendered with exactly the same code as you're running in your browser, these will (and have to) match perfectly. The hydration occurs on the `<div id="___gatsby">...</div>` element defined in [default-html.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/default-html.js#L21).

### Page Rendering
### Page rendering

The hydration requires a new React component to "replace" the existing DOM with. Gatsby uses [reach router](https://github.com/reach/router) for this. Within it, Gatsby provides a [RouteHandler](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/production-app.js#L38) component that uses [PageRenderer](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/page-renderer.js) to create the navigated to page.

PageRenderer's constructor [loads the page resources](/docs/production-app/#load-page-resources) for the path. On first load though, these will have already been requested from the server by `<link rel="preload" ... />` in the page's original HTML (see [Link Preloads](/docs/how-code-splitting-works/#construct-link-and-script-tags-for-current-page) in HTML Generation Docs). The loaded page resources includes the imported component, with which Gatsby creates the actual page component using [React.createElement()](https://reactjs.org/docs/react-api.html). This element is returned to the RouteHandler which hands it off to Reach Router for rendering.

### Load Page Resources
### Load page resources

Before hydration occurs, Gatsby kicks off the loading of resources in the background. As mentioned above, the current page's resources will have already been requested by `link` tags in the HTML. So, technically, there's nothing more required for this page load. But we can start loading resources required to navigate to other pages.

This occurs in [loader.js](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/loader.js). The main function here is [getResourcesForPathname()](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/loader.js#L314). Given a path, it will find its page, and import its component module json query results. But to do this, it needs access to that information. This is provided by [async-requires.js](/docs/write-pages/#async-requiresjs) which contains the list of all pages in the site, and all their dataPaths. [fetchPageResourcesMap()](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/loader.js#L33) takes care of requesting that file, which occurs the [first time](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/cache-dir/loader.js#L292) `getResourcesForPathname()` is called.

### window variables
### `window` variables

Gatsby attaches global state to the `window` object via `window.___somevar` variables so they can be used by plugins (though this is technically unsupported). Here are a few:

Expand Down
12 changes: 6 additions & 6 deletions docs/docs/progressive-web-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
title: Progressive Web Apps (PWAs)
---

## What is a progressive web app?
## What is a Progressive Web App?

"Progressive web app" (PWA) is both a general term for a new philosophy toward building websites and a specific term with an established set of three explicit, testable, baseline requirements.

Expand All @@ -28,25 +28,25 @@ PWAs are apps delivered through the web (as opposed to native apps, which are pa

> they're just websites that took all the right vitamins.

## How is a Gatsby site a progressive web app?
## How is a Gatsby site a Progressive Web App?

Gatsby is designed to provide top-notch performance out of the box. It handles code splitting, code minification, and optimizations like pre-loading in the background, image processing, etc., so that the site you build is highly performant, without any kind of manual tuning. These performance features are a big part of supporting the progressive web app approach.

Then there are the three baseline criteria for a site to qualify as a PWA.

### It must run under HTTPS

Running your site under HTTPS is a highly recommended security practice, no matter the content of your site. Specifically concerning progressive web apps, running under HTTPS is a criterion for many new browser features that are required for progressive web apps to work.
Running your site under HTTPS is a highly recommended security practice, no matter the content of your site. Specifically concerning progressive web apps, running under HTTPS is a criterion for many new browser features that are required for Progressive Web Apps to work.

This one's all you!

### It must include a Web App Manifest

A [web app manifest](https://www.w3.org/TR/appmanifest/) is a JSON file that provides the browser with information about your web app, and makes it possible for users to save to their home screen.
A [Web App manifest](https://www.w3.org/TR/appmanifest/) is a JSON file that provides the browser with information about your web app, and makes it possible for users to save to their home screen.

It includes information like the web app's `name`, `icons`, `start_url`, `background-color` and [more](https://developers.google.com/web/fundamentals/web-app-manifest/).
It includes information like the Web App's `name`, `icons`, `start_url`, `background-color` and [more](https://developers.google.com/web/fundamentals/web-app-manifest/).

Gatsby provides a plugin interface to add support for shipping a manifest with your site -- [**gatsby-plugin-manifest**](/packages/gatsby-plugin-manifest).
Gatsby provides a plugin interface to add support for shipping a manifest with your site -- [gatsby-plugin-manifest](/packages/gatsby-plugin-manifest).

### It must implement a service worker

Expand Down