Closed rijkvanzanten closed 1 year ago
FWIW the custom dir input/output configuration in .eleventy.js
doesn't seem to matter for this bug
Update!
This is caused by the fact that the permalink
is rendered by the engine used for the current file (for example a .liquid
file uses Liquid for the permalink). For most of the default supported rendering engines, the {{ }}
syntax for the permalink (as per the docs) works to render a basic string inline, however webc
doesn't have such a syntax. Instead, to make things work, you gotta use permalink: 'books/<template webc:type="11ty" 11ty:type="njk">{{ book.title | slugify }}</template>/'
instead of permalink: "books/{{ book.title | slugify }}/"
For other people coming across this, you can achieve the same without having to rely on a nested rendering engine as follows:
permalink: '/example/<template webc:nokeep @html="slugify(data.example)"></template>/'
Just for future visitors this bug was fixed with WebC v0.7.0! https://github.com/11ty/eleventy-plugin-webc/issues/27 No workaround needed!
I am going to move this over to the Eleventy WebC plugin repo, thanks!
I am going to move this over to the Eleventy WebC plugin repo, thanks!
My bad! Was still trying to find my way around the org structure at the time ☺️ Thanks for the fix!
Hey, has this regressed? I've been getting the duplicate files error with the current versions of Eleventy & WebC. I put together a repro repo if its helpful?
https://github.com/robb-j/eleventy-webc-pagination-permalink-repro
I'm trying to do a permalink with pagination and I can't get it working
layout: html.webc
pagination:
data: members.users
size: 1
alias: member
resolve: values
permalink: 'share/{{ member.username | hash }}/index.html'
@robb-j the takeaway here is that you can’t use njk
or liquid
syntax in a WebC template permalink. You need to use WebC syntax! https://github.com/11ty/eleventy-plugin-webc/issues/36#issuecomment-1355594796 has a good explanation
Hey @zachleat, I've tried that but it still doesn't seem to be working? I tried in the repro repo, so my webc page is this now:
---
layout: html.webc
pagination:
data: members.users
size: 1
alias: member
resolve: values
permalink: 'share/<template webc:type="11ty" 11ty:type="njk">{{ member.username | hash }}</template>/'
---
<main>
<h1>Hello there</h1>
<section class="headshot">
<p>Hi, <template @text="member" webc:nokeep></template></p>
</section>
</main>
paginating this data file:
{
"users": [
{ "username": "geoff-testington" },
{ "username": "jess-smith" },
{ "username": "phil-wang" }
]
}
but I'm still getting the DuplicatePermalinkOutputError:
[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] Output conflict: multiple input files are writing to `_site/share/<template webc:type="11ty" 11ty:type="njk">{{ member.username | hash }}</template>/index.html`. Use distinct `permalink` values to resolve this conflict.
[11ty] 1. ./page.webc
[11ty] 2. ./page.webc
[11ty] 3. ./page.webc (via DuplicatePermalinkOutputError)
[11ty]
[11ty] Original error stack trace: (Repeated output has been truncated…)
[11ty] at TemplateMap.checkForDuplicatePermalinks (/Users/rob/tmp/eleventy-webc-pagination-permalink-repro/node_modules/@11ty/eleventy/src/TemplateMap.js:803:13)
[11ty] at TemplateMap.cache (/Users/rob/tmp/eleventy-webc-pagination-permalink-repro/node_modules/@11ty/eleventy/src/TemplateMap.js:488:10)
[11ty] at async TemplateWriter._createTemplateMap (/Users/rob/tmp/eleventy-webc-pagination-permalink-repro/node_modules/@11ty/eleventy/src/TemplateWriter.js:330:5)
[11ty] at async TemplateWriter.generateTemplates (/Users/rob/tmp/eleventy-webc-pagination-permalink-repro/node_modules/@11ty/eleventy/src/TemplateWriter.js:360:5)
[11ty] at async TemplateWriter.write (/Users/rob/tmp/eleventy-webc-pagination-permalink-repro/node_modules/@11ty/eleventy/src/TemplateWriter.js:407:23)
[11ty] at async Eleventy.executeBuild (/Users/rob/tmp/eleventy-webc-pagination-permalink-repro/node_modules/@11ty/eleventy/src/Eleventy.js:1191:13)
looking with DEBUG=1
there is another error actually:
Eleventy:WebC Error evaluating dynamic permalink, returning raw string contents instead: 'share/<template webc:type="11ty" 11ty:type="njk">{{ member.username | hash }}</template>/'
Eleventy:WebC Error: Check the permalink for ./page.webc
Eleventy:WebC Original error message: Unexpected token '<'
Eleventy:WebC at ModuleScript.evaluateScript (/Users/rob/tmp/eleventy-webc-pagination-permalink-repro/node_modules/@11ty/webc/src/moduleScript.cjs:71:10)
Eleventy:WebC at Object.<anonymous> (/Users/rob/tmp/eleventy-webc-pagination-permalink-repro/node_modules/@11ty/eleventy-plugin-webc/src/eleventyWebcTemplate.js:80:49)
Eleventy:WebC at Template._renderFunction (/Users/rob/tmp/eleventy-webc-pagination-permalink-repro/node_modules/@11ty/eleventy/src/TemplateContent.js:405:27)
Eleventy:WebC at Template.renderPermalink (/Users/rob/tmp/eleventy-webc-pagination-permalink-repro/node_modules/@11ty/eleventy/src/TemplateContent.js:454:19)
Eleventy:WebC at async Template._getLink (/Users/rob/tmp/eleventy-webc-pagination-permalink-repro/node_modules/@11ty/eleventy/src/Template.js:251:24)
Eleventy:WebC at async Template.getOutputLocations (/Users/rob/tmp/eleventy-webc-pagination-permalink-repro/node_modules/@11ty/eleventy/src/Template.js:301:16)
Eleventy:WebC at async Pagination.getPageTemplates (/Users/rob/tmp/eleventy-webc-pagination-permalink-repro/node_modules/@11ty/eleventy/src/Plugins/Pagination.js:419:51)
Eleventy:WebC at async Template.getTemplates (/Users/rob/tmp/eleventy-webc-pagination-permalink-repro/node_modules/@11ty/eleventy/src/Template.js:705:27)
Eleventy:WebC at async TemplateMap.initDependencyMap (/Users/rob/tmp/eleventy-webc-pagination-permalink-repro/node_modules/@11ty/eleventy/src/TemplateMap.js:414:22)
Eleventy:WebC at async TemplateMap.cache (/Users/rob/tmp/eleventy-webc-pagination-permalink-repro/node_modules/@11ty/eleventy/src/TemplateMap.js:458:5) +1ms
I don't understand how to make use of "no workaround needed" solution.
I tried this:
permalink: 'blog/history/<template webc:nokeep @html="pagination.pageNumber + 1"></template>/index.html'
I still have the DuplicatePermalinkOutputError
.
I've read it has to be WebC syntax but that looks to me like a combination of HTML, WebC, & JavaScript syntax, and very much like a hacky workaround.
I'm probably doing something wrong.
I don't see any reason not to just use Liquid for the files that need pagination with a dynamic permalink.
Describe the bug
When rendering a paginated page that is a
.webc
component, I'm getting a DuplicatePermalinkOutputError. It seems to work as expected withnjk
or other rendering engines (from what I can tell). This feels very similar to https://github.com/11ty/eleventy/issues/2333, but seeing that was confirmed fixed, I'm not sure if it's the exact same cause.To Reproduce
Setup the following structure:
with the following contents:
src/_data/test.json
src/index.webc
.eleventy.js
When you try building the site with eleventy, witness the following error:
Expected behavior
By changing
.webc
to.njk
or another rendering engine, note how it works as expected:WebC should work the same here
Environment: