Make font configurable, improve asset handling and use basic frontend bundle splitting #1167

This finally (!!) revamps our asset handling. We use reinda, which does a lot for us, but it had some limitations before. Specifically, it could not embed files by wildcard pattern and files could not be added purely at runtime. This made frontend code splitting and including custom fonts impossible. To improve this, reinda was almost completely rewritten. The most important changes from reinda and this commit: - No more reinda templates: it has been replaced by the "modifier" API in reinda, which gives Tobira more control. This gets rid of the million manual variables in our index.html. - The `embed!` macro only mentions files that are actually embedded into the executable. Logos for example are added at runtime, without a weird "path_override". - The compression of embedded assets is now done with brotli, which should result in a smaller binary. - The "logo fallback logic" is now performed in the frontend. This is more convenient for us and avoids duplicating the logo contents in memory. - Fonts and Paella icons are embedded by wildcard now, so we don't have to list every darn file anymore. I am slightly uneasy as this means in the future, we might accidentally include unneeded files there. I don't think reinda's API is "perfect" now. My main complain is the duplication of paths/filenames. But we want to ship that at some point and I think the API works well enough. The duplication here is unlikely to result in bad bugs that are only noticed late. NOTE: This does not restore full previous functionality yet! Two things are missing: - The font paths in `fonts.css` are not adjusted and broken. - The frontend code map is not included yet. Both of these will be fixed in the next commits.

Admins can modify the `font-family` used by Tobira, they can specify font files that Tobira will serve, and they can specify extra CSS code that can add more `@font-face` declarations. This should be a simple and flexible system to configure custom fonts.

This is the first step to using code splitting to reduce the loaded JS size. This commit lays the ground work but only splits the bundle into two files. But that's already a big win as it cuts the size of JS one has to download to render the main page roughly in half. Even if there is a player on the main page, the page already renders once the main bundle is loaded, and the player shows a placeholder spinner. In the future, we can create more bundles, e.g. moving everything "manage" related to another bundle or even just letting webpack decide.

This is more straight forward. Before this commit, the setup was broken as the "find main bundle" code in `assets.rs` was incorrect. It only iterated over files embedded at compile time, which might be missing the bundle. But more: if the frontend was changed, the hash and thus filename of the main bundle changed as well, and the backend replacement would be incorrect. Letting webpack handle this part seems simpler. This commit also deduplicates some strings in `assets.rs`.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make font configurable, improve asset handling and use basic frontend bundle splitting #1167

Make font configurable, improve asset handling and use basic frontend bundle splitting #1167

Commits on May 15, 2024