How do I display a tag page (when they aren't blog posts)?

[smolcodes]

I have a website about Grade 2 Braille and clicking on a tag such as strong word sign doesn't show a tag page for that tag.

I have a folder called alphabeticwordsigns and another called strongwordsigns. I created custom collections to show them on the index page.

Here is the nunjucks template for the index page: and you can view the strongwordsigns and alphabeticwordsigns partials here

I'm not sure if I'm generating the tag page incorrectly. Below is the nunjucks template:

{% extends "layouts/base.njk" %}
{% set pageHeaderTitle = 'Contractions filed under: ' + tag  %}
   <section id="postlist" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-10">
{% for tag in collections[tag] | reverse %}
      <article class="justify-center">
				  <a href="{{ item.url }}">
        	<div class="bg-blue-50 rounded-m overflow-hidden shadow-md hover:shadow-2xl border-4 border-transparent hover:border-yellow-500 pb-5">
            <div class="px-4 py-4">
            <h2 class="text-2xl"><b>Contraction</b> <b class="braille">{{ item.data.title }}</b></h2>
            <p class="text-lg"><b>Meaning</b> {{ item.data.description }}</p>
          <p class="text-lg"><b>category</b>
      {% for tag in item.data.tags %}
         {{ tag | replace(' ', ' ') | capitalize }}
      {% endfor %}
      </p>
         </div>
       </div>
             </a>
      </article>
{% endfor %}
      </section>

and here is the markdown page:

---
pagination:
  data: collections
  size: 1
  alias: tag
addAllPagesToCollections: true
layout: layouts/taglist.njk
permalink: /tag/{{ tag | slug }}/
---

This is what a typical markdown page for a contraction looks like:

---
title: 'a'
description: 'a'
order: 1
tags:
  ['alphabetic wordsign']
---

**A** is an alphabetic wordsign. By itself it simply means a. It is the letter a when in a word.

## Example

*a dark day*
::: braille
a dark day
:::

Now I think I'm interpretting tag collecting incorrectly but I'm not sure how. How should I go about creating this tag page?

[pdehaan]

I think I'm struggling to follow a bit here...
Not sure if it's possible to break this down into a smaller test case.

But here's what I understand so far:
https://braille.netlify.app/tag/strong-word-sign/ throws a 404.

After disabling some stuff locally, I got this installed on macOS 12 w/ 2021 rMBP (wow it really didn't seem to like installing "sharp" module), and get the following output:

npm run build:eleventy -- --serve

> [email protected] build:eleventy
> eleventy

(node:23557) Warning: Using deprecated markdown-it-anchor permalink option, see https://github.com/valeriangalliat/markdown-it-anchor#todo-anchor-or-file
(Use `node --trace-warnings ...` to show where the warning was created)
Writing dist/grammar/strongwordcontraction/index.html from ./src/grammar/strongwordcontraction.md.
Writing dist/grammar/alphabeticwordsigns/index.html from ./src/grammar/alphabeticwordsigns.md.
Writing dist/colophon/index.html from ./src/colophon.md.
Writing dist/grammar/index.html from ./src/grammar.md.
Writing dist/index.html from ./src/index.md.
Writing dist/tags/all/index.html from ./src/tags.md.
Writing dist/posts/c/index.html from ./src/alphabeticwordsigns/c.md.
Writing dist/posts/b/index.html from ./src/alphabeticwordsigns/b.md.
Writing dist/posts/d/index.html from ./src/alphabeticwordsigns/d.md.
Writing dist/posts/f/index.html from ./src/alphabeticwordsigns/f.md.
Writing dist/posts/e/index.html from ./src/alphabeticwordsigns/e.md.
Writing dist/posts/a/index.html from ./src/alphabeticwordsigns/a.md.
Writing dist/posts/i/index.html from ./src/alphabeticwordsigns/i.md.
Writing dist/posts/j/index.html from ./src/alphabeticwordsigns/j.md.
Writing dist/posts/h/index.html from ./src/alphabeticwordsigns/h.md.
Writing dist/posts/n/index.html from ./src/alphabeticwordsigns/n.md.
Writing dist/posts/l/index.html from ./src/alphabeticwordsigns/l.md.
Writing dist/posts/k/index.html from ./src/alphabeticwordsigns/k.md.
Writing dist/posts/g/index.html from ./src/alphabeticwordsigns/g.md.
Writing dist/posts/m/index.html from ./src/alphabeticwordsigns/m.md.
Writing dist/posts/p/index.html from ./src/alphabeticwordsigns/p.md.
Writing dist/posts/q/index.html from ./src/alphabeticwordsigns/q.md.
Writing dist/posts/t/index.html from ./src/alphabeticwordsigns/t.md.
Writing dist/posts/s/index.html from ./src/alphabeticwordsigns/s.md.
Writing dist/posts/v/index.html from ./src/alphabeticwordsigns/v.md.
Writing dist/posts/u/index.html from ./src/alphabeticwordsigns/u.md.
Writing dist/posts/r/index.html from ./src/alphabeticwordsigns/r.md.
Writing dist/posts/x/index.html from ./src/alphabeticwordsigns/x.md.
Writing dist/posts/y/index.html from ./src/alphabeticwordsigns/y.md.
Writing dist/posts/z/index.html from ./src/alphabeticwordsigns/z.md.
Writing dist/posts/w/index.html from ./src/alphabeticwordsigns/w.md.
Writing dist/child/index.html from ./src/strongwordsigns/child.md.
Writing dist/tags/alphabetic wordsign/index.html from ./src/tags.md.
Writing dist/tags/strong word sign/index.html from ./src/tags.md.
Writing dist/tags/strong group sign/index.html from ./src/tags.md.
Writing dist/tags/grammar/index.html from ./src/tags.md.
Writing dist/tags/strongwordsigns/index.html from ./src/tags.md.
Writing dist/tags/alphabeticwordsigns/index.html from ./src/tags.md.
Copied 8 files / Wrote 38 files in 0.18 seconds (4.7ms each, v0.12.1)

Specifically, these were the files/lines I found interesting:

• Writing dist/tags/alphabetic wordsign/index.html from ./src/tags.md.
• Writing dist/tags/strong word sign/index.html from ./src/tags.md.
• Writing dist/tags/strong group sign/index.html from ./src/tags.md.
• Writing dist/tags/grammar/index.html from ./src/tags.md.
• Writing dist/tags/strongwordsigns/index.html from ./src/tags.md.
• Writing dist/tags/alphabeticwordsigns/index.html from ./src/tags.md.

But the link above you mentioned that 404ed was https://braille.netlify.app/tag/strong-word-sign/
So it might possibly be slugifying the path in one place but not another.
Specifically https://raw.githubusercontent.com/smolcodes/UEB-Quick-Reference/main/src/tags.md might need to use {{ tag | slug }} instead of {{ tag }}.

Apart from that, there might be a pluralization issue somewhere I can't quite track down.
I see your link above is singular "/tag/": https://braille.netlify.app/tag/strong-word-sign/
But the files written to disk seem to be "/tags/" plural.

Tweaking the URL to http://localhost:8080/tags/strong-word-sign/ works locally, but returns a page w/ no entries (but at least not a 404).

[pdehaan]

Ah, I think the other issue w/ semi-blank page is that src/_includes/layouts/taglist.njk should have {% block content %} ... {% endblock %} around the page content bits.

[smolcodes]

Thank you so much!! I fixed it!

You were spot on with the {% block content %}

Here's my njk file:

{% extends "layouts/base.njk" %}
{% set pageHeaderTitle = 'Contractions filed under: ' + tag  %}
{% block content %}
{{ content | safe }}
   <section id="postlist" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-10">
{% set postlist = collections[tag] %}
        {% for item in postlist | reverse %}
        <article class="justify-center">
				  <a href="{{ item.url }}">
        	<div class="bg-blue-50 rounded-m overflow-hidden shadow-md hover:shadow-2xl border-4 border-transparent hover:border-yellow-500 pb-5">
            <div class="px-4 py-4">
            <h2 class="text-2xl"><b>Contraction</b> <b class="braille">{{ item.data.title }}</b></h2>
            <p class="text-lg"><b>Meaning</b> {{ item.data.description }}</p>
          <p class="text-lg"><b>category</b>
      {% for tag in item.data.tags %}
         {{ tag | replace(' ', ' ') | capitalize }}
      {% endfor %}
      </p>
         </div>
       </div>
             </a>
      </article>
        {% endfor %}
      </section>
{% endblock %}

I also had the a href incorrect in my post layout. I used /tag when it should have been /tags. I also fixed the frontmatter to tags.md

---
pagination:
  data: collections
  size: 1
  alias: tag
layout: layouts/taglist.njk
permalink: /tags/{{ tag | slug }}/
---

Thank you so much!!

[pdehaan]

I need to see if there is a good/easy solution for link checking Eleventy sites. I was initially thinking of just creating some sitemap.json file which loops over collections.all and dumps out all the page URLs, and then writing some external Node script that checks each page's links. But haven't checked to see if somebody has wrapped that idea in an Eleventy plugin yet.

[smolcodes]

That would be cool! I found out by inspecting the html of the tag page.

[pdehaan]

Posting for my own future reference, but…

So far I'm liking linkinator:

npx linkinator https://braille.netlify.app/ -r --format=json --verbosity=error

{
  "links": [
    {
      "url": "https://braille.netlify.app//feed.xml",
      "status": 404,
      "state": "BROKEN",
      "parent": "https://braille.netlify.app/"
    }
  ],
  "passed": false
}

---

I'm still trying to think of the best way to hook it in to a local sample Eleventy site though.
So far I'm calling the CLI from an npm script, piping the JSON output to a file, then having another Node script read the file, display a summary, and set a non-zero exitCode if the link checker has passed: false.

  "scripts": {
    "build": "eleventy",
    "linkcheck": "linkinator ./www -r --format=json --verbosity=error > links.json && node linkcheck",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

// ./linkcheck.js
const res = require("./links.json");

if (!res.passed) {
    console.error(`${res.links.length} BROKEN LINKS DETECTED`);
    for (const link of res.links) {
        console.error(`[${link.status}/${link.state}] ${link.parent} => ${link.url}`);
    }
    process.exitCode = 1;
}

OUTPUT

5 BROKEN LINKS DETECTED
[404/BROKEN] www => www/styles.css
[404/BROKEN] www => www/scripts.js
[404/BROKEN] www/four/ => www/img/bar.png
[404/BROKEN] www/four/ => www/img/foo.jpg
[404/BROKEN] www/four/ => www/six/

I think the current limitation in my plan is that it seems to check that ./www/index.html page, and recursively checks every linked page. So if you don't have good links between pages, linkinator might not check everything. Still playing w/ possibly using "./www/**/*.html" style globs to possibly check all generated .html pages.

"linkcheck": "linkinator './www/*.html' './www/**/*.html' -r --format=json --verbosity=error > links.json && node linkcheck",

Or another (better?) solution might be to run eleventy --serve and then check the links from the local dev server:

npx linkinator http://localhost:8080/ -r --format=json --verbosity=error

{
  "links": [
    {
      "url": "http://localhost:8080/styles.css",
      "status": 404,
      "state": "BROKEN",
      "parent": "http://localhost:8080/"
    },
    {
      "url": "http://localhost:8080/scripts.js",
      "status": 404,
      "state": "BROKEN",
      "parent": "http://localhost:8080/"
    },
    {
      "url": "http://localhost:8080/img/foo.jpg",
      "status": 404,
      "state": "BROKEN",
      "parent": "http://localhost:8080/four/"
    },
    {
      "url": "http://localhost:8080/img/bar.png",
      "status": 404,
      "state": "BROKEN",
      "parent": "http://localhost:8080/four/"
    },
    {
      "url": "http://localhost:8080/six/",
      "status": 404,
      "state": "BROKEN",
      "parent": "http://localhost:8080/four/"
    }
  ],
  "passed": false
}