BUG: Search CSS broken

[giom-mallet]

Bug Report

Describe the bug

I have an issue with the CSS of the new search function after upgrading my website with contents developed last year.

To Reproduce

1. Update the themes sub module of last year website
2. Follow the instructions on Add search #143
3. After running the site, see that the search function CSS seems not properly applied

Expected behavior

The result of a search doesn't have formatting and just displays

Screenshots

Environment

• Hugo Version: v0.81.0-59D15C97
• Platform: Desktop
• Link to Project:

Additional context

[Add any other context about the problem here.]

[VincentTam]

Hi, I'm working on this theme to fix some issues. After leaving this theme for over a year, I've found that URLs starting with / might give errors. I had also experienced an array of issues and 404 errors with some scripts and CSS files, say

hugo-future-imperfect-slim/layouts/partials/head.html

Line 22 in 2693d91

{{- if .Site.Params.highlightjs -}}<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/{{ .Site.Params.highlightjsTheme | default "default" }}.min.css">{{- end -}}

reported in #236.

This weekend, I've made a few updates on upstream and submitted some PRs, which I had tested on

• GitHub Actions: my fork of this repo
• GitLab CI/CD (through Frama Pages): [My test page on Framagit](https://framagit.org/VincentTam/fish-demo

After some recent work on my testing branches dev and addGHCI on Framagit and GitLab respectively, I'm unable to reproduce your error, even though I followed the instructions of #143 at commit d298d0b.

[VincentTam]

I tried git diff f8b14f0..dev | grep css locally but I can't identify which CSS file/JavaScript that failed to load from your screenshot. It would be helpful if you can provide a screenshot of your browser's web dev tool "Network tab" and "Console" tab which display the errors.

[giom-mallet]

Hi Vincent, Thanks for your reply,

looking at the Console, lots of errors are popping out :

I suppose this is the root cause of my problem : The resource from “http://localhost:1313/css/add-on.css” was blocked due to MIME type (“text/plain”) mismatch (X-Content-Type-Options: nosniff).

Not sure how to setup the right Content Types within Hugo ? Or should I try to turn-off the X-Content-Type-Options: nosniff directive ?

[pacollins]

Did you modify the add-on.css file? If you make the file empty, it reads as a .txt instead of .css.

[giom-mallet]

Hi Patrick,
Well, those two files are now located ./assets and they are empty expect from the comment :
/*
This js file is for individual users to modify the scripts for their personal site,
or for the implementation of features specifically for their site. Anything that
is an official part of the theme (ex. Pull Requests) should be included in main.js
and follow the formatting and style given.
*/

[VincentTam]

@pacollins That's not related to this issue, but I observed that the downloading of some files from Cloudfare failed in @giom-mallet's screenshot. That's exactly #236, for which I submitted a WIP PR. I read somewhere in Hugo forum that the loading of resources should be made with https:// instead of a relative //, but I forget the link. Lemme find that out later.

@giom-mallet Do you mind disclosing the structure of your baseurl in config.toml? Is it at the root of the domain or under a subdirectory?

• root: https://example.com/
• subdir: https://example.com/subdir/

[giom-mallet]

Hi， The baseURL should be :
baseurl = "https://agirpourvous-shanghai.fr/"

I must mention that at the moment, this URL displays the site generated last year. The problem I meet is when I run hugo server. I didn't deploy online yet.

[VincentTam]

@giom-mallet Thanks for reponse. I now know that your're building your site at the root of your domain.

You updated the submodule from which commit? Here's my guess.

The head of the generated HTML code shows

<meta property="og:updated_time" content="2020-03-07T11:18:52+08:00" />

The latest commit on the master branch is 506e066 at that time.

[giom-mallet]

Hi,
Seems I am at 5d4aae6

[VincentTam]

Hi,
Seems I am at 5d4aae6

@giom-mallet I tried to reproduce the errors based on the exampleSite/ at that commit. In order to reproduce the 404 errors illustrated in your screenshot, I switched enableCDN to true, and specified the corresponding languages. However, my animated screen capture doesn't show the reported error.

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 0920cad..d616ce5 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -8,21 +8,21 @@ paginate                = 3
 disqusShortname         = ""
 googleAnalytics         = ""
 pluralizeListTitles     = false
-disableLanguages        = []
+disableLanguages        = [""]
 
 [markup.goldmark.renderer]
   unsafe                = true
 
 [outputs]
-  home                  = ["html", "json", "rss"]
+  home                  = ["html", "json"]
 
 [params]
-  enableCDN             = false
+  enableCDN             = true
   cssFiles              = ["default"]
   jsFiles               = ["default"]
   highlightjs           = true
   highlightjsTheme      = ""
-  highlightjsLang       = []
+  highlightjsLang       = ["html", "toml", "js"]
   viewMorePostsLink     = "/blog/"
   readingTime           = true
   imageStretch          = ""

Screenshot taken with byzanz-record.

After making the above changes to exampleSite/config.toml, I ran

hugo serve --themesDir=${$(pwd)%/*} \
--source ./exampleSite

I observed the 404 errors related to highlight.js well, but the my browser downloaded css/add-on.css and js/add-on.js well, and the CSS of the search box is functioning.

I installed Hugo via snap.

$ hugo version
Hugo Static Site Generator v0.80.0/extended linux/amd64 BuildDate: 2020-12-31T20:02:59Z

[giom-mallet]

Hi Vincent,

Sorry for delay in replying, I wanted to try one thing first, so I rebooted the site from the 'Example Site' and eliminated the problem successfully.

There have been a considerable amount of changes in the latest version of the theme, especially in config.toml which probably explains the issues I met trying to upgrade more than 1 year later.