[www] Add PostLink component example to docs/adding-a-list-of-markd…

…own-blog-posts/ (#3887)

* [www] Add `PostLink` component example to docs/adding-a-list-of-markdown-blog-posts/

Ref. #3886

* Add headline for `PostLink` component

* Add possessive adjective

* Make code blocks jsx

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";
 
@@ -39,9 +39,9 @@ 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.
+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";
 
@@ -74,4 +74,23 @@ export const pageQuery = graphql`
 `;
 ```
 
-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!
+### 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:
+
+```jsx
+import React from "react";
+import Link from "gatsby-link";
+
+const PostLink = ({ post }) => (
+  <div>
+    <Link to={post.frontmatter.path}>
+      {post.frontmatter.title} ({post.frontmatter.date})
+    </Link>
+  </div>
+);
+
+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 your desired effects!