Make post list items into links

src/components/post-link.js

@@ -7,8 +7,10 @@ const PostLink = ({ post }) => {
   const postDate = new Date(post.frontmatter.date)
   const options = { year: 'numeric', month: 'long', day: 'numeric' };
   const postDateString = postDate.toLocaleDateString('en', options);
+  const postUrl = "/posts/" + post.fileAbsolutePath.split('/').pop().split(".")[0]
 
   return (
+    <Link to={postUrl}>
       <div className={styles.postListItem} role="listitem">
         <div className={styles.postHeader} >
           <a href={post.frontmatter.link} className={styles.postTitle}>{post.frontmatter.title}</a>
@@ -18,6 +20,8 @@ const PostLink = ({ post }) => {
           <p>{post.excerpt}</p>
         </div>
       </div>
+    </Link>
+
   )
 }
 

src/pages/blog.js

@@ -17,6 +17,7 @@ const IndexPage = () => {
         edges {
           node {
             id
+            fileAbsolutePath
             excerpt
             frontmatter {
               date

src/styles/post-link.module.scss

@@ -2,6 +2,7 @@
 
 .postDate {
   float: right;
+  color: $white;
 }
 
 .postTitle {
@@ -25,6 +26,11 @@
   padding: 20px;
   background-color: $black;
   margin-bottom: 20px;
+
+  p {
+    text-decoration: none;
+    color: $white;
+  }
 }
 
 .postExcerpt {