[SOLVED] Hugo Pipeline for CSS with Dependent Static Content (FontAwesome)

support
1

I’m a bit perplexed by this use case for hugo pipelines. This is for a theme I’m farting around with, objectives are:

  • Desire to use pipelines so I can compute fingerprints on all SRI applicable assets
  • Fingerprinted css makes a call to static content (in this case its the woff2 file that fontawesome references)

Naturally the “use a cdn” suggestion isn’t going to help because I’m trying to understand this use case (using pipelines) when there is dependent static content.

So I have placed the fontawesome content in assets and I’m able to successfully load the css with fingerprint using the following:

	{{ $fa := resources.Get "fontawesome/web-fonts-with-css/css/fontawesome-all.css" | minify | fingerprint }}
	<link rel="stylesheet" type="text/css" href="{{ $fa.Permalink }}" integrity="{{ $fa.Data.Integrity }}">

However the icons from fontawesome don’t render because they are making a request for the static content fontawesome/web-fonts-with-css/webfonts/fa-solid-900.woff2. Now if I place a completely duplicate copy of fontaewsome in static then everything works fine… it just feels like having completely duplicate content in assets and static doesn’t make sense and that I’m breaking a paradigm.

2

If I recall correctly:

  1. The fonts aren’t being transformed in any way, so it makes sense that it’s under static.
  2. The css files is being transformed, so it makes sense to include it inside your asset pipeline.

Does that make sense? I put all my font files inside static for this reason. They’re essentially already output. The files I put inside assets are input. HTH.

3

so it’s not necessarily an antipattern to have two copies of the fontawesome project.

I’m going to attempt to put the entire project in static and symlink the css to assets.

4

I don’t think you need two copies. Just keep the fonts themselves in static and the files you want to preprocess or transpile inside of assets.

5

Sure it could be considered an antipattern. But it is currently what you need to get it working – and you only need the fonts directory – and it’s not like making a copy of a directory is all that hard.

We have one or more open issues related to this that, once someone gets to it, will make a blueprinted solution for this. I have not thought too hard about it, but it probably involves bundling and pattern matching.

1 Like