Make post list items into links

src/components/post-link.js

@@ -7,17 +7,21 @@ 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 (
-    <div className={styles.postListItem} role="listitem">
+    <Link to={postUrl}>
-      <div className={styles.postHeader} >
+      <div className={styles.postListItem} role="listitem">
-        <a href={post.frontmatter.link} className={styles.postTitle}>{post.frontmatter.title}</a>
+        <div className={styles.postHeader} >
-        <span className={styles.postDate}>{postDateString}</span>
+          <a href={post.frontmatter.link} className={styles.postTitle}>{post.frontmatter.title}</a>
+          <span className={styles.postDate}>{postDateString}</span>
+        </div>
+        <div className={styles.postExcerpt}>
+          <p>{post.excerpt}</p>
+        </div>
       </div>
-      <div className={styles.postExcerpt}>
+    </Link>
-        <p>{post.excerpt}</p>
+
-      </div>
-    </div>
   )
 }
 

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 {