How to add assets from 3rd party Hugo module

support
1

I’m working on an event site and want to add TND add-to-call module https://github.com/theNewDynamic/hugo-module-tnd-addtocal

It’s written in README that I need to add {{ partial "tnd-addtocal/add" . }} to add the calendar button. It works ok.
But then I supposed to add {{ partial "tnd-addtocal/assets" . }} in order to have the button functionality and icons. But wherever I’m trying to add this line of code it breaks my app.
The error:

Failed to render pages: render of "section" failed: execute of template failed: template: events/list.html:3:8: executing "events/list.html" at <partial "head.html" .>: error calling partial: "/home/magda/projects-2021/bitbetter.club/hugo-version/themes/basic/layouts/partials/head.html:36:5": execute of template failed: template: partials/head.html:36:5: executing "partials/head.html" at <partial "tnd-addtocal/assets" .>: error calling partial: partial "tnd-addtocal/assets" not found

I’m quite new to Hugo, so I simply don’t know how to add assets from the module.

2

As I’m reading more, I think that I should somehow mount the assets from the module but still not sure how to do it.
I’m trying to do it like this:

[module]

[[module.imports]]
path="github.com/theNewDynamic/hugo-module-tnd-addtocal"

[[module.mounts]]
source="assets/js"
target="static/js"

but without luck.

3

The README was out of date, just fixed it. You should actually use tnd-addtocal/tags and not /assets… Sorry about that.

4

Thank you for the reply. I changed this line and now at least it doesn’t break the whole app but there’s still an error in button.js
The toggle is opened all the time and there are no icons.

5

@regis One more question. I don’t exactly understand what it means by Also, be sure the following partial is called (only once) on any page with the calendar button. It will add the button styles and scripts:
I added this ```
{{ partial “tnd-addtocal/tags” . }}

in head.html. But should I add it in events/single.html instead? In the same file where I added the button?
6

What about css part of your assets? Shouldn’t it be attached? How the button.js can work if there aren’t css for class “hidden” or “active”?

7

What it means is it you should not have the module print its tags twice on the same page. (and load its script twice)

8

You can open an issue on the repo, in the mean time, adding .hidden { display: none} to your css will do.

9

Yes, I did overwrite this part of CSS.
Sorry for bothering you again, but should it display google calendar, apple and other icons from the icons folder or I need to add them somehow myself?

10

no icons, just strings

11

So you mean that the icons from partials/private/icons are not used in the project?

12

@regis, I hope I can ask you one more question about this module.
When I want to add an event to google calendar in the notes part, the Event Link is generated. On the local server it looks like this: Event Link: //localhost:1313/events/page-title/ but after deploying I have only: Event Link: /events/page-title/
How can I get the full link to the website?
I was trying to add it as a venue but it doesn’t work.

13

I’ll take a look this morning! This is odd indeed.

14

This behaviour sounds like you have no baseURL defined in your configuration. Locally Hugo just adds the //localhost:1313/ in that case. On deploy / is assumed.

1 Like
15

I’m sorry I was bothering you. It was because of netlify config and now I managed to do it properly.

16

Thanks, it was because of netlify config.

17

It’s really no bother at all @makneta. I’m about to address the issues from this thread in a release today.
And thanks @davidsneighbour

18

Ok, I’m coming back with another question even though it is not this module specific.
When I have baseURL set in config I can’t see the page on predeploy, how can I make it more flexible?

19

I am using / as value instead of the domain. Then I make sure that I always use absolute links (from domain root) and tadah… the website is portable :slight_smile:

If some links break then it’s always an issue with the way the link is created. Always use absolute links.