Giters

slinkity / slinkity

To eleventy and beyond! The all-in-one tool for templates where you want them, component frameworks where you need them 🚀

Home Page:https://slinkity.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Passing frontmatter from template to inner component

jschneidereit opened this issue · comments

commented

Is your feature request related to a problem? Please describe.

I'd prefer to write as little nunjucks as possible. To that end, it would be nice to define my layout.njk with my nice neat react components like so:

<!DOCTYPE html>
<html lang="en">
  <head>
...
    {% component 'Footer.tsx' %}
  </body>
</html>

This works great until the engine is rendering something like a markdown file, in which case the front matter falls out of scope from what I can tell.

Describe the solution you'd like

I'm not sure if it's possible but it would be nice to have the current frontmatter in scope to pass to my footer for example:

    {% component 'Footer.tsx' frontmatter=frontmatter %}

Describe alternatives you've considered

Writing multiple base layouts, but seems gross.

commented

Hm, I'm not quite sure what issue you're hitting here. Do you mind sharing a minimal example demonstrating this error? A link to a repo generated via npm init slinkity will do!

commented

Yeah I'll set that up when I get home! In the meantime, put another way, it might be nice to have a react context (or a hook) available with all the 11ty data instead of implicit props which would be a way solve this problem.

commented

So that need is understandable, but it would involve shipping a large bundle of props to the client that you may not need. Our component page docs explain the nuances there.

I'm also very curious why {% component 'Footer.tsx' frontmatter=frontmatter %} doesn't work for you, since this is definitely the intended use case. Are you passing the correct names here? For instance, if you have title: 'Slinkity' specified in your markdown file's frontmatter, your component can use the value like so:

{% component 'Footer.tsx' articleTitle=title %}

Where articleTitle is the prop name and title is the prop value.

commented

Hey @jschneidereit! Following up to see if this is still an issue. Check my comment above to confirm this is what you tried.

commented

@jschneidereit closing for now since I haven't heard any updates here. Feel free to re-open if my suggestion doesn't solve your issue!