{"size": 1581, "ext": "js", "max_stars_repo_path": "src/pages/index.js", "max_stars_repo_name": "fu4303/meme-website", "max_stars_repo_stars_event_min_datetime": "2019-08-27T17:02:16.000Z", "max_stars_repo_stars_event_max_datetime": "2020-11-02T11:34:25.000Z", "max_issues_repo_path": "src/pages/index.js", "max_issues_repo_name": "fu4303/meme-website", "max_issues_repo_issues_event_min_datetime": "2021-03-09T16:05:30.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-10T09:52:44.000Z", "max_forks_repo_path": "src/pages/index.js", "max_forks_repo_name": "fu4303/meme-website", "max_forks_repo_forks_event_min_datetime": "2019-08-27T17:02:17.000Z", "max_forks_repo_forks_event_max_datetime": "2019-08-27T17:02:17.000Z"}
{"max_stars_count": 8, "max_issues_count": 2, "max_forks_count": 1, "avg_line_length": 21.3648648649, "max_line_length": 99, "alphanum_fraction": 0.4187223276}
import React from "react"
import { graphql, Link } from "gatsby"
import Image from "gatsby-image"

import Layout from "../components/layout"
import SEO from "../components/seo"

import "./_home.scss"

const IndexPage = ({ data: { memes } }) => (
  <Layout>
    <SEO title="Home" />
    <h1>Sara Meme Website</h1>
    <main>
      {memes.memes.map(meme => (
        <article key={meme.id}>
          <Link to={`/${meme.id}`}>
            <figure>
              <Image
                fixed={{
                  src: meme.small.url,
                  srcSet: `${meme.small.url} 200w,${meme.medium.url} 400w, ${meme.large.url} 800w`,
                  width: 200,
                  height: 200,
                }}
              />
            </figure>
          </Link>
        </article>
      ))}
    </main>
  </Layout>
)

export const query = graphql`
  query Memes {
    memes {
      memes {
        id
        small: photo {
          url(
            transformation: {
              image: { resize: { fit: crop, width: 200, height: 200 } }
            }
          )
          id
        }
        medium: photo {
          url(
            transformation: {
              image: { resize: { fit: crop, width: 400, height: 400 } }
            }
          )
          id
        }
        large: photo {
          url(
            transformation: {
              image: { resize: { fit: crop, width: 800, height: 800 } }
            }
          )
          id
        }
        captions {
          caption
          id
        }
      }
    }
  }
`

export default IndexPage
