From 8926acda89849702727bed87004a2e3b03af50c6 Mon Sep 17 00:00:00 2001 From: Sarah Zhang Date: Thu, 24 Oct 2019 07:49:42 -0700 Subject: [PATCH] chore(docs): Edited pronouns to use second person pronouns (#18962) * edited pronouns to use second person pronouns * edited passive voice to use active voice * removed let's * more pronoun changes --- .../docs/adding-a-list-of-markdown-blog-posts.md | 2 +- docs/docs/adding-comments.md | 2 +- docs/docs/adding-forms.md | 2 +- docs/docs/adding-search-with-algolia.md | 16 ++++++++-------- docs/docs/adding-search-with-js-search.md | 2 +- docs/docs/adding-search.md | 2 +- docs/docs/audit-with-lighthouse.md | 2 +- docs/docs/bulma.md | 2 +- docs/docs/centralizing-your-sites-navigation.md | 6 +++--- docs/docs/creating-a-source-plugin.md | 2 +- docs/docs/debugging-async-lifecycles.md | 2 +- docs/docs/debugging-the-build-process.md | 8 ++++---- docs/docs/emotion.md | 2 +- docs/docs/environment-variables.md | 4 ++-- docs/docs/graphql-reference.md | 4 ++-- docs/docs/migrating-from-v0-to-v1.md | 16 +++++++--------- docs/docs/sourcing-from-buttercms.md | 14 +++++++------- docs/docs/unit-testing.md | 10 +++++----- docs/docs/using-fragments.md | 2 +- docs/docs/using-gatsby-image.md | 2 +- docs/docs/why-gatsby-uses-graphql.md | 6 +++--- 21 files changed, 53 insertions(+), 55 deletions(-) diff --git a/docs/docs/adding-a-list-of-markdown-blog-posts.md b/docs/docs/adding-a-list-of-markdown-blog-posts.md index 19e11aa11b5f9..ddd855671a78f 100644 --- a/docs/docs/adding-a-list-of-markdown-blog-posts.md +++ b/docs/docs/adding-a-list-of-markdown-blog-posts.md @@ -43,7 +43,7 @@ export default IndexPage ### Creating the GraphQL query -Second, you need to provide the data to your component with a GraphQL query. Let's add it, so that `index.js` looks like this: +Second, you need to provide the data to your component with a GraphQL query. Add it, so that `index.js` looks like this: ```jsx:title=src/pages/index.js import React from "react" diff --git a/docs/docs/adding-comments.md b/docs/docs/adding-comments.md index 7454ec0d2e00d..4930ac894602b 100644 --- a/docs/docs/adding-comments.md +++ b/docs/docs/adding-comments.md @@ -18,7 +18,7 @@ You can also [roll your own comment system](/blog/2019-08-27-roll-your-own-comme ## Using Disqus for comments -In this guide, we'll show you how to implement Disqus on your blog as it has a number of nice features. +In this guide, you'll learn how to implement Disqus on your blog as it has a number of nice features. - It is low maintenance, meaning [moderating your comments and maintaining your forum](https://help.disqus.com/moderation/moderating-101) less hassle. - It provides official [React support](https://github.com/disqus/disqus-react). diff --git a/docs/docs/adding-forms.md b/docs/docs/adding-forms.md index c9f723e4abf1a..673529d6128ed 100644 --- a/docs/docs/adding-forms.md +++ b/docs/docs/adding-forms.md @@ -4,7 +4,7 @@ title: Adding Forms Gatsby is built on top of React. So anything that is possible with a React form is possible in Gatsby. Additional details about how to create React forms can be found in the [React forms documentation](https://reactjs.org/docs/forms.html) (which happens to be built with Gatsby!) -Let's start with the following page. +Start with the following page. ```jsx:title=src/pages/index.js import React from "react" diff --git a/docs/docs/adding-search-with-algolia.md b/docs/docs/adding-search-with-algolia.md index 7f6a40b41d201..43d3096b16984 100644 --- a/docs/docs/adding-search-with-algolia.md +++ b/docs/docs/adding-search-with-algolia.md @@ -57,7 +57,7 @@ module.exports = { } ``` -Notice that you're loading `queries` from a file at `./src/utils/algolia.js` (you can of course put it wherever you like) and your Algolia ID and API key from `.env` so let's add those files. +Notice that you're loading `queries` from a file at `./src/utils/algolia.js` (you can of course put it wherever you like) and your Algolia ID and API key from `.env` so add those files. For this, you will need to navigate to [the 'API Keys' section of your Algolia profile](https://www.algolia.com/api-keys). If you already have an account, you will find your API keys here. If not, you will need to sign up for one and then navigate to this link. It should look something like this screenshot, only with actual numbers instead of redacted ones: @@ -161,9 +161,9 @@ If you've come this far, then the "backend" is done. You should now be able to r ## Adding a search interface to your site -Next, let's build a user-facing search interface for your site. It needs a way for the user to enter a search string, send that string to Algolia, receive matching results (_hits_ in Algolia speak) from your indices and finally display those to the user. Let's dive right in. +Next, build a user-facing search interface for your site. It needs a way for the user to enter a search string, send that string to Algolia, receive matching results (_hits_ in Algolia speak) from your indices and finally display those to the user. -You're going to assemble everything you need into a React `Search` component that you call from anywhere on your site where you want the user to be able to search. Even though design varies strongly from site to site, I'll also go through the styles implemented with [`styled-components`](https://styled-components.com) in this guide since working out the CSS transitions to have the search field slide out as the user clicks on it and the results pane to appear once Algolia returns matches took some time. +You're going to assemble everything you need into a React `Search` component that you call from anywhere on your site where you want the user to be able to search. Even though design varies strongly from site to site, you'll note the styles implemented with [`styled-components`](https://styled-components.com) in this guide since working out the CSS transitions to have the search field slide out as the user clicks on it and the results pane to appear once Algolia returns matches took some time. The `Search` components is made up of the following files: @@ -172,7 +172,7 @@ The `Search` components is made up of the following files: - **`hitComps.js`**: the components that will render matching posts/pages - **`styles.js`**: the styled components -There's quite a lot happening in these files so let's break them down one by one and piece by piece. +There's quite a lot happening in these files so break them down one by one and piece by piece. ### `index.js` @@ -259,7 +259,7 @@ import { Root, SearchBox, HitsWrapper, PoweredBy } from "./styles" import Input from "./Input" ``` -`PoweredBy` renders the string "Powered by Algolia" with a small logo and link. If you're using Algolia's generous free tier, they ask you to acknowledge them in this way below the search results. `react-instantsearch-dom` also provides a [`PoweredBy` component](https://community.algolia.com/react-instantsearch/widgets/PoweredBy.html) specifically for this purpose but I preferred to build my own. You'll get back to these styled components once you're done with `index.js`. For now, let's move on. +`PoweredBy` renders the string "Powered by Algolia" with a small logo and link. If you're using Algolia's generous free tier, they ask you to acknowledge them in this way below the search results. `react-instantsearch-dom` also provides a [`PoweredBy` component](https://community.algolia.com/react-instantsearch/widgets/PoweredBy.html) specifically for this purpose, but you can build your own. You'll get back to these styled components once you're done with `index.js`. The last thing you need for the `Search` component to work are hit components for every type of result you want to display to the user. The hit component determines how attributes of matching results (such as author, date, tags and title in the case of a blog post) are displayed to the user. @@ -365,7 +365,7 @@ export default connectSearchBox(({ refine, ...rest }) => ( The `Input` component is where the user enters the search string. It is quite short since the grunt work is done by Algolia's [`connectSearchBox`](https://community.algolia.com/react-instantsearch/connectors/connectSearchBox.html) function. -Now let's look at the styled components `SearchIcon`, `Form`, `Input` as well as the ones imported in `index.js`. +Now look at the styled components `SearchIcon`, `Form`, `Input` as well as the ones imported in `index.js`. ## `styles.js` @@ -503,7 +503,7 @@ export const PoweredBy = () => ( ) ``` -Styles will of course be different from one site to the next so I only list these components here for completeness and because they implement the dynamic behavior of the search interface, i.e. that the input field only slides out once the user clicks the `SearchIcon` (a magnifier) and that the pane displaying search (`HitsWrapper`) results only appears once Algolia's server returned matches, both of you which you might want to keep. +Styles will of course be different from one site to the next so these components are listed here for completeness and because they implement the dynamic behavior of the search interface, i.e. that the input field only slides out once the user clicks the `SearchIcon` (a magnifier) and that the pane displaying search (`HitsWrapper`) results only appears once Algolia's server returned matches, both of you which you might want to keep. Now you're almost done, two small steps remain. First you need to put together a hit component for every type of result you want to display. In this example, these are blog posts and pages. And second, you need to call your `Search` component somewhere on your site. Here are the hit components. @@ -557,7 +557,7 @@ export const PostHit = clickHandler => ({ hit }) => ( ## Usage -Now all you need to do is import `Search` somewhere. The obvious place is the `Header` component so let's add it there. +Now all you need to do is import `Search` somewhere. The obvious place is the `Header` component so add it there. ```js:title=src/components/Header/index.js import React from "react" diff --git a/docs/docs/adding-search-with-js-search.md b/docs/docs/adding-search-with-js-search.md index 122f53136994f..72b2b6c6714d4 100644 --- a/docs/docs/adding-search-with-js-search.md +++ b/docs/docs/adding-search-with-js-search.md @@ -257,7 +257,7 @@ Run `gatsby develop` and if all went well, open your browser of choice and enter ## JS-Search with a big dataset -Now let's try a different approach, this time instead of letting the component do all of the work, it's Gatsby's job to do that and pass all the data to a page defined by the path property, via [pageContext](/docs/behind-the-scenes-terminology/#pagecontext). +Now try a different approach, this time instead of letting the component do all of the work, it's Gatsby's job to do that and pass all the data to a page defined by the path property, via [pageContext](/docs/behind-the-scenes-terminology/#pagecontext). To do this, some changes are required. diff --git a/docs/docs/adding-search.md b/docs/docs/adding-search.md index 5a3cf9294a292..ae0405676dfd1 100644 --- a/docs/docs/adding-search.md +++ b/docs/docs/adding-search.md @@ -9,7 +9,7 @@ See below for a list of guides in this section, or keep reading for an overview ## Site search overview -Before we go through the steps for adding search to your Gatsby website, let's examine the components needed for adding search to a website. +Before going through the steps for adding search to your Gatsby website, examine the components needed for adding search to a website. There are three required components for adding search to your Gatsby website: diff --git a/docs/docs/audit-with-lighthouse.md b/docs/docs/audit-with-lighthouse.md index faa43988d00a3..5862650860839 100644 --- a/docs/docs/audit-with-lighthouse.md +++ b/docs/docs/audit-with-lighthouse.md @@ -30,7 +30,7 @@ Once this starts, you can now view your site at `localhost:9000`. ### Run a Lighthouse audit -Now let's run your first Lighthouse test. +Now run your first Lighthouse test. 1. Open the site in Chrome (if you didn't already do so) and then open up the Chrome DevTools. diff --git a/docs/docs/bulma.md b/docs/docs/bulma.md index 00554c74aea00..1e607afbbae24 100644 --- a/docs/docs/bulma.md +++ b/docs/docs/bulma.md @@ -37,7 +37,7 @@ $title-color: #ff0000; The last step is to import the style and use it. -Let's replace the default contents of the index.js file. +Replace the default contents of the index.js file. ```javascript:title=index.js import React from "react" diff --git a/docs/docs/centralizing-your-sites-navigation.md b/docs/docs/centralizing-your-sites-navigation.md index 2470b31e75103..4b3066d4d4937 100644 --- a/docs/docs/centralizing-your-sites-navigation.md +++ b/docs/docs/centralizing-your-sites-navigation.md @@ -86,7 +86,7 @@ When executing this query within the GraphiQL editor you see output that looks s } ``` -Perfect! You now have a way of obtaining data from the `gatsby-config.js` file. Let's continue by pulling this data into the layout using the query you just formed. +Perfect! You now have a way of obtaining data from the `gatsby-config.js` file. Continue by pulling this data into the layout using the query you just formed. ### Pulling data inside the layout component @@ -94,7 +94,7 @@ Inside your project, locate the `src/components` folder and navigate to the `lay StaticQuery is a new component introduced in Gatsby V2, which allows you to run GraphQL queries within your components, not just pages. It allows developers to collocate data with their components. -Let's extend the query within this component to include the menu links, so it looks like so: +Extend the query within this component to include the menu links, so it looks like so: ```diff:title=src/components/layout.js const Layout = ({ children }) => ( @@ -141,7 +141,7 @@ const Layout = ({ children }) => ( With the above changes to your `StaticQuery` component, the `render` property, which accepts a function that takes one argument, now has access to the menu links for use inside the function (as the argument). The last thing that is left to do is to display the site's navigation. -To do this, the header component that is already available in the project seems like it might be a good starting place to display the navigation. Let's pass the `menuLinks` object to this header component like so: +To do this, the header component that is already available in the project seems like it might be a good starting place to display the navigation. Pass the `menuLinks` object to this header component like so: ```diff:title=src/components/layout.js const Layout = ({ children }) => ( diff --git a/docs/docs/creating-a-source-plugin.md b/docs/docs/creating-a-source-plugin.md index 29c4ec871e39e..d5b601c6b3c5b 100644 --- a/docs/docs/creating-a-source-plugin.md +++ b/docs/docs/creating-a-source-plugin.md @@ -140,7 +140,7 @@ When an object node is deleted, Gatsby _does not_ delete any referenced entities #### Creating the relationship -Let's say you want to create a relationship between Posts and Authors, and let's say you want to call the field `author`. +Suppose you want to create a relationship between Posts and Authors, and you want to call the field `author`. Before you pass the Post object and Author object into `createNode` and create the respective nodes, you need to create a field called `author___NODE` on the Post object to hold the relationship to Authors. The value of this field should be the node ID of the Author. diff --git a/docs/docs/debugging-async-lifecycles.md b/docs/docs/debugging-async-lifecycles.md index df7c11b1fadb0..a36e64ee5acbc 100644 --- a/docs/docs/debugging-async-lifecycles.md +++ b/docs/docs/debugging-async-lifecycles.md @@ -4,7 +4,7 @@ title: Debugging Asynchronous Lifecycle Methods Various lifecycle methods (see: [Gatsby Node APIs](/docs/node-apis/)) within Gatsby are presumed to be asynchronous. In other words, these methods can _eventually_ resolve to a value and this value is a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). You wait for the `Promise` to resolve, and then mark the lifecycle method as completed when it does. -In the context of Gatsby, this means that if you are invoking asynchronous functionality (e.g. data requests, `graphql` calls, etc.) and not correctly returning the Promise an internal issue can arise where the result of those call(s) happens _after_ the lifecycle method has already been marked as completed. Let's consider an example: +In the context of Gatsby, this means that if you are invoking asynchronous functionality (e.g. data requests, `graphql` calls, etc.) and not correctly returning the Promise an internal issue can arise where the result of those call(s) happens _after_ the lifecycle method has already been marked as completed. Consider an example: ```js:title=gatsby-node.js exports.createPages = async function({ actions, graphql }) { diff --git a/docs/docs/debugging-the-build-process.md b/docs/docs/debugging-the-build-process.md index de7097233e6aa..b46aaffb2dd5d 100644 --- a/docs/docs/debugging-the-build-process.md +++ b/docs/docs/debugging-the-build-process.md @@ -10,7 +10,7 @@ In this guide you will learn how to debug some code using: - [VS Code debugger (Manual-Config)](#vs-code-debugger-manual-config) - [Chrome DevTools for Node](#chrome-devtools-for-node) -As an example let's use the following code snippet in a `gatsby-node.js` file: +As an example, use the following code snippet in a `gatsby-node.js` file: ```js:title=gatsby-node.js const { createFilePath } = require("gatsby-source-filesystem") @@ -124,13 +124,13 @@ You should see Chrome DevTools start and that code execution is paused at the st Right now you can't see your files in Sources. You need to add those using the "Add folder to workspace" button and pick the directory with the code you want to debug. If you want to debug code in your `gatsby-node.js` or your local plugins, pick your project directory. If you want debug the `gatsby` package you will have to pick the `gatsby` directory inside `node_modules`. -This example has problematic code in your local `gatsby-node.js` file, so let's add the directory containing it to Sources. You should have a directory with your code in the left pane: +This example has problematic code in your local `gatsby-node.js` file, so add the directory containing it to Sources. You should have a directory with your code in the left pane: ![Files added to Sources tab](./images/chrome-devtools-files.png) ### Using DevTools -Let's go ahead and add a breakpoint just before the place that the error is thrown. To add a breakpoint navigate to `gatsby-node.js` and left click on a line number: +Go ahead and add a breakpoint just before the place that the error is thrown. To add a breakpoint navigate to `gatsby-node.js` and left click on a line number: ![Added breakpoint](./images/chrome-devtools-new-breakpoint.png) @@ -140,7 +140,7 @@ Now you can resume code execution by clicking the "resume" icon in the DevTools To inspect variables you can hover your mouse over them or go to the `Scope` section in the right-hand pane (either collapse the "Call Stack" section or scroll through it to the bottom). -In the example `Node` is `undefined` and to figure out why, let's go backwards. `Node` is extracted from `args` so let's examine that by hovering `args`: +In the example `Node` is `undefined` and to figure out why, let's go backwards. `Node` is extracted from `args` so examine that by hovering `args`: ![Examine variable](./images/chrome-devtools-examine-var.png) diff --git a/docs/docs/emotion.md b/docs/docs/emotion.md index 1965c9afe2732..be623aa8f4927 100644 --- a/docs/docs/emotion.md +++ b/docs/docs/emotion.md @@ -30,7 +30,7 @@ module.exports = { Then in your terminal run `npm start` to start the Gatsby development server. -Now let's create a sample Emotion page at `src/pages/index.js`: +Now create a sample Emotion page at `src/pages/index.js`: ```jsx:title=src/pages/index.js import React from "react" diff --git a/docs/docs/environment-variables.md b/docs/docs/environment-variables.md index 2556489342143..5d8aa86a31636 100644 --- a/docs/docs/environment-variables.md +++ b/docs/docs/environment-variables.md @@ -7,8 +7,8 @@ title: Environment Variables You can provide environment variables to your site to customise its behavior in different environments. Environment variables can be distinguished between different types. -There are environment variables that are defined in special places intended to be used in different deployment environments. Let's call these “Project Env Vars”. -And there are true OS-level environment variables that might be used in command-line calls. Let's call these “OS Env Vars”. +There are environment variables that are defined in special places intended to be used in different deployment environments. You can call these “Project Env Vars”. +And there are true OS-level environment variables that might be used in command-line calls. You can call these “OS Env Vars”. In both cases you want to be able to access the relevant value of these variables for the environment you are in. diff --git a/docs/docs/graphql-reference.md b/docs/docs/graphql-reference.md index 8fdbf7ff2d08e..4dd8925f02880 100644 --- a/docs/docs/graphql-reference.md +++ b/docs/docs/graphql-reference.md @@ -12,7 +12,7 @@ For more information, read about [why Gatsby uses GraphQL](/docs/why-gatsby-uses ## Basic query -Let's start with the basics, pulling up the site `title` from your `gatsby-config.js`'s `siteMetaData`. Here the query is on the left and the results are on the right. +Start with the basics, pulling up the site `title` from your `gatsby-config.js`'s `siteMetaData`. Here the query is on the left and the results are on the right. @@ -142,7 +142,7 @@ To add variables to page component queries, pass these in the `context` object [ You can also group values on the basis of a field e.g. the title, date or category and get the field value, the total number of occurrences and edges. -The query below gets us all categories (`fieldValue`) applied to a book and how many books (`totalCount`) a given category is applied to. In addition we're grabbing the `title` of books in a given category. You can see for example that there are 3 books in the `magical creatures` category. +The query below gets you all categories (`fieldValue`) applied to a book and how many books (`totalCount`) a given category is applied to. In addition you are grabbing the `title` of books in a given category. You can see for example that there are 3 books in the `magical creatures` category. diff --git a/docs/docs/migrating-from-v0-to-v1.md b/docs/docs/migrating-from-v0-to-v1.md index 770443886f8fa..401bf70a5590a 100644 --- a/docs/docs/migrating-from-v0-to-v1.md +++ b/docs/docs/migrating-from-v0-to-v1.md @@ -168,7 +168,7 @@ module.exports = { ### Create slugs for markdown files It's handy to store the pathname or "slug" for each markdown page with the -markdown data. This let's you query the slug from multiple places. +markdown data. This lets you query the slug from multiple places. Here's how you do that. @@ -196,7 +196,7 @@ exports.onCreateNode = ({ node, boundActionCreators, getNode }) => { } ``` -Now we can create pages for each markdown file using our slug. In the same +Now you can create pages for each markdown file using our slug. In the same `gatsby-node.js` file add: ```javascript @@ -206,7 +206,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => { return new Promise((resolve, reject) => { const pages = [] const blogPost = path.resolve("src/templates/blog-post.js") - // Query for all markdown "nodes" and for the slug we previously created. + // Query for all markdown "nodes" and for the slug you previously created. resolve( graphql( ` @@ -246,12 +246,10 @@ exports.createPages = ({ graphql, boundActionCreators }) => { } ``` -So we've now generated the pathname or slug for each markdown page as well as -told Gatsby about these pages. You'll notice above that we reference a blog post -template file when creating the pages. We haven't created that yet so let's do -it. - -In your `src` directory, create a templates directory and add `blog-post.js`. +You've now generated the pathname or slug for each markdown page as well as told +Gatsby about these pages. You'll notice above that you reference a blog post +template file when creating the pages. You haven't created that template file yet, +so in your `src` directory, create a templates directory and add `blog-post.js`. This is a normal React.js component with a special Gatsby twist—a GraphQL query specifying the data needs of the component. As a start, make the component look diff --git a/docs/docs/sourcing-from-buttercms.md b/docs/docs/sourcing-from-buttercms.md index 5e8de6903c340..041972cbc8c5c 100644 --- a/docs/docs/sourcing-from-buttercms.md +++ b/docs/docs/sourcing-from-buttercms.md @@ -125,13 +125,13 @@ If you need help after reading this, contact us via email or livechat. #### Create the page structure -Create a new Page and define it's structure using our Page Builder. Let's create an example homepage. +Create a new Page and define it's structure using our Page Builder. Create an example homepage. ![image](https://buttercms.com/static/images/docs/guides/PagesNewSinglePage.png) #### Populate the content -Then populate our new page with content. In the next step, you'll call the ButterCMS API to retrieve this content from our app. +Then populate your new page with content. In the next step, you'll call the ButterCMS API to retrieve this content from your app. ![image](https://buttercms.com/static/images/docs/guides/PagesNewSinglePageContent.png) @@ -269,7 +269,7 @@ Now open up [localhost:8000/home](http://localhost:8000/home) to see the home pa ## Create multiple pages using Page Types -Let's say you want to add a set of customer case study pages to your marketing site. They all have the same structure but the content is different. Page Types are perfect for this scenario and involves three easy steps: +Suppose you want to add a set of customer case study pages to your marketing site. They all have the same structure but the content is different. Page Types are perfect for this scenario and involves three easy steps: 1. Create the Page Type structure 2. Populate the content @@ -285,13 +285,13 @@ Create a Page Type to represent your Customer Case Study pages: After saving, return to the configuration page by clicking the gear icon: ![image](https://buttercms.com/static/images/docs/guides/PagesNewPageType2.png) -Then click on Create Page Type and name it "Customer Case Study". This will allow us to reuse this field configuration across multiple customer case study pages: +Then click on Create Page Type and name it "Customer Case Study". This will allow you to reuse this field configuration across multiple customer case study pages: ![saving](https://buttercms.com/static/images/docs/guides/PagesNewPageType3.png) ## Populate the content -Then populate our new page with content. In the next step, we'll call the ButterCMS API to retrieve this content from our app. +Then populate our new page with content. In the next step, you'll call the ButterCMS API to retrieve this content from your app. ![](https://buttercms.com/static/images/docs/guides/PagesNewPageTypeCreateContent.png) @@ -490,7 +490,7 @@ export const pageQuery = graphql` export default CustomerCaseStudy ``` -Now let's programmatically create customer case study pages based on the template you defined in `src/template/customer-case-study.js` +Now programmatically create customer case study pages based on the template you defined in `src/template/customer-case-study.js` ```javascript:title=gatsby-node.js const path = require(`path`) @@ -604,7 +604,7 @@ was use by gatsby to create each case study page. ## Setup content fields -Let's suppose you want to add a CMS to a static FAQ page with a title and a list of questions with answers. Most websites have a FAQ(Frequently Asked Question) page. ButterCMS make it dead easy to create such content with Collections . Now you'll create a collection named `FAQs`having a `question` and `answer` field. +Suppose you want to add a CMS to a static FAQ page with a title and a list of questions with answers. Most websites have a FAQ(Frequently Asked Question) page. ButterCMS make it dead easy to create such content with Collections. Now you'll create a collection named `FAQs`having a `question` and `answer` field. Making your content dynamic with Butter is a two-step process: diff --git a/docs/docs/unit-testing.md b/docs/docs/unit-testing.md index ccd9aea59f31b..e204b9ba61006 100644 --- a/docs/docs/unit-testing.md +++ b/docs/docs/unit-testing.md @@ -20,7 +20,7 @@ concepts should be the same or very similar for your site._ ### 1. Installing dependencies -First you need to install Jest and some more required packages. We install babel-jest and babel-preset-gatsby to ensure that the babel preset(s) that are used match what are used internally for your Gatsby site. +First you need to install Jest and some more required packages. Install babel-jest and babel-preset-gatsby to ensure that the babel preset(s) that are used match what are used internally for your Gatsby site. ```shell npm install --save-dev jest babel-jest react-test-renderer babel-preset-gatsby identity-obj-proxy @@ -50,7 +50,7 @@ module.exports = { } ``` -Let's go over the content of this configuration file: +Go over the content of this configuration file: - The `transform` section tells Jest that all `js` or `jsx` files need to be transformed using a `jest-preprocess.js` file in the project root. Go ahead and @@ -165,7 +165,7 @@ start with a simple snapshot test to check that everything is working. First, create the test file. You can either put these in a `__tests__` directory, or put them elsewhere (usually next to the component itself), with the extension `.spec.js` or `.test.js`. The decision comes down to your own -preference. In this guide, we will use the `__tests__` folder convention. Let's create a test for our header component, so create a `header.js` file in `src/components/__tests__/`: +preference. In this guide, you will use the `__tests__` folder convention. Create a test for our header component, so create a `header.js` file in `src/components/__tests__/`: ```js:title=src/components/__tests__/header.js import React from "react" @@ -193,7 +193,7 @@ learn more about other tests that you can write. If you look inside `package.json` you will probably find that there is already a script for `test`, which just outputs an error message. Change this to use the -`jest` executable that we now have available, like so: +`jest` executable that you now have available, like so: ```json:title=package.json "scripts": { @@ -259,7 +259,7 @@ file inside a `__tests__` directory, or any file elsewhere with the extension Option `moduleFileExtensions` is needed when working with TypeScript. The only thing it is doing is telling Jest which file extensions you can import in your files without making precise the file extension. By default, -it works with `js`, `json`, `jsx`, `node` file extensions so we just need +it works with `js`, `json`, `jsx`, `node` file extensions so you just need to add `ts` and `tsx`. You can read more about it in [Jest's documentation](https://jestjs.io/docs/en/configuration.html#modulefileextensions-array-string). ## Other resources diff --git a/docs/docs/using-fragments.md b/docs/docs/using-fragments.md index 38e9f139124b3..7cebd34b95bb5 100644 --- a/docs/docs/using-fragments.md +++ b/docs/docs/using-fragments.md @@ -74,7 +74,7 @@ export const query = graphql` ` ``` -When compiling your site, Gatsby preprocesses all GraphQL queries it finds. Therefore, any file that gets included in your project can define a snippet. However, only Pages can define GraphQL queries that actually return data. This is why we can define the fragment in the component file - it doesn't actually return any data directly. +When compiling your site, Gatsby preprocesses all GraphQL queries it finds. Therefore, any file that gets included in your project can define a snippet. However, only Pages can define GraphQL queries that actually return data. This is why you can define the fragment in the component file - it doesn't actually return any data directly. ## Further reading diff --git a/docs/docs/using-gatsby-image.md b/docs/docs/using-gatsby-image.md index 2e9fbc2a32d26..e9e4adc088a2c 100644 --- a/docs/docs/using-gatsby-image.md +++ b/docs/docs/using-gatsby-image.md @@ -37,7 +37,7 @@ This isn’t ideal. Optimized images should be easy and the default. ## Solution -With Gatsby, we can make the experience of working with images way, way better. +With Gatsby, you can make the experience of working with images way, way better. `gatsby-image` is designed to work seamlessly with Gatsby’s native image processing capabilities powered by GraphQL and Sharp. To produce perfect images with minimal effort, you can: diff --git a/docs/docs/why-gatsby-uses-graphql.md b/docs/docs/why-gatsby-uses-graphql.md index 67454e99a6436..e64dd2e981fe4 100644 --- a/docs/docs/why-gatsby-uses-graphql.md +++ b/docs/docs/why-gatsby-uses-graphql.md @@ -60,7 +60,7 @@ In the simplest cases, this is all that’s required for building pages with Gat To pass data to the created pages, you’ll need to pass `context` to the `createPage` call. -In `gatsby-node.js`, we can add context like so: +In `gatsby-node.js`, you can add context like so: ```js:title=gatsby-node.js exports.createPages = ({ actions: { createPage } }) => { @@ -75,11 +75,11 @@ exports.createPages = ({ actions: { createPage } }) => { } ``` -The `context` property accepts an object, and we can pass in any data we want the page to be able to access. +The `context` property accepts an object, and you can pass in any data you want the page to be able to access. > **NOTE:** There are a few reserved names that _cannot_ be used in `context`. They are: `path`, `matchPath`, `component`, `componentChunkName`, `pluginCreator___NODE`, and `pluginCreatorId`. -When Gatsby creates pages, it includes a prop called `pageContext` and sets its value to `context`, so we can access any of the values in our component: +When Gatsby creates pages, it includes a prop called `pageContext` and sets its value to `context`, so you can access any of the values in your component: ```jsx:title=src/templates/with-context.js import React from "react"