Gatsby-theme-novela: Not able to override Articles.Hero.tsx component

[devanSAGA]

Version of Novela you are using
0.13.2
Number of posts you have and which data source
1, Local

Describe the bug
I am not able to override Articles.Hero.tsx component using Component Shadowing.
I want to display multiple authors featured on the landing page.

As mentioned in the Component Shadowing section, I tried to create an ArticlesHero.tsx file at the following file location

  └── src
    └── @narative
      └── gatsby-theme-novela
        └── sections
          └── articles
            └── ArticlesHero.tsx

But the changes are not reflected. Also looking at the source code of the Articles.Hero.tsx component, it imports other components and types too. Should I also create the copies of the required components in my repository to override the ArticlesHero component? As these components, types are part of the gatsby-theme-novela package and not included in my repository.

Expected behavior
Users should be able to display multiple authors featured on the landing page.

[jpvalery]

Hey!

Does this help https://github.com/narative/gatsby-theme-novela/issues/115 ? We ran into similar issues a while back and IIRC the fix was to shadow the whole articles folder. Maybe it'd work here for you too?

[devanSAGA]

Hey!

Thank you for the help! I'll try out this approach. But I am still not clear on how to handle the modules that ArticleHero component imports. For example, ArticleHere imports several components (which are from the _components_ folder and not covered in _articles_ folder) , types and icons. Do we have to shadow those components too (which are being imported in ArticleHero)?

[brotzky]

You can copy and paste the entire component and then adjust it as you need. I think that would be the simplest way. The relative import paths should be "shadowed" for you automatically so you wont need to copy every referenced file.
(I'm not 100% sure on this -- you'll have to try it out and see)

[devanSAGA]

@brotzky @jpvalery Thank you very much for the help!

Yes, shadowing the whole articles folder worked for me to shadow the Articles.Hero component.