Vue3 Migration

[CommanderStorm]

This PR migrates the frontend to Vue3:

The good part:

• The new build system is HMR ready ⇒ Changes show up automatically in about 50ms, without any user input.
• The new buid system includes out of the gates multiple .env/request-proxying. ⇒ no more config.js, or changes, that get accidentally committed.
• Performance seems to be on par with the old version from what I can initially see. However, I have not yet looked into the details page. This is where I expect to see the most difference in performance (some aspects positive, some negative)
• Instead of having one large view, I have split features into smaller components if I expect that this improves maintainability.

Caveats:

• I was unable to find a 1:1 replacement for the current 18n approach. I will have to look further into this
• The current approach to the dark mode does not translate well. I have to look into this further…
• I will have to look into browser support and polyfills
• Somewhere in the middle my commit messages are meh, but I am not rebasing git, because of the likelyhood new errors would be introduced.

Things, this PR won't fix:

• Until now the frontend was untested, while there is a large potential there, I think, this should be another PR.

How to test?

cd server
cargo run

cd webclient
npm run dev

To-dos:

• initial migration
• Migrate / (“main”)
• Migrate /api
  • apply postcss stlyle transforms for the assets
• Migrate /about/:id
• Migrate /search
• Migrate search bar
• Migrate /view/:id (“details”)
  • Test that every subfeature works as expected
• Migrate feedback
  • Test that every subfeature works as expected
• initial deployment (vue3.nav.tum.de 😉)
• tune the performance
  • chunking-strategy
  • look if tree shaking is happening
  • re-check if caching works as expected
• update the documentation
• re-add a sitemap
• look into polyfills

Resolves #33
Resolves #213 (as this includes proper polyfills and does not depend on structuredClone)

[octycs]

With the resizeObserver I hope the scrolling problems are sufficiently fixed now. There is still a slight glitch when navigation with the browser forward button from a page at position >0 to a page scrolled to 0. In this case it scrolls to a slightly lower position first until the component is updated. I didn't investigate this, because it might be less of a problem as soon as fading is implemented again.

I tried to implement fading by the way described in the vue-router documentation, but it causes several bugs (probably due to some async problems). We can, in order to get this finally forward, make this a new PR.

One thing I noticed for navigation is that the page is now reloaded when moving from back from an external page (Try going to MI, click on the IRIS link and then back. This is on Firefox/Chrome for me). I don't like it too much, but it's comparatively minor and probably not worth it to investigate or trivial to change.

The only thing that we might want to address before merging is this bug I can see in Chrome only (icon line widths scaled by a factor of 2):

Can you reproduce that?

Edit: I just noticed another bug:
Because of the lang="de" in index.html, the language used for fetching data is always de

[CommanderStorm]

The only thing that we might want to address before merging is this bug I can see in Chrome only (icon line widths scaled by a factor of 2): Can you reproduce that?

I cannot reproduce this. This icon looks identical between Firefox/Chrome and nav.tum.de/pr-200.nav.tum.de

[octycs]

I cannot reproduce this.

Okay, then it's probably a bug of my local Chrome version

[CommanderStorm]

Edit: I just noticed another bug: Because of the lang="de" in index.html, the language used for fetching data is always de

Should we ignore this until we have SSR ready, or change this in the language switcher?