Anatole: Can I add custom js?

[PiotrWachulec]

Like above. Reason? For example for adding cookie consent.

[PiotrWachulec]

Hi @lxndrblz ! Thank you so much for your work and engagement! I tested new changes and it seems to work with scripts which are stored in assets/js/ folder, but when I try to add external scripts, it doesn't work:
customJs = [ "https://cdn.jsdelivr.net/npm/cookie-bar/cookiebar-latest.min.js?always=1" ]
I checked it on Chrome and Firefox. There are no errors in the console.

[lxndrblz]

@PiotrWachulec That's correct. Hugo's resources.Get function can only load local resources and process (fingerprint, minify) them. I've chosen it to be this way as it allows me to keep everything in one repo and have a better control over the security.

You won't be able to see an error in your browser's console as these scripts won't be included by Hugo while building your site. Indeed, Hugo should show multiple errors when trying to include the link in your customJs.

[PiotrWachulec]

@lxndrblz thanks for your response. What is interesting, when I add a line from the issue description, I don't get any errors in Hugo, all compile successfully.

So, could you give me any advice, how can I add external scripts to Hugo? Thanks in advance!

[lxndrblz]

@PiotrWachulec I can't quite believe that you are not getting any errors, but let's come back to your original question.

The way the cookie script works is a bit unique, as it can't just be downloaded and included locally because it's heavily depending on the parametrization. If you want to include that cookiebar into your site and can only be done by manually adding it to the head or footer partial, but be aware of any merging conflicts if you are using this theme as a submodule. If you have cloned it, it obviously wouldn't matter.

I've seen that some other templates create a dummy partial, which is included and doesn't change, but can be overwritten by the user without breaking anything. That might also be an option to consider.

[PiotrWachulec]

You're right, I got an error - but not locally, I got below error in my CI&CD pipeline:

ERROR 2020/07/19 11:52:59 render of "page" failed: execute of template failed: template: _default/single.html:3:8: executing "_default/single.html" at <partial "head.html" .>: error calling partial: "D:\a\1\s\themes\anatole\layouts\partials\head.html:31:32": execute of template failed: template: partials/head.html:31:32: executing "partials/head.html" at <resources.Get>: error calling Get: CreateFile D:\a\1\s\assets\https:\cdn.jsdelivr.net\npm\cookie-bar\cookiebar-latest.min.js?always=1: The filename, directory name, or volume label syntax is incorrect.
ERROR 2020/07/19 11:52:59 render of "page" failed: execute of template failed: template: _default/single.html:3:8: executing "_default/single.html" at <partial "head.html" .>: error calling partial: "D:\a\1\s\themes\anatole\layouts\partials\head.html:31:32": execute of template failed: template: partials/head.html:31:32: executing "partials/head.html" at <resources.Get>: error calling Get: CreateFile D:\a\1\s\assets\https:\cdn.jsdelivr.net\npm\cookie-bar\cookiebar-latest.min.js?always=1: The filename, directory name, or volume label syntax is incorrect.
ERROR 2020/07/19 11:52:59 render of "page" failed: execute of template failed: template: _default/single.html:3:8: executing "_default/single.html" at <partial "head.html" .>: error calling partial: "D:\a\1\s\themes\anatole\layouts\partials\head.html:31:32": execute of template failed: template: partials/head.html:31:32: executing "partials/head.html" at <resources.Get>: error calling Get: CreateFile D:\a\1\s\assets\https:\cdn.jsdelivr.net\npm\cookie-bar\cookiebar-latest.min.js?always=1: The filename, directory name, or volume label syntax is incorrect.
ERROR 2020/07/19 11:52:59 render of "page" failed: execute of template failed: template: _default/single.html:3:8: executing "_default/single.html" at <partial "head.html" .>: error calling partial: "D:\a\1\s\themes\anatole\layouts\partials\head.html:31:32": execute of template failed: template: partials/head.html:31:32: executing "partials/head.html" at <resources.Get>: error calling Get: CreateFile D:\a\1\s\assets\https:\cdn.jsdelivr.net\npm\cookie-bar\cookiebar-latest.min.js?always=1: The filename, directory name, or volume label syntax is incorrect.
Total in 317 ms
Error: Error building site: failed to render pages: render of "page" failed: execute of template failed: template: _default/single.html:3:8: executing "_default/single.html" at <partial "head.html" .>: error calling partial: "D:\a\1\s\themes\anatole\layouts\partials\head.html:31:32": execute of template failed: template: partials/head.html:31:32: executing "partials/head.html" at <resources.Get>: error calling Get: CreateFile D:\a\1\s\assets\https:\cdn.jsdelivr.net\npm\cookie-bar\cookiebar-latest.min.js?always=1: The filename, directory name, or volume label syntax is incorrect.

Thanks for your response! I'm using your theme as a submodule, so probably this way is not good. I think it's worthy to consider, because things like cookie consent is required by EU law.

In the other theme which I'm using on a different website, it is solved by:

{{ range .Site.Params.custom_js }}
      <script src="{{ . | relURL }}"></script>
{{ end }}

but as I understood it isn't the way which you are interested in.

[PiotrWachulec]

@lxndrblz you are amazing! I really, really appreciate your engagement in solving my problem! Thanks a lot for your time and great work!