Data variables for permalinks broken in *.11ty.js templates

[reubenlillie]

Describe the bug

When using *.11ty.js as a content template (i.e., within the input directory, not a as a layout in either the includes or layout directories), data variables in permalinks are output as plain text (e.g., _site/{{page.fileSlug}}/index.html).

To Reproduce

1. Within the input directory, create a directory data file (e.g., ./pages/pages.11tydata.js) and set the property permalink: '/{{page.fileSlug}}/index.html'
2. Create a *.11ty.js content template in that same directory (e.g., ./pages/test.11ty.js)
3. Run npx eleventy --serve
4. Observe the following output:

Writing _site/{{page.fileSlug}}/index.html from ./pages/test.11ty.js.

Expected behavior

Data variables in permalinks should not conflict with *.11ty.js content templates.

Steps 1–3 should produce:

Writing _site/test/index.html from ./pages/test.11ty.js.

Screenshots

Sample directory data file ./pages/pages.11tydata.js

Sample content template ./pages/test.11ty.js

Sample layout _includes/layouts/base.11ty.js (for reference)

Sample output using npx eleventy --serve

The issue does not occur when omitting data variables in permalinks

Alternate directory data file ./pages/pages.11tydata.js (without data variables in permalink)

Expected output (except, of course, for the preferred permalink structure)

The issue also does not occur when using directory data permalink rules, but calling *.11ty.js layouts with other content templates instead (e.g., with Markdown)

./pages/alternate.md, inheriting permalink rules from ./pages/pages.11tydata.js

The predictably puzzling output

Environment:

• OS and Version: Ubuntu 18.04.4
• Eleventy Version 0.10.0

Additional context

I’m optimistic that the forthcoming eleventyComputed data feature will allow for JS template literals within permalink values, instead of requiring Liquid/Nunjucks syntax. But I’m not sure if that functionality alone will resolve this specific issue.

While hardly ideal, it is possible to achieve the desired output with *.11ty.js content templates by setting permalink: 'test/index.html' explicitly in the *.11ty.js (optional) data object.

What hackery is this?

[reubenlillie]

Related to #642 and/or #943?

[oliverjam]

I think this is because permalinks are templated using whatever engine corresponds to the file type.

These will be parsed with the current template’s rendering engine
Use Data Variables in Permalink

A JS file doesn't have a templating engine, so a string is just a string (no templating happens). If you want a dynamic permalink in a JS file I think you need to use a function:

permalink: data => `/${data.page.fileSlug}/index.html`

However there is a related problem (#838) because if you use a non-JS template with that JS layout then Eleventy tries to use whatever templating engine the original template uses (e.g. Liquid for a Markdown file) even though the permalink is defined in a JS file.

[reubenlillie]

Sorry I’m so overdue on closing this, @zachleat.

This issue is fixed in v0.11.0 with eleventyComputed like so:

// test.11ty.js

exports.data = {
  title: 'Test',
  eleventyComputed: {
    permalink: data => `/${data.page.fileSlug}/index.html`
  }
}