Inline

Inline CSS, JavaScript, SVG, and images in the HTML.

Installation

Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import inline from "lume/plugins/inline.ts";

const site = lume();

site.use(inline({/* your config here */}));

export default site;

See all available options in Deno Doc.

Description

This plugin allows you to inline some sources, like CSS, images, or JavaScript, in the HTML automatically. Any HTML tag with the inline attribute will be included in the HTML. For example:

<link rel="stylesheet" href="/css/my-styles.css" inline>

<script src="/js/my-scripts.js" inline></script>

<img src="/img/avatar.png" inline>

<img src="/img/logo.svg" inline>

The source file must be exported to the dest directory; there's no support for external URLs.

SVG inline

Bitmap images (like .png or .jpeg) are inlined as base64 data but SVG images are replaced by the <svg> element. The new <svg> elements will keep the same class and id attributes as the replaced <img>.

For example, this image:

<img src="icon.svg" class="icon" id="icon-1" inline>

Will become:

<svg width="180px" height="180px" xmlns="http://www.w3.org/2000/svg" class="icon" id="icon-1">
...
</svg>