diff --git a/gatsby-config.js b/gatsby-config.js
index 16c26d2..cb55699 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -31,7 +31,7 @@ module.exports = {
{
resolve: `gatsby-transformer-remark`,
options: {
- excerpt_separator: ``
+ excerpt_separator: `\n`
}
},
{
diff --git a/src/components/layout.js b/src/components/layout.js
index 701460a..d6551b4 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -38,7 +38,7 @@ const Layout = ({ children, title }) => {
email={data.site.siteMetadata.email} />
- {children}
+ {children}
diff --git a/src/components/post-link.js b/src/components/post-link.js
index aacd3c8..4067131 100644
--- a/src/components/post-link.js
+++ b/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 }) => (
-
-
- {post.frontmatter.title} ({post.frontmatter.date})
-
-
-)
+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 (
+
+ )
+}
export default PostLink
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 4fc2381..4929cb4 100644
--- a/src/pages/index.js
+++ b/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 (
- Hi people
- Welcome to your new Gatsby site.
- Now go build something great.
)
diff --git a/src/styles/layout.module.scss b/src/styles/layout.module.scss
index f06b050..80d7e39 100644
--- a/src/styles/layout.module.scss
+++ b/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%;
}
}
@@ -15,4 +15,8 @@
min-height: calc(100vh - 70px);
flex-direction: column;
justify-content: space-between;
+}
+
+.main {
+ width: 100%;
}
\ No newline at end of file
diff --git a/src/styles/post-link.module.scss b/src/styles/post-link.module.scss
new file mode 100644
index 0000000..113f152
--- /dev/null
+++ b/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;
+}
\ No newline at end of file