How can I use hugo-shortcode-gallery with Hinode?

[sesponda]

I have a site using https://github.com/mfg92/hugo-shortcode-gallery as follows:

{{< gallery match="img/display/*" sortOrder="asc" rowHeight="250" thumbnailHoverEffect="enlarge" embedPreview="true"
margins="5" thumbnailResizeOptions="1600x1600 q90 Lanczos" showExif=false previewType="blur" embedPreview=true loadJQuery=true >}}

... which works with my current theme. However, when trying Hinode the page is broken and I see in the console:

Error: jQuery is not loaded, hugo-shortcode-gallery wont work without it!

The code at that location is:

<script>
	if (!("HSCGjQuery" in window)) {
		if (!window.jQuery) {
			throw new Error("jQuery is not loaded, hugo-shortcode-gallery wont work without it!");
		}
		window.HSCGjQuery = window.jQuery.noConflict(true);
	}

I'm not deeply familiar with Hugo/Modules (just started), so I'd appreciate help to learn the simplest way to make it work.
I've tried a hacky way (hugo mod vendor and modifyng baseof.html loading jquery manually), unsuccessfully.

The gallery code uses/injects multiple scripts, as seen here: https://github.com/mfg92/hugo-shortcode-gallery/blob/master/layouts/shortcodes/gallery.html#L50

I've checked https://gethinode.com/docs/advanced-settings/scripts/, but it's unclear to me if following those four steps in sequence (i.e. creating a custom module that loads such files) is the simplest and proper solution. It would mean I need to watch the gallery code for script changes and keep my module in sync.

Thanks,

[sesponda]

Update: adding the JS in this way to force loading them in the required order fixed JS errors loading the page, but things are broken still (I suspect all other assets like CSS, etc. are not loading)

assets/js/critical:
0jquery-3.7.1.min.js
1jquery.lazy.min.js
2jquery.swipebox.min.js
3jquery.justifiedGallery.js

Is there a way to make hinode theme and the gallery shortcode to play well?

[markdumay]

Hinode uses Hugo modules to bundle scripts and to transpile SCSS files. The docs provide more information on how to develop / integrate modules compatible with Hinode. A guide with step-by-step instruction is also available.

The module system might seem a bit complicated at first. Let me know if you run into any issues.

[sesponda]

IIUC, I would have to write a module that would wrap (if possible, or incorporate code via copy-paste) the gallery shorcode. Is this the case?

[markdumay]

That would be my advise. You could directly integrate the sass and js files into Hinode's partials instead, but this will be more difficult to maintain.

[sesponda]

Thanks! I'll close the discussion.