💔 GitHub Action Workflow fails to generate a PDF

[ebouchut]

Issue

When we click Resources → PDF to open the PDF version of TrioDocs, we get a 404 error because the PDF file does not exist. It has not been created.

A GitHub workflow fails to generate the PDF fails because it cannot load a font due to a CORS error.

Description

We use the mkdocs-exporter plugin to orchestrate the creation of the PDF. Under the hood, it uses a Playwright Chromium headless browser to scour the website and compile the PDF.

❌ When processing a page with MathJax notation, the headless Web browser tries to load a Web font and refuses to do so because of a cross-domain request and we get a CORS error:

Access to font at 'https://unpkg.com/mathjax@3.2.2/es5/output/chtml/fonts/woff-v2/MathJax_Calligraphic-Bold.woff' (redirected from 'https://unpkg.com/mathjax@3/es5/output/chtml/fonts/woff-v2/MathJax_Calligraphic-Bold.woff') from origin 'file://' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

To load the MathJax Javascript file, we use the MathJax URL mentioned in the mkdocs-material documentation:

https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js

This generic v3 URL redirects to the current version (3.2.2) which is a different URL:

https://unpkg.com/mathjax@3.2.2/es5/tex-mml-chtml.js

I don't think the redirection is posing a problem here. This Javascript file is large (~1.2MB) because it is not minified.

Solution

I decided to use the minified version of the same file but hosted on Cloudflare instead of Unpkg:

https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-mml-chtml.min.js ✅ This fixed the issue.

Cause

My guess is that is due to Cloudflare using more permissive CORS server headers telling the server to allow the serving of fonts across domains, in our case from file://.

Access-Control-Allow-Origin "*"