diff --git a/docs/tutorial/part-five/index.md b/docs/tutorial/part-five/index.md index d36ea302e58c3..1387b14c3bc44 100644 --- a/docs/tutorial/part-five/index.md +++ b/docs/tutorial/part-five/index.md @@ -108,10 +108,11 @@ created: ```jsx{4} import React from "react" +import Layout from "../components/layout" export default ({ data }) => { console.log(data) - return
Hello world
+ return
Hello world
 } export const query = graphql` @@ -145,10 +146,12 @@ Let's add some code to our component to print out the File data. ```jsx{5-37} import React from "react" +import Layout from "../components/layout" export default ({ data }) => { console.log(data) return ( +

My Site's Files

@@ -180,6 +183,7 @@ export default ({ data }) => {
+ ) } diff --git a/docs/tutorial/part-four/index.md b/docs/tutorial/part-four/index.md index 0622d41121b0c..9843b02f02405 100644 --- a/docs/tutorial/part-four/index.md +++ b/docs/tutorial/part-four/index.md @@ -77,7 +77,7 @@ Markdown support. Open a new terminal window and run the following commands to create a new Gatsby site in a directory called `tutorial-part-four`. Then change to this new directory: ```shell -gatsby new tutorial-part-four https://github.com/gatsbyjs/gatsby-starter-hello-world +gatsby new tutorial-part-four https://github.com/gatsbyjs/gatsby-starter-hello-world#v2 cd tutorial-part-four ``` @@ -86,7 +86,7 @@ Kirkham + we'll try out a CSS-in-JS library [Glamorous](https://glamorous.rocks/): ```shell -npm install --save gatsby-plugin-typography gatsby-plugin-glamor glamorous typography-theme-kirkham +npm install --save gatsby-plugin-typography react-typography typography gatsby-plugin-glamor glamorous typography-theme-kirkham ``` Let's set up a site similar to what we ended with in Part Three. This site will have a layout @@ -96,9 +96,10 @@ component and two page components: ```jsx import React from "react" +import Layout from "../components/layout" export default () => ( -
+

Amazing Pandas Eating Things

( alt="Group of pandas eating bamboo" />
-
+ ) ``` @@ -114,19 +115,20 @@ export default () => ( ```jsx import React from "react" +import Layout from "../components/layout" export default () => ( -
+

About Pandas Eating Lots

We're the only site running on your computer dedicated to showing the best photos and videos of pandas eating lots of food.

-
+ ) ``` -`src/layouts/index.js` +`src/components/layout.js` ```jsx import React from "react" @@ -157,7 +159,7 @@ export default ({ children }) => ( About - {children()} + {children} ) ``` @@ -171,6 +173,7 @@ import kirkhamTheme from "typography-theme-kirkham" const typography = new Typography(kirkhamTheme) export default typography +export const typography.rhythm; ``` `gatsby-config.js` (must be in the root of your project, not under src) @@ -263,45 +266,48 @@ export const query = graphql` ` ``` -`src/layouts/index.js` +`src/components/layout.js` -```jsx{10,19,28-33} +```jsx{4,10-21,28-33,39} import React from "react" import g from "glamorous" import { css } from "glamor" -import { Link } from "gatsby" +import { StaticQuery, Link } from "gatsby" import { rhythm } from "../utils/typography" const linkStyle = css({ float: `right` }) -export default ({ children, data }) => - - - - {data.site.siteMetadata.title} - - - - About - - {children()} - - -export const query = graphql` - query LayoutQuery { - site { - siteMetadata { - title +export default ({ children }) => + + + + + {data.site.siteMetadata.title} + + + + About + + {children} + } - } -` + /> ``` It worked!! 🎉 @@ -310,8 +316,8 @@ It worked!! 🎉 But let's restore the real title. -One of the core principles of Gatsby is creators need an immediate connection to -what they're creating +One of the core principles of Gatsby is _creators need an immediate connection to +what they're creating_ ([hat tip to Bret Victor](http://blog.ezyang.com/2012/02/transcript-of-inventing-on-principleb/)). Or, in other words, when you make any change to code you should immediately see the effect of that change. You manipulate an input of Gatsby and you see the new diff --git a/docs/tutorial/part-one/index.md b/docs/tutorial/part-one/index.md index 933043ef0d074..a8a21a62b8dda 100644 --- a/docs/tutorial/part-one/index.md +++ b/docs/tutorial/part-one/index.md @@ -51,7 +51,7 @@ npm install --global gatsby-cli Once that's installed, open a new terminal window and run the following commands to create a new Gatsby site in a directory called `tutorial-part-one` and then move to this new directory: ```sh -gatsby new tutorial-part-one https://github.com/gatsbyjs/gatsby-starter-hello-world +gatsby new tutorial-part-one https://github.com/gatsbyjs/gatsby-starter-hello-world#v2 cd tutorial-part-one ``` @@ -68,7 +68,7 @@ following command: gatsby develop ``` -You should shortly see some text, close to the bottom, that says `The development server is listening at:` [http://localhost:8000](http://localhost:8000). Open that address in your +You should shortly see some text, close to the bottom, that says You can now view gatsby-starter-hello-world in the browser [http://localhost:8000](http://localhost:8000). Open that address in your browser and... ![Gatsby.js hello world](hello-world.png) @@ -150,7 +150,7 @@ First create the link to the new page. To do that, import the `` component from the `gatsby` package that was installed along with the starter. -Unlike the normal HTML `` element, Gatsby's `Link` component uses `to` for +Unlike the normal HTML `` element, Gatsby's `Link` component uses the "`to`" prop for specifying the page you want to link to. Let's link to a page with the pathname of `/page-2/`. Try adding that. Once you're done, the page component should look like: @@ -204,10 +204,10 @@ _Challenge_: Using the instructions above as hints, see if you can create a thir ## Interactive page -One nice thing about using Gatsby for building websites vs. other tools is that itʼs easier to add interactivity to your pages. React.js was designed for +One nice thing about using Gatsby for building websites vs. other tools is that itʼs simple to add interactivity to your pages. Since Gatsby uses React for everything, it's no extra setup work to go beyond normal content templates to rich client interactivity. React excels at building applications as it was designed for Facebook.com and is used on many other world-class web applications. -Let's see how to add interactive elements to our pages. Let's start with a counter. +Let's see how to add interactivity to our pages. Let's start with a counter. We'll start by creating a new link to a page at `/counter`/ from our original `index.js` page component `Counter`. @@ -304,7 +304,7 @@ We're now rendering the current count from the component state. Let's now change the state when we click on our buttons. -```jsx{14-19} +```jsx{14-31} import React from "react" class Counter extends React.Component { @@ -318,11 +318,23 @@ class Counter extends React.Component {

Counter

current count: {this.state.count}

- -
) @@ -334,6 +346,8 @@ export default Counter There you go! A working React.js counter inside your static website 👌 +Because Gatsby is just React, it's easy to add web app features to your Gatsby sites as needed e.g. talk to APIs, add logged-in features, etc. + _Bonus challenge_: One fun thing is that hot reloading isn't just for content and styles; it works on code as well. Currently, when you click the buttons on the counter, the numbers go up and down in increments of 1. Try to make the counter go up and down in a different increments (for example, 5). @@ -362,7 +376,7 @@ Next, build your site by running the following command in the terminal at the ro gatsby build ``` -Building should take 15-30 seconds. At this point, it's useful to take a look at the files that the `gatsby build` command just prepared to deploy. Take a look at a list of the generated files by typing in the following terminal command into the root of your site, which will let you look at the `public` directory: +Building should take 15-30 seconds. Once the build is finished, it's interesting to take a look at the files that the `gatsby build` command just prepared to deploy. Take a look at a list of the generated files by typing in the following terminal command into the root of your site, which will let you look at the `public` directory: ```bash ls public @@ -379,7 +393,7 @@ Once this finishes running, you should see in your terminal something like: ![Screenshot of publishing Gatsby site with Surge](surge-deployment.png) Open the web address listed on the bottom line (`lowly-pain.surge.sh` in this -case) and you'll see your newly published site! Good work! +case) and you'll see your newly published site! Great work! ## What's coming next? diff --git a/docs/tutorial/part-seven/index.md b/docs/tutorial/part-seven/index.md index 442fdd0c7a58e..61be88d5a83fc 100644 --- a/docs/tutorial/part-seven/index.md +++ b/docs/tutorial/part-seven/index.md @@ -111,8 +111,8 @@ fields. ```javascript{3,4,6-11} const { createFilePath } = require(`gatsby-source-filesystem`) -exports.onCreateNode = ({ node, getNode, boundActionCreators }) => { - const { createNodeField } = boundActionCreators +exports.onCreateNode = ({ node, getNode, actions }) => { + const { createNodeField } = actions if (node.internal.type === `MarkdownRemark`) { const slug = createFilePath({ node, getNode, basePath: `pages` }) createNodeField({ @@ -151,8 +151,8 @@ our pages—what are their paths, what template component do they use, etc. ```javascript{15-34} const { createFilePath } = require(`gatsby-source-filesystem`) -exports.onCreateNode = ({ node, getNode, boundActionCreators }) => { - const { createNodeField } = boundActionCreators +exports.onCreateNode = ({ node, getNode, actions }) => { + const { createNodeField } = actions if (node.internal.type === `MarkdownRemark`) { const slug = createFilePath({ node, getNode, basePath: `pages` }) createNodeField({ @@ -163,7 +163,7 @@ exports.onCreateNode = ({ node, getNode, boundActionCreators }) => { } } -exports.createPages = ({ graphql, boundActionCreators }) => { +exports.createPages = ({ graphql, actions }) => { return new Promise((resolve, reject) => { graphql(` { @@ -214,8 +214,8 @@ Then update `gatsby-node.js` const path = require(`path`) const { createFilePath } = require(`gatsby-source-filesystem`) -exports.onCreateNode = ({ node, getNode, boundActionCreators }) => { - const { createNodeField } = boundActionCreators +exports.onCreateNode = ({ node, getNode, actions }) => { + const { createNodeField } = actions if (node.internal.type === `MarkdownRemark`) { const slug = createFilePath({ node, getNode, basePath: `pages` }) createNodeField({ @@ -226,8 +226,8 @@ exports.onCreateNode = ({ node, getNode, boundActionCreators }) => { } } -exports.createPages = ({ graphql, boundActionCreators }) => { - const { createPage } = boundActionCreators +exports.createPages = ({ graphql, actions }) => { + const { createPage } = actions return new Promise((resolve, reject) => { graphql(` { diff --git a/docs/tutorial/part-six/index.md b/docs/tutorial/part-six/index.md index ee9c326655b94..91159c0e4d52f 100644 --- a/docs/tutorial/part-six/index.md +++ b/docs/tutorial/part-six/index.md @@ -105,27 +105,29 @@ the following to add a query with some initial HTML and styling. ```jsx import React from "react" import g from "glamorous" - import { rhythm } from "../utils/typography" +import Layout from "../components/layout" export default ({ data }) => { console.log(data) return ( -
- - Amazing Pandas Eating Things - -

{data.allMarkdownRemark.totalCount} Posts

- {data.allMarkdownRemark.edges.map(({ node }) => ( -
- - {node.frontmatter.title}{" "} - — {node.frontmatter.date} - -

{node.excerpt}

-
- ))} -
+ +
+ + Amazing Pandas Eating Things + +

{data.allMarkdownRemark.totalCount} Posts

+ {data.allMarkdownRemark.edges.map(({ node }) => ( +
+ + {node.frontmatter.title}{" "} + — {node.frontmatter.date} + +

{node.excerpt}

+
+ ))} +
+ ) } diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md index 7d495cca1c615..beb93529bd2dc 100644 --- a/docs/tutorial/part-three/index.md +++ b/docs/tutorial/part-three/index.md @@ -7,22 +7,21 @@ Welcome to part three! ## What's in this tutorial? -In this part, you'll learn about how Gatsby lets you create "layout components". Layout components are +In this part, you'll learn about creating "layout" components. Layout components are for sections of your site that you want to share across multiple pages. For example, Gatsby sites will commonly have a layout component with a shared header and -footer. Other common things to add to layouts are a sidebar and navigation menu. +footer. Other common things to add to layouts are a sidebar and/or navigation menu. -On this page, the sidebar to the left (assuming you're on a larger device) and -the header at the top are part of gatsbyjs.org's layout component. +On this page for example, the header at the top is part of gatsbyjs.org's layout component. -Let's dive in and explore Gatsby layouts. +Let's dive in and explore creating layouts. ## Install a starter 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 +gatsby new tutorial-part-three https://github.com/gatsbyjs/gatsby-starter-hello-world#v2 cd tutorial-part-three ``` @@ -119,32 +118,47 @@ Let's tackle these problems by creating our first layout component. ## Our first layout component -First, create a new directory at `src/layouts`. All layout components have to be -in this directory. +First, create a new directory at `src/components`. -Let's create a very basic layout component at `src/layouts/index.js`: +Now create a very basic layout component at `src/components/layout.js`: ```jsx import React from "react" export default ({ children }) => (
- {children()} + {children}
) ``` -_Notice that unlike most `children` props, the `children` prop passed to layout -components is a function and needs to be executed_ +Now you need to import this new layout component into your page components. + +Change `src/pages/index.js` to look like: + +```jsx{5,8} +import React from "react" +import Layout from "../components/layout" + +export default () => ( + +

Hi! I'm building a fake Gatsby site as part of a tutorial!

+

What do I like to do? Lots of course but definitely enjoy building     websites.

+ ) +``` + -Stop `gatsby develop` and start it again for the new layout to take effect. ![with-layout2](with-layout2.png) -Sweet, the layout is working! Now, our text is centered and constrained to a -column 650 pixels wide, as we specified. +Sweet, the layout is working! Now, our text is centered and constrained to +a column 650 pixels wide, as we specified. + +But try navigating to one of the other pages e.g. `/about/`. That page still +isn't centered. Try now importing and adding the layout component to `about.js` and +`contact.js`. -Let's now add, in the same file, our site title: +Let's now add to the layout component our site title: ```jsx{5} import React from "react" @@ -152,7 +166,7 @@ import React from "react" export default ({ children }) =>

MySweetSite

- {children()} + {children}
``` @@ -186,7 +200,7 @@ export default ({ children }) => Contact - {children()} + {children} ``` diff --git a/docs/tutorial/part-two/index.md b/docs/tutorial/part-two/index.md index 07bc067f97e4d..6117cdaeaa91f 100644 --- a/docs/tutorial/part-two/index.md +++ b/docs/tutorial/part-two/index.md @@ -38,7 +38,7 @@ your button styles and use it throughout your site like: ``` Components become the base building blocks of your site. Instead of being -limited to what the browser provides e.g. `