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.

Sign up for GitHub

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

[Tutorial] Add notice regarding 4-part tutorial near the top #5673

Closed
wants to merge 2 commits into from
Closed

[Tutorial] Add notice regarding 4-part tutorial near the top #5673

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
12cd713
Add notice regarding 4-part tutorial near the top
Jun 2, 2018
9fa938b
Wrap the links in blockquote too
Jun 6, 2018
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
7 changes: 7 additions & 0 deletions docs/tutorial/part-five/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,13 @@ typora-copy-images-to: ./

In this tutorial, you'll be learning about how to pull data into your Gatsby site using GraphQL and source plugins. Before you learn about these plugins, however, you'll want to know how to use something called Graph_i_QL, a tool that helps you structure your queries correctly.

> _Note: this tutorial is a 4-part series (Part 4 through 7). It will make sense only if completed in order._
>
> 1. [Part 4: Querying for data in a blog](/tutorial/part-four/)
> 2. Part 5: Source plugins and rendering queried data — you are here
> 3. [Part 6: Transformer plugins](/tutorial/part-six/)
> 4. [Part 7: Programmatically create pages from data](/tutorial/part-seven/)

## Introducing Graph_i_QL

Graph_i_QL is the GraphQL integrated development environment (IDE). It's a powerful (and all-around awesome) tool
Expand Down
39 changes: 23 additions & 16 deletions docs/tutorial/part-four/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@ typora-copy-images-to: ./
Welcome to Part Four of the tutorial! Halfway through! Hope things are starting
to feel pretty comfortable 😀

> _Note: this tutorial is a 4-part series (Part 4 through 7). The rest will make sense only if completed in order._
>
> 1. Part 4: Querying for data in a blog — you are here
> 2. [Part 5: Source plugins and rendering queried data](/tutorial/part-five/)
> 3. [Part 6: Transformer plugins](/tutorial/part-six/)
> 4. [Part 7: Programmatically create pages from data](/tutorial/part-seven/)

## Recap of first half of the tutorial

So far, we've been learning how to use React.js—how powerful it is to be able to
Expand Down Expand Up @@ -95,7 +102,7 @@ component and two page components:
`src/pages/index.js`

```jsx
import React from "react";
import React from "react"

export default () => (
<div>
Expand All @@ -107,13 +114,13 @@ export default () => (
/>
</div>
</div>
);
)
```

`src/pages/about.js`

```jsx
import React from "react";
import React from "react"

export default () => (
<div>
Expand All @@ -123,20 +130,20 @@ export default () => (
photos and videos of pandas eating lots of food.
</p>
</div>
);
)
```

`src/layouts/index.js`

```jsx
import React from "react";
import g from "glamorous";
import { css } from "glamor";
import Link from "gatsby-link";
import React from "react"
import g from "glamorous"
import { css } from "glamor"
import Link from "gatsby-link"

import { rhythm } from "../utils/typography";
import { rhythm } from "../utils/typography"

const linkStyle = css({ float: `right` });
const linkStyle = css({ float: `right` })

export default ({ children }) => (
<g.Div
Expand All @@ -159,18 +166,18 @@ export default ({ children }) => (
</Link>
{children()}
</g.Div>
);
)
```

`src/utils/typography.js`

```javascript
import Typography from "typography";
import kirkhamTheme from "typography-theme-kirkham";
import Typography from "typography"
import kirkhamTheme from "typography-theme-kirkham"

const typography = new Typography(kirkhamTheme);
const typography = new Typography(kirkhamTheme)

export default typography;
export default typography
```

`gatsby-config.js` (must be in the root of your project, not under src)
Expand All @@ -186,7 +193,7 @@ module.exports = {
},
},
],
};
}
```

Add the above files and then run `gatsby develop` like normal and you should see
Expand Down
37 changes: 22 additions & 15 deletions docs/tutorial/part-seven/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,13 @@ ways to use it for the remainder of the tutorial.

Let's get started.

> _Note: this tutorial is a 4-part series (Part 4 through 7). It will make sense only if completed in order._
>
> 1. [Part 4: Querying for data in a blog](/tutorial/part-four/)
> 2. [Part 5: Source plugins and rendering queried data](/tutorial/part-five/)
> 3. [Part 6: Transformer plugins](/tutorial/part-six/)
> 4. Part 7: Programmatically create pages from data — you are here

## Creating slugs for pages

Creating new pages has two steps:
Expand All @@ -39,8 +46,8 @@ Gatsby whenever a new node is created (or updated).

```javascript
exports.onCreateNode = ({ node }) => {
console.log(node.internal.type);
};
console.log(node.internal.type)
}
```

Stop and restart the development server. As you do, you'll see quite a few newly
Expand Down Expand Up @@ -201,11 +208,11 @@ Create a directory at `src/templates` and then add the following in a file named
`src/templates/blog-post.js`.

```jsx
import React from "react";
import React from "react"

export default () => {
return <div>Hello blog post</div>;
};
return <div>Hello blog post</div>
}
```

Then update `gatsby-node.js`
Expand Down Expand Up @@ -273,17 +280,17 @@ Which is a bit boring. Let's pull in data from our Markdown post. Change
`src/templates/blog-post.js` to:

```jsx
import React from "react";
import React from "react"

export default ({ data }) => {
const post = data.markdownRemark;
const post = data.markdownRemark
return (
<div>
<h1>{post.frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</div>
);
};
)
}

export const query = graphql`
query BlogPostQuery($slug: String!) {
Expand All @@ -294,7 +301,7 @@ export const query = graphql`
}
}
}
`;
`
```

And…
Expand Down Expand Up @@ -385,8 +392,8 @@ The next step is to try the instructions above on your own with a new set of pag

Now that you've built a Gatsby site, where do you go next?

* Share your Gatsby site on Twitter and see what other people have created by searching for #gatsbytutorial! Make sure to mention @gatsbyjs in your Tweet, and include the hashtag #gatsbytutorial :)
* You could take a look at some [example sites](https://github.com/gatsbyjs/gatsby/tree/master/examples#gatsby-example-websites)
* Explore more [plugins](/docs/plugins/)
* See what [other people are building with Gatsby](https://github.com/gatsbyjs/gatsby/#showcase)
* Check out the documentation on [Gatsby's APIs](/docs/api-specification/), [nodes](/docs/node-interface/) or [GraphQL](/docs/graphql-reference/)
- Share your Gatsby site on Twitter and see what other people have created by searching for #gatsbytutorial! Make sure to mention @gatsbyjs in your Tweet, and include the hashtag #gatsbytutorial :)
- You could take a look at some [example sites](https://github.com/gatsbyjs/gatsby/tree/master/examples#gatsby-example-websites)
- Explore more [plugins](/docs/plugins/)
- See what [other people are building with Gatsby](https://github.com/gatsbyjs/gatsby/#showcase)
- Check out the documentation on [Gatsby's APIs](/docs/api-specification/), [nodes](/docs/node-interface/) or [GraphQL](/docs/graphql-reference/)
21 changes: 14 additions & 7 deletions docs/tutorial/part-six/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,13 @@ typora-copy-images-to: ./

The previous tutorial showed how source plugins bring data _into_ Gatsby’s data system. In this tutorial, you'll learn how transformer plugins _transform_ the raw content brought by source plugins. The combination of source plugins and transformer plugins can handle all data sourcing and data transformation you might need when building a Gatsby site.

> _Note: this tutorial is a 4-part series (Part 4 through 7). It will make sense only if completed in order._
>
> 1. [Part 4: Querying for data in a blog](/tutorial/part-four/)
> 2. [Part 5: Source plugins and rendering queried data](/tutorial/part-five/)
> 3. Part 6: Transformer plugins — you are here
> 4. [Part 7: Programmatically create pages from data](/tutorial/part-seven/)

## Transformer plugins

Often, the format of the data we get from source plugins isn't what you want to
Expand Down Expand Up @@ -103,13 +110,13 @@ Like with the `src/pages/my-files.js` page, replace `src/pages/index.js` with
the following to add a query with some initial HTML and styling.

```jsx
import React from "react";
import g from "glamorous";
import React from "react"
import g from "glamorous"

import { rhythm } from "../utils/typography";
import { rhythm } from "../utils/typography"

export default ({ data }) => {
console.log(data);
console.log(data)
return (
<div>
<g.H1 display={"inline-block"} borderBottom={"1px solid"}>
Expand All @@ -126,8 +133,8 @@ export default ({ data }) => {
</div>
))}
</div>
);
};
)
}

export const query = graphql`
query IndexQuery {
Expand All @@ -145,7 +152,7 @@ export const query = graphql`
}
}
}
`;
`
```

Now the frontpage should look like:
Expand Down