Plugins

Inline

This plugin allows to inline some sources, like CSS, images or JavaScript, in the HTML automatically. It is disabled by default, so you have to enable it in the _config.js file:

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

site.use(inline());

Now, 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>

It's converted to:

<style>
  /* Content of the CSS file */
</style>

<script>
  // Content of the js file
</script>

<img src="data:image/png;base64,...">

<svg>...</svg>

Note that bitmap images will be inlined as base64 data but svg images are replaced by the <svg> elements itself. The source file must be in the dest directory (usually _site), there's no support for external URLs yet.