Builtin Jinja variables are included as component variables

[nickhendo]

Some code like this:

            {% for slug, post in posts.items() %}
            {% if loop.index < 4 %}
            <article class="group bg-white rounded-xl border-2 border-gray-200 hover:border-trkl-accent-light p-8 transition-all hover:shadow-xl"
                hx-push-url="true">
                <div class="text-sm text-trkl-accent font-semibold mb-3">{{ post.date }}</div>
                <h3 class="text-2xl font-bold text-gray-900 mb-4 group-hover:text-trkl-accent transition-colors cursor-pointer">
                    <a hx-get="/blog/{{ post.slug }}">{{ post.title }}</a>
                </h3>
                <p class="text-gray-600 mb-6 leading-relaxed">{{ post.description }}</p>
                <a class="text-trkl-accent hover:text-trkl-accent-dark font-semibold flex items-center gap-2 group/link cursor-pointer"
                    hx-get="/blog/{{ post.slug }}">
                    Read More 
                    <span class="group-hover/link:translate-x-1 transition-transform">→</span>
                </a>
            </article>
            {% endif %}
            {% endfor %}

Which uses the loop builtin variable, will add a field loop to the generated component for the block.