From 9add5fbf9ae2684d4c1dbb856ef7912b1779ee51 Mon Sep 17 00:00:00 2001 From: Florian Kissling Date: Wed, 7 Feb 2018 11:29:44 +0100 Subject: [PATCH 1/4] [www] Add `PostLink` component example to docs/adding-a-list-of-markdown-blog-posts/ Ref. #3886 --- .../adding-a-list-of-markdown-blog-posts.md | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) 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 baf7bbf06189d..05ce38ede9e7c 100644 --- a/docs/docs/adding-a-list-of-markdown-blog-posts.md +++ b/docs/docs/adding-a-list-of-markdown-blog-posts.md @@ -39,7 +39,7 @@ export default IndexPage; ### Creating the GraphQL query -The only thing left to do is to provide the data to your component with a GraphQL query. +The only thing left to do is to provide the data to your component with a GraphQL query and create the `post-link` component. Let's add the GraphQL query so that `index.js` looks like this: ```js import React from "react"; @@ -74,4 +74,21 @@ export const pageQuery = graphql` `; ``` +Last but not least, let's add a basic `post-link.js` to `src/components/`: + +```js +import React from "react"; +import Link from "gatsby-link"; + +const PostLink = ({ post }) => ( +
+ + {post.frontmatter.title} ({post.frontmatter.date}) + +
+); + +export default PostLink; +``` + This should get you a page with your posts sorted by descending date. You can further customise the `frontmatter` and the page component to get desired effects! From fb5eed819c891a00342bbe844ec8b46c1695ab37 Mon Sep 17 00:00:00 2001 From: Florian Kissling Date: Wed, 7 Feb 2018 11:51:17 +0100 Subject: [PATCH 2/4] Add headline for `PostLink` component --- docs/docs/adding-a-list-of-markdown-blog-posts.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 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 05ce38ede9e7c..e3069c5b88703 100644 --- a/docs/docs/adding-a-list-of-markdown-blog-posts.md +++ b/docs/docs/adding-a-list-of-markdown-blog-posts.md @@ -39,7 +39,7 @@ export default IndexPage; ### Creating the GraphQL query -The only thing left to do is to provide the data to your component with a GraphQL query and create the `post-link` component. Let's add the GraphQL query so that `index.js` looks like this: +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: ```js import React from "react"; @@ -74,7 +74,9 @@ export const pageQuery = graphql` `; ``` -Last but not least, let's add a basic `post-link.js` to `src/components/`: +### Creating the `PostLink` component + +The only thing left to do is to add the `PostLink` component. Create a new file `post-link.js` in `src/components/` and add the following: ```js import React from "react"; @@ -91,4 +93,4 @@ const PostLink = ({ post }) => ( export default PostLink; ``` -This should get you a page with your posts sorted by descending date. You can further customise the `frontmatter` and the page component to get desired effects! +This should get you a page with your posts sorted by descending date. You can further customise the `frontmatter` and the page and `PostLink` components to get desired effects! From 59e6e5dc32e79c2f3746140a4029ed28ecf64770 Mon Sep 17 00:00:00 2001 From: Florian Kissling Date: Wed, 7 Feb 2018 14:06:34 +0100 Subject: [PATCH 3/4] Add possessive adjective --- docs/docs/adding-a-list-of-markdown-blog-posts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 e3069c5b88703..ae5c22f0e220b 100644 --- a/docs/docs/adding-a-list-of-markdown-blog-posts.md +++ b/docs/docs/adding-a-list-of-markdown-blog-posts.md @@ -93,4 +93,4 @@ const PostLink = ({ post }) => ( export default PostLink; ``` -This should get you a page with your posts sorted by descending date. You can further customise the `frontmatter` and the page and `PostLink` components to get desired effects! +This should get you a page with your posts sorted by descending date. You can further customise the `frontmatter` and the page and `PostLink` components to get your desired effects! From 1d6d9f77240fbd8fcb3426df317837f58ac41b4c Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Wed, 7 Feb 2018 10:28:02 -0800 Subject: [PATCH 4/4] Make code blocks jsx --- docs/docs/adding-a-list-of-markdown-blog-posts.md | 6 +++--- 1 file changed, 3 insertions(+), 3 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 ae5c22f0e220b..d343174c5ebf6 100644 --- a/docs/docs/adding-a-list-of-markdown-blog-posts.md +++ b/docs/docs/adding-a-list-of-markdown-blog-posts.md @@ -22,7 +22,7 @@ Has anyone heard about GatsbyJS yet? The first step will be to create the page which will display your posts, in `src/pages/`. You can for example use `index.js`. -```js +```jsx import React from "react"; import PostLink from "../components/post-link"; @@ -41,7 +41,7 @@ export default IndexPage; 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: -```js +```jsx import React from "react"; import PostLink from "../components/post-link"; @@ -78,7 +78,7 @@ export const pageQuery = graphql` The only thing left to do is to add the `PostLink` component. Create a new file `post-link.js` in `src/components/` and add the following: -```js +```jsx import React from "react"; import Link from "gatsby-link";