making next / previous buttons without pagination but with order declared in the navigation plugin

[phineas-pta]

Hi all 👋 just want to show a snippet of code i created

so i have folder structure like this:

src/
├─ subject-1/
│  ├─ book-1/
│  │  ├─ chapter-1.html
│  │  ├─ chapter-2.html
│  ├─ book-2/
│  │  ├─ chapter-1.html
│  │  ├─ chapter-2.html
│ ...
├─ subject-2/
│  ├─ book-3/
│ ...

i rely totally on navigation plugin to make table of contents per subject then per book, also the breadcrumbs, so front matter for any subject - book - chapter must be:

eleventyNavigation:
  parent: AAA
  key: BBB
  order: nnn

then i want to implement next / previous buttons for each chapter but getPreviousCollectionItem / getNextCollectionItem doesnt work with eleventyNavigation 😞

if i understand correctly official docs:

• with https://www.11ty.dev/docs/pagination/nav/ i have to add pagination field to front matter
• with https://www.11ty.dev/docs/filters/collection-items/ i have to add tags field to front matter

so like i have to repeat the order & parent title in front matter with those fields (pls correct me if im wrong)

my solution is to create a filter to get url of next / previous chapter

module.exports = (eleventyConfig) => {
  eleventyConfig.addNunjucksFilter("findNextPrev", findNextPrevious)
};
function findNextPrevious(key, nodes) {
  var prev_i, next_i;
  for (let i = 0; i < nodes.length; i++) {
    // nodes already sorted by order with eleventyNavigation
    if (nodes[i]["key"] == key) {
      prev_i = i - 1;
      next_i = i + 1;
      break;
    }
  }
  return {
    "prev_url": prev_i < 0 ? null : nodes[prev_i]["url"],
    "next_url": next_i < nodes.length ? nodes[next_i]["url"] : null
  }
}

then i can do in a chapter (nunjucks template):

{% set navPages = collections.all | eleventyNavigation(eleventyNavigation.parent) %}
{% set prev_next = eleventyNavigation.key | findNextPrev(navPages) %}

<nav>

  {% if prev_next.prev_url %}
    <a href="{{ prev_next.prev_url }}">Previous</a>
  {% else %}
    <a>🚫</a>
  {% endif %}

  {% if prev_next.next_url %}
    <a href="{{ prev_next.next_url }}">Next</a>
  {% else %}
    <a>🚫</a>
  {% endif %}

</nav>

im open to hear any suggestion to improve this kind-of boilerplate code 😄

edit 1 simplify code a bit & change md to html

[pdehaan]

I'd have to try recreating this locally (unless you have a public repo I can clone), but would it work if each book was it's own collection and then you try using getPreviousCollectionItem / getNextCollectionItem? (it might need some extra re-sorting using .addCollection() to reorder the collection's items based on the eleventyNavigation.order value)

[phineas-pta]

tysm that's super neat, u even auto detect order from filename, what ive done is a python script to generate cahpters files with front matter pre-filled 😅

[phineas-pta]

so there should be a .11tydata.js per book folder ? but the content is like very much the same, u think a global data file is possible ?

[pdehaan]

so there should be a .11tydata.js per book folder ? but the content is like very much the same, u think a global data file is possible?

There are possibly a few ways to do it, that was just the first/easiest thing that came to mind.
It might depend on how many books you have, but I find that a directory data file is easier than duplicating the front matter in n chapters. But if you're already using Python or something else to build the chapters, maybe front matter is the better solution for your project/use case.

We could probably make it even more obscure by having a helper function that takes 1-2 arguments (book name and eleventyNavigation.parent, although perhaps the book/collection/tag name can be generated from a slugified version of eleventyNavigation.parent) and returns the rest of the contents of the .11tydata.js file. Or create an .11tydata.js file higher up (at a global "books" level, or a "section" level) that defines the shared information (like layout, and eleventyComputed.eleventyNavigation.order) and then other directory data files just keep adding 1-2 more pieces of data specific o the book.

I'm not sure how you'd do it from a global data file easily. Even calculating eleventyNavigation.key or eleventyNavigation.parent based on filenames and depths might be too complex to be maintainable and hardcoding them somewhere is the better solution.

// utils/helpers.js (WARNING: This is all just untested code, probably has some bugs):
module.exports.dirDataFile = function (parent, book) {
  return {
    book,
    tags: [book],
    layout: "lay-chap.njk",
    eleventyNavigation: {
      parent,
    },
    eleventyComputed: {
      eleventyNavigation: {
        order(data) {
          if (data.eleventyNavigation.order) {
            return data.eleventyNavigation.order;
          }
          return parseInt(data.page.fileSlug.replace("chapter-", ""), 10);
        }
      }
    },
  },
};

Now your book's directory data file maybe just has to import the helper function, like this untested code:

const { dirDataFile } = require("../../../utils/helpers");

module.exports = dirDataFile("Tam tự kinh", "tam-tu-kinh");

[pdehaan]

Interesting! I can seem to slugify the... Vietnamese(?) and it "just works":

console.log(eleventyConfig.getFilter("slugify")("Tam tự kinh")); // tam-tu-kinh
console.log(eleventyConfig.getFilter("slugify")("Tích Mạnh mẫu")); // tich-manh-mau

So maybe you CAN just specify the eleventyNavigation.parent's text and create the slugified tag for a collection name.

[phineas-pta]

tysm that's interesting, i'll look into it, that python script is just a stupid helper coz idk how to do in js properly 😂 i even wanted to put chapter contents to json then dump to html but too lazy to learn js 😂