Gatsby: Pass in components for <Body /> <HeadComponents /> and <PostBodyComponents />

Created on 7 Jun 2017 · 7Comments · Source: gatsbyjs/gatsby

@iiroj suggested this to me and I really like it.

That'd make things in html.js more "react-y" and more foolproof as it'd make these things opaque data containers as generally they should be.

I think we could leave the existing props headComponents, postBodyComponents, and body for backwards compatability + people might want to manipulate their data before rendering.

help wanted stale?

Source

KyleAMathews

Most helpful comment

Right now an html.js looks like (greatly simplified)

<html>
  <head>
    {this.props.headComponents}
  </head>
  <body>
    <div
       id="___gatsby"
       dangerouslySetInnerHTML={{ __html: this.props.body }}
     />
    {this.props.postBodyComponents}
  </body>
</html>

Instead it could be:

<html>
  <head>
    <HeadComponents />
  </head>
  <body>
    <PageBody />
    <PostBodyComponents />
  </body>
</html>

Much simpler.

KyleAMathews on 7 Jun 2017

👍4 ❤1

All 7 comments

I am not sure what you mean by this. Care to explain a little further maybe?

0x80 on 7 Jun 2017

Right now an html.js looks like (greatly simplified)

<html>
  <head>
    {this.props.headComponents}
  </head>
  <body>
    <div
       id="___gatsby"
       dangerouslySetInnerHTML={{ __html: this.props.body }}
     />
    {this.props.postBodyComponents}
  </body>
</html>

Instead it could be:

<html>
  <head>
    <HeadComponents />
  </head>
  <body>
    <PageBody />
    <PostBodyComponents />
  </body>
</html>

Much simpler.

KyleAMathews on 7 Jun 2017

👍4 ❤1

I was actually thinking more along the lines of if they're not passed in as props, where do they come from? But I am guessing they would simply be imported and themselves get the content from the store.

It's def much cleaner to look at :)

0x80 on 7 Jun 2017

Oh they would be passed in as props. Sorry for not making that clear.

On Wed, Jun 7, 2017, 9:56 AM Thijs Koerselman notifications@github.com
wrote:

I was actually thinking more along the lines of if they're not passed in
as props, where do they come from? But I am guessing they would simply be
imported and themselves get the content from the store.

It's def much cleaner to look at :)

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/gatsbyjs/gatsby/issues/1121#issuecomment-306857769,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAEVh9xMEvHdxgawGs7Z2NIH20dvknhbks5sBtZZgaJpZM4Ny7BO
.

KyleAMathews on 7 Jun 2017

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.