migrated to nuxt (#1058)

* migrated the webclient to nuxt

* implemented #1032

* formatting/system theme improvements

* optimised tailwind to only include the actually used colors

* added a better favicon configuration

* fixed the feedback modals not being findable

* fixed a hydration mismatch

* made sure that base urls can be properly configured

* formatting fixes

* typing fixes

* fixed the details page layout

* made type checking stricter

* rebase

* de-bumped `vue-tsc`

* fixed a type error

* tmp

* tmp

* refactored the interactive map to use tailwind

* added plausible via partytown

* migrated the docs

* fixed the lockfile

.pre-commit-config.yaml

@@ -9,6 +9,7 @@ repos:
           - --allow-multiple-documents
         exclude: "(data/data_format_geo-entry.yaml)|(deployment/k3s/.*)|(webclient/pnpm-lock.yaml)"
       - id: check-json
+        exclude: "(webclient/tsconfig.json)"
       - id: check-executables-have-shebangs
       - id: check-shebang-scripts-are-executable
       - id: check-case-conflict
@@ -48,17 +49,17 @@ repos:
       - id: python-check-blanket-noqa
       - id: python-use-type-annotations
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.3.2
+    rev: v0.3.5
     hooks:
       - id: ruff
         args: [ --fix ]
       - id: ruff-format
   - repo: https://github.com/PyCQA/bandit
-    rev: 1.7.7
+    rev: 1.7.8
     hooks:
       - id: bandit
-        args: ["-c", "pyproject.toml"]
-        additional_dependencies: ["bandit[toml]"]
+        args: [ "-c", "pyproject.toml" ]
+        additional_dependencies: [ "bandit[toml]" ]
   # markdown
   - repo: https://github.com/DavidAnson/markdownlint-cli2
     rev: v0.9.2

webclient/.dockerignore

@@ -1,4 +1,5 @@
-node_modules/*
-dist/*
-cdn/*
-.vscode/*
+node_modules
+dist
+cdn
+.output
+.nuxt

webclient/.eslintrc.cjs

@@ -1,6 +1,4 @@
 /* eslint-env node */
-require("@rushstack/eslint-patch/modern-module-resolution");
-
 module.exports = {
   root: true,
   extends: [

webclient/.gitignore

@@ -12,6 +12,8 @@ dist
 dist-ssr
 coverage
 *.local
+.nuxt
+.output
 
 # Editor directories and files
 .vscode/*

webclient/.prettierignore

@@ -1 +1,4 @@
 tsconfig.json
+.output
+.nuxt
+node_modules

webclient/Dockerfile

@@ -12,15 +12,19 @@ ARG GIT_COMMIT_SHA
 ENV GIT_COMMIT_SHA=${GIT_COMMIT_SHA}
 ARG GIT_COMMIT_MESSAGE
 ENV GIT_COMMIT_MESSAGE=${GIT_COMMIT_MESSAGE}
-RUN npm run build-only
-RUN gzip --force --keep --recursive ./dist
+RUN NITRO_PRESET=deno-server pnpm run build
 
 
-FROM nginx:1.25 as production-stage
-COPY nginx.conf /etc/nginx/nginx.conf
-RUN mkdir /app && apt update && apt upgrade -y
-COPY --from=build-stage /app/dist /app
+FROM denoland/deno:alpine as production-stage
+RUN apk update --no-progress --quiet && apk add curl --no-progress --quiet
 
+COPY --from=build-stage /app/.output /app/.output
+COPY --from=build-stage /app/node_modules /app/node_modules
+COPY --from=build-stage /app/.nuxt /app/.nuxt
+
+ENV NUXT_HOST=0.0.0.0
+ENV NUXT_PORT=3000
 EXPOSE 3000
+
 HEALTHCHECK CMD curl --fail localhost:3000/health || exit 1
-CMD sh -c "sed -i 's|TILESERVER_URL|${TILESERVER_URL}|g' /etc/nginx/nginx.conf && sed -i 's|CDN_URL|${CDN_URL}|g' /etc/nginx/nginx.conf && sed -i 's|MAIN_API_URL|${MAIN_API_URL}|g' /etc/nginx/nginx.conf && sed -i 's|FEEDBACK_API_URL|${FEEDBACK_API_URL}|g' /etc/nginx/nginx.conf && nginx -g 'daemon off;'"
+CMD deno run --unstable --allow-net --allow-read --allow-env /app/.output/server/index.mjs

webclient/README.md

@@ -31,7 +31,7 @@ pnpm install
 
 Ensure that _NavigaTUM-server_ is running in the background.
 By default, the webclient will connect to the server on `https://nav.tum.de`.  
-If you want to connect to a local version instead, change `VITE_APP_URL` in [`env/.env`](./env/.env) to `http://localhost:3003`.
+If you want to connect to a local version instead, change the environemnt variable `NUXT_PUBLIC_{API,CDN,FEEDBACK,MAPS}_URL` to the appropriate value.
 
 To get a local server running, please:
 
@@ -73,53 +73,35 @@ pnpm run lint
 pnpm run format
 ```
 
-## Build files & Serving release build
-
-We create a lot of index HTML files in the build process.
-Each of those files are similar but differ in some aspects.  
-If you serve the release build with a webserver (such as Nginx) you need to select the correct files based on the request URL and headers.
-
-```plain
-<theme>.html
-   ↑
-   └── The page theme. Either "light" or "dark" at the moment.
-       It should be selected based on the "theme" Cookie ("light" by default).
-```
-
-The language-selector is working in development and this differentialtion is only happening in the build.  
-For the theme we can not do so for some reason (If you know of a better way, hit us up).  
-To test a different theme, you can change `theme='...'` [here](./index.html). Values are `light` and `dark`.
-
 ## Architecture
 
-The NavigaTUM webclient is made as a single-page application based on [Vue.js](https://vuejs.org/) and [Vue Router](https://router.vuejs.org/).  
-For state management we use [pinia](https://pinia.vuejs.org/).
-Our CSS framework is currently being migrated from [Spectre.css](https://picturepan2.github.io/spectre/) to [Tailwind](https://tailwindcss.com/). (if you're interested in helping out, please contact us ^^)
+The NavigaTUM webclient is made as a nuxt3 server side rendered application based on [Vue.js](https://vuejs.org/) and [Vue Router](https://router.vuejs.org/).
+Our CSS framework is [Tailwind](https://tailwindcss.com/).
 
 ### Directory structure (only the important parts)
 
 ```plain
 webclient
-├── public/         # 🠔 Static assets such as icons, which cannot get inlined
-├── api_types/  # 🠔 code generated via openapi.yaml for typechecking reasons
-├── assets/     # 🠔 Static assets such as icons
-│   ├── md/                 # 🠔 Static pages written in markdown. Served at `/about/<filename>`.
-│   ├── main.scss           # 🠔 Sass CSS code for all non-view parts
-│   └── logos               # 🠔 The Logos used by the app
-├── components/ # 🠔 Vue components, which are used in views.
-├── pages/      # 🠔 The views are parts of App.vue, which are loaded dynamically based on our routes.
-├── router.ts   # 🠔 The routes of our app. This is where the views are loaded.
-├── App.vue     # 🠔 Main view
-├── main.ts     # 🠔 Inialization of Vue.js. This is the entrypoint of our app, from which App.vue and associated views/components are loaded
-├── vite.config.ts  # 🠔 Build configuration
-└── package.json    # 🠔 Node package definition and dependencies
+├── public/        # 🠔 Static assets such as icons, which cannot get inlined
+├── api_types/     # 🠔 code generated via openapi.yaml for typechecking reasons
+├── content/       # 🠔 Static pages written in markdown. Served at `/about/<filename>`.
+├── assets/        # 🠔 Static assets such as icons
+│   ├── main.scss  # 🠔 Sass CSS code for all non-view parts
+│   └── logos      # 🠔 The Logos used by the app
+├── components/    # 🠔 Vue components, which are used in views.
+├── pages/         # 🠔 The pages are parts of App.vue, which are loaded based their file names.
+├── nuxt.config.ts # 🠔 core configuration of nuxt
+└── package.json   # 🠔 Node package definition and dependencies
 ```
 
 Note that new views are automatically included in the build, but they are not routed.  
 To add a new view, you need to add a new route in `router.ts`.
 
 ## Testing
 
+> [!NOTE]
+> cypress is currently temporarily disabled to help in the nuxt transition
+
 For this part of the project, the tests consist mainly of hot-path e2e tests and tests of critical components.
 PRs improving the coverage are very likely to be accepted.
 The reason behind these tests is that they fundamentally increase the future productivity by allowing faster review cycles.

webclient/assets/main.scss

@@ -8,7 +8,7 @@
 }
 
 .focusable {
-  @apply focus:ring-2 focus:ring-tumBlue-500 focus:ring-offset-2 focus-visible:outline-0;
+  @apply focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus-visible:outline-0;
 }
 
 /* see https://www.youtube.com/watch?v=cH8VbLM1958 why this is here */