Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pass in components for <Body /> <HeadComponents /> and <PostBodyComponents /> #1121

Closed
KyleAMathews opened this issue Jun 7, 2017 · 7 comments
Closed

Pass in components for <Body /> <HeadComponents /> and <PostBodyComponents /> #1121

KyleAMathews opened this issue Jun 7, 2017 · 7 comments
Labels
help wanted Issue with a clear description that the community can help with. stale? Issue that may be closed soon due to the original author not responding any more.

Comments

@KyleAMathews
Copy link
Contributor

@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.
@KyleAMathews KyleAMathews added DX help wanted Issue with a clear description that the community can help with. labels Jun 7, 2017
@0x80
Copy link
Contributor

0x80 commented Jun 7, 2017

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

@KyleAMathews
Copy link
Contributor Author

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.

@0x80
Copy link
Contributor

0x80 commented Jun 7, 2017

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 :)

@KyleAMathews
Copy link
Contributor Author

KyleAMathews commented Jun 7, 2017 via email

@jbolda jbolda added the v1 label Jun 11, 2017
@stale
Copy link

stale bot commented Dec 8, 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.

@stale stale bot added the stale? Issue that may be closed soon due to the original author not responding any more. label Dec 8, 2017
@KyleAMathews
Copy link
Contributor Author

This got done a long time ago :-)

@arminnaimi
Copy link

@KyleAMathews I am little puzzled on how I would pass values to {this.props.headComponents}.

@snyk-bot snyk-bot mentioned this issue Dec 28, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted Issue with a clear description that the community can help with. stale? Issue that may be closed soon due to the original author not responding any more.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@KyleAMathews @0x80 @jbolda @arminnaimi