migrated to nuxt

.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
@@ -57,8 +58,8 @@ repos:
     rev: 1.7.7
     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/components/AppFooter.vue

@@ -1,16 +1,10 @@
 <script setup lang="ts">
-import { useGlobalStore } from "../stores/global";
-import { useI18n } from "vue-i18n";
-import Btn from "../components/Btn.vue";
-import { computed } from "vue";
-import { useDark } from "@vueuse/core";
+import { useFeedback } from "~/composables/feedback";
 
-const global = useGlobalStore();
+const props = defineProps<{ class?: string }>();
+const feedback = useFeedback();
 // If we do not include the image here like this, vite/rollup is unable to load it
-const dark = useDark({ storageKey: "theme" });
-const brandLogo = computed(
-  () => new URL(`/assets/logos/tum_${dark.value ? "dark" : "light"}_${locale.value}.svg`, import.meta.url),
-);
+const colorMode = useColorMode();
 const { t, locale } = useI18n({ useScope: "local" });
 const navigation = computed(() => [
   {
@@ -23,37 +17,52 @@ const navigation = computed(() => [
   },
   {
     name: t("about.text"),
-    href: "/about/" + t("about.link"),
+    href: t("about.link"),
   },
   {
     name: t("privacy.text"),
-    href: "/about/" + t("privacy.link"),
+    href: t("privacy.link"),
   },
   {
     name: t("imprint.text"),
-    href: "/about/" + t("imprint.link"),
+    href: t("imprint.link"),
   },
 ]);
 </script>
 
 <template>
-  <footer data-cy="main-footer" class="bg-zinc-100 mt-10 print:!hidden">
+  <footer data-cy="main-footer" class="bg-zinc-100 print:!hidden" :class="props.class">
     <div class="mx-auto max-w-7xl overflow-hidden px-6 py-20 sm:py-14 lg:px-8">
       <nav class="-mb-6 columns-2 text-center sm:columns-3 sm:justify-center sm:space-x-12 md:flex" aria-label="Footer">
         <div v-for="item in navigation" :key="item.name" class="pb-6 text-sm leading-6">
           <Btn variant="link" :to="item.href">{{ item.name }}</Btn>
         </div>
         <div class="pb-6 text-sm leading-6">
-          <Btn variant="link" :aria-label="t('feedback.open')" @click="global.openFeedback()">
+          <Btn
+            variant="link"
+            :aria-label="t('feedback.open')"
+            @click="
+              () => {
+                feedback.open = true;
+                feedback.data = { category: 'general', subject: '', body: '', deletion_requested: false };
+              }
+            "
+          >
             {{ t("feedback.text") }}
           </Btn>
         </div>
       </nav>
       <div class="mt-10 flex justify-center space-x-10 text-center">
-        <Btn to="https://tum.de" variant="rounded-xl px-3 py-2 focusable" size="sm">
+        <Btn to="https://tum.de" variant="rounded-xl pt-2 pb-4 px-4 focusable" size="sm">
           <p class="text-zinc-600 text-center text-xs">
             {{ t("official_roomfinder") }}<br />
-            <img :alt="t('tum_logo_alt')" :src="brandLogo.href" width="200" height="80" aria-hidden="true" />
+            <img
+              :alt="t('tum_logo_alt')"
+              :src="`/logos/tum_${colorMode.value === 'dark' ? 'dark' : 'light'}_${locale}.svg`"
+              width="200"
+              height="80"
+              aria-hidden="true"
+            />
           </p>
         </Btn>
       </div>
@@ -64,43 +73,43 @@ const navigation = computed(() => [
 <i18n lang="yaml">
 de:
   about:
-    link: ueber-uns
+    link: /about/ueber-uns
     text: Über uns
   api:
-    link: api
+    link: /api
     text: API
   feedback:
     open: Feedback Form öffnen
     text: Feedback senden
   imprint:
-    link: impressum
+    link: /about/impressum
     text: Impressum
   language: Sprache
   official_roomfinder: Offizieller Roomfinder
   privacy:
-    link: datenschutz
+    link: /about/datenschutz
     text: Datenschutz
   sourcecode:
     text: Source Code
   theme: Theme
   tum_logo_alt: The Logo of the Technical University Munich
 en:
   about:
-    link: about-us
+    link: /en/about/about-us
     text: About us
   api:
-    link: api
+    link: /en/api
     text: API
   feedback:
     open: Open the feedback-form
     text: Feedback
   imprint:
-    link: imprint
+    link: /en/about/imprint
     text: Imprint
   language: Language
   official_roomfinder: Official roomfinder
   privacy:
-    link: privacy
+    link: /en/about/privacy
     text: Privacy
   sourcecode:
     text: Source Code

webclient/components/AppNavHeader.vue

@@ -1,14 +1,10 @@
-<script setup lang="ts">
-import PreferencesPopup from "../components/PreferencesPopup.vue";
-</script>
-
 <template>
   <header class="bg-zinc-50 fixed top-0 z-20 w-full shadow-md shadow-black/5 dark:bg-zinc-100 dark:shadow-black/20">
     <nav class="mx-auto max-w-4xl">
       <div class="mx-5 my-2.5 flex place-content-between content-between justify-between gap-x-10 lg:mx-10">
-        <RouterLink class="my-auto hidden lg:block print:!block" to="/">
-          <img alt="Navigatum Logo" class="pt-2" width="201" height="32" src="../assets/logos/navigatum.svg" />
-        </RouterLink>
+        <NuxtLink class="my-auto hidden lg:block print:!block" to="/">
+          <img alt="Navigatum Logo" class="pt-2" width="201" height="32" src="~/assets/logos/navigatum.svg" />
+        </NuxtLink>
         <div class="my-auto max-w-lg flex-grow lg:col-span-3 print:!hidden">
           <slot />
         </div>