Included sub-pattern HTML nesting

[juliat]

Hi there,

I'm using django-pattern library for the first time. I created a couple of smaller components: hero, and latest_updates, and tried to compose them into a larger homepage component. However, when I compile them and look at them in the pattern library playground, each included component is nested inside of each other. I'm using pattern library version 0.7.0. Has anyone else encountered this issue? How can I resolve it?

Components

homepage.html

<div class="homepage">
    <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">Homepage</h1>
    <div class="hero">{% include "patterns/components/hero/hero.html" with hero=hero %}</div>
    <div class="updates">{% include "patterns/components/latest_updates/latest_updates.html" %}</div>
</div>

hero.html

<div class="mx-auto relative sm:overflow-hidden bg-cover bg-bottom">
    <div class="absolute">
        <img class="h-full w-full object-cover" src={{ hero.backgroundImageUrl }} />  
        <div class="absolute inset-0 bg-gray-400 mix-blend-multiply"/>
    </div>
    <div class="max-w-7xl mx-auto relative py-24 sm:px-6 sm:py-24 lg:py-48">
        <h1 class="text-left text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
            <span class="block text-white">{{ hero.tagline }} </span>
        </h1>
        <p class="px-2 mt-6 max-w-prose leading-relaxed text-left text-xl text-white sm:max-w-3xl">{{ hero.blurb }}</p>
    </div>
</div>

latest_updates.html

<script type="text/javascript"> /* curator-feed-default-feed-layout */ (function(){ var i,e,d=document,s="script";i=d.createElement("script");i.async=1;i.charset="UTF-8"; i.src="https://cdn.curator.io/published/#####.js"; e=d.getElementsByTagName(s)[0];e.parentNode.insertBefore(i, e); })(); </script>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl font-extrabold py-16 px-4">The Latest</h2>
</div>
<div id="curator-feed-default-feed-layout"><a href="https://curator.io" target="_blank" class="crt-logo crt-tag">Powered by Curator.io</a></div>

** Unexpected compiled output **

<div class="homepage">
    <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">Homepage</h1>
    <div class="hero"><div class="mx-auto relative sm:overflow-hidden bg-cover bg-bottom">
    <div class="absolute">
        <img class="h-full w-full object-cover" src="https://yimbyaction.org/2021/wp-content/uploads/sites/5/2021/08/kids-playing-in-front-of-new-affordable-housing-complex-scaled-e1628566140760.jpg">  
        <div class="absolute inset-0 bg-gray-400 mix-blend-multiply">
    </div>
    <div class="max-w-7xl mx-auto relative py-24 sm:px-6 sm:py-24 lg:py-48">
        <h1 class="text-left text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
            <span class="block text-white">Yes to People. Yes to Housing. </span>
        </h1>
        <p class="px-2 mt-6 max-w-prose leading-relaxed text-left text-xl text-white sm:max-w-3xl">We're a group of people who advocate for abundant, affordable housing and inclusive, sustainable communities.</p>
    </div>
</div></div>
    <div class="updates">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl font-extrabold py-16 px-4">The Latest</h2>
</div>
<div id="curator-feed-default-feed-layout"><a href="https://curator.io" target="_blank" class="crt-logo crt-tag">Powered by Curator.io</a></div></div>
</div>
 
    <script type="text/javascript" src="http://localhost:9091/js/runtime.js"></script>
<script type="text/javascript" src="http://localhost:9091/js/vendors-node_modules_alpinejs_dist_module_esm_js-node_modules_mini-css-extract-plugin_dist_hm-0ac715.js"></script>
<script type="text/javascript" src="http://localhost:9091/js/app.js"></script>

</div>

Expected output:

<div class="homepage">
    <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">Homepage</h1>
    <div class="hero">
<div class="mx-auto relative sm:overflow-hidden bg-cover bg-bottom">
    <div class="absolute">
        <img class="h-full w-full object-cover" src={{ hero.backgroundImageUrl }} />  
        <div class="absolute inset-0 bg-gray-400 mix-blend-multiply"/>
    </div>
    <div class="max-w-7xl mx-auto relative py-24 sm:px-6 sm:py-24 lg:py-48">
        <h1 class="text-left text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
            <span class="block text-white">{{ hero.tagline }} </span>
        </h1>
        <p class="px-2 mt-6 max-w-prose leading-relaxed text-left text-xl text-white sm:max-w-3xl">{{ hero.blurb }}</p>
    </div>
</div></div>
    <div class="updates"><script type="text/javascript"> /* curator-feed-default-feed-layout */ (function(){ var i,e,d=document,s="script";i=d.createElement("script");i.async=1;i.charset="UTF-8"; i.src="https://cdn.curator.io/published/bf86e0f1-9dce-4382-bb51-cf7e6d91054b.js"; e=d.getElementsByTagName(s)[0];e.parentNode.insertBefore(i, e); })(); </script>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl font-extrabold py-16 px-4">The Latest</h2>
</div>
<div id="curator-feed-default-feed-layout"><a href="https://curator.io" target="_blank" class="crt-logo crt-tag">Powered by Curator.io</a></div></div>
</div>

[thibaudcolas]

Hi @juliat, did you set up your base template as documented?

Your examples are a bit hard to follow with so much markup in each template, if you want further help please take a moment to simplify them to demonstrate what you’re expecting better, and share your base template with pattern_library_rendered_pattern as well as your PATTERN_LIBRARY Django setting.

[bcdickinson]

I think this could just be an error in your markup, rather than an issue with the pattern library. You seem to have an unclosed <div> tag on line 4 of your hero.html template. Does closing that correctly help?

[juliat]

Hi @bcdickinson thank you for helping me catch that unclosed div tag; I had been combing the code for them but somehow missed that one. Anyway, that fixed the issue. Thank you and sorry for the false alarm!