search

11ty / eleventy

A simpler site generator. Transforms a directory of templates (of varying types) into HTML.
https://www.11ty.dev/
MIT License
17.29k stars 496 forks source link

Serverless does not let me paginate with JavaScript or pass a path slug to an async function and store the result in front matter #2068

Closed kkgthb closed 7 months ago

kkgthb commented 3 years ago

Describe the bug

  1. JavaScript-based (rather than YAML-based) serverless pagination, which is necessary when you want to do some fancy manipulation of data as you put it into EleventyComputed, doesn't like it when you try to set a permalink that doesn't have a string-literal value. Error: the "path" argument must be of type string. Received type boolean (false) Sample code
  2. In a non-paginated, more conventional serverless template, the variable eleventy.serverless.path isn't in scope at any point at which you can set front matter via an asynchronous function. This means that if your template's parent layout has, say, <head><title>{{ title }}</title></head> in it, you can't set a page-wide value for the variable title that involves querying it by passing eleventy.serverless.path.your_slug to a headless CMS and fetching the page data. Setting {% assign title = ... %} down in the template body doesn't help, as that isn't seen by the parent layout's {{ title }}. Error: ReferenceError: eleventy is not defined. Sample code.
    • As a variant on number 2, trying to use YAML-based front matter instead of an .11ty.js template doesn't help, either, because asynchronous filters don't seem to actually get called properly: Liquid sample code, Nunjucks sample code

To Reproduce

  1. Fork & spin up https://github.com/kkgthb/web-site-11ty-10-serverless-api-pagination
  2. Take -BROKEN off the end of a template file
  3. Watch 11ty crash (JavaScript files) or render insufficient content (Liquid/Nunjucks files).

Expected behavior I expect to be able to populate the page-data / front-matter of pages I'm generating with 11ty serverless from fresh API calls against my headless CMS. Sadly, I can't.

Environment:

Additional context The goal is to save on build time by first-view-time rendering each of the "event detail" pages of a calendar with thousands of events in its history. All data for the site is stored in Sanity.io.

It needs to be easy to get data into the title tags, OG cards, etc. of each page. Such HTML is generated by shared site-wide layouts, so simply assigning a value in the "inner body" of the template as seen at Algolia's recent blog post does not suffice.

I also had no luck trying the YAML-front-matter-based approach seen at 44:35 of Ben & Zach's June video. Although they seem to manage to get it to reference eleventy.serverless.path from front matter, Nunjucks & Liquid don't seem to be able to pass eleventy.serverless.path.my_slug_key to an asynchronous function (contacting my headless CMS) cleanly. See Liquid sample code, Nunjucks sample code. Also, even if I could get that to work, it'd break everything else I'm doing in my site, which is built with Liquid because I need its parameterized includes syntax, and doing a handoff from a Nunjucks parent to a Liquid child (with liquid parent templates) doesn't seem to work too well.

zachleat commented 7 months ago

Stale per project slipstream changes in #3074.