old-v2-frontend/src/templates/blog.js

import React, { Component } from 'react'
import Link from 'gatsby-link'

import PageIntro from '../components/PageIntro'
import Card from '../components/Card'
import SEO from '../components/SEO'
import Helmet from 'react-helmet'
import SectionIntro from '../components/SectionIntro'

import PageTransition from 'gatsby-plugin-page-transitions'

class Blog extends Component {
  render() {
    const data = this.props.data
    return (
      <PageTransition>
        <SEO
          siteTitle="Saburly - Blog Posts"
          siteDescription="Bugs keep us busy, but sometimes we find the time to have fun & publish"
          siteUrl="https://saburly.com/blog"
        />
        <Helmet>
          <script type="text/javascript">{`window.$crisp=[];window.CRISP_WEBSITE_ID="346bb060-d289-437d-bafa-3a02d470f7b6";(function(){ d=document;s=d.createElement("script"); s.src="https://client.crisp.chat/l.js"; s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})(); `}</script>
        </Helmet>

        <SectionIntro
          classes="max-w-lg mx-auto"
          h2Classes="text-5xl text-center mt-10 mb-4"
          headline="Blog Posts"
          textClasses="text-center"
        />
        <div className="container mx-auto p-4 w-full md:flex md:flex-wrap items-stretch w-full">
          {data.allWordpressPost.edges.map(({ node }) => (
            <div key={node.id} className="mt-4 md:w-1/2 p-2">
              <Link
                to={`blog/${node.slug}`}
                className="pointer no-underline saburly-transition hover:opacity-50"
              >
                <Card
                  title={node.title}
                  date={node.date}
                  authorName={node.author.name}
                  imgAlt={node.title}
                  excerpt={node.excerpt}
                  image={
                    node.featured_media
                      ? node.featured_media.localFile.childImageSharp
                          .resolutions
                      : undefined
                  }
                />
              </Link>
            </div>
          ))}
        </div>
        <div className="container mx-auto p-4 w-full">
          <SectionIntro
            classes="max-w-lg mx-auto"
            h2Classes="text-5xl text-center mt-10 mb-4"
            headline="Social Media Activity"
            textClasses="text-center"
          />
          <div id="curator-feed-saburly" />
        </div>
      </PageTransition>
    )
  }
}

export const query = graphql`
  query blogQuery {
    allWordpressPost {
      edges {
        node {
          id
          title
          excerpt
          status
          slug
          author {
            name
          }
          date(formatString: "MMMM DD, YYYY")
          featured_media {
            localFile {
              childImageSharp {
                resolutions(width: 600, height: 300) {
                  src
                  width
                  height
                }
              }
            }
          }
        }
      }
    }
  }
`

export default Blog