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

update docs content in preperation for v2 release #8172

Merged
merged 7 commits into from
Sep 17, 2018
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,6 @@ You can get a new Gatsby site up and running on your local dev environment in 5
gatsby new my-blazing-fast-site
```

_Want to try v2 beta? Run this instead:_
`gatsby new my-blazing-fast-site https://github.com/gatsbyjs/gatsby-starter-default#v2`

2. **Start the site in `develop` mode.**

Next, move into your new site’s directory and start it up:
Expand Down
8 changes: 4 additions & 4 deletions docs/blog/2018-06-08-life-after-layouts/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ This ultimately boils down to two breaking changes and one recommendation:
2. **BREAKING CHANGE:** The `children` prop in our layout components is no longer a function (unless you explicitly provide a function).
3. We now recommend moving your layout components alongside the rest of your components (e.g. into `src/components/`).
If we upgrade our simplified app by running `yarn add gatsby@next react react-dom` (see [the V1 => V2 migration guide](https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/) for more information on why we need to install React here), we need to upgrade our layout by moving `src/layouts/index.js` to `src/components/layout.js` and changing `children` from a function to a regular prop:
If we upgrade our simplified app by running `yarn add gatsby react react-dom` (see [the V1 => V2 migration guide](/docs/migrating-from-v1-to-v2/) for more information on why we need to install React here), we need to upgrade our layout by moving `src/layouts/index.js` to `src/components/layout.js` and changing `children` from a function to a regular prop:
```jsx
import React from "react"
Expand Down Expand Up @@ -109,18 +109,18 @@ Removing layouts isn't the only improvement coming in Gatsby V2. We're really ex
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">Coming soon to Gatsby v2: Ludicrous mode data hot reloading ;-)<a href="https://t.co/by1PyOYXc0">https://t.co/by1PyOYXc0</a><br><br>(note, this gif is not sped up at all) <a href="https://t.co/hFIYMbpalN">pic.twitter.com/hFIYMbpalN</a></p>&mdash; Gatsby (@gatsbyjs) <a href="https://twitter.com/gatsbyjs/status/974507205121617920?ref_src=twsrc%5Etfw">March 16, 2018</a></blockquote>
- We can now add GraphQL queries to any component in our app (not just page components) using [`StaticQuery`](https://next.gatsbyjs.org/docs/static-query/)
- We can now add GraphQL queries to any component in our app (not just page components) using [`StaticQuery`](/docs/static-query/)
- Upgraded to the latest versions of React, Babel, Webpack, and other libraries Gatsby depends on
- Better support for CSS inlining and splitting, which will boost performance
For a full list of what's new, check out our [V2 migration guide](https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/) and [_What’s New in Gatsby V2?_](https://www.gatsbyjs.org/blog/2018-06-16-announcing-gatsby-v2-beta-launch/).
For a full list of what's new, check out our [V2 migration guide](/docs/migrating-from-v1-to-v2/) and [_What’s New in Gatsby V2?_](/blog/2018-06-16-announcing-gatsby-v2-beta-launch/).
## What's next?
- You can get started using Gatsby V2 right now by installing our V2 default starter:
```
gatsby new my-gatsby-v2-site https://github.com/gatsbyjs/gatsby-starter-default#v2
gatsby new my-gatsby-v2-site https://github.com/gatsbyjs/gatsby-starter-default
```

Huge thanks to [Yuki Takemoto](https://github.com/mottox2) for upgrading the starter to V2!
Expand Down
8 changes: 4 additions & 4 deletions docs/docs/creating-global-styles.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ To create a shared layout with global styles, start by creating a new Gatsby sit

```shell
# Create the site
gatsby new global-styles https://github.com/gatsbyjs/gatsby-starter-hello-world#v2
gatsby new global-styles https://github.com/gatsbyjs/gatsby-starter-hello-world
```

Open your new site in your code editor and create a new directory at `/src/components`. Inside, create two new files:
Expand Down Expand Up @@ -75,9 +75,9 @@ To start, create a new Gatsby site with the [hello world starter](https://github

```shell
# Create the site
gatsby new global-styles https://github.com/gatsbyjs/gatsby-starter-hello-world#v2
gatsby new global-styles https://github.com/gatsbyjs/gatsby-starter-hello-world

npm install --save gatsby-plugin-emotion@next emotion emotion-server react-emotion
npm install --save gatsby-plugin-emotion emotion emotion-server react-emotion
```

Create `gatsby-config.js` and add the Emotion plugin:
Expand Down Expand Up @@ -130,7 +130,7 @@ In some cases, using a shared layout component is not desirable. In these cases,
First, open a new terminal window and run the following commands to create a new default Gatsby site and start the development server:

```shell
gatsby new global-style-tutorial https://github.com/gatsbyjs/gatsby-starter-default#v2
gatsby new global-style-tutorial https://github.com/gatsbyjs/gatsby-starter-default
gatsby develop
```

Expand Down
22 changes: 0 additions & 22 deletions docs/docs/gatsby-starters.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,28 +31,6 @@ There are several starters that have been created. Create a PR to include yours!
- [gatsby-starter-hello-world](https://github.com/gatsbyjs/gatsby-starter-hello-world)
[(demo)](https://aberrant-fifth.surge.sh/)

### Using Gatsby v2 with the official starters

If you'd like to get started with Gatsby v2 you're in luck, there's a v2 edition for each of the official starters. Install your favourite one with the Gatsby CLI.

`gatsby-starter-default` with v2:

```
gatsby new my-default-project https://github.com/gatsbyjs/gatsby-starter-default#v2
```

`gatsby-starter-hello-world` with v2:

```
gatsby new my-hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world#v2
```

`gatsby-starter-blog` with v2:

```
gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog#v2
```

## Community starters

- [gatsby-starter-cosmicjs](https://github.com/cosmicjs/gatsby-starter)
Expand Down
11 changes: 0 additions & 11 deletions docs/docs/how-to-contribute.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,6 @@ If you create a loader or plugin, we would <3 for you to open source it and put
Gatsby uses a "monorepo" pattern to manage its many dependencies and relies on
lerna and yarn to configure the repository for active development.

We're currently gearing up to release a new major version, v2.

During this time, please choose the correct branch for your pull request:

- `master` branch for Gatsby version 2 bug fixes
- `master` branch for any new features (these will be released in the Gatsby v2 betas)
- `master` branch for updates to the `www` and `docs` directories
- `v1` branch for Gatsby version 1 bug fixes

Note: We will only accept bug fixes for Gatsby v1. New features should be added to Gatsby v2.

You can install the latest version of Gatsby by following these steps:

- Clone the repo, navigate to its directory.
Expand Down
42 changes: 23 additions & 19 deletions docs/docs/migrating-from-v1-to-v2.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,34 +68,38 @@ The very first thing you will need to do is update your dependencies and install

### Update Gatsby version

Since v2 is currently in beta, you need update your `package.json` to use the pre-release versions of Gatsby.
You need update your `package.json` to use the latest version of Gatsby.
KyleAMathews marked this conversation as resolved.
Show resolved Hide resolved

`package.json`

```json
"dependencies": {
"gatsby": "next",
"gatsby-image": "next",
"gatsby-plugin-sharp": "next"
"gatsby": "^2.0.0",
}
```

> Note: Gatsby v2 is in pre-release so you may encounter further breaking changes.
Or run

```bash
npm i gatsby@latest
```

### Update Gatsby related packages

Update your `package.json` to use the pre-release versions of Gatsby related packages. Any package name that starts with `gatsby-` should be upgraded to use the `next` version. Note, this only applies to plugins managed in the gatsbyjs/gatsby repo. If you're using community plugins, they might not be upgraded yet. Check their repo for the status. Many plugins won't actually need upgrading so they very well might keep working. For example:
Update your `package.json` to use the latest versions of Gatsby related packages. Any package name that starts with `gatsby-` should be upgraded. Note, this only applies to plugins managed in the gatsbyjs/gatsby repo. If you're using community plugins, they might not be upgraded yet. Check their repo for the status. Many plugins won't actually need upgrading so they very well might keep working. You can run

`package.json`
```bash
npm outdated
```

```json
"dependencies": {
"gatsby-plugin-google-analytics": "next",
"gatsby-plugin-netlify": "next",
"gatsby-plugin-sass": "next",
}
And compare "Wanted" and "Latest" versions and update `package.json` file manually or run

```bash
npm i gatsby-plugin-google-analytics@latest gatsby-plugin-netlify@latest gatsby-plugin-sass@latest
```

**NOTE**: Above command is just an example - adjust packages to ones you are actually using.

### Manually install React

In v1, the `react` and `react-dom` packages were included as part of the `gatsby` package. They are now `peerDependencies` so you are required to install them into your project.
Expand Down Expand Up @@ -325,7 +329,7 @@ To have the same configuration that you had in v1 (if you were using these plugi

#### 1. Install the dependencies

`npm install --save gatsby-plugin-postcss@next postcss-import postcss-cssnext postcss-browser-reporter postcss-reporter`
`npm install --save gatsby-plugin-postcss postcss-import postcss-cssnext postcss-browser-reporter postcss-reporter`

**NOTE**: `postcss-cssnext` is [deprecated](https://moox.io/blog/deprecating-cssnext/) and it is better to use `postcss-preset-env` now.

Expand Down Expand Up @@ -930,26 +934,26 @@ Import graphql types from `gatsby/graphql` to prevent `Schema must contain uniqu

Here's a brief section on starting a new project with Gatsby v2 instead of upgrading an existing project.

_Start from scratch:_ If you're a _start from scratch_ kind of person, you can install the Gatsby beta and React like this: `npm install gatsby@next react react-dom`
_Start from scratch:_ If you're a _start from scratch_ kind of person, you can install the Gatsby and React like this: `npm install gatsby react react-dom`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The "the" here needs removed you can install Gatsby and React like this:


_Tutorial:_ If you'd like a step-by-step guide, [follow the tutorial](/tutorial/) to get started with Gatsby v2.

_Starters:_ If you'd rather use one of the official starters, you're in luck, there's a v2 edition for each of them. Install your favourite one with the Gatsby CLI.
_Starters:_ If you'd rather use one of the official starters, install your favourite one with the Gatsby CLI.

`gatsby-starter-default` with v2:

```
gatsby new my-default-project https://github.com/gatsbyjs/gatsby-starter-default#v2
gatsby new my-default-project https://github.com/gatsbyjs/gatsby-starter-default
```

`gatsby-starter-hello-world` with v2:

```
gatsby new my-hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world#v2
gatsby new my-hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
```

`gatsby-starter-blog` with v2:

```
gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog#v2
gatsby new my-blog https://github.com/gatsbyjs/gatsby-starter-blog
```
2 changes: 1 addition & 1 deletion docs/docs/source-plugin-tutorial.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ Your plugin will have the following behavior:
Create a new Gatsby project and change directories into the new project you just created.

```shell
gatsby new source-tutorial-site https://github.com/gatsbyjs/gatsby-starter-default#v2
gatsby new source-tutorial-site https://github.com/gatsbyjs/gatsby-starter-default
cd source-tutorial-site
```

Expand Down
4 changes: 2 additions & 2 deletions docs/tutorial/part-four/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -73,15 +73,15 @@ Let's create another new site for this part of the tutorial. You're going to bui
Open a new terminal window and run the following commands to create a new Gatsby site in a directory called `tutorial-part-four`, and navigate to the new directory:

```shell
gatsby new tutorial-part-four https://github.com/gatsbyjs/gatsby-starter-hello-world#v2
gatsby new tutorial-part-four https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-four
```

Then install some other needed dependencies at the root of the project. You'll use the Typography theme
"Kirkham", and you'll try out a CSS-in-JS library, ["Emotion"](https://emotion.sh/):

```shell
npm install --save gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion@next emotion react-emotion emotion-server
npm install --save gatsby-plugin-typography typography react-typography typography-theme-kirkham gatsby-plugin-emotion emotion react-emotion emotion-server
```

Let's set up a site similar to what you ended with in [Part Three](/tutorial/part-three). This site will have a layout component and two page components:
Expand Down
2 changes: 1 addition & 1 deletion docs/tutorial/part-one/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ In the [**previous section**](/tutorial/part-zero/), you prepared your local dev
In [**tutorial part zero**](/tutorial/part-zero/), you created a new site based on the “hello world” starter using the following command:

```bash
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world#v2
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
```

When creating a new Gatsby site, you can use the following command structure to create a new site based on any existing Gatsby starter:
Expand Down
2 changes: 1 addition & 1 deletion docs/tutorial/part-three/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Let's dive in and explore creating layouts.
As we mentioned in Part Two, at this point it's probably a good idea to close the terminal window(s) and project files from previous parts of the tutorial, to keep things clean on your desktop. Then, open a new terminal window and run the following commands to create a new Gatsby site in a directory called `tutorial-part-three` and then move to this new directory:

```shell
gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world#v2
gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-three
```

Expand Down
2 changes: 1 addition & 1 deletion docs/tutorial/part-two/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ Let's start by creating a new site. At this point it probably makes sense to clo
Just like in part one, open a new terminal window and run the following commands to create a new Gatsby site in a directory called `tutorial-part-two`. Then, change to this new directory:

```shell
gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-world#v2
gatsby new tutorial-part-two https://github.com/gatsbyjs/gatsby-starter-hello-world
cd tutorial-part-two
```

Expand Down
2 changes: 1 addition & 1 deletion docs/tutorial/part-zero/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ Now let’s use the gatsby-cli tool to create your first Gatsby site. Using the
### ✋ Create a Gatsby site

1. Open up your terminal.
2. Run `gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world#v2`. (_Note: Depending on your download speed, the amount of time this takes will vary. For brevity's sake, the gif below was paused during part of the install_).
2. Run `gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world`. (_Note: Depending on your download speed, the amount of time this takes will vary. For brevity's sake, the gif below was paused during part of the install_).
3. Run `cd hello-world`.
4. Run `gatsby develop`.

Expand Down
2 changes: 1 addition & 1 deletion packages/gatsby-codemods/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ npm install --global jscodeshift
- Install this package

```
npm install gatsby-codemods@next
npm install gatsby-codemods
```

- Run a transform from this package on your project
Expand Down
2 changes: 1 addition & 1 deletion packages/gatsby-plugin-layout/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ This plugin reimplements the behavior of layout components in `gatsby@1`, which
## Install

```
npm install --save gatsby-plugin-layout@next
npm install --save gatsby-plugin-layout
```

## How to use
Expand Down
4 changes: 2 additions & 2 deletions packages/gatsby-plugin-netlify-cms/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

**Gatsby v1 and Netlify CMS 1.x require [`gatsby-plugin-netlify-cms@^2.0.0`](https://github.com/gatsbyjs/gatsby/blob/gatsby-plugin-netlify-cms@2.0.1/packages/gatsby-plugin-netlify-cms/README.md).**

**Gatsby v2 and Netlify CMS 2.x require `gatsby-plugin-netlify-cms@^3.0.0-beta.0`, which is documented below.**
**Gatsby v2 and Netlify CMS 2.x require `gatsby-plugin-netlify-cms@^3.0.0`, which is documented below.**

## Overview

Expand All @@ -16,7 +16,7 @@ site](https://netlifycms.org).
## Install

```shell
npm install --save netlify-cms gatsby-plugin-netlify-cms@next
npm install --save netlify-cms gatsby-plugin-netlify-cms
```

## How to use
Expand Down
2 changes: 1 addition & 1 deletion packages/gatsby-source-graphql/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Plugin for connecting arbitrary GraphQL APIs to Gatsby GraphQL. Remote schemas a

## Install

`npm install --save gatsby-source-graphql@next`
`npm install --save gatsby-source-graphql`

## How to use

Expand Down
3 changes: 0 additions & 3 deletions packages/gatsby/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,6 @@ You can get a new Gatsby site up and running on your local dev environment in 5
gatsby new my-blazing-fast-site
```

_Want to try v2 beta? Run this instead:_
`gatsby new my-blazing-fast-site https://github.com/gatsbyjs/gatsby-starter-default#v2`

2. **Start the site in `develop` mode.**

Next, move into your new site’s directory and start it up:
Expand Down
2 changes: 1 addition & 1 deletion scripts/integration-test.sh
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ SRC_PATH=$2
GATSBY_PATH="${TRAVIS_BUILD_DIR:-../../}" # set to third arg if defined, otherwise use ../../

if [[ "$INTEGRATION_TEST" = true ]]; then
npm install -g gatsby-dev-cli@next
npm install -g gatsby-dev-cli

# bootstrapping all packages so we test _this_ PR's changes
echo "=== bootstrapping $(pwd)"
Expand Down
2 changes: 1 addition & 1 deletion translations/es/docs/tutorial/part-one/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ En la [**sección previa**](/tutorial/part-zero/), preparaste tu entorno de desa
En el [**tutorial parte cero**](/tutorial/part-zero/), creaste un nuevo sitio basado en el inicio "hello world" utilizando el siguiente comando:

```bash
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world#v2
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world
```

Al crear un nuevo sitio de Gatsby, puedes usar la siguiente estructura de comando para crear un nuevo sitio basado en cualquier iniciador de Gatsby existente:
Expand Down
2 changes: 1 addition & 1 deletion translations/es/docs/tutorial/part-zero/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ Ahora usemos la herramienta gatsby-cli para crear tu primer sitio de Gatsby. Con
### ✋ Crear un sitio de Gatsby

1. Abre tu terminal.
2. Ejecuta `gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world#v2`. (_Nota: Dependiendo de la velocidad de descarga, la cantidad de tiempo que esto tomará variará. En aras de la brevedad, el gif siguiente se pausó durante parte de la instalación_).
2. Ejecuta `gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world`. (_Nota: Dependiendo de la velocidad de descarga, la cantidad de tiempo que esto tomará variará. En aras de la brevedad, el gif siguiente se pausó durante parte de la instalación_).
3. Ejecuta `cd hello-world`.
4. Ejecuta `gatsby develop`.

Expand Down
2 changes: 1 addition & 1 deletion www/src/components/layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ class DefaultLayout extends React.Component {
<html lang="en" />
</Helmet>
<Banner background={isHomepage ? `#402060` : false}>
These are the docs for v2 beta.
These are the docs for v2.
{` `}
<a
href="https://gatsbyjs.org/"
Expand Down
2 changes: 1 addition & 1 deletion www/src/pages/docs/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ class IndexRoute extends React.Component {
<pre className="language-bash">
<code className="language-bash">
gatsby new gatsby-site
https://github.com/gatsbyjs/gatsby-starter-default#v2
https://github.com/gatsbyjs/gatsby-starter-default
</code>
</pre>
</div>
Expand Down