octoper/statamic-inline-assets

Inline CSS or JS file for Statamic 3

4.0.3 2021-01-08 08:59 UTC

Requires

• php: >=7.4
• illuminate/support: ^7.0 || ^8.0
• matthiasmullie/minify: ^1.3
• statamic/cms: ^3.0

MIT

• Vaggelis Yfantis

README

Inline assets

Looking for maintainers: As I'm not using Statamic these days and I don't have a the time to maintain the package I'm looking for anyone who want to take the ownerhip of it! You can reach out via email [e-mail]

Inline assets for Statamic

Installation

Require it using Composer.

composer require octoper/statamic-inline-assets

Inline Asset tag

Inline assets will inline your CSS or JS file to your HTML, or inline a file encoded with base64.

Inline assets can help you speed of your Statamic website by inlining critical CSS you can check more about that by reading this article Extract critical CSS

Templating

Pass a path to your file from the public directory to inline_assets tag.

<style>
{{ inline_assets:css src="css/site.css" }}
</style>

or

<script>
{{ inline_assets:js src="js/site.js" }}
</script>

You can also minify your js or css assets.

<script>
{{ inline_assets:js minify="true" src="js/site.js" }}
</script>

You usually got a chicken or the egg problem with critical css, so you can ignore if missing

<script>
{{ inline_assets:css ignore-missing="true" src="css/site.css" }}
</script>

You can also inline your file as an base64 encoded data stream, for example taking your favicon and including it inline.

<link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,{{ inline_assets:base64 src="favicon.ico" }}"/>

You usually got a chicken or the egg problem with critical css, so you can ignore if missing

<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,{{ inline_assets:base64 ignore-missing="true" src="favicons/favicon.svg" }}">

Security

If you discover any security related issues, please email [e-mail] instead of using the issue tracker.

Credits

• Vaggelis Yfantis

License

The MIT License (MIT). Please see License File for more information.