content: import React from 'react'
  import { graphql } from 'gatsby'
  import { mapEdgesToNodes,
          filterOutDocsWithoutSlugs,
          filterOutDocsPublishedInTheFuture,
   } from '../lib/helpers'
  import BlogPostPreviewGrid from '../components/blog-post-preview-grid'
  import GraphQLErrorList from '../components/graphql-error-list'
  import tw, { theme, css } from 'twin.macro'
  import Layout from '../containers/layout'
  import { Helmet } from 'react-helmet'
  
  export const query = graphql`
    query BlogListTemplateQuery($skip: Int!, $limit: Int!) {
      site {
        siteMetadata {
          siteUrl
          title
        }
      }
      file(relativePath: { eq: "og-image.jpg" }) {
        childImageSharp {
          fluid(maxWidth: 1024, quality: 100) {
            ...GatsbyImageSharpFluid
          }
        }
      }
      posts: allSanityPost(
        sort: { fields: [publishedAt], order: DESC }
        filter: { slug: { current: { ne: null } }, publishedAt: { ne: null } }
        limit: $limit
        skip: $skip
      ) {
        edges {
          node {
            id
            publishedAt
            mainImage {
              ...ImageWithPreview
              caption
              alt
            }
            title
            _rawExcerpt
            slug {
              current
            }
          }
        }
      }
    }
  `
  
  const BlogListTemplate = (props) => {
    const { data, errors, pageContext } = props
  
    if (errors) {
      return (
        <Layout>
          <GraphQLErrorList errors={errors} />
        </Layout>
      )
    }
  
    const postNodes = data && data.posts && mapEdgesToNodes(data.posts)
    .filter(filterOutDocsWithoutSlugs)
    .filter(filterOutDocsPublishedInTheFuture)
  
    const site = data.site
    const siteTitle = site.siteMetadata.title
    const domain = site.siteMetadata.siteUrl
  
    const desc =
      'Open notes from my learnings and personal reflections I feel worth sharing. I write them for future references and as a way to process my thoughts. These notes are intended to be revisited and read as work-in-progress.'
  
    return (
      <Layout>
        <Helmet
          htmlAttributes={{
            lang: 'en',
          }}
          title={`Notes · ${siteTitle}`}
        >
          <meta name="description" content={desc} />
          <meta name="image" content={`${domain}${data.file.childImageSharp.fluid.src}`} />
  
          <meta name="twitter:title" content={`Notes · ${siteTitle}`} />
          <meta name="twitter:description" content={desc} />
          <meta
            property="twitter:image"
            content={`${domain}${data.file.childImageSharp.fluid.src}`}
          />
          <meta property="twitter:card" content="summary" />
  
          <meta name="og:title" content={`Notes · ${siteTitle}`} />
          <meta name="og:description" content={desc} />
          <meta property="og:image" content={`${domain}${data.file.childImageSharp.fluid.src}`} />
          <meta name="og:type" content="website" />
        </Helmet>
        <section tw="w-full">
          <div
            tw="mt-5 pt-5 md:mt-16 md:pt-20 mx-6 md:mx-auto grid grid-cols-1 md:grid-cols-2 font-serif pb-10 md:pb-16 border-b "
            css={{
              width: 'min(1024px, calc(100% - 48px))',
              gridRowGap: 8,
              borderColor: `${theme`borderColor.accent`}`,
            }}
          >
            <h1 tw="text-3xl lg:text-4xl col-span-1 font-semibold ">Personal Notes</h1>
            <p tw="col-span-1 text-softer prose lg:prose-lg xl:prose-xl">
              {desc}
            </p>
          </div>
        </section>
        {postNodes && postNodes.length > 0 && (
          <BlogPostPreviewGrid pageContext={pageContext} nodes={postNodes} />
        )}
      </Layout>
    )
  }
  
  export default BlogListTemplate