Nested Jekyll Imports?

Help
1

Hey Everyone!

I’m trying to use Jekyll to build a specific type of Design System for my company. I’m having a few issues with nesting imports. While I can get the nested imports to import correctly, the nested imports are including the Front Matter as static text when they’re imported into a non-layout page. Take the example below:

components/big.html

---
layout: default
---

<div class="my_big_component"> 
    My big component.
    <div class="my_big_component--small">
        {% include_relative small.html %}
    </div>
</div>

components/small.html

---
layout: default
---

<div class="my_small_component"> 
    <p>My Small Component</p>
</div>

The reason that I’m trying to do it this way is so that I can render both big.html and small.html by themselves (for testing and general componentization purposes), but also nest the includes, so that we only have one Source of Truth for a component Markup.

What’s currently rendering for me is the following:

<div class="my_big_component"> 
    My big component.
    <div class="my_big_component--small">
        ---layout: default---
        <div class="my_small_component"> 
            <p>My Small Component</p>
        </div>
    </div>
</div>

What I’m trying to render:

<div class="my_big_component"> 
    My big component.
    <div class="my_big_component--small">
        <div class="my_small_component"> 
            <p>My Small Component</p>
        </div>
    </div>
</div>

Notice the front matter is rendering as a string in the component output. Now, I can build something in JS to remove that on a page per page basis, but that’s super hacky. I figured that there must be something I can do in Jekyll to handle that.

I’ve tried removing the front matter from the includes pages and that allows me to pull them in as nested includes, but then the default config.yml settings don’t apply (from what I understand you need the front matter even if it’s empty).

Any help here would be awesome!

2

When you do include relative I think jekyll is just including that file - it is not thinking it is a layout/include so it is not being processed - just included.

Why can’t small.html be an include (in the _includes folder) and you just include it as normal?

3

@rdyar Thanks for the response!

Maybe I’m missing something, but if I were to include it in the _layouts directory, that would only allow me to include it into a layout or other page, but not allow me to view the component/big or component/small by itself, right? I tried that but wasn’t able to figure out a way to toggle/navigate between different includes in a layout without doing some significant workarounds.

4

ah - yes, you are correct. But didn’t it do the same thing when it was a layout -relative type thing?

Maybe a collection item would work… those can be out put as their own file as well as referenced some where else.

Maybe this will have some ideas:

5

@dcress, You currently can’t have a file render standalone and as a partial within another file.

The workaround is to:

  • Move the code (w/o front matter) inside components/small.html into an include, for example, _includes/small_component.html
    <div class="my_small_component">
    <p>My Small Component</p>
</div>
  • then include the snippet in your pages:
    // components/big.html

---
layout: default
---

<div class="my_big_component"> 
    My big component.
    <div class="my_big_component--small">
        {% include small_component.html %}
    </div>
</div>

    // components/small.html

---
layout: default
---

{% include small_component.html %}
6

Thanks @rdyar! 'll take a look at that style guide documentation.

And thanks @ashmaroli! That might be the key for now. What i might have to do is auto generate the “page view” version of that with an automation process, so i don’t have to write two pages for every component. Not a huge deal.