chore(docs): Fix links to old tutorial docs (#33605)

gatsbyjs · Oct 21, 2021 · 42bcb00 · 42bcb00
1 parent 5a5bc2b
commit 42bcb00
Show file tree

Hide file tree

Showing 47 changed files with 63 additions and 63 deletions.
diff --git a/docs/contributing/translation/sync-guide.md b/docs/contributing/translation/sync-guide.md
@@ -169,7 +169,7 @@ If a page has significant changes, it may be worth splitting it into its own pul
 ```shell
 git checkout conflicts-9032a0
 git checkout -b sync-tutorial-0
-# Fix conflicts in /docs/docs/tutorial/part-zero/index.md
+# Fix conflicts in /docs/docs/tutorial/part-0/index.md
 git commit -am "Fix conflicts in tutorial part zero"
 git push -u origin sync-tutorial-0
 ```

diff --git a/docs/docs/adding-tags-and-categories-to-blog-posts.md b/docs/docs/adding-tags-and-categories-to-blog-posts.md
@@ -4,7 +4,7 @@ title: Creating Tags Pages for Blog Posts
 
 Creating tag pages for your blog post is a way to let visitors browse related content.
 
-To add tags to your blog posts, you will first want to have your site set up to turn your markdown pages into blog posts. To get your blog pages set up, see the [tutorial on Gatsby's data layer](/docs/tutorial/part-four/) and [Adding Markdown Pages](/docs/how-to/routing/adding-markdown-pages/).
+To add tags to your blog posts, you will first want to have your site set up to turn your markdown pages into blog posts. To get your blog pages set up, see the [tutorial on Gatsby's data layer](/docs/tutorial/part-4/) and [Adding Markdown Pages](/docs/how-to/routing/adding-markdown-pages/).
 
 The process will essentially look like this:
 

diff --git a/docs/docs/building-an-ecommerce-site-with-shopify.md b/docs/docs/building-an-ecommerce-site-with-shopify.md
@@ -123,7 +123,7 @@ export const query = graphql`
 
 ## Generating a page for each product
 
-You can [programmatically create pages](/docs/tutorial/part-seven/) in Gatsby for every product in your Shopify store.
+You can [programmatically create pages](/docs/tutorial/part-7/) in Gatsby for every product in your Shopify store.
 
 Create a template for your product pages by adding a new file, `/src/templates/product.js`.
 

diff --git a/docs/docs/conceptual/building-with-components.md b/docs/docs/conceptual/building-with-components.md
@@ -79,7 +79,7 @@ pages are React components but very often these components are just wrappers aro
 `src/templates/post.js` is an example of a page component. It queries GraphQL
 for markdown data and then renders the page using this data.
 
-See [part seven](/docs/tutorial/part-seven/) of the tutorial for a detailed
+See [part seven](/docs/tutorial/part-7/) of the tutorial for a detailed
 introduction to programmatically creating pages.
 
 Example:

diff --git a/docs/docs/conceptual/data-fetching.md b/docs/docs/conceptual/data-fetching.md
@@ -25,7 +25,7 @@ Reasons to fetch certain data at build time vs. client runtime will vary, but in
 
 In order to fetch data at build time, you can use a source plugin or source data yourself. To source data yourself you can create an integration with a third-party system by creating [nodes for the GraphQL layer](/docs/node-creation/) in your `gatsby-node` file from retrieved data that becomes queryable in pages. This is the same method that source plugins implement to [source data](/docs/content-and-data/) while the site builds. You can read about that process in the [Creating a Source Plugin guide](/docs/how-to/plugins-and-themes/creating-a-source-plugin/).
 
-> This process of fetching data at build time and creating pages from the data is [covered in more depth in the tutorial](/docs/tutorial/part-five/) as well as the docs for [creating pages from data programmatically](/docs/programmatically-create-pages-from-data/).
+> This process of fetching data at build time and creating pages from the data is [covered in more depth in the tutorial](/docs/tutorial/part-5/) as well as the docs for [creating pages from data programmatically](/docs/programmatically-create-pages-from-data/).
 
 #### Source data to be queried at build time
 

diff --git a/docs/docs/conceptual/gatsby-jargon.md b/docs/docs/conceptual/gatsby-jargon.md
@@ -60,7 +60,7 @@ GraphQL is a query language (the QL part of its name) that Gatsby uses to genera
 
 Using a special syntax, you describe the data you want in your component and then that data is given to you, such as site metadata from your `gatsby-config.js`, connected WordPress posts, Markdown files, images, and more. Gatsby uses GraphQL to enable components to declare the data they need and apply it to render on a page. Using GraphQL in Gatsby provides many [benefits](/docs/why-gatsby-uses-graphql/), such as the ability to return data from multiple sources in one query, and transform that data at the same time (such as using Gatsby Image).
 
-Here is how you get started using GraphQL in Gatsby: [Tutorial - Part 4](/docs/tutorial/part-four/)
+Here is how you get started using GraphQL in Gatsby: [Tutorial - Part 4](/docs/tutorial/part-4/)
 
 ## webpack
 

diff --git a/docs/docs/conceptual/graphql-concepts.md b/docs/docs/conceptual/graphql-concepts.md
@@ -118,7 +118,7 @@ When starting out with GraphQL, we recommend the following two tutorials:
 - https://www.howtographql.com/
 - https://graphql.org/learn/
 
-[The official Gatsby tutorial](/docs/tutorial/part-four/) also includes an introduction to using GraphQL specifically with Gatsby.
+[The official Gatsby tutorial](/docs/tutorial/part-4/) also includes an introduction to using GraphQL specifically with Gatsby.
 
 ## How do GraphQL and Gatsby work together?
 

diff --git a/docs/docs/glossary/build.md b/docs/docs/glossary/build.md
@@ -23,7 +23,7 @@ For smaller teams and projects, use `gatsby build`. The `gatsby build` command i
 npm install -g gatsby-cli
 ```
 
-Installing `gatsby-cli` globally makes Gatsby commands available system-wide. You'll use `gatsby new` to [create a new site](/docs/tutorial/part-zero/#create-a-gatsby-site), and `gatsby develop` to start a development server on your local machine.
+Installing `gatsby-cli` globally makes Gatsby commands available system-wide. You'll use `gatsby new` to [create a new site](/docs/tutorial/part-0/#create-a-gatsby-site), and `gatsby develop` to start a development server on your local machine.
 
 When you're ready to publish your project, run the `gatsby build` command to create a production-ready version of your site. Once built, you can use an SFTP client, the [rsync](https://en.wikipedia.org/wiki/Rsync) utility, or similar tool to transfer these files to your host.
 

diff --git a/docs/docs/glossary/node.md b/docs/docs/glossary/node.md
@@ -17,7 +17,7 @@ A year later, Node.js made its debut as a standalone JavaScript runtime using th
 
 Once you've installed Node.js, you can use it to run JavaScript from the [command line](/docs/glossary#command-line). Type `node` at a prompt to launch the Node.js interactive shell. Include the path to a JavaScript file to execute that script: e.g. `node /Users/gatsbyfan/hello-world.js`.
 
-You will need to [install Node.js](/docs/tutorial/part-zero/#install-nodejs-for-your-appropriate-operating-system) before using Gatsby. Gatsby is built using JavaScript, and requires the Node.js runtime.
+You will need to [install Node.js](/docs/tutorial/part-0/#install-nodejs-for-your-appropriate-operating-system) before using Gatsby. Gatsby is built using JavaScript, and requires the Node.js runtime.
 
 Installing Node.js also installs [npm](/docs/glossary#npm), the Node.js _package manager_. A package manager is specialized software that lets you install and update modules and packages used in your project.
 

diff --git a/docs/docs/glossary/npm.md b/docs/docs/glossary/npm.md
@@ -15,7 +15,7 @@ its plugins.
 
 npm is a [command line](/docs/glossary#command-line) tool. You'll need Terminal (Mac, Linux) or Command Prompt (Windows) in order to run its commands. To use one of npm's features, type `npm <command>`. For example, `npm help` displays a list of available features, including `install`, `uninstall`, `update`, and `search`.
 
-npm is installed alongside Node during the default [installation process](/docs/tutorial/part-zero/#install-nodejs-for-your-appropriate-operating-system). You don't need to take any additional steps to add it to your environment.
+npm is installed alongside Node during the default [installation process](/docs/tutorial/part-0/#install-nodejs-for-your-appropriate-operating-system). You don't need to take any additional steps to add it to your environment.
 
 ### Using npm to install Gatsby
 
@@ -58,4 +58,4 @@ This will update the dependencies list of `package.json` and `package-lock.json`
 - [npm](https://www.npmjs.com/) official website
 - [Node.js](https://nodejs.org/en/) official website
 - [An introduction to the npm package manager](https://nodejs.dev/an-introduction-to-the-npm-package-manager) from Nodejs.dev
-- [Set Up Your Development Environment](/docs/tutorial/part-zero/) from the Gatsby docs
+- [Set Up Your Development Environment](/docs/tutorial/part-0/) from the Gatsby docs
diff --git a/docs/docs/how-to/images-and-media/preprocessing-external-images.md b/docs/docs/how-to/images-and-media/preprocessing-external-images.md
@@ -132,7 +132,7 @@ query {
 }
 ```
 
-And finally, you can update the template for this blog post to include a featured image node. Note the alt text still comes from the post frontmatter. This template is based on the one in the [Programmatically create pages from data](/docs/tutorial/part-seven/) section of the Gatsby Tutorial.
+And finally, you can update the template for this blog post to include a featured image node. Note the alt text still comes from the post frontmatter. This template is based on the one in the [Programmatically create pages from data](/docs/tutorial/part-7/) section of the Gatsby Tutorial.
 
 ```jsx
 import React from "react"

diff --git a/docs/docs/how-to/local-development/starters.md b/docs/docs/how-to/local-development/starters.md
@@ -31,6 +31,6 @@ gatsby develop
 ## Additional resources
 
 - Follow a [more detailed guide](/docs/starters/) on using Gatsby starters.
-- Learn how to use the [Gatsby CLI](/docs/reference/gatsby-cli) tool to use starters in [tutorial part one](/docs/tutorial/part-one/#using-gatsby-starters)
+- Learn how to use the [Gatsby CLI](/docs/reference/gatsby-cli) tool to use starters in [tutorial part one](/docs/tutorial/part-1/#using-gatsby-starters)
 - Browse the [Starter Library](/starters/?v=2)
 - Check out Gatsby's [official default starter](https://github.com/gatsbyjs/gatsby-starter-default)
diff --git a/docs/docs/how-to/querying-data/page-query.md b/docs/docs/how-to/querying-data/page-query.md
@@ -78,7 +78,7 @@ const HomePage = () => {
 
 The first part of writing the GraphQL query is including the operation (in this case "`query`") along with a name.
 
-From [exploring in the GraphQL IDE, GraphiQL](/docs/tutorial/part-five/#introducing-graphiql/), you've learned that one of the types that you can query is `site`, which in turn has its own `siteMetadata` field with subfields that correspond to the data provided in `gatsby-config.js`.
+From [exploring in the GraphQL IDE, GraphiQL](/docs/tutorial/part-5/#introducing-graphiql/), you've learned that one of the types that you can query is `site`, which in turn has its own `siteMetadata` field with subfields that correspond to the data provided in `gatsby-config.js`.
 
 Putting this together, the completed query looks like:
 

diff --git a/docs/docs/how-to/querying-data/running-queries-with-graphiql.md b/docs/docs/how-to/querying-data/running-queries-with-graphiql.md
@@ -47,6 +47,6 @@ The environment variable `ENABLE_GATSBY_REFRESH_ENDPOINT` enables a "Refresh Dat
 
 ## Other resources
 
-- See [Tutorial Part 5: Source Plugins](/docs/tutorial/part-five/) for a more complete example of using GraphiQL
+- See [Tutorial Part 5: Source Plugins](/docs/tutorial/part-5/) for a more complete example of using GraphiQL
 - See the [README for GraphiQL](https://github.com/graphql/graphiql)
 - See [Using GraphQL Playground](/docs/using-graphql-playground/) for another example of a GraphQL IDE
diff --git a/docs/docs/how-to/routing/layout-components.md b/docs/docs/how-to/routing/layout-components.md
@@ -59,7 +59,7 @@ Alternatively, you can prevent your layout component from unmounting by using [g
 
 ## Other resources
 
-- [Creating nested layout components in Gatsby](/docs/tutorial/part-three/)
+- [Creating nested layout components in Gatsby](/docs/tutorial/part-3/)
 - [Life after layouts in Gatsby V2](/blog/2018-06-08-life-after-layouts/)
 - [Migrating from v1 to v2](/docs/reference/release-notes/migrating-from-v1-to-v2/#remove-or-refactor-layout-components)
 - [gatsby-plugin-layout](/plugins/gatsby-plugin-layout/)

diff --git a/docs/docs/how-to/styling/css-modules.md b/docs/docs/how-to/styling/css-modules.md
@@ -71,4 +71,4 @@ performance benefits like only bundling referenced code.
 
 ## How to build a page using CSS Modules
 
-Visit the [CSS Modules section of the tutorial](/docs/tutorial/part-two/#css-modules) for a guided tour of building a page with CSS Modules.
+Visit the [CSS Modules section of the tutorial](/docs/tutorial/part-2/#css-modules) for a guided tour of building a page with CSS Modules.
diff --git a/docs/docs/how-to/styling/global-css.md b/docs/docs/how-to/styling/global-css.md
@@ -8,7 +8,7 @@ Globally-scoped CSS rules are declared in external `.css` stylesheets, and [CSS
 
 ## Adding global styles with a layout component
 
-The best way to add global styles is with a [shared layout component](/docs/tutorial/part-three/#your-first-layout-component). This layout component is used for things that are shared throughout the site, including styles, header components, and other common items.
+The best way to add global styles is with a [shared layout component](/docs/tutorial/part-3/#your-first-layout-component). This layout component is used for things that are shared throughout the site, including styles, header components, and other common items.
 
 > **NOTE:** This pattern is implemented by default in [the default starter](https://github.com/gatsbyjs/gatsby-starter-default/blob/063978d59f74103da45d5880a61ebd2e77798e3c/src/components/layout.js#L13).
 

diff --git a/docs/docs/linking-between-pages.md b/docs/docs/linking-between-pages.md
@@ -59,5 +59,5 @@ It is also recommended to include a [visual icon](https://thenounproject.com/ter
 
 ## Other resources
 
-- For the complete example of how to link between pages, see [Part One](/docs/tutorial/part-one/#linking-between-pages/) in the Tutorial
+- For the complete example of how to link between pages, see [Part One](/docs/tutorial/part-1/#linking-between-pages/) in the Tutorial
 - Check out more detail on routing in Gatsby in the [API doc for Gatsby Link](/docs/reference/built-in-components/gatsby-link/).
diff --git a/docs/docs/porting-an-html-site-to-gatsby.md b/docs/docs/porting-an-html-site-to-gatsby.md
@@ -41,7 +41,7 @@ No [client-side](/docs/glossary#client-side) JavaScript (e.g jQuery etc.) is on
 
 ### Development environment
 
-Gatsby generates websites and web applications for production through a compilation and build process, and it also has tools optimized for local development. To set up the Gatsby [CLI](/docs/glossary#cli) and development environment (if you haven't already) check out [Part Zero of the Gatsby tutorial](/docs/tutorial/part-zero/).
+Gatsby generates websites and web applications for production through a compilation and build process, and it also has tools optimized for local development. To set up the Gatsby [CLI](/docs/glossary#cli) and development environment (if you haven't already) check out [Part Zero of the Gatsby tutorial](/docs/tutorial/part-0/).
 
 ### Gatsby Project
 

diff --git a/docs/docs/preparing-your-environment.md b/docs/docs/preparing-your-environment.md
@@ -4,11 +4,11 @@ title: Preparing Your Environment
 
 To get started with Gatsby, you'll need to make sure you have the following software tools installed:
 
-1. [Node.js](/docs/tutorial/part-zero/#install-nodejs-for-your-appropriate-operating-system)
-2. [npm CLI](/docs/tutorial/part-zero/#check-your-nodejs-installation)
-3. [Gatsby CLI](/docs/tutorial/part-zero/#using-the-gatsby-cli)
+1. [Node.js](/docs/tutorial/part-0/#install-nodejs-for-your-appropriate-operating-system)
+2. [npm CLI](/docs/tutorial/part-0/#check-your-nodejs-installation)
+3. [Gatsby CLI](/docs/tutorial/part-0/#using-the-gatsby-cli)
 
-For step-by-step installation instructions and detailed explanations of the required software, head on over to the [Gatsby tutorial](/docs/tutorial/part-zero/).
+For step-by-step installation instructions and detailed explanations of the required software, head on over to the [Gatsby tutorial](/docs/tutorial/part-0/).
 
 The [quick start](/docs/quick-start/) is also available for intermediate to advanced developers.
 

diff --git a/docs/docs/query-behind-the-scenes.md b/docs/docs/query-behind-the-scenes.md
@@ -4,7 +4,7 @@ title: How Queries Work
 
 In Gatsby, GraphQL queries are specified as tagged `graphql` expressions. These can be exported in your page source files, used in the `StaticQuery` component, or used in the `useStaticQuery` hook in your React code. Plugins can also define fragments for use in queries.
 
-Note that the process outlined in this section only applies to queries that are specified in components or templates. It does _not_ apply to queries specified in a `gatsby-node.js` file which are typically used for the creation of dynamic pages. (For an example of a query in a `gatsby-node.js` file, check out the [Creating Pages](/docs/tutorial/part-seven/#creating-pages) section from Part 7 of the Gatsby tutorial.
+Note that the process outlined in this section only applies to queries that are specified in components or templates. It does _not_ apply to queries specified in a `gatsby-node.js` file which are typically used for the creation of dynamic pages. (For an example of a query in a `gatsby-node.js` file, check out the [Creating Pages](/docs/tutorial/part-7/#creating-pages) section from Part 7 of the Gatsby tutorial.
 
 Most code to do with queries is in the [src/query](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby/src/query) directory in the Gatsby monorepo.
 

diff --git a/docs/docs/recipes/deploying-your-site.md b/docs/docs/recipes/deploying-your-site.md
@@ -46,7 +46,7 @@ gatsby build && gatsby serve
 
 ### Additional resources
 
-- Walk through building and deploying an example site in [tutorial part one](/docs/tutorial/part-one/#deploying-a-gatsby-site)
+- Walk through building and deploying an example site in [tutorial part one](/docs/tutorial/part-1/#deploying-a-gatsby-site)
 - Learn about [performance optimization](/docs/performance/)
 - Read about [other deployment related topics](/docs/preparing-for-deployment/)
 - Check out the [deployment docs](/docs/deploying-and-hosting/) for specific hosting platforms and how to deploy to them

diff --git a/docs/docs/recipes/pages-layouts.md b/docs/docs/recipes/pages-layouts.md
@@ -153,7 +153,7 @@ export default function Home() {
 
 ### Additional resources
 
-- Create a layout component in [tutorial part three](/docs/tutorial/part-three/#your-first-layout-component)
+- Create a layout component in [tutorial part three](/docs/tutorial/part-3/#your-first-layout-component)
 - Styling with [Layout Components](/docs/how-to/routing/layout-components/)
 
 ## Creating pages programmatically with createPage
@@ -244,6 +244,6 @@ export default function DogTemplate({ pageContext: { dog } }) {
 
 ### Additional resources
 
-- Tutorial section on [programmatically creating pages from data](/docs/tutorial/part-seven/)
+- Tutorial section on [programmatically creating pages from data](/docs/tutorial/part-7/)
 - Reference guide on [using Gatsby without GraphQL](/docs/how-to/querying-data/using-gatsby-without-graphql/)
 - [Example repo](https://github.com/gatsbyjs/gatsby/tree/master/examples/recipe-createPage) for this recipe
diff --git a/docs/docs/recipes/sourcing-data.md b/docs/docs/recipes/sourcing-data.md
@@ -57,7 +57,7 @@ query MyPokemonQuery {
 
 ### Additional resources
 
-- Walk through an example using the `gatsby-source-filesystem` plugin in [tutorial part five](/docs/tutorial/part-five/#source-plugins)
+- Walk through an example using the `gatsby-source-filesystem` plugin in [tutorial part five](/docs/tutorial/part-5/#source-plugins)
 - Search available source plugins in the [Gatsby library](/plugins/?=source)
 - Understand source plugins by building one in the [source plugin tutorial](/docs/how-to/plugins-and-themes/creating-a-source-plugin/)
 - The createNode function [documentation](/docs/reference/config-files/actions/#createNode)
@@ -202,7 +202,7 @@ export const pageQuery = graphql`
 
 ### Additional resources
 
-- [Tutorial: Programmatically create pages from data](/docs/tutorial/part-seven/)
+- [Tutorial: Programmatically create pages from data](/docs/tutorial/part-7/)
 - [Creating and modifying pages](/docs/creating-and-modifying-pages/)
 - [Adding Markdown pages](/docs/how-to/routing/adding-markdown-pages/)
 - [Guide to creating pages from data programmatically](/docs/programmatically-create-pages-from-data/)
@@ -633,4 +633,4 @@ export const query = graphql`
 
 - [Using Decoupled Drupal with Gatsby](/blog/2018-08-13-using-decoupled-drupal-with-gatsby/)
 - [More on sourcing from Drupal](/docs/how-to/sourcing-data/sourcing-from-drupal)
-- [Tutorial: Programmatically create pages from data](/docs/tutorial/part-seven/)
+- [Tutorial: Programmatically create pages from data](/docs/tutorial/part-7/)
diff --git a/docs/docs/recipes/styling-css.md b/docs/docs/recipes/styling-css.md
@@ -50,7 +50,7 @@ import "./src/styles/global.css"
 
 ### Directions
 
-You can add global styles to a [shared layout component](/docs/tutorial/part-three/#your-first-layout-component). This component is used for things that are common throughout the site, like a header or footer.
+You can add global styles to a [shared layout component](/docs/tutorial/part-3/#your-first-layout-component). This component is used for things that are common throughout the site, like a header or footer.
 
 1. If you don't already have one, create a new directory in your site at `/src/components`.
 
@@ -89,7 +89,7 @@ export default function Home() {
 ### Additional resources
 
 - [Standard Styling with Global CSS Files](/docs/how-to/styling/global-css/)
-- [More about layout components](/docs/tutorial/part-three)
+- [More about layout components](/docs/tutorial/part-3)
 
 ## Using Styled Components
 
@@ -213,7 +213,7 @@ Notice that the file extension is `.module.css` instead of `.css`, which tells G
 
 ### Additional resources
 
-- More on [Using CSS Modules](/docs/tutorial/part-two/#css-modules)
+- More on [Using CSS Modules](/docs/tutorial/part-2/#css-modules)
 - [Live example on Using CSS modules](https://github.com/gatsbyjs/gatsby/blob/master/examples/using-css-modules)
 
 ## Using Sass/SCSS
-Original file line number
+Diff line change
@@ Expand Up / @@ -132,7 +132,7 @@ query { @@
     }
     ```
-    And finally, you can update the template for this blog post to include a featured image node. Note the alt text still comes from the post frontmatter. This template is based on the one in the [Programmatically create pages from data](/docs/tutorial/part-seven/) section of the Gatsby Tutorial.
+    And finally, you can update the template for this blog post to include a featured image node. Note the alt text still comes from the post frontmatter. This template is based on the one in the [Programmatically create pages from data](/docs/tutorial/part-7/) section of the Gatsby Tutorial.
     ```jsx
     import React from "react"
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -71,4 +71,4 @@ performance benefits like only bundling referenced code.

		## How to build a page using CSS Modules

		Visit the [CSS Modules section of the tutorial](/docs/tutorial/part-two/#css-modules) for a guided tour of building a page with CSS Modules.
		Visit the [CSS Modules section of the tutorial](/docs/tutorial/part-2/#css-modules) for a guided tour of building a page with CSS Modules.