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.