Comments (4)
Hey @Antonio-Laguna!
Thanks for filing this! The Eleventy 1.0 release has been on my mind and this is a good prompt to dig into it more.
Can you share the exact HTML markup that's generated with 0.12.1 and 1.0.0? And with the plugin both active and inactive? Since the plugin works using regular expressions on the HTML generated by Eleventy, I could imagine a scenario where the regex gets greedy with the HTML elements and removes a paragraph by mistake. But I think I'd need to see the markup.
I haven't been able to duplicate this issue yet (see below), but I definitely agree that it warrants more investigation. I would love to improve the testing setup so it more closely resembles a real Eleventy build environment, but I must admit I'm not sure how to go about it right now. I'll do some more research but suggestions definitely welcome!
Attempting to duplicate
Here's my attempt to duplicate on my own local environment, using 11ty 1.0-beta.2:
As you can see, the paragraph between the two embeds is preserved in my setup. I also tested with YouTube URLs and got the same result.
from eleventy-plugin-embed-twitter.
I've edited my previous comment since it's not the full story.
So I've narrowed it down to being a combination of things.
Whenever htmlmin is enabled like this:
eleventy.addTransform('htmlmin', function(content, outputPath) {
if (outputPath.indexOf('.html') > -1) {
return htmlmin.minify(content, {
removeAttributeQuotes: true,
collapseBooleanAttributes: true,
collapseWhitespace: true,
sortClassName: true,
sortAttributes: true,
html5: true,
decodeEntities: true,
minifyCSS: true
});
}
return content;
});
You can reproduce the issue with this minimum Markdown:
One
https://twitter.com/ftrain/status/1392836004369866754
Two
You get this HTML
<p>One</p>
<p><a href="https://twitter.com/ftrain/status/1392836004369866754" target="_blank" rel="noreferrer">https://twitter.com/ftrain/status/1392836004369866754</a></p>
<p>Two</p>
And it goes through the minifier and comes back as:
<p>One</p><p><a href=https://twitter.com/ftrain/status/1392836004369866754 rel=noreferrer target=_blank>https://twitter.com/ftrain/status/1392836004369866754</a></p><p>Two</p>
The whole pipeline though outputs this:
<p>One</p><div class="eleventy-plugin-embed-twitter"><blockquote class="twitter-tweet" data-lang="es" data-dnt="true"><p lang="en" dir="ltr">We absolutely all need to calm down, and yet there is absolutely no chance that we will all calm down.</p>— Microsoft Fright Stimulator (@ftrain) <a href="https://twitter.com/ftrain/status/1392836004369866754?ref_src=twsrc%5Etfw">13 de mayo de 2021</a></blockquote>
</div>
What's different on Eleventy 0.12.1 ? It looks like it's run before compression like this:
<p>One</p>
<div class="eleventy-plugin-embed-twitter"><blockquote class="twitter-tweet" data-lang="es" data-dnt="true"><p lang="en" dir="ltr">We absolutely all need to calm down, and yet there is absolutely no chance that we will all calm down.</p>— Microsoft Fright Stimulator (@ftrain) <a href="https://twitter.com/ftrain/status/1392836004369866754?ref_src=twsrc%5Etfw">13 de mayo de 2021</a></blockquote>
</div>
<p>Two</p>
After compression:
<p>One</p><div class=eleventy-plugin-embed-twitter><blockquote class=twitter-tweet data-dnt=true data-lang=es><p dir=ltr lang=en>We absolutely all need to calm down, and yet there is absolutely no chance that we will all calm down.</p>— Microsoft Fright Stimulator (@ftrain) <a href="https://twitter.com/ftrain/status/1392836004369866754?ref_src=twsrc%5Etfw">13 de mayo de 2021</a></blockquote></div><p>Two</p>
So I assume that somehow the order of transforms has changed between transforms and plugins and the regex is greedy indeed. Will dig more on the Eleventy side since I'm not confident on this change from Eleventy though. Let's see :)
from eleventy-plugin-embed-twitter.
Definitely, the Regex is a bit greedy with subsequent paragraphs
A test case like this fails:
/**
* TEST: Build script returns expected HTML string, given valid input and default options
*/
validStrings.forEach(function(obj) {
test(
`${obj.type} default embed behavior with subsequent paragraph.`,
(t) => {
const idealCase = `<p>${obj.str}</p><p>Foo</p>`;
const tweetObj = extractMatch(idealCase);
const output = buildEmbed(tweetObj, pluginDefaults, 0);
const expected = '<div class="eleventy-plugin-embed-twitter"><blockquote id="tweet-1289865845053652994" class="twitter-tweet"><a href="https://twitter.com/SaraSoueidan/status/1289865845053652994"></a></blockquote></div><script src="https://platform.twitter.com/widgets.js" charset="utf-8" async></script><p>Foo</p>';
t.is(output, expected);
},
);
});
from eleventy-plugin-embed-twitter.
Got it — the plugin regex is too greedy right now, and if it runs after htmlmin, it'll consume and replace all trailing paragraph elements, since it's all one line.
Sounds pretty fixable — I'll look at refactoring ASAP. Thanks so much for investigating further!
from eleventy-plugin-embed-twitter.
Related Issues (5)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from eleventy-plugin-embed-twitter.