eleventy-plugin-inline-link-favicon
v1.1.0
Published
Adds an inline image of the link's domain's favicon
Downloads
11
Maintainers
Readme
eleventy-plugin-inline-link-favicon
Eleventy shortcodes and filters to add an inline favicon image to a link.
Install
npm install eleventy-plugin-inline-link-favicon
Configuration
Add the plugin to your .eleventy.js
config file:
const pluginInlineLinkFavicon = require("eleventy-plugin-inline-link-favicon")
module.exports = (eleventyConfig) => {
eleventyConfig.addPlugin(pluginInlineLinkFavicon)
}
Usage
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.
Paired Shortcode
{% 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
>
Filter
{{ "https://front-end.social/@brian" | ai("@brian") | safe }}
returns the same as above.
Snippets / Completions
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" } }
Credits
- Thanks to 5t3ph/eleventy-plugin-template for inspiration
- Thanks to this blog by Jim Nielsen as inspiration.