Skip to content

Commit a8aa875

Browse files
authored
A few grammar edits
@LekoArts just updated this with a few grammar / punctuation edits. It is structured very smoothly! Thank you for working so hard on this!
1 parent 078be4d commit a8aa875

File tree

1 file changed

+17
-17
lines changed

1 file changed

+17
-17
lines changed

docs/docs/sourcing-from-prismic.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,19 @@ title: Sourcing from Prismic
44

55
In this guide, we'll walk through setting up a site with content management using [Prismic](https://prismic.io/).
66

7-
Prismic is a hosted, proprietary Headless CMS (SaaS) with a web app for creating and publishing content. It's suitable for marketers, editors and developers as it has both a "Writing Room" and a fully-fledged API & content backend. Besides the usual advantages of a SaaS CMS (hosting, security, updates) Prismic offers features like: custom type builder, scheduling and content versioning and multi-language support.
7+
Prismic is a hosted, proprietary Headless CMS (SaaS) with a web app for creating and publishing content. It's suitable for marketers, editors, and developers as it has both a "Writing Room" and a fully-fledged API & content backend. Besides the usual advantages of a SaaS CMS (hosting, security, updates), Prismic offers features like custom type builder, scheduling and content versioning, and multi-language support.
88

9-
Moreover their [Content Slices](https://prismic.io/feature/dynamic-layout-content-components) feature enables you to build dynamic layouts by defining reusable custom components and placing them on your landing page, case studies or in your blog posts. Fortunately you can use those in Gatsby to realize features like PrismJS highlighting or using `gatsby-image`. The linked [starter](https://github.com/LekoArts/gatsby-starter-prismic) shows you how to do just that!
9+
Moreover, their [Content Slices](https://prismic.io/feature/dynamic-layout-content-components) feature enables you to build dynamic layouts by defining reusable custom components and placing them on your landing page, case studies, or in your blog posts. Fortunately, you can use those in Gatsby to realize features like PrismJS highlighting or using `gatsby-image`. [This starter](https://github.com/LekoArts/gatsby-starter-prismic) shows you how to do just that!
1010

11-
In addition to the written instructions this guide also includes videos for the more complex steps. You can find all of them in a [YouTube playlist](https://www.youtube.com/playlist?list=PLB-cmN3u7PHJCG-phPyiydhHfiosyd0VC).
11+
In addition to written instructions, this guide also includes videos for more complex steps. You can find all of them in a [YouTube playlist](https://www.youtube.com/playlist?list=PLB-cmN3u7PHJCG-phPyiydhHfiosyd0VC).
1212

1313
_Note: This guide uses the Gatsby Hello World starter to provide a very basic understanding of how Prismic can work with your Gatsby site. If you'd like to start with a full blown template, check out [gatsby-starter-prismic](https://github.com/LekoArts/gatsby-starter-prismic). If you're not familiar with Prismic and its functionalities yet, we highly recommend to check out [Prismic's official documentation](https://prismic.io/docs) which also includes user guides and tutorials. This guide assumes that you have basic knowledge of Prismic & Gatsby (See [Gatsby's official tutorial](/tutorial))._
1414

1515
## Setup
1616

1717
### Prismic
1818

19-
Before initializing the Gatsby project you should sign up for an account on [Prismic.io](https://prismic.io/). The free plan is a perfect fit for personal or smaller projects. Create a new blank repository to get to the content overview of your repository.
19+
Before initializing your Gatsby project you should sign up for an account on [Prismic.io](https://prismic.io/). The free plan is a perfect fit for personal or smaller projects. Create a new blank repository to get to the content overview of your repository.
2020

2121
Create your first custom type (Repeatable Type) with the name `Post` and add some fields to it. Choose rational names for the `API ID` input while configuring a field because these names will appear in your queries. You should always add the `uid` field in order to have a unique identifier (e.g. for filtering). Then switch to the content overview and create a new document with your `Post` type. Fill out the fields and publish the item.
2222

@@ -42,7 +42,7 @@ cd prismic-tutorial
4242
npm install --save gatsby-source-prismic
4343
```
4444

45-
In addition to that you also have to install the package `dotenv` to securely use your access tokens locally as you should never commit secret API keys to your repository!
45+
In addition to installing the Prismic plugin, you also have to install the package `dotenv` to securely use your access tokens locally as you should never commit secret API keys to your repository!
4646

4747
```shell
4848
npm install --save-dev dotenv
@@ -155,11 +155,11 @@ export const pageQuery = graphql`
155155

156156
## Deploying to Netlify
157157

158-
Netlify can not only automatically start builds on pushes to a repository but also accepts [webhooks](https://www.netlify.com/docs/webhooks/) to do so. Fortunately Prismic can [trigger webhook](https://user-guides.prismic.io/webhooks/webhooks) URLs when publishing content. Hence new content will automatically appear on your Netlify site.
158+
Netlify is able to automatically start builds on pushes to a repository and accepts [webhooks](https://www.netlify.com/docs/webhooks/) to do so. Fortunately, Prismic can [trigger webhook](https://user-guides.prismic.io/webhooks/webhooks) URLs when publishing content. With those features set up, new content will automatically appear on your Netlify site.
159159

160-
Setup your Netlify project and afterwards go to the `Build hooks` setting at `Settings → Build & deploy`. You'll receive an URL of the format `https://api.netlify.com/build_hooks/-randomstring-` after clicking `Add build hook`.
160+
Setup your Netlify project and afterwards go to the `Build hooks` setting at `Settings → Build & deploy`. You'll receive a URL of the format `https://api.netlify.com/build_hooks/-randomstring-` after clicking `Add build hook`.
161161

162-
On your Prismic project visit the `Webhooks` setting and insert the copied URL into the respective field. Confirm with `Add this webhook`. Everytime you publish a new document now Netlify will re-build your site.
162+
On your Prismic project, visit the `Webhooks` setting and insert the copied URL into the respective field. Confirm with `Add this webhook`. Everytime you publish a new document, Netlify will re-build your site.
163163

164164
## Adding more features
165165

@@ -169,13 +169,13 @@ Prismic offers a [Content Relationship](https://user-guides.prismic.io/content-m
169169

170170
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/67yir-jQrFk?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
171171

172-
The video shows the usage of a group field and relationship field — if you only want to have one category skip the group field. Similar as to the `Post` custom type the `Category` one can also be queried. Furthermore the `allPrismicPost` query also has the `categories` node available:
172+
The video shows the usage of a group field and relationship field — if you only want to have one category, skip the group field. Similar as to the `Post` custom type the `Category` one can also be queried. Furthermore, the `allPrismicPost` query also has the `categories` node available:
173173

174174
![Prismic Categories Query](./images/prismic-categories-query.jpg)
175175

176176
### Single Type
177177

178-
When creating a new custom type you are able to choose `Single Type`, too. In this example you'll fill the homepage with content from Prismic and therefore have complete control over the content of your site. The goal is to eliminate the need to change website code, but rather your content in Prismic. Visit your Prismic repository and follow the video:
178+
When creating a new custom type, you are able to choose `Single Type`, too. In this example, you'll fill the homepage with content from Prismic and therefore have complete control over the content of your site. The goal is to eliminate the need to change website code, and to change your content in Prismic instead. Visit your Prismic repository and follow the video:
179179

180180
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/bvDAUEaJXrM?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
181181

@@ -212,14 +212,14 @@ export const pageQuery = graphql`
212212

213213
## Wrapping Up
214214

215-
This was a very basic example meant to help you understand how Prismic works with Gatsby. With your new found knowledge of Prismic (and perhaps even Gatsby) you're now able to:
215+
This was an example meant to help you understand how Prismic works with Gatsby. With your newfound knowledge of Prismic (and perhaps even Gatsby), you're now able to:
216216

217-
- Creating a Prismic repository and setting it up together with the Gatsby plugin
218-
- Querying data from Prismic and using it to programmatically create blogpost pages
219-
- Using Prismic together with Netlify
220-
- Adding relationships between posts, e.g. with categories
221-
- Querying data from Prismic for single pages
217+
- Create a Prismic repository and setting it up together with the Gatsby plugin
218+
- Query data from Prismic and using it to programmatically create blogpost pages
219+
- Use Prismic together with Netlify
220+
- Add relationships between posts, e.g. with categories
221+
- Query data from Prismic for single pages
222222

223-
As mentioned in the beginning of this guide, if you got stuck, you can compare your code to the [gatsby-starter-prismic](https://github.com/LeKoArts/gatsby-starter-prismic) which is the project set up in the videos. A working example created by following this guide is available in the [commit history](https://github.com/LeKoArts/gatsby-starter-prismic/tree/4aa5d52e79a0b4d90f0a671c24eb8289eb15a42b) of the aforementioned starter. More advanced usages of Prismic in Gatsby would, e.g. be [Slices](https://intercom.help/prismicio/content-modeling-and-custom-types/field-reference/slices) and [Labels](https://intercom.help/prismicio/content-modeling-and-custom-types/structure-your-content/add-custom-styles-to-rich-text).
223+
As mentioned in the beginning of this guide, if you got stuck, you can compare your code to the [gatsby-starter-prismic](https://github.com/LeKoArts/gatsby-starter-prismic) which is the project set up in the videos. A working example created by following this guide is available in the [commit history](https://github.com/LeKoArts/gatsby-starter-prismic/tree/4aa5d52e79a0b4d90f0a671c24eb8289eb15a42b) of the aforementioned starter. More advanced usages of Prismic in Gatsby would be [Slices](https://intercom.help/prismicio/content-modeling-and-custom-types/field-reference/slices) and [Labels](https://intercom.help/prismicio/content-modeling-and-custom-types/structure-your-content/add-custom-styles-to-rich-text).
224224

225225
<!-- Links to more advanced tutorials will go here -->

0 commit comments

Comments
 (0)