ultraq / thymeleaf-layout-dialect

A dialect for Thymeleaf that lets you build layouts and reusable templates in order to improve code reuse
https://ultraq.github.io/thymeleaf-layout-dialect/
Apache License 2.0
700 stars 112 forks source link

Reusable Templates Example renders invalid html #198

Closed silkentrance closed 3 years ago

silkentrance commented 4 years ago

Source can be found in the official documentation under

https://ultraq.github.io/thymeleaf-layout-dialect/Examples.html#reusable-templates

%TEMPLATE_MODE HTML

%INPUT
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<div layout:replace="Modal2 :: modal(modalId='message', modalHeader='Message')">
    <p layout:fragment="modal-content">Message goes here!</p>
</div>
</html>

%INPUT[Modal2]
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<body>
<div layout:fragment="modal(modalId, modalHeader)" th:id="${modalId} + '-container'" class="modal-container">
    <section th:id="${modalId}" class="modal">
        <header>
            <h1 th:text="${modalHeader}">My Modal</h1>
            <div th:id="'close-' + ${modalId}" class="modal-close">
                <a href="#close">Close</a>
            </div>
        </header>
        <div th:id="${modalId} + '-content'" class="modal-content">
            <div layout:fragment="modal-content">
                <p>My modal content</p>
            </div>
        </div>
    </section>
</div>
</body>
</html>

%OUTPUT
<!DOCTYPE html>
<html>
<div id="message-container" class="modal-container">
    <section id="message" class="modal">
        <header>
            <h1>Message</h1>
            <div id="close-message" class="modal-close">
                <a href="#close">Close</a>
            </div>
        </header>
        <div id="message-content" class="modal-content">
            <p>Message goes here!</p>
        </div>
    </section>
</div>
</html>

in order to overcome this, one needs to add the body element to the input template, e.g.

<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<body>
<div layout:replace="Modal2 :: modal(modalId='message', modalHeader='Message')">
    <p layout:fragment="modal-content">Message goes here!</p>
</div>
</body>
</html>
ultraq commented 4 years ago

Thanks for pointing this out! I swear someone else found something similar a while ago (example in docs not working exactly as advertized) - I should find some time to double-check that the examples are still as in the test files.