CanonifyUrls does not work with ExecuteAsTemplate

support
1

Hello,

we use resources.ExecuteAsTemplate to render a js file containing Hugo template strings. Within this file relURL and .RelPermalink is used see hugo-geekdoc/search.js at master · thegeeklab/hugo-geekdoc · GitHub.

This works as long as canonifyURLs is not enabled. With canonifyURLs=true these ULRs are not canonified which is causing issues. Is this a bug or something that can be fixed in the theme?

2

I would assume they are canonified without the relUrl part, but the relUrl processes them “further”?

3

The issue does not appear to be related to ExecuteAsTemplate

canonifyURLs and relURL do opposite things, it seems that the template function has precedence over the site configuration.

Therefore to achieve the desired output try removing the relURL function from lines 17-18 of search.js.

4

That doesn’t work. Let’s focus on one example loadScript('{{ index .Site.Data.assets "js/flexsearch.min.js" | relURL }}',:

{{ index .Site.Data.assets "js/flexsearch.min.js" | relURL }} → /js/flexsearch-ad47a5e1ee.min.js
{{ index .Site.Data.assets "js/flexsearch.min.js" }} → js/flexsearch-ad47a5e1ee.min.js
{{ index .Site.Data.assets "js/flexsearch.min.js" | absURL }} → http://localhost:1313/test/js/flexsearch-ad47a5e1ee.min.js

The whole theme is using relULR and besides this single case where ExecuteAsTemplate is used it works as expected e.g. hugo-geekdoc/head.html at master · thegeeklab/hugo-geekdoc · GitHub

href="{{ "favicon/favicon-32x32.png" | relURL }}" → href="http://localhost:1313/test/favicon/favicon-32x32.png"

5

Well then, since that approach does not work, consider fetching these JS files as resources and then use the built-in resource.Permalink instead of fetching these files with the index function and trying to create the permalink the way you do.

Should work.

6

Will try but IMO it should work also this way as it does for the rest of the theme. It looks really strange to me that the behavior is different…

7

There is a documented way to fetch resources in templates and render their Permalink.

By the way if one needs canonical URLs the absURL function is more portable and predictable than using the relURL and canonifyURLs combo.

Why use relURL in the template, when the desired output is an absolute URL?

I don’t follow I am afraid.

8

Because canonifyURLs can be set by the end user of the theme. There is AFAIK no way to prevent this and as I said it works for every other code section where relURL is used.

The theme works with relULR by default without issues but if someone wants/has to use canoncial users canonifyURLs should/can be used. Isn’t this the intended use case for this config option?

9

Some resources are fingerprinted/hashed outside from Hugo that’s why loading resource path from a data file is used.

10

Still you should load them as proper resources and since you explained your use case above use the resource.RelPermalink that should be turned into an absolute URL, if canonifyURLs is enabled.

Anyway your setup is complex. I am sure that others may have more insights if you are not able to solve the issue with the suggestion I already offered.

Also you can open a GitHub issue if you think that this is a bug.

11

You mean e.g. {{ $searchData := resources.Get "search-data.json" | resources.ExecuteAsTemplate $searchDataFile . | resources.Minify }}? Thats also done for a single resource in the same file but that is also not working, see https://github.com/thegeeklab/hugo-geekdoc/blob/master/assets/js/search.js#L20

{{ $searchData.RelPermalink }} → /search-data.json

12

Yes that was what I meant.

Consider asking on GitHub.

Make the issue title the same as this topic and report that when creating a resource from an asset file with resources.ExecuteAsTemplate that contains the resource.RelPermalink of another resource and references to data files with relURL then the URLs to these files are not made canonical when canonifyURLs is enabled.

Also explain that your use case is for a theme and that you wish to provide users with the choice of using either a canonical or a relative URL for their project’s assets.

Feel free to post the link to the GitHub issue in this topic for reference.

13

@alexandros Thanks a lot for your help!

14

canonifyURLs work on the final output (HTML) so you need to look for other explanations than ExecuteTemplate.

That said, there are some known issues with it – and know that we have link hooks in markdown I would suggest not using it.

15

So, recommendation is not to use canonifyURLs=true? Is there another way if a user of a theme want to use absolute URLs?

we have link hooks in markdown

What does it mean? And how can it be used to process js asset files containing templates? I’m a bit lost now.

16

Try creating a config param that holds a boolean.

If true absURL, Permalink else relURL, relPermalink etc.

Also the default function may be useful.

The above will probably be more work for you, so test it first and then proceed to refactor the theme’s templates.

17

My answer didn’t take your entire problem into account.

My short take on this:

  • canonifyURLs works ONLY for HTML and XML output (not JS files)
  • it’s task is to make relative URLs into absolute
  • in my head you might as well spell them out absolutely considering the limitations of canonifyURLs (and markdown was, I believe, the reason that setting was added in the first place, hence my remark about render hooks).