import React from "react" import { Link, graphql } from "gatsby" import { FormattedMessage } from "gatsby-plugin-intl" import Layout from "../components/layout/Layout" import SEO from "../components/seo" const BlogIndex = ({ data, location }) => { const siteTitle = data.site.siteMetadata.title const posts = data.allMarkdownRemark.edges return ( <Layout location={location} title={siteTitle}> <SEO title="All posts" /> {posts.map(({ node }) => { const title = node.frontmatter.title || node.frontmatter.path return ( <article key={node.frontmatter.path}> <header> <h3 style={{ marginBottom: 10, }} > <Link style={{ boxShadow: `none` }} to={node.frontmatter.path}> {title} </Link> </h3> <small>{node.frontmatter.date}</small> </header> <section> <p dangerouslySetInnerHTML={{ __html: node.frontmatter.description || node.excerpt, }} /> </section> </article> ) })} </Layout> ) } export default BlogIndex export const pageQuery = graphql` query { site { siteMetadata { title } } allMarkdownRemark( sort: { order: DESC, fields: [frontmatter___date] } limit: 1000 ) { edges { node { excerpt frontmatter { path title date } } } } } `