Change list of blog posts style

config/variables.scss

@@ -4,5 +4,6 @@ $white: #fdfdfd;
 $black: #2f2f2f;
 $blue: #144A98;
 $grey: #A9A9A9;
+$body: #f1f1f1;
 $navbar: #1B4367;
 $break-large: 992px;

package.json

@@ -29,6 +29,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
+    "react-head": "^3.1.1",
     "react-router-dom": "^5.0.1",
     "serialize-javascript": "^2.1.0"
   },

src/components/About.js

@@ -27,7 +27,7 @@ export default class About extends Component {
     const classes = `${contentStyle.contentWrapper} ${style.about}`
 
     return (
-      <div className={classes} >
+      <div className={`${contentStyle.contentWrapper} ${style.about}`} >
         <Header header={'About Me'} />
         <div className={contentStyle.content} dangerouslySetInnerHTML={{ __html: result }}>
         </div>

src/components/Blog.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { Spinner, Header } from '.'
 import '../stylesheets/globals.scss'
+import MarkdownIt from 'markdown-it'
 import styles from './Blog.scss'
 import contentStyle from '../stylesheets/content.scss'
 
@@ -12,6 +13,8 @@ export default class Blog extends Component {
   }
 
   render () {
+    const md = MarkdownIt()
+
     if (this.props.isLoading) {
       return (
         <div className={contentStyle.contentWrapper} id="blog">
@@ -24,14 +27,14 @@ export default class Blog extends Component {
       return new Date(b.published) - new Date(a.published)
     })
     let postsHTML = posts.map((post) => 
-      <tr className={styles.postListItem} key={post.title}>
+      <div className={styles.postListItem}>
-        <td>
+        <div className={styles.postHeader}>
-          <span className={styles.postDate}>{post.published}</span>
-        </td>
-        <td>
           <a href={post.link} className={styles.postTitle}>{post.title}</a>
-        </td>
+          <span className={styles.postDate}>{post.published}</span>
-      </tr>
+        </div>
+        <div dangerouslySetInnerHTML={{ __html: md.render(post.summary) }}>
+        </div>
+      </div>
     )
 
     const classes = `${contentStyle.contentWrapper} ${styles.blog}`
@@ -40,12 +43,8 @@ export default class Blog extends Component {
       <div className={classes} id="blog">
         <Header header={'Blog'} />
 
-        <div className={contentStyle.content}>
+        <div className={`${contentStyle.content} ${styles.postsList}`}>
-          <table>
+          {postsHTML}
-            <tbody className={styles.postsWrapper}>
-              {postsHTML}
-            </tbody>
-          </table>
         </div>
 
       </div>

src/components/Blog.scss

@@ -1,7 +1,7 @@
 @import "../../config/variables.scss";
 
 .postDate {
-  margin-right: 50px;
+  float: right;
 }
 
 .postTitle {
@@ -10,17 +10,19 @@
   text-transform: capitalize;
   font-family: $font-header;
   font-size: 1.2em;
+  float: left;
 }
 
-.postsWrapper {
+.postHeader {
+  overflow: hidden;
+}
+
+.postsList {
   margin-top: 20px;
 }
 
 .postListItem {
-	margin: 8px;
+  border-bottom: 5px solid $body;
-  td {
-    vertical-align: top;
-  }
 }
 
 .blog {

src/components/Home.scss

@@ -1,7 +1,7 @@
 @import "../../config/variables.scss";
 
 #coverPage {
-  background: url(../static/images/benjamin-child-6msS8vT5pzw-unsplash.jpg) no-repeat center center fixed;
+  background: url(../../config/background.jpg) no-repeat center center fixed;
 
   -webkit-background-size: cover;
   -moz-background-size: cover;

src/stylesheets/content.scss

@@ -5,6 +5,7 @@
   overflow: auto;
   box-sizing: border-box;
   padding: 20px;
+  margin: 20px;
   a {
     color: $blue;
   }
@@ -12,8 +13,7 @@
   @media (min-width: $break-large) {
     width: 960px;
   }
-  min-height: 100vh;
+  background-color: $white;
-  height: 100vh;
 }
 
 .content {

src/stylesheets/globals.scss

@@ -7,6 +7,7 @@
 :global(body) {
   font-family: $font-paragraph;
   color: $black;
+  background-color: $body;
   margin: 0;
 }
 

src/utils/scanner.js

@@ -56,10 +56,13 @@ export class Scanner {
         published = moment()
       }
 
+      const summary = frontMatter.body.split('\n\n', 1)[0]
+
       const post = {
         published: published.format('MMMM DD, YYYY'),
         filename: metadata.filename,
         title: frontMatter.attributes.title,
+        summary: summary,
         link: '/post/' + metadata.filename
       }
 

yarn.lock

@@ -724,6 +724,13 @@
     pirates "^4.0.0"
     source-map-support "^0.5.9"
 
+"@babel/runtime@^7.0.0":
+  version "7.6.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.3.tgz#935122c74c73d2240cafd32ddb5fc2a6cd35cf1f"
+  integrity sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==
+  dependencies:
+    regenerator-runtime "^0.13.2"
+
 "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.4.0":
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.0.tgz#4fc1d642a9fd0299754e8b5de62c631cf5568205"
@@ -5882,6 +5889,14 @@ react-dom@^16.7.0:
     prop-types "^15.6.2"
     scheduler "^0.15.0"
 
+react-head@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/react-head/-/react-head-3.1.1.tgz#9587a9261960c66e81c98a4ea365422f9c4ab4ca"
+  integrity sha512-mazFkea4439J8wk0MJL0k9OV97AZUMJzf8pDE6VRgK94SYYhbuUusCvQYVeMpltz5qsVvdOCa9qhd3IPW5yfaA==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    tiny-invariant "^1.0.0"
+
 react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
   version "16.9.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
@@ -6927,7 +6942,7 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
-tiny-invariant@^1.0.2:
+tiny-invariant@^1.0.0, tiny-invariant@^1.0.2:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73"
   integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA==