text: import React from "react"
  import { Link } from "gatsby"
  
  import Layout from "../components/layout"
  import Image from "../components/image"
  import SEO from "../components/seo"
  
  const IndexPage = ({ data }) => (
    <Layout>
      <SEO title="Home" />
      <h1>Hi people</h1>
      <p>{data.site.siteMetadata.title}</p>
      <p>{data.site.siteMetadata.description}</p>
      <p>Welcome to your new Gatsby site.</p>
      <p>Now go build something great.</p>
      <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
        <Image />
      </div>
      <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
    </Layout>
  )
  
  export default IndexPage
  
  // This is a bit of magic by Gatsby!
  // This links the query to the component
  export const query = graphql`
    query SiteMeta {
      site {
        siteMetadata {
          title
          description
        }
      }
  
      # Weird Sharp Plugin Stuff...
      background: file(relativePath: { regex: "/tools.jpeg/" }) {
        childImageSharp {
          fluid(maxWidth: 1240) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `
  