locomotive-boilerplate/views/templates/projects.twig

---
pagination:
  data: projects
  size: 4
---

{% extends "@layouts/base.twig" %}

{% block beforeMain %}
<dialog id="dialog" data-module-dialog>
    <a href="/" data-swup-link-to-fragment="#paginated" style="float: right;" data-dialog="close">Close</a>
</dialog>

<div data-module-scroll="main">
    {% include "@partials/header.twig" %}
{% endblock %}

{% block content %}
    <div class="o-container">
        <h1 class="c-heading -h1">Projects</h1>

        <div id="paginated">
            <ul>
            {% for item in pagination.items %}
                <li><a href="/project/{{item.title|slug}}">{{ item.title }}</a></li>
            {% endfor %}
            </ul>

            <ol>
            {% for pageEntry in pagination.pages %}
                {% if page.url == pagination.hrefs[ loop.index0 ] %}
                    <span aria-current="page">{{ loop.index }}</span>
                {% else %}
                    <a href="{{ pagination.hrefs[ loop.index0 ] }}">{{ loop.index }}</a>
                {% endif %}
            {% endfor %}
            </ol>
        </div>
    </div>

    <template id="modal"></template>
{% endblock %}