Created
March 4, 2018 20:30
-
-
Save rcaracaus/2ae1c297952446316b85e7b4f111e4e0 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
import Link from 'gatsby-link' | |
export default class IndexPage extends React.Component { | |
render() { | |
const { data } = this.props | |
const { edges: posts } = data.allMarkdownRemark | |
const homePageData = posts.filter(post => post.node.fields.slug === '/homepage/')[0].node | |
return (<div> | |
{ homePageData.excerpt } | |
{posts | |
.filter(post => post.node.frontmatter.templateKey === 'blog-post') | |
.map(({ node: post }) => ( | |
<div | |
className="content" | |
style={{ border: '1px solid #eaecee', padding: '2em 4em' }} | |
key={post.id} | |
> | |
<p> | |
<Link className="has-text-primary" to={post.fields.slug}> | |
{post.frontmatter.title} | |
</Link> | |
<span> • </span> | |
<small>{post.frontmatter.date}</small> | |
</p> | |
<p> | |
{post.excerpt} | |
<br /> | |
<br /> | |
<Link className="button is-small" to={post.fields.slug}> | |
Keep Reading → | |
</Link> | |
</p> | |
</div> | |
))} | |
</div> | |
) | |
} | |
} | |
export const pageQuery = graphql` | |
query IndexQuery { | |
allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) { | |
edges { | |
node { | |
excerpt(pruneLength: 400) | |
id | |
fields { | |
slug | |
} | |
frontmatter { | |
title | |
templateKey | |
date(formatString: "MMMM DD, YYYY") | |
} | |
} | |
} | |
} | |
} | |
` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment