Skip to content

Commit

Permalink
📝 Update Readme
Browse files Browse the repository at this point in the history
  • Loading branch information
jonnitto authored Oct 18, 2017
1 parent a43be0d commit 53a17b5
Showing 1 changed file with 29 additions and 5 deletions.
34 changes: 29 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
Carbon.IncludeAssets Package for Neos CMS
=========================================

With this package, you get able to import all your CSS and Javascript assets with few lines of code in [Settings.yaml](Configuration/Settings.yaml). The best practice is to include `carbon/includeassets` into your `composer.json` from your site package. After that, you just can add your settings. Besides the filenames, you are also able to pass all your necessary attributes to the tags. If you are note able to provide a fileextension you can force the type via `(js)` or `(css)` at the end.
With this package, you get able to import all your CSS and Javascript assets with few lines of code in [Settings.yaml](Configuration/Settings.yaml). The best practice is to include `carbon/includeassets` into your `composer.json` from your site package. After that, you just can add your settings. Besides the filenames, you are also able to pass all your necessary attributes to the tags. If you are not able to provide a file extension, you can force the type via `(js)` or `(css)` at the end.

* You can pass the filenames as string (comma separated) or as an array
* If you want to add attributes, add it with square brackets e.g. `Filename.js[async data-prop data-attr="true" class="-js-loader"]`
* If you want to add attributes, add it with square brackets e.g.
`Filename.js[async data-prop data-attr="true" class="-js-loader"]`
* If you want to get a file included inline, just add the attribute `inline`: e.g. `Filename.css[inline]`
* You can add multiple resources per line. E. g. `Slider.js,Main.ss,//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js[async]`
* If you want to add Google Fonts, you just can write the down the fonts, e.g. `Lato|Open+Sans:400,700`
Expand Down Expand Up @@ -52,10 +53,34 @@ Carbon:
- LiveBody.js
```

Take a look at the [Settings.yaml](Configuration/Settings.yaml), there you see all available options.


Fusion Prototypes
-----------------
Basically, you have to folders with Fusion Prototypes: [Internal](Resources/Private/Fusion/Internal) and [External](Resources/Private/Fusion/External). In the External folder you will find some prototypes who you can help you in your development:

### [Carbon.IncludeAssets:Assets](Resources/Private/Fusion/External/Assets.fusion)
This prototype generates all your `script` and `style` tags. You have to set the property `location` to `Head` or `Body`.

### [Carbon.IncludeAssets:Collection](Resources/Private/Fusion/External/Collection.fusion)
This prototype generate your `script` and `style` tags from the certain setting entry. `location` and `context` are required properties.

### [Carbon.IncludeAssets:File](Resources/Private/Fusion/External/File.fusion)
The heart of this package. This prototype generates a `script` or `style` tag. You can pass a `file` (without the path) or the complete `path`. Be aware that you can also pass the attributes like described on top. To force a type you can write `(js)` or `(css)` at the end of `path` or `file`.

### [Carbon.IncludeAssets:FileContent](Resources/Private/Fusion/External/FileContent.fusion)
This prototype read a file from a `path` or `resource`. Used for including the files inline.

### [Carbon.IncludeAssets:GoogleFonts](Resources/Private/Fusion/External/GoogleFonts.fusion)
You can set the property `fonts` e.g. `Lato|Open+Sans:400,700` and the `script` tag get generated. Per default, this prototype read the [Settings.yaml](Configuration/Settings.yaml).

### [Carbon.IncludeAssets: HashOfFile](Resources/Private/Fusion/External/HashOfFile.fusion)
This prototype read a file from a `path` or `resource` and return a md5 based string.

Installation
------------

Most of the time you have to make small adjustments to a package (e.g. configuration in `Settings.yaml`). Because of that, it is important to add the corresponding package to the composer from your theme package. Mostly this is the site packages located under `Packages/Sites/`. To install it correctly go to your theme package (e.g.`Packages/Sites/Foo.Bar`) and run following command:
Most of the time you have to make small adjustments to a package (e.g., the configuration in `Settings.yaml`). Because of that, it is important to add the corresponding package to the composer from your theme package. Mostly this is the site packages located under `Packages/Sites/`. To install it correctly go to your theme package (e.g.`Packages/Sites/Foo.Bar`) and run following command:
```
composer require carbon/includeassets --no-update
```
Expand All @@ -65,5 +90,4 @@ The `--no-update` command prevent the automatic update of the dependencies. Afte

License
-------

Licensed under MIT, see [LICENSE](LICENSE)

0 comments on commit 53a17b5

Please sign in to comment.