Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add example templates for modular rendering #283

Open
engram-design opened this issue Feb 17, 2024 · 0 comments
Open

Add example templates for modular rendering #283

engram-design opened this issue Feb 17, 2024 · 0 comments

Comments

@engram-design
Copy link
Member

engram-design commented Feb 17, 2024

It would be great to provide users with a resource for modular templates, rather than to go your own. It could be used as a starting point to handle every node and mark.

This is for the users who want 100% control over their content, but still shouldn't need to spend an age getting their templating ready to go.

{% for node in entry.vizyField.all() %}
    {% if node.type == 'paragraph' %}
        <p {{ attr(node.attrs) }}>
            {% for nodeContent in node.content %}
                {% for mark in nodeContent.marks %}
                    {% if mark.type == 'link' %}
                        <a {{ attr(mark.attrs) }}>
                    {% elseif mark.type == 'bold' %}
                        <strong>
                    {% elseif mark.type == 'italic' %}
                        <em>
                    {% endif %}
                {% endfor %}

                {{ nodeContent.text }}

                {% for mark in nodeContent.marks %}
                    {% if mark.type == 'link' %}
                        </a>
                    {% elseif mark.type == 'bold' %}
                        </strong>
                    {% elseif mark.type == 'italic' %}
                        </em>
                    {% endif %}
                {% endfor %}
            {% endfor %}
        </p>
    {% endif %}
{% endfor %}

A current starting point is the above, which we'd split out into individual templates for each node and mark. We cannot template Vizy Blocks without knowing in advance what fields are present.

The tricky thing about modular templates is the need to split marks' start and end tags around the text content of a node. We might have to have something like:

{% for mark in nodeContent.marks %}
    {% include 'vizy/marks/' ~ mark.type with { start: true, mark: mark } only %}
{% endfor %}

{{ nodeContent.text }}

{% for mark in nodeContent.marks %}
    {% include 'vizy/marks/' ~ mark.type with { end: true, mark: mark } only %}
{% endfor %}

And in the vizy/marks/bold include, we could have:

{% if start is defined %}
    <strong {{ attr(mark.attrs) }}>
{% elseif end is defined %}
    </strong>
{% endif %}

This could either be a generator within the plugin settings, or an example repository (or folder in this repository). I'm leaning towards the former out of the "cool" factor, and possibly more easier to maintain than a separate repository.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant