Post list layout

gatsby-config.js

@@ -31,7 +31,7 @@ module.exports = {
     {
       resolve: `gatsby-transformer-remark`,
       options: {
-        excerpt_separator: `<!-- end -->`
+        excerpt_separator: `\n`
       }
     },
     {

src/components/layout.js

@@ -38,7 +38,7 @@ const Layout = ({ children, title }) => {
         email={data.site.siteMetadata.email} />
       <div className={styles.flexWrapper}>
         <div className={styles.content}>
-          <main>{children}</main>
+          <main className={styles.main}>{children}</main>
         </div>
         <Footer authorName={data.site.siteMetadata.author}/>
       </div>

src/components/post-link.js

@@ -1,12 +1,24 @@
 import React from "react"
 import { Link } from "gatsby"
+import styles from '../styles/post-link.module.scss'
 
-const PostLink = ({ post }) => (
-  <div>
-    <Link to={post.frontmatter.slug}>
-      {post.frontmatter.title} ({post.frontmatter.date})
-    </Link>
+const PostLink = ({ post }) => {
+
+  const postDate = new Date(post.frontmatter.date)
+  const options = { year: 'numeric', month: 'long', day: 'numeric' };
+  const postDateString = postDate.toLocaleDateString('en', options);
+
+  return (
+    <div className={styles.postListItem} role="listitem">
+      <div className={styles.postHeader} >
+        <a href={post.frontmatter.link} className={styles.postTitle}>{post.frontmatter.title}</a>
+        <span className={styles.postDate}>{postDateString}</span>
       </div>
-)
+      <div>
+        <p>{post.excerpt}</p>
+      </div>
+    </div>
+  )
+}
 
 export default PostLink

src/pages/index.js

@@ -10,7 +10,10 @@ const IndexPage = () => {
 
   const data = useStaticQuery(graphql`
     query {
-      allMarkdownRemark(filter: {frontmatter: {draft: {ne: true}}}) {
+      allMarkdownRemark(
+          sort: { order: DESC, fields: [frontmatter___date] }
+          filter: {frontmatter: {draft: {ne: true}}}
+        ) {
         edges {
           node {
             id
@@ -18,7 +21,6 @@ const IndexPage = () => {
             frontmatter {
               date
               title
-              slug
             }
           }
         }
@@ -30,9 +32,6 @@ const IndexPage = () => {
 
   return (
     <Layout title="Home">
-      <h1>Hi people</h1>
-      <p>Welcome to your new Gatsby site.</p>
-      <p>Now go build something great.</p>
       <Blog edges={data.allMarkdownRemark.edges}/>
     </Layout>
   )

src/styles/layout.module.scss

@@ -5,8 +5,8 @@
   margin: 0 auto;
 
   @media only screen and (min-width: $breakLarge) {
-    width: 80%;
     display: flex;
+    width: 80%;
   }
 }
 
@@ -16,3 +16,7 @@
   flex-direction: column;
   justify-content: space-between;
 }
+
+.main {
+  width: 100%;
+}

src/styles/post-link.module.scss

@@ -0,0 +1,31 @@
+@import "./variables.scss";
+
+.postDate {
+  float: right;
+}
+
+.postTitle {
+  color: $blue;
+  text-decoration: none;
+  text-transform: capitalize;
+  font-family: $fontParagraph;
+  font-size: 1.2em;
+  float: left;
+}
+
+.postHeader {
+  overflow: hidden;
+}
+
+.postsList {
+  margin-top: 20px;
+}
+
+.postListItem {
+  border-bottom: 1px solid $blue;
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+}