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 ( +
+
+ {post.frontmatter.title} + {postDateString} +
+
+

{post.excerpt}

+
+
+ ) +} 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