search

imfing / hextra

🔯 Modern, batteries-included Hugo theme for creating beautiful doc, blog and static websites
https://imfing.github.io/hextra/
MIT License
584 stars 145 forks source link

KaTeX fonts are incorrectly transformed to lower-case for Hugo v0.123 #309

Closed jonasreiher closed 6 months ago

jonasreiher commented 7 months ago

Description

When deploying to GitLab Pages, the KaTeX fonts cannot be loaded since the queried URLs yield a 404:

katex-errors

Additional Context

I'm guessing this has to do with lower-case file names. The file assets/lib/katex/katex.min.css links all fonts with mixed-case file names, e.g. KaTeX_AMS-Regular.woff2 but when building the site, the font files actually get lower-case file names, e.g. katex_ams-regular.woff2.

On my deployed site, the links with mixed-case file names actually yield a 404 while adjusted ones with all lower-case letters lead me to the right font files.

Steps To Reproduce

I'm not exactly sure what's required for reproduction, since I don't see this with a local hugo server, but something like this:

  1. In your content folder, create a Markdown file with math: true in the preamble.
  2. Add some math to this page, e.g. $$f(x) = \int_{-\infty}^\infty \hat{f}(\xi) e^{2 \pi i \xi x} d\xi$$
  3. Deploy your site to GitLab pages with this gitlab-ci.yml: 
    
image: hugomods/hugo:latest

pages: stage: deploy script:

Expected Behavior

Math content should render with KaTeX fonts like this:

image

Actual Behavior

Math content is rendered with some default font and sizing/spacing is all messed up like this:

image

Environment

imfing commented 7 months ago

@jonasreiher the font files are embedded here: https://github.com/imfing/hextra/tree/main/assets/lib/katex/fonts

I'm not sure why GitLab normalize those filenames to all lower-cases. This issue doesn't happen on GitHub Pages though: https://imfing.github.io/hextra/docs/guide/latex/

jonasreiher commented 6 months ago

Ok, I'm now relatively sure that this is not a GitLab issue.

In the folder you referenced (/assets/lib/katex/fonts), the font files all have their original mixed-case names.
On your deployed site, they still keep these mixed-case names. E.g. imfing.github.io/.../KaTeX_AMS-Regular.woff2 exists while imfing.github.io/.../katex_ams-regular.woff2 does not exist. So far, so good.

Next, I'm locally running hugo server in my site's repository. Here, https://localhost:1313/lib/katex/fonts/KaTeX_AMS-Regular.woff2 and https://localhost:1313/lib/katex/fonts/katex_ams-regular.woff2 both URLs exist and a mixed-case or lower-case file, respectively, lands in my downloads.
This is already interesting.

Finally, I'm locally running just the build command hugo in my repository. Now the public folder contains only the lower-case font files, e.g. public/lib/katex/fonts/katex_ams-regular.woff2.
Since this is what arrives on GitLab pages, it's no wonder that the mixed-case URLs lead to a 404.

I haven't yet found out what is causing this renaming and why it's not happening on your site. Maybe the theme inclusion as a Hugo module does something unexpected. I'm using the Hugo and theme versions mentioned in the issue description above.

jonasreiher commented 6 months ago

This may be related to the setting disablePathToLower which is false by default. However, simple setting this to true in my hugo.yaml doesn't seem to be sufficient.

Also, as of this comment, hugo server is case insensitive which would explain why I don't have issues there.

Hifive55555 commented 6 months ago

I have the same problem. I'm not deploy the site with GitLab or GitHub Pages. Instead, I use hugo -D -w to deploy it on my own server and when it comes to render KaTex signs, it fails to load resource with a status of 404. I'm looking for a solution.

imfing commented 6 months ago

@Hifive55555 Hi, did you check the browser devtool network tab? I wonder if it's caused by requesting the lower-case font files?

imfing commented 6 months ago

@jonasreiher @Hifive55555 I believe it's a Hugo issue, in the newest 0.123.x I was able to reproduce it

v0.122.0

$ hugo
Start building sites … 
hugo v0.122.0-b9a03bd59d5f71a529acb3e33f995e0ef332b3aa+extended linux/amd64 BuildDate=2024-01-26T15:54:24Z VendorInfo=gohugoio

                   | EN  
-------------------+-----
  Pages            | 14  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 11  
  Processed images |  0  
  Aliases          |  0  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 134 ms
$ ls public/lib/katex/fonts/
KaTeX_AMS-Regular.ttf            KaTeX_Fraktur-Regular.ttf    KaTeX_Main-Regular.ttf

v0.123.6

$ hugo
Start building sites … 
hugo v0.123.6-92684f9a26838a46d1a81e3c250fef5207bcb735+extended linux/amd64 BuildDate=2024-02-28T18:29:40Z VendorInfo=brew

                   | EN  
-------------------+-----
  Pages            | 15  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 11  
  Processed images |  0  
  Aliases          |  0  
  Cleaned          |  0  

Total in 107 ms
$ ls public/lib/katex/fonts/
katex_ams-regular.ttf            katex_fraktur-regular.ttf    katex_main-regular.ttf
imfing commented 6 months ago

updates: I believe it's fixed by https://github.com/gohugoio/hugo/commit/7023cf0f07d07bd943404d88d5fc8f3c5f7c9cc2

Please wait for Hugo to cut a patch release

Related issue: https://github.com/gohugoio/hugo/issues/12182

jonasreiher commented 6 months ago

Indeed! Thank you for finding this! In the meantime, I'll go back to Hugo v.0.122