eleventy
eleventy copied to clipboard
11ty
Edge plugin: Issue with HTML Minification and Eleventy Edge
Many minifies HTML, likely removing HTML comments from the generated files. This will break Edge plugin since it relies on HTML comments to replace the content.
We should mention that the user should be mindful about the HTML comments.
See #2409, Like me others also wondering suddenly Edge plugin don't work on Netlify!
I wonder if also an option to wrap with a custom identifier would be good.
In your case <!-- htmlmin:ignore --> https://github.com/kangax/html-minifier#ignoring-chunks-of-markup
https://kangax.github.io/html-minifier/
Thanks a lot for that tip!
I hadn't dig through html-minifier docs. My bad.
See my hack 🤢:
<!DOCTYPE html>
{% edge "njk" %}<html dir="ltr" lang="en" data-user-color-scheme="{{ eleventy.edge.cookies.appearance | default("auto", true) }}">{% endedge %}
{% edge "njk" %}{{"<!--" | safe}}{% endedge %}
<html dir="ltr" lang="en">
{% edge "njk" %}{{"-->" | safe}}{% endedge %}
...
</html>
I think the other thing that’s warranted here is a one-off build time warning that checks one output file (using {% edge %}) post-build to make sure the Edge comments exist. If not, throw an error message
Related https://github.com/11ty/eleventy/discussions/2409 and https://github.com/11ty/eleventy/issues/2399
Thanks a lot for that tip!
I hadn't dig through html-minifier docs. My bad.
See my hack 🤢:
<!DOCTYPE html> {% edge "njk" %}<html dir="ltr" lang="en" data-user-color-scheme="{{ eleventy.edge.cookies.appearance | default("auto", true) }}">{% endedge %} {% edge "njk" %}{{"<!--" | safe}}{% endedge %} <html dir="ltr" lang="en"> {% edge "njk" %}{{"-->" | safe}}{% endedge %} ... </html>
Sorry, this hack was made to populate the value of data attribute using Edge function. The result I wanted was :
<html dir="ltr" lang="en" data-user-color-scheme="auto">
It looks to me the <html ...> tag generated by the example Dark toggle generates an invalid markup. The generated <html> tag end up like:
<!DOCTYPE html>
<html lang="en"<!--ELEVENTYEDGE_edge "liquid" %} class="theme-{{ elev enty.edge.cookies.appearance | default: "auto" | escape }}"ELEVENTYED GE_edge-->>
The comment inside the <html ... > tag breaks some HTML parsers. In my, case a couple of plugins which use Cheerio corrupts the generated page. So I end up writing the above hack to generate the markup I need.
Hey, I've stumbled over this thread as I had the same problem. I've solved it by removing removeComments: true, from the options of html-minifier.
Per the Eleventy Community Survey results and our refocus and prioritization towards our roots as a static site generator, we’re going to be deprecating Edge in 3.0 and closing issues related to the Edge plugin. I’m very sorry to have to do this—but unfortunately this was a necessary decision to allow the project to continue forward.
Read more: https://www.zachleat.com/web/eleventy-side-project/ https://www.11ty.dev/blog/community-survey-results/