text: import React from "react"
  import { graphql } from "gatsby"
  import Post from "../components/post"
  import Layout from "../components/layout"
  import SEO from "../components/seo"
  
  class TagTemplate extends React.Component {
    render() {
      const tag = this.props.data.supersheet.tag
      const siteTitle = this.props.data.supersheet.site.title
      const posts = this.props.data.supersheet.posts.rows.map(row => row.row)
      
      return (
        <Layout location={this.props.location} title={siteTitle}>
          <SEO
            title={tag.name}
            description={tag.name}
          />
          <hr/>
          {posts.map(post => {
            return (
              <Post key={post.slug} post={post}/>
            )
          })}
        </Layout>
      )
    }
  }
  
  export default TagTemplate
  
  export const pageQuery = graphql`
  query BlogPostsByTag($id: String!) {
    supersheet {
      site: findOneSite {
        title
      }
      tag: findOneTags(filter: { id: { eq: $id } }) {
        id
        slug
        name
      }
      posts: findPosts(
        filter: { 
          tags: { eq: $id } 
          published: { eq: true }
        }
      ) {
        rows {
          row {
            title
            slug
            authors {
              id
              name
              email
            }
            tags {
              id
              slug
              name
            }
            published_at(
              formatString: "DDDD" 
              zone: "America/Los_Angeles"
            )
            content {
              description
              excerpt(pruneLength: 50)
            }
          }
        }
      }
    }
  }`