Header dropdown menu doesn't show up in production page

[TetraTheta]

I really don't know why this only happens in production page...

In local test environment, I can see header dropdown menu without any problem. There was zero problem so far, in local environment.

But sometimes - or, very often -, in Cloudflare production page, header dropdown menu doesn't show up, at all.

Since this problem only happens in production page, I can't check if header is working or not in local environment.

In most cases, updating dependencies (NPM, Hugo module etc.) to latest solved this kind of problem, but today, it didn't help.

I don't think there is package/version mismatch between my local environment and Cloudflare production build environment.

	Local environment	Cloudflare production environment
Hugo version	hugo v0.121.2-6d5b44305eaa9d0a157946492a6f319da38de154+extended windows/amd64 BuildDate=2024-01-05T12:21:15Z VendorInfo=gohugoio	0.121.2 (HUGO_VERSION)
Node version	v20.9.0	20 (NODE_VERSION)

// build command
npm ci && npm run clean && hugo --gc --minify
// npm run clean removes 'public', 'resources' directory via 'rimraf'

I checked if I didn't update my local layout file to latest, except for my own change, but the only file I've override is layouts/partials/hb/modules/header/functions/is-current.html, which is OK.

Here is current production build of my site. I won't push anything until the reason of this problem is diagnosed. You'll be able to inspect how things works from it.

Feel free to ask anything about solving this issue.

[razonyang]

I do see there is a problem that block the assets to be loaded on console (F12 - Console).

game/#:1 Failed to find a valid digest in the 'integrity' attribute for resource 'https://tetralog.haipa.xyz/js/init.577d4e90bff5601d5756fcf799b0e53568bf56cea3b80fe43f66c9d365e8100c.js' with computed SHA-256 integrity 'bAMuieaiksNqUG4eEApyTr+5weLHQ9AGM9siR0CPAPA='. The resource has been blocked.

Uncheck the following options may help, it seems that Cloudflare minify the assets, and causes that SHA-256 integrity doesn't match anymore.

If it doesn't work, please clear the Cache on Cloudflare dashboard to see if it's a cache issue, since currently, the dropdown menu is working, but the theme toggle is not.

[TetraTheta]

Unchecking 'Javascript' and 'CSS' in 'Auto Minify' and pressing 'Purge Everything' in 'Purge Cache', and re-building the site seems to fix the problem.

But I'll open this issue for a while (about a week or so) because I'm not sure if the issue is resolved correctly or only on the face of it. After I can confirm myself that 'Auto Minify' thing was the reason of the problem, I'll close this issue myself.
Sorry if this thing will disturb you.

since currently, the dropdown menu is working, but the theme toggle is not.

Oops, sorry for forgetting about telling my lazy theme toggle override...

Since I wanted to force dark theme to everyone, regardless of their OS theme mode, I overrided layouts/hugopress/modules/hb-header-theme-toggle/attributes/document.html like this too:

{{- return dict
  "data-bs-theme" "dark"
-}}

This will practically break Theme Toggle button, by always make site dark mode when clicked. It doesn't make site dark mode at the first time though...

I just wanted to use dark theme only, without having theme toggle button or such, but it seemed that dark theme was only available when using theme-toggle module, which adds Theme Toggle button.

I may be wrong, though...

---

EDIT: After looking into theme-toggle module, it seems I only have to put this line at the top of layouts/partials/hugopress/modules/hb-custom/hooks/head-end.html.

<script>document.documentElement.setAttribute("data-bs-theme","dark"),window.addEventListener("DOMContentLoaded",()=>{document.documentElement.setAttribute("data-bs-theme","dark")});</script>

Then I can remove theme-toggle module dependency.

But this will make site flash when page is loaded... Since DOMContentLoaded is called after processing all <script> in HTML file, I expected document.documentElement.setAttribute("data-bs-theme","dark") is processed before DOMContentLoaded is fired. But I still get light theme site before it changes to dark theme...

Or, alternatively, according to the documentation, I can create my own Hugo module for declaring attributes while generating the site, but I think this is overkill to me, because I only have to declare this thing only... I've managed to do it.

{{- return dict
  "data-bs-theme" "dark"
-}}

[razonyang]

I just wanted to use dark theme only.

It's a good feature to have inside the core module, see https://hbstack.dev/docs/look-and-feel/enable-dark-mode-only/.

[TetraTheta]

It's a good feature to have inside the core module, see https://hbstack.dev/docs/look-and-feel/enable-dark-mode-only/.

Thank you! I've configured it properly.

As reminder, I'll leave this issue opened for a while for testing few site builds to confirm that Cloudflare configuration was the cause of non-opening header dropdown menu.

[TetraTheta]

I've hit Cloudflare Page's file limitation (~20,000 files) during adding new page (and corresponding build). Until I can find good alternative for hosting my site (for free), I can't do any further test build because changing host will also cause CF config to be changed.

So I will close this issue as completed. If I come across header dropdown menu issue after changing host, I'll re-open this issue or create new issue depending on final config of site/host.