Eleventy shortcodes and filters to add an inline favicon image to a link.
MIT License
Eleventy shortcodes and filters to add an inline favicon image to a link.
npm install eleventy-plugin-inline-link-favicon
Add the plugin to your .eleventy.js
config file:
const pluginInlineLinkFavicon = require("eleventy-plugin-inline-link-favicon")
module.exports = (eleventyConfig) => {
eleventyConfig.addPlugin(pluginInlineLinkFavicon)
}
This plugin comes with two mechanisms to create an inline link favicon. You can use a paired shortcode or a filter, both referenced as ai
. ai
is short for anchor-image.
{% ai "https://front-end.social/@brian" %}@brian{% endai %}
returns
<a href="https://front-end.social/@brian"
><img
alt="favicon for https://front-end.social/@brian"
loading="lazy"
style="max-height: 1em; position: relative; top: 0.2em; margin-right: 0.2em"
src="https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=https://front-end.social/@brian&size=128"
/>@brian</a
>
{{ "https://front-end.social/@brian" | ai("@brian") | safe }}
returns the same as above.
Authoring content with this plugin is aided by user-defined snippets:
{
"ai": {
"scope": "markdown,nunjucks",
"prefix": "ai",
"body": ["{% ai \"$1\"%}$2{% endai %}$0"],
"description": "add an inline link favicon"
}
}