Eleventy: How can I access the page object in 11data.js files?

[reubenlillie]

So, I’m trying to define the permalink structure in a template directory data file (11tydata.js).

Strangely, I can make it work with liquid/nunjucks inside my 11tydata.js file.

However, I’d like to use JavaScript template literals or a good ole function instead. (Honestly, anything vanilla JS that works will suffice.)

@zachleat, I’m sorry that I seem to be asking so many questions along this topic (e.g., #588 and these tweets). But it baffles me that this works:

// _input/content/content.11tydata.js
// This makes me want to wash my hands, brush my teeth, and avert my eyes in horror.
// It’s literally the only line of liquid/nunjucks in my entire project directory.
module.exports = function () {
  return {
    permalink: '/{{page.fileSlug}}/index.html'
  }
}

But this doesn’t work:

// _input/content/content.11tydata.js
// Huh?
module.exports = function () {
  return {
    permalink: `/${data.page.fileSlug}/index.html`
  }
}

Neither does this:

// _input/content/content.11tydata.js
// Just in case I need to pass the data object as a parameter?
module.exports = function (data) {
  return {
    permalink: `/${data.page.fileSlug}/index.html`
  }
}

Nor this:

// _input/content/content.11tydata.js
// Maybe try a function instead?
// Cf. https://www.11ty.io/docs/languages/javascript/#permalinks - For 11ty.js templates, but still?
module.exports = function () {
  return {
    permalink: data => `/${data.page.fileSlug}/index.html`
  }
}

Nor this:

// _input/content/content.11tydata.js
// Just in case I (still) need to pass the data object as a parameter?
module.exports = function (data) {
  return {
    permalink: data => `/${data.page.fileSlug}/index.html`
  }
}

What am I missing?

[Ryuno-Ki]

If I were to debug this, I'd log arguments to see, whether and how many arguments are passed.

In the second to last example I'd not see how the argument is related to the function body.

I'm using Nunjucks, so can't help you much

[reubenlillie]

@Ryuno-Ki, as far as the last two examples, I mistyped the template literal without the data object. I’ve corrected them in my original comment. However, the problem still persists.

Without changing the default configuration I get the following error message.

> Having trouble rendering md template ./_includes/content/index.md (TemplateContentRenderError)
> Having trouble compiling template ./_includes/content/index.md (TemplateContentCompileError)
> illegal input (AssertionError):
    AssertionError: illegal input
        at assert (~/PROJECT/node_modules/liquidjs/dist/liquid.common.js:1062:11)
        at parse (~/PROJECT/node_modules/liquidjs/dist/liquid.common.js:1426:3)
        at Object.parse$$1 [as parse] (~/PROJECT/node_modules/liquidjs/dist/liquid.common.js:3419:18)
        at Liquid.compile (~/PROJECT/node_modules/@11ty/eleventy/src/Engines/Liquid.js:180:29)
        at Markdown.compile (~/PROJECT/node_modules/@11ty/eleventy/src/Engines/Markdown.js:57:25)
        at TemplateRender.getCompiledTemplate (~/PROJECT/node_modules/@11ty/eleventy/src/TemplateRender.js:192:26)

This makes me wonder if I should try specifying the markdownTemplateEngine in .eleventy.js. When I try markdownTemplateEngine: '11ty.js' with either of the last two examples (using a function plus a template literal, instead of a just a template literal, whether or not I pass the data object to the wrapping function), I get the following error.

> Having trouble rendering 11ty.js (and markdown) template ./_input/content/index.md (TemplateContentRenderError)
> Input data should be a String (Error):
    Error: Input data should be a String
        at MarkdownIt.parse (~/PROJECT/node_modules/markdown-it/lib/index.js:518:11)
        at MarkdownIt.render (~/PROJECT/node_modules/markdown-it/lib/index.js:543:36)
        at ~/PROJECT/node_modules/@11ty/eleventy/src/Engines/Markdown.js:66:38

PS, I get this error whether I use

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

or

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

And when I try it with either of the first two vanilla JS examples (using only a template literal, whether or not I pass the data object as a parameter to the wrapping function), I get the following error message.

> Cannot read property 'page' of undefined (TypeError):
    TypeError: Cannot read property 'page' of undefined
        at module.exports (~/PROJECT/_input/content/content/content.11tydata.js:5:23)
        at TemplateData.getDataValue (~/PROJECT/node_modules/@11ty/eleventy/src/TemplateData.js:240:31)

So I think I want to use something like my second not-yet-working-example:

// _input/content/content.11tydata.js
// Just in case I need to pass the data object as a parameter?
module.exports = function (data) {
  return {
    permalink: `/${data.page.fileSlug}/index.html`
  }
}

But, I’m not clear why liquid/nunjucks and .md templates have access to the data object vis-a-vis 11tydata.js files, however, as it appears, 11ty.js or .md templates vis-à-vis markdownTemplateEnjine: '11ty.js' and 11tydata.js files do not.

[paulshryock]

I would also like to access the page object in .11tydata.js directory data files.

Neither data, page, or this seems to return anything.

[reubenlillie]

If this issue is at all related to #665, then it seems that this code doesn’t work either:

module.exports = function (data) {
  return {
    permalink: `/${data.page.fileSlug(data)}/index.html`
  }
}

Nor does any of the other combinations in the thread.

[paulshryock]

665 does look related and promising looks like it's not the same, because it's about getting data from an .11tydata.js directory data file, and displaying it in a .11ty.js template file. This still doesn't explain how to access the page object in the directory data file itself.

[reubenlillie]

@zachleat, I originally tagged this as an education issue, thinking I’m just doing something wrong. But is this actually a bug?

[TigersWay]

No news/Nothing about this one? Should someone offer a PR for something like this:

module.exports = function (page, data) {
  return {
    .....
  }
}

[fredrikekelund]

This should be possible in v0.11 thanks to the new eleventyComputed feature. Docs are here.

[zachleat]

Sorry for the late reply here—@fredrikekelund is correct, Computed Data is the ticket here. Before that you were not able to pass data cascade data into data files.

Thanks!

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and I will reopen the issue. Thanks!