How can I define arbitrary markdown template as index of parent folder?

[asterixpound]

Given a folder in my input directory, I would like to be able to specify one of the markdown templates it contains as its index without having to name that file index.md. In particular, my hope is to have a way to specify in the front matter of a markdown template located at path/to/file.md in my input directory that it should be rendered as path/to/index.html in the output directory.

One way of achieving this is by setting permalink: path/to/index.html in the front matter of path/to/file.md. However, I would prefer to have a way of doing this without having to explicitly specify path/to in the front matter.

I would think there would be a way to use Eleventy's supplied data to get the input path of the folder containing file.md. I can see that there is page.filePathStem for for the path of file.md itself. However, I am not seeing a way to get the path of the parent folder of file.md. Is there a way to do this?

An alternative possibility I have wondered about is whether I could take advantage of the naming convention I use for those markdown templates which correspond to an index. In particular, I always start the name of these files with an underscore. None of my other markdown templates have names starting with an underscore. Would it be possible to create a rule which always maps path/to/_file.md in the input directory to path/to/index.html in the output directory?

[pdehaan]

Would a directory data file w/ computed permalink work?

// src/path/path.11tydata.js
const path = require("node:path");

module.exports = {
  permalink(data) {
    if (data.index) {
      // console.log("We got an index page here!", data.page);
      const parent = path.resolve(data.page.filePathStem, "..");
      return path.join(parent, "index.html");
    }
    return data.url;
  }
}

---
# src/path/to/foo.md
title: Foo
index: true
---

<h1>{{ title }}</h1>
<pre>
{{ page | json: 2 }}
</pre>

eleventy

[11ty] Writing www/path/to/index.html from ./src/path/to/foo.md (liquid)
[11ty] Writing www/path/to/bar/index.html from ./src/path/to/bar.md (liquid)
[11ty] Wrote 2 files in 0.04 seconds (v2.0.1)

<!-- www/path/to/index.html -->
<h1>Foo</h1>
<pre>
{
  "date": "2023-10-11T00:25:06.036Z",
  "inputPath": "./src/path/to/foo.md",
  "fileSlug": "foo",
  "filePathStem": "/path/to/foo",
  "outputFileExtension": "html",
  "templateSyntax": "liquid,md",
  "url": "/path/to/",
  "outputPath": "www/path/to/index.html"
}
</pre>

[asterixpound]

Thanks very much for your reply, @pdehaan.

Your answer led me to the fact that the Eleventy Notes project which I am using already takes advantage of Javascript front matter. In particular, it's base Nunjucks layout has the following in its Javascript frontmatter:

  permalink: function({ page }) {
    const url = this.slugifyPath(page.filePathStem).replace(/\/index$/, '');
    const isRoot = url === "";
    return isRoot ? "/" : `/n/${url}/`;
  }

I presume I can get what I want by modifying the Javascript function here. However, it isn't clear to me from the documentation how to the Javascript function can access front matter data, in this case the value of index in the front matter. Is this possible?

[pdehaan]

The permalink (or other eleventyComputed props) expose a data property. Above you're just destructuring page from that object, but my example above just referenced data.index which is front matter data.
Easiest is probably just do something like this and see what you get logged out:

  permalink: function(data) {
    console.log({ data }); // <------------------------
    const url = this.slugifyPath(data.page.filePathStem).replace(/\/index$/, '');
    const isRoot = url === "";
    return isRoot ? "/" : `/n/${url}/`;
  }

https://www.11ty.dev/docs/data-computed/#using-javascript

[asterixpound]

I ended up going with the other approach I had in mind, taking advantage of my file naming convention instead. In particular, templates with a filename beginning with an underscore get mapped to an index.html in the path of the parent:

  permalink: function({ page }) {
    const url = this.slugifyPath(page.filePathStem.replace(/\/_.*$/, '')).replace(/\/index$/, '');
    const isRoot = url === "";
    return isRoot ? "/" : `/${url}/`;
  }

@pdehaan, I really appreciate all of your help.