text: import * as React from "react"
  import { Link, graphql } from "gatsby"
  
  import { Hero, Layout, Seo } from "@teefe/gatsby-theme-luden"
  import BlogLayout from "../components/blogLayout"
  
  const BlogIndex = ({ data, location }) => {
    const siteTitle = data.site.siteMetadata?.title || `Title`
    const posts = data.allMarkdownRemark.nodes
  
    if (posts.length === 0) {
      return (
        <Layout location={location} title={siteTitle}>
          <Seo title="All posts" />
          <p>
            No blog posts found. Add markdown posts to "content/blog" (or the
            directory you specified for the "gatsby-source-filesystem" plugin in
            gatsby-config.js).
          </p>
        </Layout>
      )
    }
  
    return (
      <Layout transparent light sticky rounded="true">
        <Hero
          data={{
            //   topTitle: "Its Easy!",
            title: "Blog",
            image: "blog",
          }}
          // full={!svgImgs}
          bg
          // svg={svgImgs}
          center
          small
          //   rounded="true"
          //   anchor={hero.anchor}
        />
        <Seo title="All posts" />
        <BlogLayout shadow="true">
          <ol style={{ listStyle: `none` }}>
            {posts.map(post => {
              const title = post.frontmatter.title || post.fields.slug
  
              return (
                <li key={post.fields.slug}>
                  <article
                    className="post-list-item"
                    itemScope
                    itemType="http://schema.org/Article"
                  >
                    <header>
                      <h2>
                        <Link to={`/blog${post.fields.slug}`} itemProp="url">
                          <span itemProp="headline">{title}</span>
                        </Link>
                      </h2>
                      <small>{post.frontmatter.date}</small>
                    </header>
                    <section>
                      <p
                        dangerouslySetInnerHTML={{
                          __html: post.frontmatter.description || post.excerpt,
                        }}
                        itemProp="description"
                      />
                    </section>
                  </article>
                </li>
              )
            })}
          </ol>
        </BlogLayout>
      </Layout>
    )
  }
  
  export default BlogIndex
  
  export const pageQuery = graphql`
    query {
      site {
        siteMetadata {
          title
        }
      }
      allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
        nodes {
          excerpt
          fields {
            slug
          }
          frontmatter {
            date(formatString: "DD/MM/YYYY", locale: "pt-br")
            title
            description
          }
        }
      }
    }
  `
  