Inline remote assets plugin for Pattern Lab Node
| This is a fork from plugin-node-patternlab-inline-assets that is mainly meant to provide the functionality to inline remote assets. |
|---|
The remote inline assets plugin for Pattern Lab Node can be used to inline assets into your templates.
Installation
Add the inline assets plugin to your project using npm:
npm install --save plugin-node-patternlab-inline-remote-assets
After that tell Pattern Lab to install the plugin:
gulp patternlab:installplugin --plugin=plugin-node-patternlab-inline-remote-assets
which will install and enable the plugin. You're now ready to use it.
Configuration
Post-installation, you will see the following in your patternlab-config.json:
"plugins": {
"plugin-node-patternlab-inline-remote-assets": {
"enabled": true,
"initialized": false,
"options": {}
}
}Elsewhere please add the plugin-node-patternlab-inline-remote-assets entry manually to the plugins entry.
Usage
Use three curly brackets to tell handlebars to stop escaping, then call the inline plugin and pass a path to your asset, as well as an alternative text (rendered as alt-attribute for images).
{{{inline-remote-asset 'https://img.shields.io/npm/v/plugin-node-patternlab-inline-remote-assets.svg' 'Alternative text'}}}
The remote asset will then be inlined into your template before compiling.
Differentiating in between images and other assets
All images contents would get base64 encoded and inserted as <img width=… height=… alt=…> tags. Other filetypes are getting outputted sanitized by dompurify directly.
Thanks
The inline remote assets plugin for Pattern Lab Node was created and is maintained by Maximilian Franzke. As mentioned above this is a fork from plugin-node-patternlab-inline-assets that is mainly meant to provide the functionality to inline remote assets.