Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
jonasreiher opened this issue Feb 26, 2024 · 8 comments
Closed

Comments

@jonasreiher
Copy link

jonasreiher commented Feb 26, 2024

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:
    - hugo
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
  1. Visit the deployed page and check your console for errors.

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

  • Hugo Version: 0.123.3 (extended)
  • Browser/OS: Safari/MacOS, Firefox/MacOS
  • Theme Version: 0.7.3
@imfing
Copy link
Owner

imfing commented Feb 26, 2024

@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/

@imfing imfing changed the title KaTeX fonts are not found or incorrectly linked KaTeX fonts are not found or incorrectly linked on GitLab Pages Feb 26, 2024
@imfing imfing added the needs more info The issue needs more information label Feb 26, 2024
@jonasreiher
Copy link
Author

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
Copy link
Author

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
Copy link

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
Copy link
Owner

imfing commented Mar 1, 2024

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

@imfing
Copy link
Owner

imfing commented Mar 1, 2024

@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
Copy link
Owner

imfing commented Mar 1, 2024

updates: I believe it's fixed by gohugoio/hugo@7023cf0

Please wait for Hugo to cut a patch release

Related issue: gohugoio/hugo#12182

@imfing imfing changed the title KaTeX fonts are not found or incorrectly linked on GitLab Pages KaTeX fonts are incorrectly transformed to lower-case for Hugo v0.123 Mar 1, 2024
imfing referenced this issue in gohugoio/hugo Mar 1, 2024
@imfing imfing removed the needs more info The issue needs more information label Mar 1, 2024
@jonasreiher
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants