Skip to content

/ docz

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.

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

Shadowed Wrapper-component doesn't receive doc prop #1476

Open
shkoliar opened this issue Apr 29, 2020 · 2 comments
Open

Shadowed Wrapper-component doesn't receive doc prop #1476

shkoliar opened this issue Apr 29, 2020 · 2 comments
Labels
Component Shadowing add to faq docs pr-submitted

Comments

@shkoliar
Copy link
Contributor

@shkoliar shkoliar commented Apr 29, 2020

Bug Report

From the docs section Add favicon and metadata

Comment in code example states for "The doc prop contains some metadata about the page being rendered that you can use."

// The doc prop contains some metadata about the page being rendered that you can use.
const Wrapper = ({ children, doc }) => <React.Fragment>
    <Helmet>
      ...

But in the shadowed Wrapper component doc is always undefined.

To Reproduce

Create the Wrapper-component by shadowing the original Wrapper-component.

Check that doc prop is undefined.

Expected behavior

Have access to doc prop to use its values for SEO related information or provide another way to alter SEO meta information.

Environment

  • docz version: 2.3.1
  • MacOS 10.14.6
  • Node 13.13.0 / yarn 1.22.4

Additional context/Screenshots

From the codebase in the Layout component, the Wrapper component is used and doesn't receive any props.

<MDXProvider components={components}>
  <Wrapper>
    <Layout {...props}>{children}</Layout>
  </Wrapper>
</MDXProvider>
@jesperorb
Copy link
Collaborator

@jesperorb jesperorb commented Apr 29, 2020

That seems to be a mistake in the documentation or maybe that the components has changed since the writing of that part of the documentation.

I think that the correct way is to shadow the SEO-file:
your project/src/gatsby-theme-docz/base/Seo.js:

import React from 'react'
import { Helmet } from 'react-helmet-async'

const SEO = (metadata) => {
  return (
    <Helmet
      title={"My custom Title"}
      titleTemplate={`%s | ${"My custom title"}`}
    />
  )
}
export default SEO
@shkoliar
Copy link
Contributor Author

@shkoliar shkoliar commented Apr 29, 2020

@jesperorb

Basically SEO component receives the only title prop which is based on a page name. We need also to make the Layout shadow component with appropriate changes in this case.

I've created PR which allows setting SEO information without shadowing components.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Component Shadowing add to faq docs pr-submitted
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
@shkoliar @jesperorb
You can’t perform that action at this time.