Adding the ability to inline CSS and Js code via Asset Manager

[OliverO2]

This pull request makes Grav's Asset Manager support 'inline' as a new loading option for CSS and Js assets. It also tries to simplify things by extracting common code from addCss() and addJs() into a new helper function (though the same could still be done for output and pipeline functions).

Inlining CSS and Js resources can speed up rendering, particularly over mobile networks. It is not always feasible to directly include assets into the template, for example, where Sass-complied CSS is used or where CSS or Js is imported from external sites to load fonts.

Enabling any CSS and Js asset to become inline makes it easy to optimize for speed and to reduce flashes of unstyled content without having to re-structure or re-process asset files.

A slightly simplified real world use case:

system.yaml uses collections to group assets by loading method:

assets:
  collections:
    css-inline:
      - 'http://fonts.googleapis.com/css?family=Ubuntu:400|Open+Sans:400,400i,700'
      - 'theme://css-compiled/app.css'
    js-inline:
      - 'https://use.fontawesome.com/<embedcode>.js'
    js-async:
      - 'theme://foundation/dist/assets/js/app.js'
      - 'theme://js/header-display.js'

The template inserts these into different asset groups depending on loading requirements (defaulting to inline):

        {% block stylesheets %}
            {% do assets.addCss('css-inline') %}
            {% do assets.addCss('css-link', {'group': 'head-link'}) %}
        {% endblock %}
        {{ assets.css('head-link') }}
        {{ assets.css('head', {'loading': 'inline'}) }}
        {% block javascripts %}
            {% do assets.addJs('js-inline') %}
            {% do assets.addJs('js-async', {'group': 'head-async'}) %}
        {% endblock %}
        {{ assets.js('head-async', {'loading': 'async'}) }}
        {{ assets.js('head', {'loading': 'inline'}) }}

See also: #754

[OleVik]

Could elaborate on how this differs from the already existing AddInlineCSS and AddInlineJS? Does it, like 754, add the ability to inline the entirety of the file in a <style>- or <script>-tag?

[OliverO2]

@OleVik Yes, exactly: This PR adds the ability to inline the entirety of the file's (or an entire pipeline's) contents in a <style>- or <script>-tag. It works for local files as well as remote URLs.

[rhukster]

This PR looks promising. I'm traveling for a week so won't really have chance to thoroughly test this until I get back.

[OliverO2]

@rhukster Thanks! Don't worry, take your time. I've included some test cases and I'm already using this on a production site.

[rhukster]

Looks good 👍

[OliverO2]

Cool, thanks! 😃