Sunday
Kinda spent the whole morning goofing off, so I really only dedicated a couple hours to this in the afternoon. Not as much progress as I maybe would have liked, but I think I did get some of the hardest parts sorted out. That said, I fully expect that this is the part where I start to lose a bunch of folks who are following along. I know this because I'm barely keeping up myself.
To start off, my goal today was to move even more stuff to my layout: breadcrumbs, header, navigation. If at all possible, all of that would be automated, so that the actual page file—for example, a single chapter in one of my book summaries—looks something like this:
Ideally, I could put the actual content of the page into the template, and let the front matter and the layout figure out everything else around it, you know? That would make adding new pages far simpler.
So, you'll see I added some new items to my front matter up top. section and title now pass details about this page to the layout. For example, if I put <h2>{{ title }}</h2> into my layout, and then add the title to the front matter of each template file, each finished page ends up with the title at the top of the page. I understand this seems kind of pointless now (why not just keep the h2 in the template rather than putting it in the layout and then telling the layout what the title is), but I might end up using the title in my social media tags later on. In which case, doing it this way means I would be updating the information in one spot instead of two.
Those changes worked well. Next, I decided to tackle navigation. My site follows a pretty consistent structure: each section contains a bunch of pages, all of which are listed in a table of contents, and most of which have links at the bottom to go to the next and previous pages in series. I would love if Eleventy could generate these links for me so I didn't have to update them myself every time.
This is where things started getting convoluted and the Eleventy documentation began to lose me. It doesn't help that we're beginning to delve into actual programming concepts at this point. To be perfectly upfront, I dropped out of a computer science major after a year and a half (and I heard the program actually lost its accreditation shortly after anyway), so I'm in this weird nebulous area where I understand the fundamentals and can kinda read code in a "I guess I get what it's doing" kind of way, but anything beyond that is a struggle. I'm going to try to be as straightforward as possible here.
A few other items I added to my front matter:
tags: Tags will help me put pages into collections. This is primarily what is going to get Eleventy to handle the navigation for me.date: I need some way to tell Eleventy what order my pages go in (especially since I'm not always consistent about naming). My best options were to use a date to put them in chronological order, or use a separate file to list each page in custom order. Not only did I not want to maintain a separate file, but I will probably end up using dates anyway when I implement RSS generation, so easier to do it that way.navigation: This is a variable I want to pass to the layout. Currently, the navigation options I include at the bottom of the page will change depending on the page. Sometimes, I give you the option to go back and forth between sequential pages; other times, I just direct you back to the top. Rarely, I give you nothing at all. I need some way to tell the layout which kind of navigation links I want on the page, so this is how I'll do it.
As I said, the most important aspect of this is going to be tags and collections. The idea is, if I tag all of the chapters of Pride & Prejudice and put them in the same collection, Eleventy can handle the linking for me because it knows what order they're supposed to be in (thanks to the date). Eleventy calls this pagination.
For the index page, I managed to use the docs to cobble together:
<ul>
{% for item in collections.pride %}
<li><a href="{{ item.url }}">{{ item.data.title }}</<a></<li>
{% endfor %}
/<ul>If you're lost, I get it, because there's a couple different concepts now in play here. There's a for loop and Liquid syntax and it's stretching me real thin. Long story short, here's what it's doing: start a list. Go through each page tagged with the word "pride", then generate a list item, creating a link using the page's URL and title, until you run out of pages.
But aside from the front matter, that is my entire Pride & Prejudice index file. I can spin off links to all 61 chapters from that code. The Jane Austen estate releases a secret 62nd chapter? I create a new page, it gets added to the index on my next build. I don't have to worry about it.
So that's great and all, but next I wanted to handle the <prev and next> links at the bottom of the page. And this is where things got real rough because despite scouring the pagination and collection pages of the documentation ten times apiece, I couldn't even get a hint of how to do this, even though it seems like the most natural thing somebody would want, so I'm trying to figure out how to pass the right information from the template to the layout and then write code off of it even though I barely have the vaguest clue what I'm doing.
Meanwhile—and, full disclosure, I'm getting some assistance from AI here, not in a "write code for me" way, but in a "I genuinely want to understand this, let me talk it out with you to make sure I'm thinking about it correctly" way—I'm not asking the AI for code, but it keeps spitting out the same code block over and over as I try to puzzle through this. I don't use it right away because it doesn't look like anything I've seen in the Eleventy documentation and I have no idea where it's pulling it from; but at the same time, I've been using the docs all weekend, and I've seen it wholesale spit out the code from the docs verbatim a couple times. Eventually I got so frustrated at not finding what I needed that I finally broke down and used the code, and it worked. When I asked why it didn't resemble anything else, the AI assumed I meant why it didn't look like Liquid code and responded that it was specifically a filter added by Eleventy. This was the first time the word "filter" had popped up, but that's all I needed. In the documentation contents I found Get Next or Previous Collection Item Universal Filters. Which contained the exact code the AI suggested. I hadn't seen this page before because it was under a section titled "Using Data in Templates" which I skipped over because I figured I wasn't using a template, I was using a layout. Uuuuugh.
I'm still not fully certain how the code works, but for each page included in the build, it seems to be saving the previous and next pages in the collection into variables so you can go "hey, is there a previous page (in other words, am I on any chapter other than the first)? If so, add a link using its URL and title".
So wouldn't you know it. It was simple, because of course something so obvious would actually be simple. It's just that I spent a good hour and a half not knowing where to look to actually get that information. And trust me, I looked.
And that was pretty much my day. I started looking into how to handle the breadcrumb links at the top of the page, and it seems like my best bet is going to be a Navigation plugin. I installed it and it seems fairly simple to use (knock on wood), I just haven't gotten a chance to play with it yet. That will be my first goal tomorrow.
If I could get that, though... I dunno. I could conceivably consider fully switching my site over.