build: skip bundling fonts

[aloisklink]

📑 Summary

Compile JavaScript code as an IIFE, allowing us to avoid needing to inline anything.

This makes the code about 10% faster for me (tests run in 105s instead of 120s), and the size on the bundle went from 4MiB to 3.5MiB.

Additionally, I've finally figured out the issue that was sometimes causing the FontAwesome icons to load incorrectly: sometimes Puppeteer was parsing the CSS FontAwesome as Latin-1 instead of UTF-8! Explicitly setting the script to have charset="utf-8" seems to fix this!

Resolves #699. Resolves #700

📏 Design Decisions

Instead of bundling everything into a single giant index.html file, it's more efficient to have separate files, as otherwise, some files (e.g. the .woff2 font files), need to be base64 encoding in the .html.

However, since file:// is only supported for IIFE JavaScript files (not ESM), I've written a tiny custom IIFE-converter plugin for Vite that creates IIFE files instead.

FontAwesome issues fixed

These Percy errors should now be fixed:

It turns out that FontAwesome v6's car icon is the following character:  (e.g. the UTF-8 bytes are 0xef86b9). However, when Puppeteer was parsing the CSS, it was sometimes parsing it as Latin-1 instead of UTF-8, which instead resulted in the following characters:  (the Latin-1 bytes are still 0xef3fb9!). And since the font-file didn't have an entry for these three characters, it didn't display anything.

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added unit/e2e tests (if appropriate)
• 🔖 targeted master branch