octoper / statamic-inline-assets
Inline CSS or JS file for Statamic 3
Installs: 67 614
Dependents: 0
Suggesters: 0
Security: 0
Stars: 6
Watchers: 1
Forks: 7
Open Issues: 7
Type:statamic-addon
Requires
- php: >=7.4
- illuminate/support: ^7.0 || ^8.0
- matthiasmullie/minify: ^1.3
- statamic/cms: ^3.0
- dev-master
- 4.0.3
- 4.0.2
- 3.0
- 2.0
- v1
- dev-dependabot/composer/symfony/http-kernel-5.4.20
- dev-dependabot/composer/guzzlehttp/guzzle-7.4.5
- dev-dependabot/composer/composer/composer-2.3.5
- dev-dependabot/composer/statamic/cms-3.2.39
- dev-dependabot/composer/guzzlehttp/psr7-1.8.5
- dev-dependabot/composer/league/flysystem-1.1.4
- dev-analysis-2Qd04g
This package is auto-updated.
Last update: 2024-11-04 11:22:12 UTC
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 me@octoper.me
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 me@octoper.me instead of using the issue tracker.
Credits
License
The MIT License (MIT). Please see License File for more information.