Asset · Mecha CMS

Add, remove, or replace asset files from/to HTML without touching the layout files. This extension works by finding two special places in the HTML document, i.e. right before the </head> and </body> tag, and then process all assets that have been added to the storage to be rendered as HTML tags in both places.

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Lorem Ipsum</title>
  •</head>
  <body>
    <p>Lorem ipsum dolor sit amet.</p>
  •</body>
</html>

The first place is generally used to insert CSS assets, and the second place is used to insert JavaScript assets.

Usage

This extension consists of three main methods:

Asset::get(array|string $path = null);
Asset::let(array|string $path = null);
Asset::set(array|string $path = null, float $stack = 10, array $lot = []);

The $path parameter can be an URL, a file path or a data URI. It can also be an array of those values. The $stack parameter is available only for the set method and serves to determine the insertion position between assets. The bigger the value, the lower the asset position will be. You use the $lot parameter to provide additional data. This data is useful for the asset parser. By default, this data will be used as HTML attributes.

// Given this statement…
Asset::set('.\lot\asset\file-1.css', 3);
Asset::set('.\lot\asset\file-2.css', 1);
Asset::set('.\lot\asset\file-3.css', 2, ['media' => 'screen']);

// Will produce this result…
// <link href="http://127.0.0.1/lot/asset/file-2.css" rel="stylesheet">
// <link href="http://127.0.0.1/lot/asset/file-3.css" media="screen" rel="stylesheet">
// <link href="http://127.0.0.1/lot/asset/file-1.css" rel="stylesheet">

To append CSS assets to the <head> section, write this code in an index.php file:

Asset::set('.\lot\asset\file.css');

To append inline CSS assets to the <head> section, write this code in an index.php file:

$style = <<<CSS
:root {
  --background: #fff;
  --color: #000;
}
body {
  background: var(--background);
  color: var(--color);
}
CSS;

Asset::set('data:text/css;base64,' . To::base64($style));

To append JavaScript assets to the <body> section, write this code in an index.php file:

Asset::set('.\lot\asset\file.js');

To append inline JavaScript assets to the <body> section, write this code in an index.php file:

$script = <<<JS
document.documentElement.classList.add('js');
JS;

Asset::set('data:text/js;base64,' . To::base64($script));

You can also use the standard JavaScript MIME type as defined in the specification:

Asset::set('data:text/javascript;base64,' . To::base64($script));

Shortly after being added, this extension will process the file path and then it will be rendered as <link> or <style> tags for CSS files and <script> tags for JavaScript files.