Part 31: Pagination

More devblog

Close up photo of keyboard keys. — | *'TYPE' by SarahDeer is licensed with CC BY 2.0* |

Project Scope and ToDos

Static Site Generator that can build the blog and let me host it on Github Pages
I want to write posts in Markdown because I'm lazy, it's easy, and it is how I take notes now.
I don't want to spend a ton of time doing design work. I'm doing complicated designs for other projects, so I want to pull a theme I like that I can rely on someone else to keep up.
Once it gets going, I want template changes to be easy.
It should be as easy as Jekyll, so I need to be able to build it using GitHub Actions, where I can just commit a template change or Markdown file and away it goes. If I can't figure this out than fk it, just use Jekyll.
I require it to be used by a significant percent of my professional peers so I can get easy answers when something goes wrong.
I want source maps. This is a dev log site which means whatever I do with it should be easy for other developers to read.

Also the sitemap plugin looks cool. Should grab that later.
So does the reading time one.
Also this TOC plugin mby?
Use Data Deep Merge in this blog.
Decide if I want to render the CSS fancier than just a base file and do per-template splitting.

~~Can I use the template inside of dinky that already exists instead of copy/pasting it?~~

~~Is there a way to have permalinks to posts contain metadata without organizing them into subfolders?~~

Day 31

Looking good!

Setting up previous and next project post pages.

Ok, today we're going to try next and previous pages. Apparently there are universal filters built in to Eleventy that we can use to find previous and next posts. Let's give it a try.

Ok, the default set up is for a general posts collection, but what I need is the project collection. But first I'm going to make sure it works in the standard configuration. I can pull the styling in from the work I did on tag pages.

git commit -am "Basic post pagination"

Ok, figuring out the collection time.

Judging from my work back on days 10 and 11 I don't think there's a really good way to do so just within the Nunjucks template. I guess I'll need a custom shortcode. I can use the projectList shortcode again and see if I can't pull some useful code out of the getPreviousCollectionItem function built into 11ty.

Ok, so I want to use the same function that is being referred to in Eleventy. I'll pull it in

const getCollectionItem = require("@11ty/eleventy/src/Filters/GetCollectionItem");

Ok, unlike before, this should be a filter if I want to duplicate the functionality in Eleventy core.

Create the Filter tag

I gotta remember that the page object is very specific. I had to log it to remember how the object worked.

{
  date: 2021-06-16T03:59:43.100Z,
  inputPath: './src/posts/projects/devblog/hello-day-4.md',
  fileSlug: 'hello-day-4',
  filePathStem: '/posts/projects/devblog/hello-day-4',
  url: '/posts/projects/devblog/hello-day-4/',
  outputPath: 'docs/posts/projects/devblog/hello-day-4/index.html'
}

So no project property. The project proprty of the post is escaped into its own variable in the page template

So now the template calls the filter like:

{% raw %}

	{% set previousPost = collections.posts | getPreviousProjectItem(page, project) %}
	{% set nextPost = collections.posts | getNextProjectItem(page, project) %}

{% endraw %}

Ok so now I have passed into the function the posts collection, the page object and the project name. Now to set up a function to walk through the posts collection and find the right post that is a project post and this project's post in particular.

eleventyConfig.addFilter(
		"getPreviousProjectItem",
		function (collection, page, project){
			let index = -1;
			let found = false;
			if (project){
				let lastPost;
				while (found === false) {
					lastPost = getCollectionItem(collection, page, index)
					if (lastPost.data.hasOwnProperty("project") && lastPost.data.project == project){
						found = true;
					} else {
						index = index-1;
					}
				}
				return lastPost;
			} else {
				return false;
			}

		}
	);

Ok, I want to simplify it. But also, I am seeing one issue. Gotta check that the post exists, otherwise the first and last page will crash. Ok, let's fix that first.

	eleventyConfig.addFilter(
		"getNextProjectItem",
		function (collection, page, project){
			let index = 1;
			let found = false;
			if (project){
				let lastPost;
				while (found === false) {
					lastPost = getCollectionItem(collection, page, index)
					if (lastPost && lastPost.data.hasOwnProperty("project") && lastPost.data.project == project){
						found = true;
					} else {
						if (!lastPost){
							return false;
						}
						index = index+1;
					}
				}
				return lastPost;
			} else {
				return false;
			}
		}
	);

Simplify the While loop

Ok, let's pull out the function, make it repeatable.

	function getNProjectItem(collection, page, projectName, index, operation){
		let found = false;
		if (projectName){
			let lastPost;
			while (found === false) {
				lastPost = getCollectionItem(collection, page, index)
				if (lastPost && lastPost.data.hasOwnProperty("project") && lastPost.data.project == projectName){
					found = true;
				} else {
					if (!lastPost){
						return false;
					}
					index = operation(index);
				}
			}
			return lastPost;
		} else {
			return false;
		}
	}

Now my filter call looks like this.

	eleventyConfig.addFilter(
		"getPreviousProjectItem",
		function (collection, page, project){
			let index = -1;
			return getNProjectItem(collection, page, project, index, function(i){return i-1};

Ok, there's one other thing I need. I need to exclude the "Things I Learned" posts.

I have the check for them now, the wrapup property.

That means the check now looks like this:

if (
	lastPost &&
	lastPost.data.hasOwnProperty("project") &&
	lastPost.data.project == projectName &&
	!lastPost.data.hasOwnProperty('wrapup')
){

Ok it's looking good!

git commit -am "Setting up in-post pagination for projects"

Ok, clean up time. Oh and I should make sure this is only for project work days, so an if check for that in the template.

{% raw %}

    {% if project and not wrapup %}
        {% set previousPost = collections.posts | getPreviousProjectItem(page, project) %}
        {% set nextPost = collections.posts | getNextProjectItem(page, project) %}
        <div class="pagination">
            <a href="{% if previousPost %}{{ previousPost.url }}{% else %}javascript:void(0){% endif %}" class="pagination-link {% if previousPost %}cursor-pointer {% else %} cursor-default disabled-link{% endif %}">Previous Project Days</a>

            <a href="{% if nextPost %}{{ nextPost.url }}{% else %}javascript:void(0){% endif %}" class="pagination-link {% if nextPost %}cursor-pointer {% else %} disabled-link cursor-default{% endif %}">Next Project Day</a>
        </div>
    {% endif %}

{% endraw %}

Ok, looking good. One more thing to check off the list!

Create Next Day/Previous Day links on each post / Next/Previous post on post templates from projects

git commit -am "Finish off day 31"

Previous Day Next Day