Building a bundle for local copy of font-awesome

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Building a bundle for local copy of font-awesome

fbristow
Hi all,
I'm now using Dandelion 1.0.1.

We've tried to build a bundle for a local copy of font-awesome. The bundle looks like:

{
  "bundle": "font-awesome",
  "assets": [
    {
      "name": "font-awesome",
      "version": "4.3.0",
      "type": "css",
      "locations": {
        "webapp": "/resources/bower_components/font-awesome/css/font-awesome.css"
      }
    }
  ]
}

A problem that we encountered with this is that the font-awesome CSS file uses a relative path to load fonts (like ../fonts/fontawesome-webfont.eot).

I tried using the CSS URL rewriting feature, but:

1. I couldn't use the rewriting feature without first enabling the JavaScript compressor (papercut: having to enable the key asset.minification to get css url rewriting working is confusing, maybe the key could be renamed something like asset.enable.processors?)
2. The URLS that were written out by the rewriter were completely empty.

The request that's coming from the browser for the font includes the cache key for the "parent" resource (in this case, font-awesome.css) because the path in the CSS file is relative.

Dandelion itself doesn't currently support resources other than JS or CSS files, as defined in the AssetType enum, so in order to get this to work, I wrote a wrapper around DandelionServlet that will look up relative paths for non-CSS and non-JS resources using the cache key for the "parent" resource.

This is functional, but feels kind of yucky.

Are there any community recommendations about how to approach this? Is this something that should be made into a feature request for Dandelion, or are we abusing/misusing Dandelion to serve assets like Font Awesome?

Input is appreciated!
Reply | Threaded
Open this post in threaded view
|

Re: Building a bundle for local copy of font-awesome

Thibault Duchateau
Administrator
Hi Franklin,

In this case, fontawesome can be considered as a vendor library. As such, you should create a vendor bundle. In order to create a bundle, just put the bundle file (*.json) in the dandelion/vendor folder within your classpath. This way, the asset will be rendered as-is, with a URL pointing directly to /resources/bower_components/font-awesome/css/font-awesome.css, leading to no issue with relative paths.
Note however that since the bundle is now considered as "vendor", all registered assets will always be rendered as-is, i.e. without any versioning policy or any processing.

fbristow wrote
{
  "bundle": "font-awesome",
  "assets": [
    {
      "name": "font-awesome",
      "version": "4.3.0",
      "type": "css",
      "locations": {
        "webapp": "/resources/bower_components/font-awesome/css/font-awesome.css"
      }
    }
  ]
}
Just a few notes:
* the bundle, name and type attributes are no longer necessary. Dandelion will compute them implicitely:

bundle: fontawesome.json => fontawesome
name: .../font-awesome/css/font-awesome.css => font-awesome
type: .../font-awesome/css/font-awesome.css => css

* I've tried to download fontawesome using Bower, and I get a different location from the one you've mentioned: "/resources/bower_components/fontawesome/css/font-awesome.css".

fbristow wrote
A problem that we encountered with this is that the font-awesome CSS file uses a relative path to load fonts (like ../fonts/fontawesome-webfont.eot).

I tried using the CSS URL rewriting feature, but:

1. I couldn't use the rewriting feature without first enabling the JavaScript compressor (papercut: having to enable the key asset.minification to get css url rewriting working is confusing, maybe the key could be renamed something like asset.enable.processors?)
2. The URLS that were written out by the rewriter were completely empty.

The request that's coming from the browser for the font includes the cache key for the "parent" resource (in this case, font-awesome.css) because the path in the CSS file is relative.

Dandelion itself doesn't currently support resources other than JS or CSS files, as defined in the AssetType enum, so in order to get this to work, I wrote a wrapper around DandelionServlet that will look up relative paths for non-CSS and non-JS resources using the cache key for the "parent" resource.

This is functional, but feels kind of yucky.

Are there any community recommendations about how to approach this? Is this something that should be made into a feature request for Dandelion, or are we abusing/misusing Dandelion to serve assets like Font Awesome?

Input is appreciated!
First of all, nice idea for the Servlet wrapper :-)

Regarding the asset processing, I'm thinking of a brand new asset pipeline, more modular, more efficient and with more features. And in particular with a proper way of handling URL rewriting in CSS files. Very likely to be in Dandelion-Core 2.x.

As a side note, I'm working on a Bower integration. If you have time, could you please take a few minutes to see https://github.com/dandelion/dandelion/issues/62 and give me some feedback?

Thanks!

Regards,
Thibault.
Reply | Threaded
Open this post in threaded view
|

Re: Building a bundle for local copy of font-awesome

fbristow
Hi Thibault,
Thanks for the heads up on vendor libraries.

I saw vendor libraries written about in the documentation (here: http://dandelion.github.io/components/core/1.0.1/docs/html/), but I assumed that the documentation was implying that those were bundles that were shipped in a jar file with a dependency. I'll update my font-awesome bundle to be a vendor library and remove my shim.

The idea integrating with bower sounds really great to me, especially if all of the vendor libraries could be pulled out of the bower.json file that I write for my own project. Automating that will save lots of time for us. Any comments that I have on your proposed implementation I'll write inline on your github issue.

Thanks!
- Franklin