From bd4034f8633cbb346b767a466ad5e37fea9baa7a Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Tue, 13 Feb 2024 13:08:21 +0100
Subject: [PATCH] Bug fix: compare to actual length of items in collection. +
 Make pagination a component.

---
 src/_includes/components/pagination.njk | 26 +++++++++++++
 src/_layouts/blog.njk                   | 52 ++++++-------------------
 2 files changed, 38 insertions(+), 40 deletions(-)
 create mode 100644 src/_includes/components/pagination.njk

diff --git a/src/_includes/components/pagination.njk b/src/_includes/components/pagination.njk
new file mode 100644
index 0000000..ab341e2
--- /dev/null
+++ b/src/_includes/components/pagination.njk
@@ -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>
\ No newline at end of file
diff --git a/src/_layouts/blog.njk b/src/_layouts/blog.njk
index 43cf726..dcc725d 100644
--- a/src/_layouts/blog.njk
+++ b/src/_layouts/blog.njk
@@ -14,14 +14,11 @@ masonry: true
     {% include 'svg/divider-edgy.svg' %}
   </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
-    class="blogcards | grid"
-    role="list"
-    data-rows="masonry"
-    data-layout="50-50"
-  >
+  <ul class="blogcards | grid" role="list" data-rows="masonry" data-layout="50-50">
     <!-- loop posts -->
     {% set itemList = pagination.items %} {% for item in itemList %}
     <!-- activate tags -->
@@ -30,40 +27,15 @@ masonry: true
     {% set definedDate = item.date %}
     <!-- set heading context -->
     {% set headingContext = "h2" %}
-    <!-- card -->
+    <!-- include card -->
     {% include 'components/card.njk' %} {% endfor %}
   </ul>
 
-
-  {% if pagination.data.length > pagination.size %}
-
-  <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>
-
-  {% endif %}
-
+  <!-- set collection to paginate -->
+  {% set collectionToPaginate = collections.posts %}
+  <!-- if the number of items in the collection is greater than the number of items shown on one page -->
+  {% if collectionToPaginate.length > pagination.size %}
+  <!-- include pagination -->
+  {% include 'components/pagination.njk' %} {% endif %}
 </article>
+s