wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Bug fix: compare to actual length of items in collection. + Make pagination a component.

Browse source
This commit is contained in:
madrilene 2024-02-13 13:08:21 +01:00
parent 0c8547779a
commit bd4034f863
2 changed files with 38 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/_includes/components/pagination.njk Normal file
View file

@ -0,0 +1,26 @@
<section class="region">
<nav role="navigation" aria-labelledby="pagination_label">
<span id="pagination_label" hidden>{{ meta.blog.paginationLabel }}</span>
<span id="prefix" hidden>{{ meta.blog.paginationPage }}</span>
<ol class="pagination | cluster" role="list">
<li>
{% if pagination.href.previous %}
<a href="{{ pagination.href.previous }}"> {{ meta.blog.paginationPrevious }} </a>
{% else %} {{ meta.blog.paginationPrevious }} {% endif %}
</li>
{% if meta.blog.paginationNumbers %}
{%- for pageEntry in pagination.pages %}
<li>
<a href="{{ pagination.hrefs[ loop.index0 ] }}" id="link_{{ loop.index }}" aria-labelledby="prefix link_{{ loop.index }}" {% if page.url == pagination.hrefs[ loop.index0 ] %} aria-current="page" {% endif %}>
{{ loop.index }}</a>
</li>
{%- endfor %}
{% endif %}
<li>
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}">{{ meta.blog.paginationNext }}</a>
{% else %} {{ meta.blog.paginationNext }} {% endif %}
</li>
</ol>
</nav>
</section>

52
src/_layouts/blog.njk
View file

@ -14,14 +14,11 @@ masonry: true
{% include 'svg/divider-edgy.svg' %} {% include 'svg/divider-edgy.svg' %}
</header> </header>
<div class="region flow prose" style="--region-space-top: var(--space-xl-2xl)"> {{ content | safe }}</div> <div class="region flow prose" style="--region-space-top: var(--space-xl-2xl)">
{{ content | safe }}
</div>
<ul <ul class="blogcards | grid" role="list" data-rows="masonry" data-layout="50-50">
class="blogcards | grid"
role="list"
data-rows="masonry"
data-layout="50-50"
>
<!-- loop posts --> <!-- loop posts -->
{% set itemList = pagination.items %} {% for item in itemList %} {% set itemList = pagination.items %} {% for item in itemList %}
<!-- activate tags --> <!-- activate tags -->
@ -30,40 +27,15 @@ masonry: true
{% set definedDate = item.date %} {% set definedDate = item.date %}
<!-- set heading context --> <!-- set heading context -->
{% set headingContext = "h2" %} {% set headingContext = "h2" %}
<!-- card --> <!-- include card -->
{% include 'components/card.njk' %} {% endfor %} {% include 'components/card.njk' %} {% endfor %}
</ul> </ul>
<!-- set collection to paginate -->
{% if pagination.data.length > pagination.size %} {% set collectionToPaginate = collections.posts %}
<!-- if the number of items in the collection is greater than the number of items shown on one page -->
<section class="region"> {% if collectionToPaginate.length > pagination.size %}
<nav role="navigation" aria-labelledby="pagination_label"> <!-- include pagination -->
<span id="pagination_label" hidden>{{ meta.blog.paginationLabel }}</span> {% include 'components/pagination.njk' %} {% endif %}
<span id="prefix" hidden>{{ meta.blog.paginationPage }}</span>
<ol class="pagination | cluster" role="list">
<li>
{% if pagination.href.previous %}
<a href="{{ pagination.href.previous }}"> {{ meta.blog.paginationPrevious }} </a>
{% else %} {{ meta.blog.paginationPrevious }} {% endif %}
</li>
{% if meta.blog.paginationNumbers %}
{%- for pageEntry in pagination.pages %}
<li>
<a href="{{ pagination.hrefs[ loop.index0 ] }}" id="link_{{ loop.index }}" aria-labelledby="prefix link_{{ loop.index }}" {% if page.url == pagination.hrefs[ loop.index0 ] %} aria-current="page" {% endif %}>
{{ loop.index }}</a>
</li>
{%- endfor %}
{% endif %}
<li>
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}">{{ meta.blog.paginationNext }}</a>
{% else %} {{ meta.blog.paginationNext }} {% endif %}
</li>
</ol>
</nav>
</section>
{% endif %}
</article> </article>
s