diff --git a/docs/tutorial/index.md b/docs/tutorial/index.md index f6439fb64d6c2..43d4040099ab3 100644 --- a/docs/tutorial/index.md +++ b/docs/tutorial/index.md @@ -20,4 +20,4 @@ In these advanced tutorials, you'll learn how to pull data from almost anywhere 4. [Querying for data in a blog](/tutorial/part-four/): Create a blog and use a GraphQL query to pull your site title into the blog header. 5. [Source plugins and rendering queried data](/tutorial/part-five/): Use a source plugin to pull Markdown blogposts into your site and create an index page with a list of blogposts. 6. [Transformer plugins](/tutorial/part-six/): Use a transformer plugin to transform your Markdown blogposts into a form the blog can render. -7. [Programmatically create pages from data](/tutorial/part-seven/): Learn how to programmatically create a set of pages for your blogposts. \ No newline at end of file +7. [Programmatically create pages from data](/tutorial/part-seven/): Learn how to programmatically create a set of pages for your blogposts. diff --git a/docs/tutorial/part-two/index.md b/docs/tutorial/part-two/index.md index a07e81ab50c13..0ed6b66db3161 100644 --- a/docs/tutorial/part-two/index.md +++ b/docs/tutorial/part-two/index.md @@ -5,16 +5,18 @@ typora-copy-images-to: ./ Welcome to part two of the Gatsby tutorial! +## What's in this tutorial? + In this part we're going to explore options for styling Gatsby websites and dive deeper into using React components for building sites. ## Building with components -One of the big mental shifts you make when starting to build with components is -that now your CSS, HTML, and JavaScript are tightly coupled, often living even +One of the big mental shifts you make when starting to build with components (if you are already a developer) is +that now your CSS, HTML, and JavaScript are tightly coupled, and often living even within the same file. -While a seemingly simple change, it has profound implications for how you think +While a seemingly simple change, this has profound implications for how you think about building websites. Take the example of creating a custom button. In the past you would @@ -49,7 +51,7 @@ Often people will use something like Bootstrap or Foundation for their global styles. The problem with these, however, is they're difficult to customize and they're not designed to work well with React components. -So for this tutorial let's explore a JavaScript library called +For this tutorial, let's explore a JavaScript library called [Typography.js](https://github.com/kyleamathews/typography.js) that generates global styles and works particularly well with Gatsby and React. @@ -101,14 +103,14 @@ JavaScript code) that others can then use when building Gatsby sites. There's already dozens of plugins! Check them out at the [plugins section of the site](/docs/plugins/). -Our goal with Gatsby plugins is to make them easy to install and use. In almost every Gatsby site you +Our goal with Gatsby plugins is to make them straightforward to install and use. In almost every Gatsby site you build, you will be installing plugins. While working through the rest of the tutorial, you'll have many opportunities to practice installing and using plugins. ## Installing your first Gatsby plugin -Let's start by creating a new site. At this point it probably makes sense to close the terminal window(s) you used to build tutorial-part-one so that you don't accidentally start building tutorial-part-two in the wrong place. If you don't close tutorial-part-one prior to building tutorial-part-two, you will see that tutorial-part-two appears at localhost:8001 instead of localhost:8000. +Let's start by creating a new site. At this point it probably makes sense to close the terminal windows you used to build tutorial-part-one so that you don't accidentally start building tutorial-part-two in the wrong place. If you don't close tutorial-part-one prior to building tutorial-part-two, you will see that tutorial-part-two appears at localhost:8001 instead of localhost:8000. Similar to part one, open a new terminal window and run the following to create a new site: @@ -147,7 +149,7 @@ module.exports = { }; ``` -Gatsby reads the site's config file when starting. Here we tell it to look for a +Gatsby reads the site's config file when starting. Here, we tell it to look for a plugin named `gatsby-plugin-typography`. Gatsby knows to look for plugins that are NPM packages, so it will find the package we installed previously. @@ -305,9 +307,9 @@ export default typography; ![typography-lawton](typography-lawton.png) -Typography.js has more than 30 themes! +*Challenge:* Typography.js has more than 30 themes! [Try them live](http://kyleamathews.github.io/typography.js) or check out -[the complete list](https://github.com/KyleAMathews/typography.js#published-typographyjs-themes) +[the complete list](https://github.com/KyleAMathews/typography.js#published-typographyjs-themes) and try installing one on your current Gatsby site. ## Component CSS @@ -316,7 +318,7 @@ one very popular method: CSS Modules. ### CSS-in-JS -While we won't cover CSS-in-JS in this initial tutorial, we encourage you to explore CSS-in-JS libraries as these solve many of the problems with traditional CSS plus help make your React components even smarter. There are mini-tutorials for two libraries, [Glamor](/docs/glamor/) and [Styled Components](/docs/styled-components/). Check out the following resources for background reading on CSS-in-JS: +While we won't cover CSS-in-JS in this initial tutorial, we encourage you to explore CSS-in-JS libraries because these solve many of the problems with traditional CSS plus help make your React components even smarter. There are mini-tutorials for two libraries, [Glamor](/docs/glamor/) and [Styled Components](/docs/styled-components/). Check out the following resources for background reading on CSS-in-JS: [Christopher "vjeux" Chedeau's 2014 presentation that sparked this movement](https://speakerdeck.com/vjeux/react-css-in-js) as well as @@ -356,7 +358,7 @@ export default ({ children }) => ( ); ``` -Then create a new component page by creating a file at +Then, create a new component page by creating a file at `src/pages/about-css-modules.js`: ```javascript @@ -503,4 +505,6 @@ yet for your favorite CSS option, * [Stylus](/packages/gatsby-plugin-stylus/) * and more! +## What's coming next? + Now continue on to [Part Three](/tutorial/part-three/) of the tutorial.