eleventy-plugin-embed-twitter
v1.4.1
Published
An Eleventy plugin to automatically embed Tweets, using just their URLs.
Downloads
4,784
Maintainers
Readme
eleventy-plugin-embed-twitter
This Eleventy plugin automatically embeds Tweets from URLs in markdown files.
Install in Eleventy
In your Eleventy project, install the plugin through npm:
$ npm i eleventy-plugin-embed-twitter
Then add it to your Eleventy config file (usually .eleventy.js
):
const embedTwitter = require("eleventy-plugin-embed-twitter");
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(embedTwitter);
};
Usage
To embed a Tweet into any markdown page, paste its URL into a new line. The URL should be the only thing on that line.
Markdown file example:
...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vehicula, elit vel condimentum porta, purus.
https://twitter.com/SaraSoueidan/status/1289865845053652994s
Maecenas non velit nibh. Aenean eu justo et odio commodo ornare. In scelerisque sapien at.
...
Result:
Configure
Plugin default options
The plugin’s default settings reside in lib/pluginDefaults.js. Pass an options object to the plugin to override any of its default settings.
Caching Tweet content as plain HTML
By default, the plugin does not save the text of the Tweet as plain HTML. That’s because doing so requires making a network request to Twitter. By default, we don’t make network calls unless you decide to enable them. To save the complete Tweet text when processing files in Eleventy, turn on the cacheText
option:
eleventyConfig.addPlugin(embedTwitter, {
cacheText: true,
});
As of v1.3.6, cacheText
uses eleventy-fetch
to download the text of the Tweet and cache it locally for up to 5 minutes, which reduces the overall number of network calls and speeds up builds. You can configure the cache timing with the cacheDuration
option. If the plugin experiences any network failure (such as if you're not connected to the internet), then it simply won’t complete the embed and the Tweet URL will be rendered as plain text.
Notes and caveats
- This plugin is deliberately designed only to embed when the URL is on its own line, and not inline with other text.
- To do this, it uses a regular expression to recognize Twitter URLs, wrapped in an HTML
<p>
tag or, optionally, additionally wrapped in an anchor tag. If your Markdown parser produces any other output, it won’t be recognized. - The plugin supports common URL variants as well. Check the supported URL variants to see the complete list, but there are conceivably valid Twitter URLs that wouldn’t be recognized. Please file an issue if you run into an edge case!
- This plugin uses transforms, so it alters Eleventy’s HTML output as it’s generated. It doesn’t alter the source markdown.
- By necessity, this plugin will add a call to Twitter’s third-party JavaScript file. It does this once per page, if that page contains a Twitter embed.
- Currently the plugin supports only individual Tweets. Embedding timelines, lists, or Twitter Moments isn’t possible right now.