diff --git a/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md b/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md index 6f9875eb4fb19..1796784896944 100644 --- a/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md +++ b/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md @@ -522,7 +522,7 @@ If you've worked with GraphQL before this should look very familiar. In fact, as you can see the string type is imported directly from GraphQL and not from Gatsby. -Basically you check the type of node and if it's a type your interested in you +You check the type of node and if it's a type youʼre interested in you resolve with some fields. Fields in GraphQL require a `type` and a way to `resolve` the value. diff --git a/docs/blog/2017-11-06-migrate-hugo-gatsby/index.md b/docs/blog/2017-11-06-migrate-hugo-gatsby/index.md index b7b815912da59..e587f3570465f 100644 --- a/docs/blog/2017-11-06-migrate-hugo-gatsby/index.md +++ b/docs/blog/2017-11-06-migrate-hugo-gatsby/index.md @@ -89,8 +89,8 @@ programatic creation of pages explained in the next section. This is the official [documentation](/docs/creating-and-modifying-pages/), plus there is a -[tutorial](/tutorial/part-four/#data-in-gatsby) which -gives examples. Basically, I had to create a `gatsby-node.js` file which exports +[tutorial](/tutorial/part-four/#data-in-gatsby), which +gives examples. In sum, I created a `gatsby-node.js` file which exports `createPages` method using the `createPage` action from [`boundActionCreators`](/docs/bound-action-creators/). @@ -165,7 +165,7 @@ for the The approach is well documented and you can also see [previews of the themes online](http://kyleamathews.github.io/typography.js/). -Steps were quite easy: +Steps were: Add `gatsby-plugin-typography` and `typography-theme-moraga` (for example) and "enable" the plugin in the `gatsby-config.js` file: diff --git a/docs/blog/gatsby-v1.md b/docs/blog/gatsby-v1.md index 7b11267508a61..2e3f9783f9986 100644 --- a/docs/blog/gatsby-v1.md +++ b/docs/blog/gatsby-v1.md @@ -116,7 +116,7 @@ enables rich integrations with CMSs like Contentful, Wordpress, and Drupal along with other remote and local sources. In Gatsby v0, (like pretty much every static site generator) data was processed -then _pushed_ into templates to be rendered into HTML. This is a simple pattern +then _pushed_ into templates to be rendered into HTML. This is a straight-forward pattern and works great for many use cases. But when you start working on more complex sites, you really start to miss the flexibility of a database-driven site. With a database, all your data is available to query against in any fashion you'd @@ -144,7 +144,7 @@ This pattern of _colocating_ your queries next to your views is copied from the Colocation makes it easy to fully understand your views as everything necessary for that view is fully defined there. -A simple example of how this works in practice. +An example of how this works in practice. Say we had a markdown file that looked like: @@ -161,7 +161,7 @@ In our site, we would write a React component which acts as a template for all the blog posts. Included with the component is an exported `pageQuery`. ```jsx -// A simple React component for rendering a blog page. +// A basic React component for rendering a blog page. import React from "react"; class BlogPostTemplate extends React.Component { diff --git a/docs/blog/gatsbygram-case-study/index.md b/docs/blog/gatsbygram-case-study/index.md index 0d435a01dc9ee..945b45c831b08 100644 --- a/docs/blog/gatsbygram-case-study/index.md +++ b/docs/blog/gatsbygram-case-study/index.md @@ -298,7 +298,7 @@ export const pageQuery = ` In addition to creating pages for our Instagram photos, we want to make an index page for browsing all photos. To build this index page, Gatsby lets us create -pages using simple React.js components. +pages using React.js components. ``` pages/ @@ -310,7 +310,7 @@ These React component pages can query the Gatsbygram GraphQL schema for data and are automatically converted into their own pages at `gatsbygram.gatsbyjs.org/` and `gatsbygram.gatsbyjs.org/about/`. -Gatsbygram's `about.js` is a simple React component with no query. `index.js` is +Gatsbygram's `about.js` is a plain React component with no query. `index.js` is more complex. It queries for thumbnails for all images and has an infinite scroll implementation to lazy load in image thumbnails. @@ -325,7 +325,7 @@ your header, footer, and default page structure. It is also used as the "[app shell](https://developers.google.com/web/updates/2015/11/app-shell)" when loading your site from a service worker. -A simple layout component might look something like this. +A small layout component might look something like this. ```jsx import React from "react"; diff --git a/docs/docs/add-404-page.md b/docs/docs/add-404-page.md index 33342832b3d55..337bc5b80e502 100644 --- a/docs/docs/add-404-page.md +++ b/docs/docs/add-404-page.md @@ -2,7 +2,7 @@ title: "Add 404 Page" --- -Adding a 404 page is easy. First, create a page whose path matches the regex +To create a 404 page create a page whose path matches the regex `/404*`. Most often you'll want to create a React component page at `src/pages/404.js`. diff --git a/docs/docs/gatsby-starters.md b/docs/docs/gatsby-starters.md index 6695e1373e2bf..f167311006b05 100644 --- a/docs/docs/gatsby-starters.md +++ b/docs/docs/gatsby-starters.md @@ -77,7 +77,7 @@ Community: * Bootstrap CSS framework * Single column layout - * Simple components: SiteNavi, SitePost, SitePage + * Basic components: SiteNavi, SitePost, SitePage * [gatsby-blog-starter-kit](https://github.com/dschau/gatsby-blog-starter-kit) diff --git a/docs/docs/gatsby-style-guide.md b/docs/docs/gatsby-style-guide.md index 82a2e70376086..bc71db34477e4 100644 --- a/docs/docs/gatsby-style-guide.md +++ b/docs/docs/gatsby-style-guide.md @@ -195,8 +195,8 @@ to read. # Formatting example code Readers will likely use Guide articles as a quick reference to look up syntax. -Articles should have simple real-world examples that show common-use cases of -that syntax. +Articles should have a basic, real-world example that shows common use cases of +its syntax. Here are specific formatting guidelines for any code: @@ -258,7 +258,7 @@ it in a clear, accurate, and objective manner. You'll likely go through several rounds of proofreading and editing before you're happy with your writing. Use the [Hemingway App](http://www.hemingwayapp.com/). There’s nothing magical -about this simple tool, but it will automatically detect widely agreed-upon +about this tool, but it will automatically detect widely agreed-upon style issues: * passive voice diff --git a/docs/docs/glamor.md b/docs/docs/glamor.md index 37bbd3ca5eaa5..e63a5678d3b4e 100644 --- a/docs/docs/glamor.md +++ b/docs/docs/glamor.md @@ -9,7 +9,7 @@ CSS syntax React supports for the `style` prop. Glamor is a variant on "CSS-in-J One of the most important problems they solve is selector name collisions. With traditional CSS, you have to be careful not to overwrite CSS selectors used elsewhere in a site because all CSS selectors live in the same global namespace. This unfortunate restriction can lead to elaborate (and often confusing) selector naming schemes. -With CSS-in-JS, you avoid all that as CSS selectors are scoped automatically to their component. Styles are tightly coupled with their components. This makes it very easy to know how to edit a component's CSS as there's never any confusion about how and where CSS is being used. +With CSS-in-JS, you avoid all that as CSS selectors are scoped automatically to their component. Styles are tightly coupled with their components. This makes it easier to know how to edit a component's CSS as there's never any confusion about how and where CSS is being used. First, open a new terminal window and run the following to create a new site: diff --git a/docs/docs/styled-components.md b/docs/docs/styled-components.md index 5438b67740385..a5cdc6f88ba09 100644 --- a/docs/docs/styled-components.md +++ b/docs/docs/styled-components.md @@ -8,7 +8,7 @@ Styled Components lets you use actual CSS syntax inside your components. Styled One of the most important problems they solve is selector name collisions. With traditional CSS, you have to be careful not to overwrite CSS selectors used elsewhere in a site because all CSS selectors live in the same global namespace. This unfortunate restriction can lead to elaborate (and often confusing) selector naming schemes. -With CSS-in-JS, you avoid all that as CSS selectors are scoped automatically to their component. Styles are tightly coupled with their components. This makes it very easy to know how to edit a component's CSS as there's never any confusion about how and where CSS is being used. +With CSS-in-JS, you avoid all that as CSS selectors are scoped automatically to their component. Styles are tightly coupled with their components. This makes it much easier to know how to edit a component's CSS as there's never any confusion about how and where CSS is being used. First, open a new terminal window and run the following to create a new site: diff --git a/docs/tutorial/part-four/index.md b/docs/tutorial/part-four/index.md index b6515dc10638f..2934327020c8f 100644 --- a/docs/tutorial/part-four/index.md +++ b/docs/tutorial/part-four/index.md @@ -73,7 +73,7 @@ In Gatsby, GraphQL enables components to declare and receive the data they need. ## Our first GraphQL query Let's create another new site for this part of the tutorial like in the previous -parts. We're going to build a simple Markdown blog called "Pandas Eating Lots". +parts. We're going to build a Markdown blog called "Pandas Eating Lots". It's dedicated to showing off the best pictures & videos of Pandas eating lots of food. Along the way we'll be dipping our toes into GraphQL and Gatsby's Markdown support. @@ -197,7 +197,7 @@ the following: ![start](start.png) -We have another simple site with a layout and two pages. +We have another small site with a layout and two pages. Now let's start querying 😋 @@ -211,10 +211,7 @@ error-prone, especially as sites get larger and more complex. It's much better t store the title in one place and then _pull_ that title into components whenever we need it. -To solve this, Gatsby supports a simple pattern for adding site "metadata"—like -the title. - -We add this data to the `gatsby-config.js` file. Let's add our site title to +To solve this, we can add site "metadata" — like page title or description — to the `gatsby-config.js` file. Let's add our site title to `gatsby-config.js` file and then query it from our layout and about page! Edit your `gatsby-config.js`: @@ -706,7 +703,7 @@ seem to really enjoy bananas! ![two-posts](two-posts.png) -Which looks great! Except…the order of the posts is wrong. +Which looks great! Except… the order of the posts is wrong. But this is easy to fix. When querying a connection of some type, you can pass a variety of arguments to the query. You can `sort` and `filter` nodes, set how @@ -1078,7 +1075,7 @@ export const query = graphql` ` ``` -And there we go! A working (albeit quite simple still) blog! +And there we go! A working, albeit small, blog! Try playing more with the site. Try adding some more Markdown files. Explore querying other data from the `MarkdownRemark` nodes and adding them to the diff --git a/docs/tutorial/part-one/index.md b/docs/tutorial/part-one/index.md index 24d96b1827719..bccf0db97ffe3 100644 --- a/docs/tutorial/part-one/index.md +++ b/docs/tutorial/part-one/index.md @@ -202,8 +202,7 @@ pages! ## Interactive page -One nice thing about using Gatsby for building websites vs other tools is it's -so easy to add interactivity to your pages. React.js was designed for +One nice thing about using Gatsby for building websites vs. other tools is itʼs easier to add interactivity to your pages. React.js was designed for Facebook.com and is used on many other world-class web applications. Let's see how easy it is to add interactive elements to our pages. @@ -339,8 +338,8 @@ changes the count. ## Deploying Gatsby.js websites on the web -Gatsby.js is a _static site generator_ which makes deploying Gatsby sites to the -web really easy. There are no servers to setup or complicated databases to +Gatsby.js is a _static site generator_, which makes deploying Gatsby sites to the +web much easier vs. traditional CMSs. There are no servers to setup or complicated databases to deploy. Instead, the Gatsby `build` command produces a directory of static HTML and JavaScript files which you can deploy to a static site hosting service. diff --git a/docs/tutorial/part-two/index.md b/docs/tutorial/part-two/index.md index a22b1b229a724..325c355f367f6 100644 --- a/docs/tutorial/part-two/index.md +++ b/docs/tutorial/part-two/index.md @@ -17,7 +17,7 @@ within the same file. While a seemingly simple change, it has profound implications for how you think about building websites. -Take the simple example of creating a custom button. In the past you would +Take the example of creating a custom button. In the past you would create a CSS class (perhaps `.primary-button`) with your custom styles and then whenever you want to apply those styles e.g. @@ -101,7 +101,7 @@ 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/). -Gatsby plugins are easy to install and use. In almost every Gatsby site you +Our goal with Gatsby plugins is to make them easy 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. @@ -376,7 +376,7 @@ Your page should now look like: ![css-modules-1](css-modules-1.png) -Let's create a simple list of people with names, avatars, and short latin +Let's create a list of people with names, avatars, and short latin biographies. First, let's create the file for the CSS at diff --git a/packages/gatsby-plugin-netlify/src/plugin-data.js b/packages/gatsby-plugin-netlify/src/plugin-data.js index 37cd6b1ee756e..92fc471fc7991 100644 --- a/packages/gatsby-plugin-netlify/src/plugin-data.js +++ b/packages/gatsby-plugin-netlify/src/plugin-data.js @@ -36,7 +36,7 @@ export default function makePluginData(store, assetsManifest, pathPrefix) { const chunkManifest = normalizeStats(stats) const pages = applyLayouts(storePages, layouts) - // We combine the manifest of JS and the manifest of assets to make a simple lookup table. + // We combine the manifest of JS and the manifest of assets to make a lookup table. const manifest = { ...assetsManifest, ...chunkManifest } return { diff --git a/packages/gatsby-remark-prismjs/README.md b/packages/gatsby-remark-prismjs/README.md index 81b138b989d14..3a1c225d549b3 100644 --- a/packages/gatsby-remark-prismjs/README.md +++ b/packages/gatsby-remark-prismjs/README.md @@ -57,7 +57,7 @@ If you want to highlight lines of code, you also need to add some additional CSS that targets our _custom line highlighting implementation_ (which slightly differs from PrismJS's own plugin for that – more on that later). -For simple line highlights similar to PrismJS's, try: +For line highlights similar to PrismJS's, try: ```css .gatsby-highlight-code-line {