How to use 0.43 Pipes in a theme?

support
1

So I placed this in the head of the theme I’m building:

{{ $styles := resources.Get "scss/style.scss" | toCSS | postCSS | minify | fingerprint }}
<link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}" media="screen">

… But apparently Hugo expects to find the SCSS file in ‘mytheme\assets\scss\style.scss’. And in reality, the file is in the /static folder of the theme. An /assets folder is something new to me…

Also, I thought Resources.Get is used for getting Page resources, or something that is in the content portion of the website. I expected a SCSS file to belong to the presentation part, aka the theme.

As a whole, I’m not sure how to use this new feature. Is there some new doc I’ve missed to read?

2

Clearly the docs haven’t had a chance to catch up yet. Everyone is busy of course.

The Resources feature has been extended to allow the use of the pipeline and the source for the non-post resources is the assets folder. The pipeline will “compile” the resources into the resources folder which you will need to make available to your server (the assets folder doesn’t need to be accessible to the server). The href link will point to the resources folder.

2 Likes
3

Thanks! It makes more sense now.

I started a new site with Hugo 0.44 just to see if such /assets dir would appear somewhere, but there wasn’t one. I manually made one inside my theme dir and moved everything from /static there. However, apparently I need an extended Hugo version in order to get SCSS processing and it’s not available from Chocolatey.

I think I’ll wait for docs update and the extended build from Choco before further experiments :slight_smile:

4

Resources.Get uses the normal lookup order, so the top-level asset folder is checked first and then your theme asset folder.

Resources.Get generates a file in your resources directory and .Permalink references that generated resource. For example, when using image processing, the post-processed image is generated in the resources directory and you use $permalink to reference it:

{{ $dbg_logo_input := resources.Get "images/pancakes-logo.jpg" }}
{{ $dbg_logo_resize := $dbg_logo_input.Resize "50x" }}
<img src="{{ $dbg_logo_resize.Permalink }}">

My tutorial on Hugo pipes might help you with some other questions.

1 Like
5

Just download the single exe, much easier.

6

Thanks for putting this together. I’m looking at it now and it’s very helpful. :slight_smile: Have you thought about cross-posting this kind of stuff on Steemit now that Medium requires users to pay to comment?

Regarding Concat it’s worth noting bundling isn’t always necessary, and, in fact, can hurt performance and increase perceived latency. The latency concatenation adds is probably the main driver behind the Webpack CommonsChunkPlugin. Rather than downloading all the JS in one go it’s oftentimes more performant to download necessary scripts in parallel, asynchronously and only execute them as necessary.

If you don’t use Webpack there’s a tiny zero-dependency library I wrote which can achieve a similar result. Thanks again for the post!

1 Like
7

Steemit is a good idea, I’ll try that out. Thanks for the tip.

This is a really cool library and I’m definitely going to use it now. Thanks for sharing this!

1 Like