node-vibrant not working as expected

[ElastiCourse]

What happened?

First off, Thanks Jimmy for the recent theme update and fixing deprecated commands in the code.

I love the idea of node-vibrant. I expect it to find the dominant color of an image and sets it as the background color of each post's categories. There are two issues I'm currently seeing with the current implementation:

1. The logic implemented in color.ts and referenced in main.ts doesn't seem to be working at all. The actual background colors for categories is randomly selected from 5 hardcoded colors configured in variables.scss $defaultTagBackgrounds: #8ea885, #df7988, #0177b8, #ffb900, #6b69d6;
2. In single post view, vibrant.min.js is loaded, however it's not used. I would love too see the categories colored in single post view as well. Unless you have a static background color set in content/categories/category-name/_index.md it will be a plain white background color.

I've done some additional testing but seen no difference:

• Re-enabled cover image processing.
• Used PNG instead of WEBP for post image.
• Switched to node-vibrant@3.2.1-alpha.1

TIA

Hugo version

0.131extended

Theme version

3.27

What browsers are you seeing the problem on?

Chrome

More information about the browser

Chrome 128

Relevant log output

N/A

Link to Minimal Reproducible Example

Content List

[CaiJimmy]

Actually, that's the expected behavior.

In single post view, vibrant.min.js is loaded, however it's not used.

It's used for related post cards.

Unless you have a static background color set in content/categories/category-name/_index.md it will be a plain white background color.

That's how it works. Otherwise, the browser would have to download category images just to calculate the dominant color, without displaying the image. That's a waste of bandwidth.