2018-07-22 04:27:37 +02:00
|
|
|
import React, { Fragment } from 'react'
|
2018-07-17 23:33:55 +02:00
|
|
|
import PropTypes from 'prop-types'
|
|
|
|
import { Link, graphql } from 'gatsby'
|
2018-07-18 00:24:11 +02:00
|
|
|
import Layout from '../components/Layout'
|
2018-07-22 04:27:37 +02:00
|
|
|
import Image from '../components/atoms/Image'
|
|
|
|
import PostTitle from '../components/atoms/PostTitle'
|
|
|
|
import PostLead from '../components/atoms/PostLead'
|
|
|
|
import PostContent from '../components/atoms/PostContent'
|
2018-08-08 22:26:42 +02:00
|
|
|
import PostMore from '../components/atoms/PostMore'
|
2018-07-22 04:27:37 +02:00
|
|
|
import PostLinkActions from '../components/atoms/PostLinkActions'
|
|
|
|
import postStyles from '../templates/Post.module.scss'
|
2018-09-04 02:57:39 +02:00
|
|
|
import styles from './Posts.module.scss'
|
2018-07-17 23:33:55 +02:00
|
|
|
|
2018-09-04 02:57:39 +02:00
|
|
|
const IndexPage = ({ data, location, pageContext }) => {
|
2018-07-17 23:33:55 +02:00
|
|
|
const edges = data.allMarkdownRemark.edges
|
2018-09-04 02:57:39 +02:00
|
|
|
const { previousPagePath, nextPagePath } = pageContext
|
2018-07-22 04:27:37 +02:00
|
|
|
|
|
|
|
const Posts = edges.map(({ node }) => {
|
|
|
|
const { type, linkurl, title, image } = node.frontmatter
|
|
|
|
const { slug } = node.fields
|
|
|
|
|
|
|
|
return (
|
|
|
|
<article className={postStyles.hentry} key={node.id}>
|
2018-08-08 22:26:42 +02:00
|
|
|
<PostTitle type={type} slug={slug} linkurl={linkurl} title={title} />
|
2018-07-22 04:27:37 +02:00
|
|
|
|
|
|
|
{image && (
|
|
|
|
<figure className={styles.hentry__image}>
|
|
|
|
<Link to={slug}>
|
|
|
|
<Image fluid={image.childImageSharp.fluid} alt={title} />
|
|
|
|
</Link>
|
|
|
|
</figure>
|
|
|
|
)}
|
|
|
|
|
|
|
|
<PostLead post={node} />
|
|
|
|
|
2018-08-08 22:26:42 +02:00
|
|
|
{type === 'post' && <PostMore to={slug}>Continue Reading</PostMore>}
|
2018-07-22 04:27:37 +02:00
|
|
|
|
|
|
|
{type === 'link' && (
|
|
|
|
<Fragment>
|
|
|
|
<PostContent post={node} />
|
|
|
|
<PostLinkActions slug={slug} linkurl={linkurl} />
|
|
|
|
</Fragment>
|
|
|
|
)}
|
2018-09-04 02:57:39 +02:00
|
|
|
<div>
|
|
|
|
{previousPagePath ? (
|
|
|
|
<Link to={previousPagePath}>Previous</Link>
|
|
|
|
) : null}
|
|
|
|
{nextPagePath ? <Link to={nextPagePath}>Next</Link> : null}
|
|
|
|
</div>
|
2018-07-22 04:27:37 +02:00
|
|
|
</article>
|
|
|
|
)
|
|
|
|
})
|
|
|
|
|
|
|
|
return <Layout location={location}>{Posts}</Layout>
|
2018-07-17 23:33:55 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
IndexPage.propTypes = {
|
2018-07-20 15:52:17 +02:00
|
|
|
data: PropTypes.object.isRequired,
|
2018-09-04 02:57:39 +02:00
|
|
|
pageContext: PropTypes.object.isRequired,
|
2018-07-20 15:52:17 +02:00
|
|
|
location: PropTypes.object.isRequired
|
2018-07-17 23:33:55 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
export default IndexPage
|
|
|
|
|
|
|
|
export const indexQuery = graphql`
|
2018-09-04 02:57:39 +02:00
|
|
|
query($skip: Int!, $limit: Int!) {
|
|
|
|
allMarkdownRemark(
|
|
|
|
sort: { order: DESC, fields: [fields___date] }
|
|
|
|
skip: $skip
|
|
|
|
limit: $limit
|
|
|
|
) {
|
2018-07-17 23:33:55 +02:00
|
|
|
edges {
|
|
|
|
node {
|
|
|
|
id
|
2018-07-22 04:27:37 +02:00
|
|
|
html
|
2018-07-17 23:33:55 +02:00
|
|
|
excerpt(pruneLength: 250)
|
|
|
|
frontmatter {
|
|
|
|
title
|
2018-07-22 04:27:37 +02:00
|
|
|
type
|
|
|
|
linkurl
|
|
|
|
image {
|
|
|
|
childImageSharp {
|
|
|
|
...ImageFluid
|
|
|
|
}
|
|
|
|
}
|
2018-07-17 23:33:55 +02:00
|
|
|
}
|
|
|
|
fields {
|
|
|
|
slug
|
|
|
|
date(formatString: "MMMM DD, YYYY")
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`
|