feat(theme): use pagination's built-in href for next and previous URL; implement dynamic data point with getter

Author: trongthanh

.eleventy.js

@@ -26,6 +26,7 @@ module.exports = function(config) {
 	config.addLayoutAlias('home', 'layouts/home.njk');
 	config.addLayoutAlias('post', 'layouts/post.njk');
 	config.addLayoutAlias('page', 'layouts/page.njk');
+	config.addLayoutAlias('archive', 'layouts/archive.njk');
 
 	// Transforms
 	config.addTransform('htmlmin', htmlMinTransform);

_data/global.js

@@ -1,12 +1,15 @@
-const thisYear = new Date().getFullYear();
-const years = [];
-// my blog started in 2008
-for (let y = 2008; y <= thisYear; y++) {
-	years.push(y);
-}
-
+/* eslint-disable no-bitwise */
 module.exports = {
-	years,
+	get years() {
+		const thisYear = new Date().getFullYear();
+		const years = [];
+		// my blog started in 2008
+		for (let y = 2008; y <= thisYear; y++) {
+			years.push(y);
+		}
+
+		return years;
+	},
 	random() {
 		const segment = () => {
 			return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);

blog-by-year.njk

@@ -14,23 +14,26 @@ permalink: /blog/{{ year }}/
 
 {# Post list content #}
 {% set postListHeadingLevel = '2' %}
-{% set postListHeading = 'Posts' %}
 {% set postListItems = helpers.filterPostsByYear(collections.posts, year) %}
+{% set postListHeading = postListItems.length +' posts'  %}
 
 {# Pagination #}
 {% if year > global.years | first %}
   {% set paginationPrevText = 'Posts in ' + (year - 1) %}
-  {% set paginationPrevUrl %}/blog/{{year - 1}}/{% endset %}
+  {% set paginationPrevUrl = pagination.href.previous %}
 {% endif %}
 {% if year < global.years | last %}
   {% set paginationNextText = 'Posts in ' + (year + 1) %}
-  {% set paginationNextUrl %}/blog/{{year + 1}}/{% endset %}
+  {% set paginationNextUrl = pagination.href.next %}
 {% endif %}
 
 
 {% block content %}
   <main id="main-content" tabindex="-1">
     {% include "partials/components/intro.njk" %}
+    {% if postListItems.length == 0 %}
+    <div class="inner-wrapper"><p>No posts found.</p></div>
+    {% endif %}
     {% include "partials/components/post-list.njk" %}
     {% include "partials/components/pagination.njk" %}
   </main>

blog.md

@@ -1,4 +1,4 @@
 ---
 title: 'Blog'
-layout: 'layouts/archive.njk'
+layout: 'archive'
 ---