Cleanup and Optimisations

[jamesb93]

This is a PR that has been on my mind for years now :) In some places in the codebase, I've noticed we repeat ourselves or diverge slightly in style. We have no consistent radius values and it makes the design feel noisy. I've felt like the design could be systematised using a conventional CSS variable approach to help mitigate against this and to make it easier for people to author content without having to think about what the "correct" value are to use. They should just be implicit. Having all of these style variables: colour, radii, margins, etc., located in a single location can help eliminate small discrepancies across the numerous widgets and components we have. This is part of a longer term vision to harmonise the styles of the demonstrative widgets and to make them accessible.

So, this PR is the start of that work with some minor adjustments and improvements along the way.

The first big change is to lazy-load the heavy JS libraries we depend on for ML-tasks that run on the client (7a6933c). This is orthogonal, but I noticed while testing styling that loading could be much faster with dynamic imports which create smaller and more fragmented chunks at build time.

There is a design-tokens.css file which defines the style variables. Everything else pulls from this now where it makes sense. Still a few gaps here and adjustments, but overall much easier to change things.

I've also made an effort to update the style of things that were feeling a bit out of date. For example, the table of contents now moves as you scroll, rather than sticking to the top of the page (which is kind of useless).

The related resources component has a more bold style and distinct boundary. Lists of these were quite hard to parse, visually, but are demarcated more clearly now:

Podcast chapters are vertically more compacted. It is contentious that we should even have these, given YouTube provides it as part of their UI. Often you cannot see the video while clicking these because there are so many:

The link pills are a bit more exciting to look at, and because of the design system are harmonised with all other round looking things, like cards on the front page:

[jdchart]

The first big change is to lazy-load the heavy JS libraries we depend on for ML-tasks that run on the client (7a6933c). This is orthogonal, but I noticed while testing styling that loading could be much faster with dynamic imports which create smaller and more fragmented chunks at build time.

That's counter intuitive but great go for it. As a general rule ? (always prefer dyanmic imports over npm) or just sope libraries?

There is a design-tokens.css file which defines the style variables. Everything else pulls from this now where it makes sense. Still a few gaps here and adjustments, but overall much easier to change things.

Fair dos

Podcast chapters are vertically more compacted. It is contentious that we should even have these, given YouTube provides it as part of their UI. Often you cannot see the video while clicking these because there are so many:

I think the rationale was that chapters didn't appear in the iframe at the time, or at least not verbosely enough. Perhaps we keep but initially collapsed?

This all looks great, glad that you're able to take the load off your mind :) Do you want me to test locally on my end? There is also a new version of svelte but fuck that...

[tremblap]

speaking of fuck-thats - I merged 2 things that waited for months for someone to say yes. i missed one yes and the other I actionned. so maybe checking the diffs with main, 2 very small PRs but there is one file structure change... all of that for consistency.

[tremblap]

otherwise let me know if you want me to test locally too - I can poke at it tomorrow, then I'm offline for a week, but if it is Jacob approved and it is mergeable with my old fixes, then go