https://github.com/octoper/statamic-inline-assets
Inline CSS or JS file for Statamic 3
https://github.com/octoper/statamic-inline-assets
Last synced: 8 months ago
JSON representation
Inline CSS or JS file for Statamic 3
- Host: GitHub
- URL: https://github.com/octoper/statamic-inline-assets
- Owner: octoper
- License: mit
- Created: 2020-04-20T18:01:46.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-03-04T09:28:52.000Z (over 2 years ago)
- Last Synced: 2024-10-12T07:47:12.202Z (over 1 year ago)
- Language: PHP
- Homepage:
- Size: 151 KB
- Stars: 5
- Watchers: 1
- Forks: 7
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://github.com/octoper/statamic-inline-assets/releases)
# 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](https://web.dev/extract-critical-css/)
## Templating
Pass a path to your file from the public directory to `inline_assets` tag.
```twig
{{ inline_assets:css src="css/site.css" }}
```
or
```twig
{{ inline_assets:js src="js/site.js" }}
```
You can also minify your js or css assets.
```twig
{{ inline_assets:js minify="true" src="js/site.js" }}
```
You usually got a chicken or the egg problem with critical css, so you can ignore if missing
```twig
{{ inline_assets:css ignore-missing="true" src="css/site.css" }}
```
You can also inline your file as an base64 encoded data stream, for example taking your favicon and including it inline.
```twig
```
You usually got a chicken or the egg problem with critical css, so you can ignore if missing
```twig
```
## Security
If you discover any security related issues, please email [me@octoper.me](mailto:me@octoper.me) instead of using the issue tracker.
## Credits
- [Vaggelis Yfantis](https://github.com/octoper)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.