output generated docs pages on front page

src/components/Image.jsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import { StaticQuery, graphql } from 'gatsby'
-import Img from 'gatsby-image'
-
-/*
- * This component is built using `gatsby-image` to automatically serve optimized
- * images with lazy loading and reduced file sizes. The image is loaded using a
- * `StaticQuery`, which allows us to load the image from directly within this
- * component, rather than having to pass the image data down from pages.
- *
- * For more information, see the docs:
- * - `gatsby-image`: https://gatsby.app/gatsby-image
- * - `StaticQuery`: https://gatsby.app/staticquery
- */
-
-const Image = () => (
-    <StaticQuery
-        query={graphql`
-            query {
-                placeholderImage: file(
-                    relativePath: { eq: "gatsby-astronaut.png" }
-                ) {
-                    childImageSharp {
-                        fluid(maxWidth: 300) {
-                            ...GatsbyImageSharpFluid
-                        }
-                    }
-                }
-            }
-        `}
-        render={data => (
-            <Img fluid={data.placeholderImage.childImageSharp.fluid} />
-        )}
-    />
-)
-export default Image

src/pages/index.js

@@ -1,15 +1,53 @@
 import React from 'react'
-
+import PropTypes from 'prop-types'
+import { Link, graphql } from 'gatsby'
 import Layout from '../components/Layout'
-import Image from '../components/Image'
 
-const IndexPage = () => (
+const IndexPage = ({ data, location }) => {
-    <Layout>
+    const { edges } = data.allMarkdownRemark
-        <h1>Hi people</h1>
+
-        <p>Welcome to your new Gatsby site.</p>
+    const DocsList = edges.map(({ node }) => {
-        <p>Now go build something great.</p>
+        const { title } = node.frontmatter
-        <Image />
+        const { slug } = node.fields
+
+        return (
+            <li key={node.id}>
+                <Link to={slug}>{title}</Link>
+            </li>
+        )
+    })
+
+    return (
+        <Layout location={location}>
+            <h1>Hi there</h1>
+            <ul>{DocsList}</ul>
         </Layout>
     )
+}
+
+IndexPage.propTypes = {
+    data: PropTypes.object.isRequired,
+    location: PropTypes.object.isRequired
+}
 
 export default IndexPage
+
+export const indexQuery = graphql`
+    query {
+        allMarkdownRemark {
+            edges {
+                node {
+                    id
+                    html
+                    excerpt(pruneLength: 250)
+                    frontmatter {
+                        title
+                    }
+                    fields {
+                        slug
+                    }
+                }
+            }
+        }
+    }
+`