Gatsby-theme-novela: How to add a new component?

[dannysteenman]

Prerequisites

• [x ] Have you searched the issue tracker for similar issues (either past or present)?

Description

Version of Novela you are using: 0.13.3

Number of posts you have and which data source: 1

• [x ] Contentful

What are you trying to achieve?

I want to add a new component (comments in the form of webmention likes/replies) to the article pages.

What's blocking you?

How can I efficiently add a new component to the article.template.tsx without component shadowing all the dependencies?

[brotzky]

Hey! Check out this issue: https://github.com/narative/gatsby-theme-novela/issues/34
The repo is on GitHub and so you can dig into the source code of that site.

You don't need to shadow all the dependencies with shadowing.

[dannysteenman]

Thanks for sharing the source code of that repo. It helped me tremendously and was able to remove most shadowed dependencies. I'm a beginner with using react and gatsby, maybe you could help me with one more thing..

I want to display webmentions using the following graphql query:
```query MyQuery($pageurl: String!){
allWebMentionEntry(filter: {wmTarget: {eq: $pageurl}}) {
edges {
node {
wmTarget
wmSource
wmProperty
wmId
type
url
likeOf
author {
url
type
photo
name
}
content {
text
}
}
}
}
}

Without a variable I'm able to implement it in the component. My question is: how do I pass the variable (pageurl) into the post/page? 

Gatsby has this tutorial that explains how to pass the variable in the pages context within gatsby-node.js file: https://www.gatsbyjs.org/docs/page-query/#how-to-add-query-variables-to-a-page-query

In the theme I see the file createPages.js where I added the pageurl in the context of createPage. But when I try the above query I get the error: 

There was an error in your GraphQL query:

Variable "$pageurl" of required type "String!" was not provided.
```

If you can point me to the right direction, it would be of great help!

[brotzky]

I believe when you pass the variable via createPages it only gets automatically accessed at the highest level component (whichever file you provide to createPages). Are you making this query outside a page component? You may want to look into useStaticQuery or similar.

If you're making that query on the page template then it should work, in theory.

[dannysteenman]

Thanks for the tip I'm almost there! I've shadowed the createPages.js file but it's not being read. I think it's because of the gatsby-node.js file in "@narative/gatsby-theme-novela/gatsby-node.js" which exports the node files from the theme directory. How can I export my modified shadowed createPages.js file?

[brotzky]

gatsby only shadows folders within src so you'd have to copy and paste the one from novela and use it.

[dannysteenman]

Ah I see now! the gatsby-node.js file which does the export of the createPages file is not in the src folder but at the root of the folder:

├── @narative
│   └── gatsby-theme-novela
│       ├── CHANGELOG.md
│       ├── README.md
│       ├── contentful
│       │   └── contentful-export.json
│       ├── gatsby-browser.js
│       ├── gatsby-config.js
│       ├── gatsby-node.js
│       ├── index.js
│       ├── package.json
│       └── src

So I guess I'm not able to implement it :(

[brotzky]

There should be a way around this.. im not entirely sure how to tackle it.
Sorry :

[dannysteenman]

There should be a way around this.. im not entirely sure how to tackle it.
Sorry :

I've created a PR to address this issue: https://github.com/narative/gatsby-theme-novela/pull/300

[brotzky]

Thanks @dsteenman <3. PRs always welcome.