Rework site with Astro and Vite

[hugo-vrijswijk]

First of all, I really like this project! I wanted to learn Astro and Svelte, and this seemed like a good project to do it with 😃. I apologize for the huge diff. If you want to review it I recommend checking the PR out locally.

Reworks the application by replacing webpack with Vite, and introducing Astro and Svelte for site generation.

• Vite provides a fast development server
• Astro statically generates most of the site without any JavaScript needing to run on the client.
• Svelte is used for the interactive parts of the site.
  • Svelte also uses SSR, so the initial simulation is already calculated and rendered on first load
  • Svelte can update efficiently and reactively, without setting innerHTML directly, only changing the DOM that changed, making changes render faster and IMO easier to reason about.
• PWA support is added, so the site can be fully used offline and will update when online again
• Look and feel remain the same, there should be no noticeable difference for the user (other than better performance)
• Tests remain the same. It should be fairly easy to add tests for the Svelte components, but I didn't do that.
• The simulation code is unchanged, other than some minor typescript changes due to stricter TS settings
• Removes unused PHP files
• Adds PurgeCSS to automatically remove unused Bootstrap CSS instead of custom imports

[nicwortel]

Wow, this is a lot of work!

I am thankful for all the effort you put into this, but I wish that you had discussed this in an issue before you did all this work. I'm not sure yet if I will merge this, because it is such a big change and introduces a number of different tools that I don't have experience with.

I will leave this PR open for now.

[hugo-vrijswijk]

Thanks for the reply and taking a look at this. I've tried to stick as close as possible to either industry-standard tools, or tools that are as "simple" as possible. Let me know if there's anything in here that feels like magic, I might be able to explain:

• Vite can be seen as a replacement for Webpack. It has much simpler configuration and uses the standard ES modules
• Astro builds upon Vite and separates templating and build-time scripts with ---. Each file also works as a component, but it's mostly just HTML templates.
• Svelte is also mostly html, but with some runtime JS for interactivity. All the calculations code is untouched, but instead templated slightly differently. It's also mostly standard html and javascript