Error for dynamic permalink in JS

solution-loisir commented 1 year ago

          You could also use a JS function for this as well (with JS front matter) and bypass the webc parsing altogether:

---js
{
  permalink: function(data) {
    return "`/${this.slugify(data.item.title)}/`";
  }
}
---

https://www.11ty.dev/docs/data-frontmatter/#javascript-front-matter

Originally posted by @zachleat in https://github.com/11ty/eleventy-plugin-webc/issues/42#issuecomment-1374153546

solution-loisir commented 1 year ago

I'm getting a syntax error when defining dynamic permalink in JS frontmatter like above or in JS data file (see also the comments in #32).

For this frontmatter:

---js
{
  title: "About",
  description: "This page explains what WebC is all about!",
  lang: "en",
  permalink: function(data) {
    return "`/${this.slugify(data.title)}/`";
  }
}
---

I get this error:

Function statements require a function name (via SyntaxError)

```bash [11ty] Original error stack trace: evalmachine.:1 [11ty] function(data) { [11ty] ^^^^^^^^ [11ty] [11ty] SyntaxError: Function statements require a function name [11ty] at new Script (node:vm:100:7) [11ty] at createScript (node:vm:257:10) [11ty] at Object.runInNewContext (node:vm:298:10) [11ty] at Function.evaluateScript (/home/mathieu/webc-starter-kit/node_modules/@11ty/webc/src/moduleScript.cjs:62:25) [11ty] at Object. (/home/mathieu/webc-starter-kit/node_modules/@11ty/eleventy-plugin-webc/src/eleventyWebcTemplate.js:70:26) [11ty] at Template._renderFunction (/home/mathieu/webc-starter-kit/node_modules/@11ty/eleventy/src/TemplateContent.js:398:27) [11ty] at Template.renderPermalink (/home/mathieu/webc-starter-kit/node_modules/@11ty/eleventy/src/TemplateContent.js:447:19) [11ty] at async Template._getLink (/home/mathieu/webc-starter-kit/node_modules/@11ty/eleventy/src/Template.js:252:24) [11ty] at async Template.getOutputLocations (/home/mathieu/webc-starter-kit/node_modules/@11ty/eleventy/src/Template.js:302:16) [11ty] at async Template.addComputedData (/home/mathieu/webc-starter-kit/node_modules/@11ty/eleventy/src/Template.js:614:28) [11ty] Wrote 0 files in 0.23 seconds (v2.0.0-beta.2) ```

Maybe I doing something wrong. As stated in #42, using dynamic attribute syntax in YAML frontmatter does work ex.

permalink: "`/${page.fileSlug}/`"

It just doesn't seem to work in JS for me.

solution-loisir commented 1 year ago

Seems to be the same issue as #50, and especially to this comment.

zachleat commented 1 year ago

Duplicate of #32, please subscribe over there!

Related: #47 #52

11ty / eleventy-plugin-webc

Error for dynamic permalink in JS #49