Ana sayfaya fotoğraflar eklendi

gatsby-config.js

@@ -1,23 +1,30 @@
 module.exports = {
   siteMetadata: {
-    title: `Gatsby Default Starter`,
-    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
-    author: `@gatsbyjs`,
+    title: `Gatsby Gagarin`,
+    description: `First project with Gatsby, a site about universe and cosmos`,
+    author: `@e-demir`,
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
     {
       resolve: `gatsby-source-filesystem`,
       options: {
-        name: `images`,
+        name: `photos`,
         path: `${__dirname}/src/images`,
       },
     },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        name: `images`,
+        path: `${__dirname}/src/photos`,
+      },
+    },
     `gatsby-transformer-sharp`,
     `gatsby-plugin-sharp`,
     {
       resolve: `gatsby-plugin-manifest`,
-      options: {
+      options: { 
         name: `gatsby-starter-default`,
         short_name: `starter`,
         start_url: `/`,

src/pages/index.css

@@ -0,0 +1,10 @@
+.photos{
+    display: grid;
+    grid-template-columns: repeat(4,1fr);
+    gap: 30px ;
+}
+h1{
+    text-align: center;
+    font-size: 70px;
+    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;     
+}

src/pages/index.js

@@ -1,9 +1,35 @@
 import React from "react"
+import { graphql } from "gatsby"
+import Img from "gatsby-image"
+import './index.css'
 
-const IndexPage = () => (
-  <div>
+const IndexPage = ({ data }) => {
+  console.log(data)
+  return <div>
     <h1>This page is about cosmos news!</h1>
+
+    <div className="photos">
+      {data.allFile.edges.map(({ node }) => {
+        return <Img key={node.id} fluid={node.childImageSharp.fluid} />      
+      })}
+    </div>
   </div>
-)
+}
+export const pageQuery = graphql`
+query MyQuery {
+  allFile(filter: {absolutePath: {regex: "/photos/"}}) {
+    edges {
+      node {
+        id
+        childImageSharp{
+          fluid{
+             ...GatsbyImageSharpFluid
+          }
+        }
+      }
+    }
+  }
+}
+`
 
-export default IndexPage
+export default IndexPage