module.exports = {
    siteMetadata: {
        title: `Gatsby Blurhash Example`,
    },
    plugins: [
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `images`,
                path: `${__dirname}/src/images/`,
            },
        },
        `gatsby-image`,
        `gatsby-plugin-sharp`,
        `gatsby-transformer-sharp`,
        `@m5r/gatsby-transformer-blurhash`,
    ],
}

import { graphql } from "gatsby";
import Image from "gatsby-image";
import PropTypes from "prop-types";

const IndexPage = ({ data }) => (
    <>
        {data.images.edges.map(image => (
            <Image
                fluid={{
                    ...image.node.childImageSharp.fluid,
                    base64: image.node.childImageSharp.blurHash.base64Image,
                }}
            />
        ))}
    </>
);

export default IndexPage;

IndexPage.propTypes = {
    data: PropTypes.object,
};

export const query = graphql`
    query {
        images: allFile(
            filter: { sourceInstanceName: { eq: "images" }, ext: { eq: ".jpg" } }
        ) {
            edges {
                node {
                    publicURL
                    name
                    childImageSharp {
                        fluid(maxWidth: 400, maxHeight: 400) {
                            ...GatsbyImageSharpFluid_noBase64
                        }
                        blurHash(width: 400) {
                            base64Image
                        }
                    }
                }
            }
        }
    }
`;