youtube: Need help (again) to set up the youtube module

[ksdrummer]

It's me again....

Before going further, I can see a small box (few pixels) in place of youtube videos but not thumnails.

Then I found the documentation here and I'm trying to add the js and scss files to the pipeline.

None of the following worked :

• copy the files in assets/js/ and assets/scss and adding the 'import' and '@import' lines to my custom.js and custom.scss files.
• adding mounts to hugo.toml under the module.imports :

[module]
  [[module.imports]]
    path = "github.com/davidsneighbour/hugo-modules/modules/youtube"
    disable = false
    [[module.imports.mounts]]
    source = "assets/"
    target = "assets/js/lite-yt-embed.js"
    [[module.imports.mounts]]
    source = "assets/scss/"
    target = "assets/scss/_lite-yt-embed.scss"

(Here I tried several things like source = "assets/js/ or target = assets/)

hugo server gives the following error :

TOCSS: failed to transform "/scss/custom.scss" (text/x-scss): "/home/ksdrummer/mywebsite/assets/scss/_lite-yt-embed.scss:53:11": The target selector was not found.
Use "@extend .object-fit-cover !optional" to avoid this error.
Built in 335 ms
Error: error building site: TOCSS: failed to transform "/scss/custom.scss" (text/x-scss): "/home/ksdrummer/mywebsite/assets/scss/_lite-yt-embed.scss:53:11": The target selector was not found.
Use "@extend .object-fit-cover !optional" to avoid this error.

the ! optionnal allows me to build the site but I am in the same situation than before : small boxes in place of the youtube videos.

Could you help me out ? I'm really new to hugo moduling ...

And again, thank you so much for the work and for your time !

[davidsneighbour]

Here again, don't copy the configuration of the module. Just add it to your configuration:

[module]
  [[module.imports]]
    path = "github.com/davidsneighbour/hugo-modules/modules/youtube"

After that, when you run hugo or hugo server, the mounts are available in your assets folder.

Have a look at the way I am using them in my own website kollitsch.dev:

• The stylesheet is imported into my sass pipeline here
• The javascript is added here and initialised a line later.

Those "mounts" are only available when Hugo is running.

There are other mounts available that go into the static folder, so that you could add them via <script> and <link rel="stylesheet"> tags at /libs/liteyoutube/lite-yt-embed.css and /libs/liteyoutube/lite-yt-embed.js. I wouldn't do this though, because that leads to two more files being downloaded and you might loose the speed you gained again.

[davidsneighbour]

Let me add, the "paths" of these mounts are:

• assets/js/lite-yt-embed.js
• assets/scss/_lite-yt-embed.scss

and you have to use a relative path there, depending on where you import them.

[ksdrummer]

Thank for your answer. But this is the first thing I tried... And I get the following error :

$ hugo server
Watching for changes in /home/ksdrummer/mywebsite/{archetypes,assets,content,data,i18n,layouts,static,themes}
Watching for config changes in /home/ksdrummer/mywebsite/config/_default, /home/ksdrummer/mywebsite/themes/hugo-coder/hugo.toml, /home/ksdrummer/mywebsite/go.mod
Start building sites … 
hugo v0.134.3+extended linux/amd64 BuildDate=unknown

ERROR TOCSS: failed to transform "/scss/custom.scss" (text/x-scss): "/home/ksdrummer/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/davidsneighbour/hugo-modules/modules/[email protected]/assets/scss/_lite-yt-embed.scss:53:11": The target selector was not found.
Use "@extend .object-fit-cover !optional" to avoid this error.
Built in 294 ms
Error: error building site: TOCSS: failed to transform "/scss/custom.scss" (text/x-scss): "/home/ksdrummer/.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/davidsneighbour/hugo-modules/modules/[email protected]/assets/scss/_lite-yt-embed.scss:53:11": The target selector was not found.
Use "@extend .object-fit-cover !optional" to avoid this error.

To be sure i didn't miss anything (I probably did) :

• I added the module configuration in hugo.toml
• I added the custom js and custom scss to hugo.toml and the following lines to layouts/Head/theme-styles.html (I already add a custom scss but no js before)

<!-- CSS STYLES -->
{{ range .Site.Params.custom_css -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}
<!-- JS STYLES -->
{{ range .Site.Params.custom_js -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}

• I added @import "lite-yt-embed"; to assets/scss/custom.scss and

import LiteYTEmbed from "./lite-yt-embed.js";
customElements.define("lite-youtube", LiteYTEmbed);

to assets/js/custom.js

But the site won't build...

[ksdrummer]

I see this in your module.toml

[[mounts]]
source = "assets"
target = "assets"

[[mounts]]
source = "hugo_stats.json"
target = "assets/watching/hugo_stats.json"

[[mounts]]
source = "i18n"
target = "i18n"

[[mounts]]
source = "layouts"
target = "layouts"

[[mounts]]
source = "static"
target = "static"

Tried to add this to my hugo.toml but same error... Might be something like this though

[davidsneighbour]

Oh I see... there is stuff in that SCSS file that comes from Bootstrap 5.

I will fix that today or tomorrow. To quickly fix it in your website copy the full stylesheet from here locally and replace that one line. Then include YOUR copy instead of the mounted one into your stylesheet.

Old line:

@extend .object-fit-cover;

Replace with

object-fit: cover;

The reason for this is that I am using BS5 everywhere... That should be taken out of the modules.

[ksdrummer]

Thank you !

So now the thumbnails are loading but nothing happens when I click on the videos (just youtube button stays red but that's it).

[davidsneighbour]

Open your browser developer console. Check if any error comes up in there. Sounds like SCSS is all fixed and Javscript might not be initialized yet. You need to initialize the component and not just import it.

// YouTube element
// @ts-ignore - this is loaded at runtime by GoHugo
import LiteYTEmbed from "./lite-yt-embed.js";

// Initiate custom elements
customElements.define("lite-youtube", LiteYTEmbed);

also the way your js is built is important. I have mine in a js.build pipeline.

[ksdrummer]

Then include YOUR copy instead of the mounted one into your stylesheet.

But I don't know how to do this...

[davidsneighbour]

How is your assets/js/custom.js used in your layouts?

[ksdrummer]

Not sure what you mean but I added customJS = ["js/custom.js"] to hugo.toml and

{{ range .Site.Params.custom_js -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}

to layouts/partials/Head/theme-styles.html

[ksdrummer]

I also have

{{ if hugo.IsServer }}
  {{ $cssOpts := (dict "targetPath" "css/coder.css" "enableSourceMap" true ) }}
  {{ $styles := resources.Get "scss/coder.scss" | resources.ExecuteAsTemplate "style.coder.css" . | toCSS $cssOpts }}
  <link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen">
{{ else }}
  {{ $cssOpts := (dict "targetPath" "css/coder.css" ) }}
  {{ $styles := resources.Get "scss/coder.scss" | resources.ExecuteAsTemplate "style.coder.css" . | toCSS $cssOpts | minify | fingerprint }}
  <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}" crossorigin="anonymous" media="screen" />
{{ end }}

that I copied from the theme I'm using (hugo-coder)

[ksdrummer]

from the console I have Uncaught SyntaxError: import declarations may only appear at top level of a module which seems to be it (for custom.js)

[davidsneighbour]

Not sure what you mean but I added customJS = ["js/custom.js"] to hugo.toml and

{{ range .Site.Params.custom_js -}}
    <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}

to layouts/partials/Head/theme-styles.html

You are ranging JS files and put them into a stylesheet tag... That can't work. Let's go the other route. Remove what you added for my module in js/custom.js and then add the static file into your configuration instead:

customJS = ["/libs/liteyoutube/lite-yt-embed.js"]

Please don't remove the slash in the beginning. This file is mounted into static and will be copied into the website at runtime/build.

[ksdrummer]

With this I can't build the site :

ERROR render of "page" failed: "/home/ksdrummer/mywebsite/themes/hugo-coder/layouts/_default/baseof.html:51:25": execute of template failed: template: _default/single.html:51:25: executing "_default/single.html" at <$script.RelPermalink>: nil pointer evaluating resource.Resource.RelPermalink
ERROR render: failed to render pages: render of "404" failed: "/home/ksdrummer/mywebsite/themes/hugo-coder/layouts/_default/baseof.html:51:25": execute of template failed: template: 404.html:51:25: executing "404.html" at <$script.RelPermalink>: nil pointer evaluating resource.Resource.RelPermalink

[davidsneighbour]

Did you ever link your own repository? If not, please do so. If you can't because of private stuff in there please add @davidsneighbour as contributor and I'll try to fix the issue, create a PR and then explain what was/were the reason for failure.

This might save some time.

The 404 error should not come up by using the youtube module. You either are using another module that is not configured properly or the theme is broken due to too many changes trying to the youtube shortcode working that needs some fixing/cleaning up.

[ksdrummer]

I tried to use js/lite-yt-embed.js from here as custom js but I still have the Uncaught SyntaxError: import declarations may only appear at top level of a module error from the console.

[davidsneighbour]

Nothing is allowed to come before any import clause in Javascript modules. I don't know how your custom JS is included. From the range you showed before it would live as it's own file and that should work fine.

[ksdrummer]

I uploaded the code to github and invited you to as contributor. I think something must interfere with the theme I'm using, which is also using modules...

[davidsneighbour]

I joined... give me a day or two to work on this. It's 9pm here; only daylight will bring good fixes ;) It's probably an issue with the order of modules (who overrides whom) and configs.

[ksdrummer]

There is no rush, the site is online and working, I can deal with the video page being slow for now.
Thank you so much for taking the time to help me with this. I would have given up a long time ago, I'm not a pro, just learned hugo few weeks ago because I needed a website.

[davidsneighbour]

I accidentally commited my changes to your main branch... If you need to remove that just run

git revert 42b65f6b73a819b12c8c453920895ec4e4593868

And it will create a commit undoing my changes.

I did the following:

• removed custom.js content (that is code that needs to be compiled via js.Build. instead I included the direct already compiled script in footer.html)
• removed custom scss and fixed the module.

You could delete the following files:

• assets/js/custom.js and its configuration if ou don't have any other use for it
• layouts/shortcodes/youtube-lite.html - not sure if that is related or another shortcode

The videos are loading now.

[ksdrummer]

No problem I don't use github for hosting my site :)

When I look into your commit I don't see anything related to footer.html did you forget to push it ? Without it the site won't build. (or maybe I misunderstood what you meant by "including the direct already compiled script in footer.html" ?)

(Yes youtube-lite was previous attempt to do it with a shortcode)

[davidsneighbour]

That was weird, it was not committed indeed. Sent it up now: https://github.com/ksdrummer/website/commit/2a9dc48fa10b401e0c385812022ee9070c85a46e

[ksdrummer]

Yes ! It works perfectly now !
Again, thank you sooooooo much for your time and also for the module ! It's really appreciated !