Sort posts by title in a tag page

[Julianoe]

Hey, it's me again, trying to figure all this thing out :)
I followed some tips and advice to build a tag "archive" page like in the quick tip #004.
Now what i'm trying to do is make this page display posts in a A-Z order (it's by date by default).

I tried to imitate several people (here for ex) that built a filter that uses localeCompare but it throws an error I can't manage to understand: TypeError: Cannot read properties of undefined (reading 'localeCompare') (via Template render error).

  eleventyConfig.addFilter('sortByTitle', values => {
      return values.slice().sort((a, b) => a.data.title.localeCompare(b.data.title))
  })

Then I tried to do it another way, like @pdehaan suggested here, by using the default Sort() function fron Nunjuck but to no success as it returns an other error TypeError: Cannot convert undefined or null to object (via Template render error). I only changed that line:

{% for note in taglist | sort(false, false, 'data.title') %}

I guess there is something I don't understand about the way data is passed around but can't find anymore info to do what I'm trying to achieve.

Here is the code from tags.njk:

---
layout: default
pagination:
  data: collections
  size: 1
  alias: tag
permalink: /tags/{{ tag }}/
---

<h1>Étiquette: « {{ tag }} »</h1>

<ul>
{% set taglist = collections[ tag ] %}
{% for note in taglist | sortByTitle %}
  <li><a href="{{ note.url }}">{{ note.data.title }}</a> {%if note.data.date %}<span class="small">| <time>{{ note.data.date | dateToLocalString }}</time></span>{% endif %}</li>
{% endfor %}
</ul>

[pdehaan]

Your logic here looks right to me:

  eleventyConfig.addFilter('sortByTitle', values => {
      return values.slice().sort((a, b) => a.data.title.localeCompare(b.data.title))
  })

… but this error message seems to imply that one template might not have a title attribute (it seems to be undefined causing an error trying to then read undefined.localeCompare()):

"TypeError: Cannot read properties of undefined (reading 'localeCompare') (via Template render error)"

[pdehaan]

Here's my sample repo: https://github.com/pdehaan/11ty-2557

[Julianoe]

Got it! wow.

One of my YAML frontmatter (among 500 notes) looked like this:

---
title: "📸 Scanner Epson Perfection V39"
description: 
date: 2022-07-21 20:18:38
cover:
categories:
tags:
    -
---

The empty tag entry caused one of the notes to return null as tags value and that messed up with the code.
The debug mode did not help to debug this; I had to manually check each individual file.

Golden rule folks: your YAML should not contain on once of error!

[pdehaan]

For what it's worth, that's 💯 valid YAML; it just happens to return an array with null as the only value:

---
# src/notes/bad.md (liquid)
title: "📸 Scanner Epson Perfection V39"
description: 
date: 2022-07-21 20:18:38
cover:
categories:
tags:
    -
---

title={{ title }}
tags={{ tags | json }}

OUTPUT

<p>title=📸 Scanner Epson Perfection V39
tags=[null]</p>

But I find that to be one of the harder challenges w/ bigger sites. Validating data, and finding the one "malformed" needle in a haystack of posts.

[pdehaan]

A bit messy, but here's an example of building a rough schema validator for front matter values using ajv and a custom collection: https://github.com/pdehaan/11ty-2557 (look in the .eleventy.js and ./schemas/ directory).

> eleventy

[./src/notes/bad.md] frontmatter/tags/0 must be string
[./src/notes/note3.md] Unknown schema: 'tangerine'
[./src/notes/note2.md] frontmatter must have required property 'title'

[11ty] Wrote 9 files in 0.08 seconds (v1.0.2)

[Julianoe]

Thanks, that's really interesting and could show very useful once the site is rolling with potentially hundreds new publications per year