fix: resolve issue with pagination URLs (#8)

Author: greatislander

.github/pull_request_template.md

@@ -15,7 +15,7 @@
 2. <!-- Second step -->
 3. <!-- and so on... -->
 
-**Expected behavioor:** <!-- What should happen -->
+**Expected behaviour:** <!-- What should happen -->
 
 ## Additional information
 

package-lock.json

@@ -33,7 +33,7 @@
         "@11ty/eleventy-navigation": "0.3.5",
         "@11ty/eleventy-plugin-rss": "1.2.0",
         "@11ty/eleventy-plugin-syntaxhighlight": "5.0.0",
-        "eleventy-plugin-fluid": "2.3.1",
+        "eleventy-plugin-fluid": "2.3.2",
         "infusion": "4.6.0",
         "netlify-cms": "2.10.192",
         "prop-types": "15.8.1",

package.json

@@ -9,17 +9,22 @@
 {% endblock %}
 
 {% block content %}
-{% if posts.length %}
-    {% for item in posts %}
-        <article class="entry">
-            <h2><a href="{{ item.url }}">{{ item.data.title }}</a></h2>
-            <p class="metadata"><time datetime="{{ item.data.date | isoDate }}" class="dt-published">{{ item.data.date | formatDate }}</time></p>
-            {% if item.data.excerpt %}
-            <p>{{ item.data.excerpt | safe }}</p>
-            {% endif %}
-        </article>
-    {% endfor %}
-{% endif %}
+
+{# In circumstances where pagination size is set to 1, the paginated content will be a single item instead of an array.
+The following code ensures we are always handling an array, even if it only has one item. #}
+
+{% set items = [] %}
+{% set items = items.concat(posts) %}
+
+{% for item in items %}
+    <article class="entry">
+        <h2><a href="{{ item.url }}">{{ item.data.title }}</a></h2>
+        <p class="metadata"><time datetime="{{ item.data.date | isoDate }}" class="dt-published">{{ item.data.date | formatDate }}</time></p>
+        {% if item.data.excerpt %}
+        <p>{{ item.data.excerpt | safe }}</p>
+        {% endif %}
+    </article>
+{% endfor %}
 
 {% if pagination.href.previous or pagination.href.next %}
 {% include "partials/components/pagination.njk" %}

src/_includes/layouts/posts.njk

@@ -1,13 +1,13 @@
         <nav class="pagination" aria-label="posts pagination">
             <ul>
             {%- if pagination.href.previous %}
-                <li><a href="{{ pagination.href.previous }}">&larr;<span class="visually-hidden">previous</span></a></li>
+                <li><a href="{{ pagination.href.previous }}"><span aria-hidden="true">&larr;</span><span class="visually-hidden">previous</span></a></li>
             {%- endif %}
             {%- for pageEntry in pagination.pages %}
-                <li><a href="{{ pagination.hrefs[ loop.index0 ] }}"{% if page.url == pagination.hrefs[ loop.index0 ] %} aria-current="page"{% endif %}>{{ loop.index }}</a></li>
+                <li><a href="{{ pagination.hrefs[ loop.index0 ] }}"{% if page.url == pagination.hrefs[ loop.index0 ] %} aria-current="page"{% endif %} aria-label="Page {{ loop.index }} of {{ pagination.pages.length }}">{{ loop.index }}</a></li>
             {%- endfor %}
             {%- if pagination.href.next %}
-                <li><a href="{{ pagination.href.next }}"><span class="visually-hidden">next</span>&rarr;</a></li>
+                <li><a href="{{ pagination.href.next }}"><span class="visually-hidden">next</span><span aria-hidden="true">&rarr;</span></a></li>
             {%- endif %}
             </ul>
         </nav>

src/_includes/partials/components/pagination.njk

@@ -3,6 +3,7 @@
 const { generatePermalink } = require("eleventy-plugin-fluid");
 
 module.exports = {
+    permalink: data => generatePermalink(data, "pages"),
     eleventyComputed: {
         eleventyNavigation: data => {
             /* If this page has an `order` attribute, create an Eleventy Navigation object for it. */
@@ -15,7 +16,6 @@ module.exports = {
                 };
             }
             return false;
-        },
-        permalink: data => generatePermalink(data, "pages")
+        }
     }
 };

src/collections/pages/pages.11tydata.js

@@ -1,5 +1,5 @@
 ---
-title: My Post
+title: Post 1
 date: 2020-06-22
 excerpt: This is a short description of the post.
 author: Fluid Project

src/collections/posts/my-post.md src/collections/posts/post-1.md

@@ -0,0 +1,7 @@
+---
+title: Post 10
+date: 2020-07-01
+excerpt: This is a short description of the post.
+author: Fluid Project
+---
+You can write content for your post in [Markdown](https://www.11ty.dev/docs/languages/markdown/) format.

src/collections/posts/post-10.md

@@ -0,0 +1,7 @@
+---
+title: Post 11
+date: 2020-07-02
+excerpt: This is a short description of the post.
+author: Fluid Project
+---
+You can write content for your post in [Markdown](https://www.11ty.dev/docs/languages/markdown/) format.

src/collections/posts/post-11.md

@@ -0,0 +1,7 @@
+---
+title: Post 2
+date: 2020-06-23
+excerpt: This is a short description of the post.
+author: Fluid Project
+---
+You can write content for your post in [Markdown](https://www.11ty.dev/docs/languages/markdown/) format.

src/collections/posts/post-2.md

@@ -0,0 +1,7 @@
+---
+title: Post 3
+date: 2020-06-24
+excerpt: This is a short description of the post.
+author: Fluid Project
+---
+You can write content for your post in [Markdown](https://www.11ty.dev/docs/languages/markdown/) format.

src/collections/posts/post-3.md

@@ -0,0 +1,7 @@
+---
+title: Post 4
+date: 2020-06-25
+excerpt: This is a short description of the post.
+author: Fluid Project
+---
+You can write content for your post in [Markdown](https://www.11ty.dev/docs/languages/markdown/) format.

src/collections/posts/post-4.md

@@ -0,0 +1,7 @@
+---
+title: Post 5
+date: 2020-06-26
+excerpt: This is a short description of the post.
+author: Fluid Project
+---
+You can write content for your post in [Markdown](https://www.11ty.dev/docs/languages/markdown/) format.

src/collections/posts/post-5.md

@@ -0,0 +1,7 @@
+---
+title: Post 6
+date: 2020-06-27
+excerpt: This is a short description of the post.
+author: Fluid Project
+---
+You can write content for your post in [Markdown](https://www.11ty.dev/docs/languages/markdown/) format.

src/collections/posts/post-6.md

@@ -0,0 +1,7 @@
+---
+title: Post 7
+date: 2020-06-28
+excerpt: This is a short description of the post.
+author: Fluid Project
+---
+You can write content for your post in [Markdown](https://www.11ty.dev/docs/languages/markdown/) format.

src/collections/posts/post-7.md

@@ -0,0 +1,7 @@
+---
+title: Post 8
+date: 2020-06-29
+excerpt: This is a short description of the post.
+author: Fluid Project
+---
+You can write content for your post in [Markdown](https://www.11ty.dev/docs/languages/markdown/) format.

src/collections/posts/post-8.md

@@ -0,0 +1,7 @@
+---
+title: Post 9
+date: 2020-06-30
+excerpt: This is a short description of the post.
+author: Fluid Project
+---
+You can write content for your post in [Markdown](https://www.11ty.dev/docs/languages/markdown/) format.

src/collections/posts/post-9.md

@@ -4,7 +4,5 @@ const { generatePermalink } = require("eleventy-plugin-fluid");
 
 module.exports = {
     layout: "layouts/post",
-    eleventyComputed: {
-        permalink: data => generatePermalink(data, "posts")
-    }
+    permalink: data => generatePermalink(data, "posts")
 };