Layout Component

The Layout Component sets up the default template for a page.

It uses a GraphQL StaticQuery to query the gatsby-config.js file to grab the site title as a prop. It then renders the <Header> component and injects the site title as the siteTitle prop. Did you notice we changed it to "GatsbyJS Intro"

After this, it renders a div with some layout CSS applied - yes, that's CSS in JS. What's cool about that?

• All code for a component is within that component - html, css, js
• If you remove code, you won't (shouldn't) break anything else
• It can do everything CSS can do ... AND everything JS can do - a progressive enhancement, I guess!
• Scoped selectors means unique class names per component - no more leaking
• That said, I prefer to put (s)css in my .scss files. Sorry.

Lastly, a footer is rendered.