Reference global data file in js front matter?

[maschinenzeitmaschine]

I have a site with several projects and a global data file 'projects.json' listing all project pages. Now on each page, in the front matter, I want to hand its position (index) in this list to the njk-template. I tried with the following, but it complains that 'projects' is not defined.
So, i guess my question is: How do i reference my global json-data file in the front matter?

---js
{
  layout: "project-layout.njk",
  index: function() {
    return projects.findIndex(x => x.url ==="../projectLolo/");
  }
}
---

{{ index }}  

(index should return 1)

My global data file _data/projects.json looks like this:

[
  { "url": "../projectLulu/" },
  { "url": "../projectLolo/" },
  { "url": "../projectLala/" }
]

Tangential, but maybe helpful for understanding why i set this up the way I did: I need this index number for the next / previous project navigation. In my project-layout.njk this works like this:

<a href="{{projects[(index-1 + projects.length) % projects.length].url}}">previous project</a> 
<a href="{{projects[(index+1 + projects.length) % projects.length].url}}">next project</a>

Thanks a lot in advance for any help!

[pdehaan]

OK, I think you need eleventyComputed. Here's my modified ./src/projects/projectA.njk:

---js
{
  slug: "../projectA/",
  eleventyComputed: {
    index(data) {
      return data.projects.findIndex(x => x.url === data.slug);
    }
  }
}
---

index: {{ index }}

<a href="{{ projects[(index-1 + projects.length) % projects.length].url }}">previous project</a> 
<a href="{{ projects[(index+1 + projects.length) % projects.length].url }}">next project</a>

And the generated www/projects/projectA/index.html looks like this:

index: 0

<a href="../projectC/">previous project</a> 
<a href="../projectB/">next project</a>

Basically, I moved the hardcoded URL from the .findIndex() method into a slug frontmatter key, and wrapped index(data){...} in eleventyComputed.

Next, I created a src/projects/projects.11tydata.js directory data file which sets the index versus having to use ---js frontmatter:

module.exports = {
  eleventyComputed: {
    index(data) {
      return data.projects.findIndex(x => x.url === data.slug);
    }
  }
};

It's the same code, but now in an external file which will be shared by all templates in the ./src/projects/* directory.
Finally, I created src/projects/projectB.njk and src/projects/projectC.njk and used regular YAML frontmatter like this:

---
slug: "../projectB/"
---

index: {{ index }}

<a href="{{ projects[(index-1 + projects.length) % projects.length].url }}">previous project</a> 
<a href="{{ projects[(index+1 + projects.length) % projects.length].url }}">next project</a>

Where www/projects/projectB/index.html looks like this:

index: 1

<a href="../projectA/">previous project</a> 
<a href="../projectC/">next project</a>

… and www/projects/projectC/index.html looks like this:

index: 2

<a href="../projectB/">previous project</a> 
<a href="../projectA/">next project</a>

Not sure if that is exactly what you were trying to do. I'm not convinced about my logic. Or if you could use collections and the current page URL {{page.url}} instead of having to track slugs. Although your solution works great if you need projects to be in specific orders.

You could also look at https://www.11ty.dev/docs/filters/collection-items/ and see if that might work for you. Possibly cleaner, although you would lose the ability to use the % projects.length trick to wrap your indexes. 🤷

[pdehaan]

OK, I think this is a bit cleaner (if it works w/ your project):

Here's my _includes/layouts/project-layout.njk file (which falls back to use JavaScript's Array#at() API to wrap values if a next/previous value isn't found):

{%- set coll = collections.projects -%}
{%- set previousPost = coll | getPreviousCollectionItem(page) or coll.at(-1) -%}
{%- set nextPost = coll | getNextCollectionItem(page) or coll.at(0) -%}

<main>{{- content -}}</main>

<nav>
  <a href="{{ previousPost.url }}">{{ previousPost.data.title }}</a>
  <span>{{ title }}</span>
  <a href="{{ nextPost.url }}">{{ nextPost.data.title }}</a>
</nav>

And my directory projects/projects.11tydata.js data file (which sets a layout and tags for all the files in projects/* and will auto-create collections.projects for us):

module.exports = {
  layout: "layouts/project-layout.njk",
  tags: ["projects"]
};

And my projects/projectA.njk, projects/projectB.njk, and projects/projectC.njk files look generally like this:

---
title: P1
---

title={{ title }}

And my output files look like this:

<main>
title=P1
</main>

<nav>
  <a href="/projects/projectC/">P3</a>
  <span>P1</span>
  <a href="/projects/projectB/">P2</a>
</nav>

[maschinenzeitmaschine]

wow. just wow.
the effort you put into and depth of your answer leaves me with only one comment: THANK YOU SO VERY MUCH!
i only checked the first and second options so far, but they already work beautifully. the third i'll look into next, i still have to educate myself a bit more to grasp how it really works!