Skip to content

Commit

Permalink
chore(docs): fix commas and tweak small issues in tutorial (#13031)
Browse files Browse the repository at this point in the history
* Fix Comma Usage

* Fix Comma Usage; Misc Improvements (#13038)

* Fix Misuse of Commas, Et Al (#13039)

Use em dash in place of two hyphens.
Format paragraph to be on one line (apparently the convention).

* Fix Comma Usage and Do Some Misc Changes (#13040)

* Fix Comma Usage and Do Some Misc Changes

Do code formatting to match rest of file.
Use em dash instead of two hyphens.
Etc.

* Update HTML Entity

* Add Hyphen for Clarity (#13042)

* Fix Comma Usage in Blog (#13085)

* docs(gatsby-source-shopify): Add note about API permissions (#13037)

Note which permissions you should enable on the Shopify Storefront API. Without these permissions you'll get a fairly cryptic error message.

* chore(docs): match the Wording Style of Other Tutorial Parts (#13034)

* chore(docs): fix typo in convincing others doc (#13033)

<!--
  Have any questions? Check out the contributing docs at https://gatsby.dev/contribute, or
  ask in this Pull Request and a Gatsby maintainer will be happy to help :)
-->

## Description

Fixes a misspelled word.

* fix(docs): expand guidelist on partnering with gatsby page (#13029)

Following up on #12970. Current https://www.gatsbyjs.org/docs/partnering-with-gatsby/:

![image](https://user-images.githubusercontent.com/21834/55404445-2f445080-5558-11e9-84d8-f75db8dd7297.png)

* fix(starters): update gatsby monorepo (#12925)

This PR contains the following updates:

| Package | Type | Update | Change | References |
|---|---|---|---|---|
| gatsby | dependencies | patch | [`^2.3.3` -> `^2.3.5`](https://diff.intrinsic.com/gatsby/2.3.3/2.3.5) | [source](https://togithub.com/gatsbyjs/gatsby) |
| gatsby-image | dependencies | patch | [`^2.0.35` -> `^2.0.37`](https://diff.intrinsic.com/gatsby-image/2.0.35/2.0.37) | [source](https://togithub.com/gatsbyjs/gatsby) |
| gatsby-plugin-manifest | dependencies | patch | [`^2.0.25` -> `^2.0.26`](https://diff.intrinsic.com/gatsby-plugin-manifest/2.0.25/2.0.26) | [source](https://togithub.com/gatsbyjs/gatsby) |

---

### Release Notes

<details>
<summary>gatsbyjs/gatsby</summary>

### [`v2.3.5`](https://togithub.com/gatsbyjs/gatsby/compare/[email protected]@2.3.5)

[Compare Source](https://togithub.com/gatsbyjs/gatsby/compare/[email protected]@2.3.5)

### [`v2.3.4`](https://togithub.com/gatsbyjs/gatsby/compare/[email protected]@2.3.4)

[Compare Source](https://togithub.com/gatsbyjs/gatsby/compare/[email protected]@2.3.4)

</details>

---

### Renovate configuration

:date: **Schedule**: At any time (no schedule defined).

:vertical_traffic_light: **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

:recycle: **Rebasing**: Whenever PR becomes conflicted, or if you modify the PR title to begin with "`rebase!`".

:ghost: **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://togithub.com/renovatebot/config-help/issues) if that's undesired.

---

 - [ ] <!-- renovate-rebase -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://togithub.com/marketplace/renovate). View repository job log [here](https://renovatebot.com/dashboard#gatsbyjs/gatsby).

* feat(blog): add gatsby is great blog post (#12777)

* chore: add blog post

* chore: keep iterating

* chore: more tweaks

* feat: nearly finish up

* chore: run tinypng

* chore: fix some typos

* chore: fix snippet

* chore: add a gif, it gets the people going

* chore: more

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* chore: change date

* chore: tighten up last section

* chore: change data

* chore: update per feedback

* chore(docs): replace absolute links with relative links (#12949)


<!--
  Have any questions? Check out the contributing docs at https://gatsby.dev/contribute, or
  ask in this Pull Request and a Gatsby maintainer will be happy to help :)
-->

## Description

Suggest a more complete structure to the example gatsby-config.js file

## Related Issues

Along with #12103 this PR fixes #11957

<!--
  Link to the issue that is fixed by this PR (if there is one)
  e.g. Fixes #1234, Addresses #1234, Related to #1234, etc.
-->

* chore(showcase): Add Assortment to site showcase (#13002)

## Description

Adding [assortment.io](https://assortment.io) to site showcase. Assortment is my Web Development blog that I've recently updated to Gatsby, Netlify, Netlify CMS and Emotion. It'd be cool to see it on the showcase 😃

* Fix Comma Usage; Misc Updates

* Make into Two Words (#13084)

* docs(gatsby-source-shopify): Add note about API permissions (#13037)

Note which permissions you should enable on the Shopify Storefront API. Without these permissions you'll get a fairly cryptic error message.

* chore(docs): match the Wording Style of Other Tutorial Parts (#13034)

* chore(docs): fix typo in convincing others doc (#13033)

<!--
  Have any questions? Check out the contributing docs at https://gatsby.dev/contribute, or
  ask in this Pull Request and a Gatsby maintainer will be happy to help :)
-->

## Description

Fixes a misspelled word.

* fix(docs): expand guidelist on partnering with gatsby page (#13029)

Following up on #12970. Current https://www.gatsbyjs.org/docs/partnering-with-gatsby/:

![image](https://user-images.githubusercontent.com/21834/55404445-2f445080-5558-11e9-84d8-f75db8dd7297.png)

* fix(starters): update gatsby monorepo (#12925)

This PR contains the following updates:

| Package | Type | Update | Change | References |
|---|---|---|---|---|
| gatsby | dependencies | patch | [`^2.3.3` -> `^2.3.5`](https://diff.intrinsic.com/gatsby/2.3.3/2.3.5) | [source](https://togithub.com/gatsbyjs/gatsby) |
| gatsby-image | dependencies | patch | [`^2.0.35` -> `^2.0.37`](https://diff.intrinsic.com/gatsby-image/2.0.35/2.0.37) | [source](https://togithub.com/gatsbyjs/gatsby) |
| gatsby-plugin-manifest | dependencies | patch | [`^2.0.25` -> `^2.0.26`](https://diff.intrinsic.com/gatsby-plugin-manifest/2.0.25/2.0.26) | [source](https://togithub.com/gatsbyjs/gatsby) |

---

### Release Notes

<details>
<summary>gatsbyjs/gatsby</summary>

### [`v2.3.5`](https://togithub.com/gatsbyjs/gatsby/compare/[email protected]@2.3.5)

[Compare Source](https://togithub.com/gatsbyjs/gatsby/compare/[email protected]@2.3.5)

### [`v2.3.4`](https://togithub.com/gatsbyjs/gatsby/compare/[email protected]@2.3.4)

[Compare Source](https://togithub.com/gatsbyjs/gatsby/compare/[email protected]@2.3.4)

</details>

---

### Renovate configuration

:date: **Schedule**: At any time (no schedule defined).

:vertical_traffic_light: **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

:recycle: **Rebasing**: Whenever PR becomes conflicted, or if you modify the PR title to begin with "`rebase!`".

:ghost: **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://togithub.com/renovatebot/config-help/issues) if that's undesired.

---

 - [ ] <!-- renovate-rebase -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://togithub.com/marketplace/renovate). View repository job log [here](https://renovatebot.com/dashboard#gatsbyjs/gatsby).

* feat(blog): add gatsby is great blog post (#12777)

* chore: add blog post

* chore: keep iterating

* chore: more tweaks

* feat: nearly finish up

* chore: run tinypng

* chore: fix some typos

* chore: fix snippet

* chore: add a gif, it gets the people going

* chore: more

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* Update docs/blog/2019-03-25-behind-the-scenes-what-makes-gatsby-great/index.md

Co-Authored-By: DSchau <[email protected]>

* chore: change date

* chore: tighten up last section

* chore: change data

* chore: update per feedback

* chore(docs): replace absolute links with relative links (#12949)


<!--
  Have any questions? Check out the contributing docs at https://gatsby.dev/contribute, or
  ask in this Pull Request and a Gatsby maintainer will be happy to help :)
-->

## Description

Suggest a more complete structure to the example gatsby-config.js file

## Related Issues

Along with #12103 this PR fixes #11957

<!--
  Link to the issue that is fixed by this PR (if there is one)
  e.g. Fixes #1234, Addresses #1234, Related to #1234, etc.
-->

* chore(showcase): Add Assortment to site showcase (#13002)

## Description

Adding [assortment.io](https://assortment.io) to site showcase. Assortment is my Web Development blog that I've recently updated to Gatsby, Netlify, Netlify CMS and Emotion. It'd be cool to see it on the showcase 😃

* feat(gatsby-dev-cli): add verdaccio support (#11525)

* feat(gatsby-dev-cli): add verdaccio support [wip]

* yuck - don't look

* just to verify verdaccio

* fix gitignore and add htpasswd with dummy gatsby-dev user

* some logging to understand why it tries to handle all the packages

* just temporarily so it hopefully at least works

* moar data

* don't copy all the packages right now

* don't rely on package name starting with "gatsby" heuristic

* tmp commit

* tmp

* fs change

* tmp

* a

* updates

* remove random files that shouldn't be here

* tmp

* revert dep changes

* ignore changes to package.json created during publishing

* testing of dep change in gatsby-cli is picked up by gatsby-dev-cli

* let's see if gatsby-dev will handle case of no node_modules

* sanity check

* adjust console message

* add missing devDeps

* more missing devDeps

* grab package.json from unpkg if package is not yet installed locally

* correctly ignore package.json changes during publishing

* cleaning things up

* htpasswd loc

* restore gatsby package.json

* adjust ignore files

* gatsby-dev-cli: ignore tests

* remove extra ln

* less console output

* turns out you don't need htpasswd after all

* use exact when installing local packages  - timestamp is used in version

* why it failed?

* use yarn for publishing - see verdaccio/verdaccio#997

* v0.1.1

* add temporary .npmrc file to allow anonymous publishes

* add some jsdocs

* update yarn.lock

* oops

* debug why still can't publish anon

* adjust npmrc content

* doh

* Revert "debug why still can't publish anon"

This reverts commit fc1045a.

* handle package installation of deps didn't change

* skip version changes for packages in gatsby mono-repo, queue copying instead of doing it immediately

* fix tests

* packages stored in verdaccio storage seems to be picked up by jest and causing trouble, so let's ignore verdaccio storage directory

* bye "wat", you will be missed

* bail early to avoid conditional bracket hell

* more bailing early

* more concise

* new line

* use exaca to simplify running yarn

* clean up www/.gitignore

* handle not existing packages

* remove unused (was needed for basic auth)

* cleanup temp file changes when process exit in middle of publishing

* ops

* Apply suggestions from code review

Co-Authored-By: pieh <[email protected]>

* cleanup unpkg response handler

* move stuff around

* remove tmp comment

* document traversePackageDocs fn

* restrcuture files

* add basic tests for traversingPackageDeps

* add basic tests for generating packages to publish (based on dep graph)

* fix tests on windows

* handle circular dependencies when constructing list of packages to publish

* remove cat ;(

* restore original e2e-test script

* update gitignore

* chore(release): Publish

 - [email protected]
 - [email protected]
 - [email protected]
 - [email protected]
 - [email protected]
 - [email protected]

* chore(release): Publish

 - [email protected]

* docs(gatsby-dev-cli): Edit README (#13049)

* Build out Gatsby media information in docs (#12906)

* add video info, delete unnecessary stubs

Related to #12903

* fix internal link for html5 video section

* update videoTitle example

Co-Authored-By: marcysutton <[email protected]>

* Apply suggestions from code review

thanks for the feedback!

Co-Authored-By: marcysutton <[email protected]>

* incorporate feedback, make into real docs!!

* delete unused stubs

* Update docs/docs/working-with-video.md

Co-Authored-By: marcysutton <[email protected]>

* Update docs/docs/working-with-video.md

Co-Authored-By: marcysutton <[email protected]>

* chore(gatsby): fix domready package to be compatible with ie10 (#13027)

* changed domready package to domready-loaded which is compatible with ie10

* updated domready to @mikaelkristiansson/domready

* updated packages/gatsby to use @mikaelkristiansson/domready

* chore(release): Publish

 - [email protected]

* feat(gatsby-transformer-react-docgen): use local babel config for react-docgen (#12001)

* feat: use local babel config for react-docgen

BREAKING CHANGE: now uses the local babel config with a fallback

* Update README.md

* chore(release): Publish

 - [email protected]

* chore(docs): add “Why I used GatsbyJS (#12954)

Why I used GatsbyJS

<!--
  Have any questions? Check out the contributing docs at https://gatsby.dev/contribute, or
  ask in this Pull Request and a Gatsby maintainer will be happy to help :)
-->

## Description

<!-- Write a brief description of the changes introduced by this PR -->

## Related Issues

<!--
  Link to the issue that is fixed by this PR (if there is one)
  e.g. Fixes #1234, Addresses #1234, Related to #1234, etc.
-->

* feat(www): don't check for overview frontmatter (#13060)

Fixes `[[guidelist]]` not being replaced in few pages (i.e. in https://www.gatsbyjs.org/docs/winning-over-stakeholders/ )

The code is handling cases when there are no children (tried building locally and it worked just fine).

Follow up to this would be to clear `.md` files that use `overview` and adjust page query. But this is just quick fix.

* chore(docs): add starter library to docs sidebar under starters (#12963)

 40% of people visiting the starters page go here next, so we should probably add this:

![image](https://user-images.githubusercontent.com/4388699/55285012-58d26180-5337-11e9-9259-68e81b4894ad.png)

* chore(showcase): Add gmartinez.dev to showcase (#13067)

<!--
  Have any questions? Check out the contributing docs at https://gatsby.dev/contribute, or
  ask in this Pull Request and a Gatsby maintainer will be happy to help :)
-->

## Description

Adding gmartinez.dev to showcase list in site.yml

<!--
  Link to the issue that is fixed by this PR (if there is one)
  e.g. Fixes #1234, Addresses #1234, Related to #1234, etc.
-->


Co-authored-by: Lennart <[email protected]>

* fix(gatsby): don't try to statically analyze gatsby-node, require it and examine exports instead (#13053)

* fix: don't try to statically analyze gatsby-node, require it and examine exports instead

* differentiate test names

* Update packages/gatsby/src/bootstrap/resolve-module-exports.js

Co-Authored-By: pieh <[email protected]>

* chore(release): Publish

 - [email protected]

* Use Loki's elemMatch operator (#13025)

* feat(gatsby): add util.promisify polyfill for older node version (#13024)

* refactor(gatsby): gatsby develop: cleanup port detection (#13006)

* chore(release): Publish

 - [email protected]

* fix(gatsby): ignore __esModule export in gatsby-node exports (#13081)

I introduced bug/regression in #13053 by not removing `__esModule` export name from resolved export names - it break some plugins

Fixes: #13079

* chore(release): Publish

 - [email protected]

* fix(www): Hubspot form UI (#13080)

* fix(www): Work around HubSpot’s CSS being loaded

…by pulling in react-hubspot-form locally, and modifying it slightly. See comment in `www/src/components/react-hubspot-form` for more info.

* Fix `formInput` styles

… now matching the reference homepage newsletter form — no more Futura PT for input text.

* Return nothing because linter

* Make into Two Words

* Fix Comma Usage; Misc Updates (#13090)

Hopefully fix a code formatting issue when in a highlighted section.

* Fix Comma Usage; Misc Update (#13103)

* chore: format
  • Loading branch information
dhurlburtusa authored and DSchau committed Apr 4, 2019
1 parent fcbe82c commit f34bd7b
Show file tree
Hide file tree
Showing 8 changed files with 92 additions and 106 deletions.
60 changes: 30 additions & 30 deletions docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ rendering][react-dom-server] at build time. This means that your users get all
the benefits of a static site such as the ability to work without JavaScript,
search engine friendliness, speedy load times, etc. without losing the dynamism
and interactivity that is expected of the modern web. Once rendered to static
HTML, client-site React/JavaScript _can_ take over (if creating stateful
HTML, client-side React/JavaScript _can_ take over (if creating stateful
components or logic in `componentDidMount`) and add dynamism to the statically
generated content.

Expand All @@ -36,7 +36,7 @@ these new features by creating a static blog. Let's get on it!
### Using the CLI

Gatsby ships with a great CLI (command line interface) that contains the
functionality of scaffolding out a working site, as well as commands to help
functionality of scaffolding out a working site as well as commands to help
develop the site once created.

`gatsby new personal-blog && cd $_`
Expand All @@ -47,7 +47,7 @@ developed upon. The CLI generates common development scripts to help you get sta
For example you can run `npm run build` (build a production, statically generated version of the project) or `npm run develop` (launch a hot-reload enabled web development server),
etc.

We can now begin the exciting task of _actually_ developing on the site, and
We can now begin the exciting task of _actually_ developing on the site and
creating a functional, modern blog. You'll generally want to use `npm run develop` to launch the local development server to validate functionality as we
progress through the steps.

Expand All @@ -65,14 +65,14 @@ generating a sitemap, etc.) _or_ they extend Gatsby's webpack configuration
adding support for TypeScript, Sass, etc.

For this particular blog post, we want a single page app-like feel (without page
reloads), as well as the ability to dynamically change the `title` tag within
reloads) as well as the ability to dynamically change the `title` tag within
the `head` tags. As noted, the Gatsby plugin ecosystem is rich, vibrant, and
growing, so oftentimes a plugin already exists that solves the particular
problem you're trying to solve. To address the functionality we want for _this_
blog, we'll use the following plugins:

- [`gatsby-plugin-catch-links`][gatsby-plugin-catch-links]
- implements the history `pushState` API, and does not require a page reload
- implements the history `pushState` API and does not require a page reload
on navigating to a different page in the blog
- [`gatsby-plugin-react-helmet`][gatsby-plugin-react-helmet]
- [react-helmet][react-helmet] is a tool that allows for modification of the
Expand Down Expand Up @@ -103,8 +103,8 @@ module.exports = {
```

Without any additional work besides a `yarn install` and editing a config file,
we now have the ability to edit our site's head tags, as well as implement a
single page app feel without reloads. Now let's enhance the base functionality
we now have the ability to edit our site's head tags as well as implement a
single page app feel without reloads. Now, let's enhance the base functionality
by implementing a source plugin which can load blog posts from our local file
system.

Expand All @@ -117,7 +117,7 @@ workflow often involves using
disk--e.g. Markdown files--and then specifying a Markdown transformer to
transform the Markdown into HTML.

Since the bulk of the blog's content, and each article, will be authored in
Since the bulk of the blog's content and each article will be authored in
Markdown, let's add that [`gatsby-source-filesystem`][gatsby-source-filesystem]
plugin. Similarly to our previous step, we'll install the plugin and then inject
into our `gatsby-config.js`, like so:
Expand Down Expand Up @@ -146,16 +146,16 @@ module.exports = {
```

Some explanation will be helpful here! An `options` object can be passed to a
plugin, and we're passing the filesystem `path` (i.e. where our Markdown files
will be located), and then a `name` for the source files. Now that Gatsby knows
plugin, and we're passing the filesystem `path` (which is where our Markdown files
will be located) and then a `name` for the source files. Now that Gatsby knows
about our source files, we can begin applying some useful transformers to
convert those files into usable data!

### Transformer plugins

As mentioned, a transformer plugin takes some underlying data format that is not
inherently usable in its current form (e.g. Markdown, json, yaml, etc.), and
transforms it into a format that Gatsby can understand, and that we can query
inherently usable in its current form (e.g. Markdown, json, yaml, etc.) and
transforms it into a format that Gatsby can understand and that we can query
against with GraphQL. Jointly, the filesystem source plugin will load file nodes
(as Markdown) off of our filesystem, and then the Markdown transformer will take
over and convert to usable HTML.
Expand All @@ -165,7 +165,7 @@ installed.

- [gatsby-transformer-remark][gatsby-transformer-remark]
- Uses the [remark][remark] Markdown parser to transform .md files on disk
into HTML; additionally this transformer can optionally take plugins to
into HTML; additionally, this transformer can optionally take plugins to
further extend functionality--e.g. add syntax highlighting with
`gatsby-remark-prismjs`, `gatsby-remark-copy-linked-files` to copy relative
files specified in markdown, `gatsby-remark-images` to compress images and
Expand Down Expand Up @@ -205,8 +205,8 @@ module.exports = {
```

Whew! Seems like a lot of set up, but collectively these plugins are going to
super charge Gatsby, and give us an incredibly powerful (yet relatively simple!)
development environment. We have one more set up step and it's an easy one.
super charge Gatsby and give us an incredibly powerful (yet relatively simple!)
development environment. We have one more setup step and it's an easy one.
We're simply going to create a Markdown file that will contain the content of
our first blog post. Let's get to it.

Expand All @@ -217,8 +217,8 @@ to be in `src/pages`, so that's exactly where we'll put it!

Gatsby is not at all prescriptive in naming conventions, but a typical practice
for blog posts is to name the folder something like `MM-DD-YYYY-title`, e.g.
`07-12-2017-hello-world`. Let's do just that, and create the folder
`src/pages/07-12-2017-getting-started`, and place an `index.md` inside!
`07-12-2017-hello-world`. Let's do just that. Create the folder
`src/pages/07-12-2017-getting-started` and place an `index.md` inside!

The content of this Markdown file will be our blog post, authored in Markdown
(of course!). Here's what it'll look like:
Expand All @@ -237,7 +237,7 @@ _Fairly_ typical stuff, except for the block surrounded in dashes. What is that?
That is what is referred to as [`frontmatter`][frontmatter], and the contents of
the block can be used to inject React components with the specified data, e.g.
path, date, title, etc. Any piece of data can be injected here (e.g. tags,
sub-title,draft, etc.), so feel free to experiment and find what necessary
sub-title, draft, etc.), so feel free to experiment and find what necessary
pieces of frontmatter are required to achieve an ideal blogging system for your
usage. One important note is that `path` will be used when we dynamically create
our pages to specify the URL/path to render the file (in a later step!). In this
Expand Down Expand Up @@ -360,7 +360,7 @@ into the query.
At this point, we have a bunch of plugins installed to load files off of disk,
transform Markdown to HTML, and other utilities. We have a single, lonely
Markdown file that will be rendered as a blog post. Finally, we have a React
template for blog posts, as well as a wired up GraphQL query to query for a blog
template for blog posts as well as a wired up GraphQL query to query for a blog
post and inject the React template with the queried data. Next up:
programmatically creating the necessary static pages (and injecting the
templates) with Gatsby's Node API. Let's get down to it.
Expand Down Expand Up @@ -512,7 +512,7 @@ frontmatter--the result of which will be our stringified and parsed React
template injected with the data from our GraphQL query. Whoa, it's actually
starting to come together!

We can run `yarn develop` at this point, and then navigate to
We can run `yarn develop` at this point and then navigate to
`http://localhost:8000/hello-world` to see our first blog post, which should
look something like below:

Expand All @@ -524,18 +524,18 @@ isn't a blog! We can't expect our users to guess the path of each post, we need
to have an index or listing page, where we display each blog post, a short
snippet, and a link to the full blog post. Wouldn't you know it, we can do this
incredibly easily with Gatsby, using a similar strategy as we used in our blog
template, e.g. a React component and a GraphQL query.
template, i.e. a React component and a GraphQL query.

## Creating the Blog Listing

I won't go into quite as much detail for this section, because we've already
I won't go into quite as much detail for this section because we've already
done something very similar for our blog template! Look at us, we're pro
Gatsby-ers at this point!

Gatsby has a standard for "listing pages," and they're placed in the root of our
filesystem we specified in `gatsby-source-filesystem`, e.g.
`src/pages/index.js`. So create that file if it does not exist, and let's get it
working! Additionally note that any static JavaScript files (that export a React
`src/pages/index.js`. So, create that file if it does not exist, and let's get it
working! Additionally, note that any static JavaScript files (that export a React
component!) will get a corresponding static HTML file. For instance, if we
create `src/pages/tags.js`, the path `http://localhost:8000/tags/` will be
available within the browser and the statically generated site.
Expand Down Expand Up @@ -590,19 +590,19 @@ export const pageQuery = graphql`
OK! So we've followed a similar approach to our blog post template, so this
should hopefully seem pretty familiar. Once more we're exporting `pageQuery`
which contains a GraphQL query. Note that we're pulling a slightly different
data set, specifically we are pulling an `excerpt` of 250 characters rather than
the full HTML, as well as we are formatting the pulled date with a format
data set -- specifically, we are pulling an `excerpt` of 250 characters rather than
the full HTML as we are formatting the pulled date with a format
string! GraphQL is awesome.

The actual React component is fairly trivial, but one important note should be
made. It's important that when linking to internal content, i.e. other blog
made. It's important that when linking to internal content, e.g. other blog
links, that you should always use `Link` from `gatsby`. Gatsby does not work if pages
are not routed via this utility. Additionally, this utility also works with
`pathPrefix`, which allows for a Gatsby site to be deployed a non-root domain.
This is useful if this blog will be hosted on something like GitHub Pages, or
`pathPrefix`, which allows for a Gatsby site to be deployed on a non-root domain.
This is useful if this blog will be hosted on something like GitHub Pages or
perhaps hosted at `/blog`.

Now this is getting exciting and it feels like we're finally getting somewhere!
Now, this is getting exciting and it feels like we're finally getting somewhere!
At this point, we have a fully functional blog generated by Gatsby, with real
content authored in Markdown, a blog listing, and the ability to navigate around
in the blog. If you run `yarn develop`, `http://localhost:8000` should display a
Expand Down
8 changes: 4 additions & 4 deletions docs/tutorial/part-eight/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ Quoting [Google](https://developers.google.com/web/fundamentals/web-app-manifest
npm install --save gatsby-plugin-manifest
```

2. Add a favicon for your app under `src/images/icon.png`. The icon is necessary to build all images for the manifest. For more information look at the docs of [`gatsby-plugin-manifest`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/README.md).
2. Add a favicon for your app under `src/images/icon.png`. The icon is necessary to build all images for the manifest. For more information, look at the docs for [`gatsby-plugin-manifest`](https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/README.md).

3. Add the plugin to the `plugins` array in your `gatsby-config.js` file.

Expand Down Expand Up @@ -116,7 +116,7 @@ That's all you need to get started with adding a web manifest to a Gatsby site.

Another requirement for a website to qualify as a PWA is the use of a [service worker](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API). A service worker runs in the background, deciding to serve network or cached content based on connectivity, allowing for a seamless, managed offline experience.

[Gatsby's offline plugin](/packages/gatsby-plugin-offline/) makes a Gatsby site work offline, and more resistant to bad network conditions, by creating a service worker for your site.
[Gatsby's offline plugin](/packages/gatsby-plugin-offline/) makes a Gatsby site work offline and more resistant to bad network conditions by creating a service worker for your site.

### ✋ Using `gatsby-plugin-offline`

Expand Down Expand Up @@ -148,7 +148,7 @@ That's all you need to get started with service workers with Gatsby.
## Add page metadata

Adding metadata to pages (such as a title or description) is key in helping search engines like Google understand your content, and decide when to surface it in search results.
Adding metadata to pages (such as a title or description) is key in helping search engines like Google understand your content and decide when to surface it in search results.

[React Helmet](https://github.com/nfl/react-helmet) is a package that provides a React component interface for you to manage your [document head](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head).

Expand Down Expand Up @@ -206,7 +206,7 @@ Lighthouse is a great tool for site improvements and learning -- Continue lookin

### Official Documentation

- [Official Documentation](https://www.gatsbyjs.org/docs/): View our Official Documentation for _[Quick Start](https://www.gatsbyjs.org/docs/)_, _[Detailed Guides](https://www.gatsbyjs.org/docs/preparing-your-environment/)_, _[API References](https://www.gatsbyjs.org/docs/gatsby-link/)_ and much more.
- [Official Documentation](https://www.gatsbyjs.org/docs/): View our Official Documentation for _[Quick Start](https://www.gatsbyjs.org/docs/)_, _[Detailed Guides](https://www.gatsbyjs.org/docs/preparing-your-environment/)_, _[API References](https://www.gatsbyjs.org/docs/gatsby-link/)_, and much more.

### Official Plugins

Expand Down
8 changes: 4 additions & 4 deletions docs/tutorial/part-four/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ GraphQL, we recommend [How to GraphQL](https://www.howtographql.com/).

## Data in Gatsby

A website has four parts, HTML, CSS, JS, and data. The first half of the
A website has four parts: HTML, CSS, JS, and data. The first half of the
tutorial focused on the first three. Now let’s learn how to use data in Gatsby
sites.

What is data?
**What is data?**

A very computer science-y answer would be: data is things like `"strings"`,
integers (`42`), objects (`{ pizza: true }`), etc.
Expand Down Expand Up @@ -85,7 +85,7 @@ Gatsby uses GraphQL to enable components to declare the data they need.

Create another new site for this part of the tutorial. You're going to build a Markdown blog called "Pandas Eating Lots". It's dedicated to showing off the best pictures and videos of pandas eating lots of food. Along the way you'll be dipping your toes into GraphQL and Gatsby's 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`, and navigate to the new directory:
Open a new terminal window and run the following commands to create a new Gatsby site in a directory called `tutorial-part-four`. Then navigate to the new directory:

```shell
gatsby new tutorial-part-four https://github.com/gatsbyjs/gatsby-starter-hello-world
Expand Down Expand Up @@ -293,7 +293,7 @@ Page queries live outside of the component definition -- by convention at the en
[StaticQuery](/docs/static-query/) is a new API introduced in Gatsby v2 that allows non-page components (like our `layout.js` component), to retrieve data via GraphQL queries.
Go ahead and add a `<StaticQuery />` to your `src/components/layout.js` file, and a `{data.site.siteMetadata.title}` reference that uses this data. When you are done your file looks like this:
Go ahead and add a `<StaticQuery />` to your `src/components/layout.js` file and a `{data.site.siteMetadata.title}` reference that uses this data. When you are done your file looks like this:
```jsx:title=src/components/layout.js
import React from "react"
Expand Down
Loading

0 comments on commit f34bd7b

Please sign in to comment.